Social



To make your blog more beautiful and stylish put the revolving icons on it. How to put revolving icons to your blog?

This is a social media widget, it is made with the help of css coding. It looks like a 3D widget with mouse hover spinning effect . It rotates 360 degree when we move mouse over this widget.

Use this stylish widget and make your blog more stylish .If you want to install this widget follow the steps below.


Step 1:

Log in to your blogger account. Go to Dashboard > Layout > Add a Gadget and go to HTML/JavaScript.

Step 2:

Now paste the following code.


<style> #social a:hover {background-color: transparent;opacity:0.7;} #social img { -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; } #social img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } </style>
<center><div id="social">
<a class="addthis_button_facebook_follow at300b" addthis:userid="GuidePedia" href="http://www.facebook.com/GuidePedia" target="_blank" title="Follow on Facebook"><img alt="Icon" border="0"src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWCurBSiqPIY9e_XB3ze7V89dZcU8PF8tW0d6IzjezrOXs6_MyIBZJJgIbTkgC7aP1UqS9gAqfiiBUn9RGBAGCO0tqL53UagpPEz6aLvMLl8SDgywmp0ADxLs_JqRx-FGasX8XnJkwbeM/s1600/wt-f-28c.png" style="margin-right: 30px;" /><span class="addthis_follow_label"></span></a>
<a class="addthis_button_twitter_follow at300b" addthis:userid="guide_pedia" target="_blank" title="Follow on Twitter" href="http://www.twitter.com/guide_pedia"><img alt="Icon" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigsa7_VMaiZV2mF8GweiHJN5tcP0m9lvl1GM6kyl8Bc4efAnUF5hAkcUzqLGMbQvA2oCUCxERSJRRPw5rBqwJjsnkp2vXV1OVksPXpu-aIOzYJgl6THa_VrN95Y1pohX0EnjTILpdV10Q/s1600/wt-t-28c.png" style="margin-right: 30px;" /><span class="addthis_follow_label"></span></a>
<a class="addthis_button_rss_follow at300b" addthis:url="http://feeds.feedburner.com/GuidePedia"href="http://feeds.feedburner.com/guidepedia" target="_blank" title="subscribe"><img alt="Icon" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaf8VdIcCx4y8sHOT_3t3KygzMBIdtJk5CD5pjw9_eI-hTMCgNVt4Q9iCGR8JAG2Wi2Z1R8XYY6TyqbDc6PjOJG3xcuxeP45E-fYiTarttXRsXXcagpA_ZAYWJFY06zY1jahZ76as2bQU/s1600/wt-r-28c.png" style="margin-right: 30px;" /><span class="addthis_follow_label"></span></a>
<a class="addthis_button_rss_follow at300b" addthis:url="http://feedburner.google.com/fb/a/mailverify?uri=blogspot/dPCWIamp;loc=en_US/" href="http://feedburner.google.com/fb/a/mailverify?uri=blogspot/dPCWI&amp;loc=en_US/" target="_blank" title="Subscribe"><img alt="Icon" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglQdzUOCKEEjlpLQyZhhDUi4LDH5NTU_0Vtj3_NBgtKbdOgq_VmZ1sM7LlxO80rT9X3pXlWu6PAcWGBfkP6efvYZJVu8RHDuOfdYjTULL0iGfgJMAPMX7b6CW0lYVmE1TkGQLw0HO0o_I/s1600/wt-er-28c.png" style="margin-right: 30px;" /><span class="addthis_follow_label"></span></a>
<a href="https://plus.google.com/102659988323816848627/posts" rel="nofollow" target="_blank" title="Follow Us On Google+"><img src="http://4.bp.blogspot.com/-NWrCWI-vTSI/UPpoY7ZBZ-I/AAAAAAAAAfI/ozoaHhnuE_0/s1600/3re.png" style="margin-right: 30px;" /></a>
<div class="atclear"></div></div>
</center>




Step 3:

Now paste your desired URL on the highlighted with pink colour.

For any queries feel free to comment.


Post a Comment Blogger

Don't Comment irrelevant It will be deleted!

 
Top