We will be dealing with how to add animated social bookmarking widget with 3D effect.
This widget is so cool that when hovered on,spins 360 degrees and spins back when released.
To add the widget on your blog,just follow the instructions below.
To add the widget on your blog,just follow the instructions below.
Login to Blogger,then go to Design » Page element and select 'Add a gadget'.
Now,locate "HTML/JAVASCRIPT" and select ADD.
Just copy/paste the code below and save the widget.
Now,locate "HTML/JAVASCRIPT" and select ADD.
Just copy/paste the code below and save the widget.
<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">
<!--Start Rss Icon--> <a title="Grab Our Rss Feed" href="YOUR FEED URL HERE" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6MU48N57hyYJBm4a8NjIm8zPGn3RRj3Ta-ip-LnK-s729W0yTaluLINz3nMllu6OvMnsP23aYf4qZ0_ZA0px_8J9li7EgSVREWJqBuQzgqxymKLDNRKysBBbd5hx3JJTFfMdpmgXW2EIS/s1600/RSS-48x48.png" style="margin-right:1px;" alt="Icon"/></a>
<!--End RssIcon-->
<!--Start Email Rss Icon-->
<a rel="nofollow" title="Get Free Updates Via Email" href="YOUR EMAIL RSS URL HERE" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpefXAGHRE1BQIS9avTuENMkjKHDlHlYCcKAhxoEmAlZS6ntXzfn8dnP1gUzbrFDs15rpkvvQjSaaWcuzWTsS1eKH7BRC0XIgOrGdNO4FG_aZjPZwQvJxNYuY02XO5lLrfoQ9Ao3wCwRec/s1600/RSS-EMAIL-48x48.png" style="margin-right:1px;" alt="Icon"/></a>
<!--End Email Rss Icon-->
<!--Start Facebook Icon-->
<a rel="nofollow" title="Like Our Facebook Page" href="YOUR FACEBOOK PAGE URL HERE" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6dJaU_Ks-q3ofkQ-Dj9MBv1LcErt_wNjIySwddfw4y2vYFVnSoYoi5QIRQ1h7Eu9ZnBe0XcikMTtUKT-MK_c30k83OBtxy5lxgkKYB6RrRHGQGhb4BLyL0JwQZ6RP1MrYwamrELTdKBCh/s1600/FACEBOOK-48x48.png" style="margin-right:1px;" alt="Icon"/></a>
<!--End Facebook Icon-->
<!--Start Twitter Icon-->
<a rel="nofollow" title="Follow Our Updates On Twitter" href="YOUR TWITTER URL HERE" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7JAoP1TxPCfL2Qx4OszhlzCe8vuOfwO2jGS9oZ4JR3MOsVH7OweeRPLjWXD5aWs8sD8SSOLZf-MR0xnM5aHtQPmwI1RvfACG5Lclofj62eyd6maChT5EIWt5cQ665UAzphAMobpyViTae/s1600/TWITTER-48x48.png" style="margin-right:1px;" alt="Icon"/></a>
<!--End Twitter Icon-->
<!--Start Google Icon--> <a title="Follow Us On Google " rel="nofollow" href="YOUR GOOGLE PLUS URL HERE" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtOZhcCgIPWD5O5UO_0AQJZx-gXdeIqXL3QJBV5JqsK8P411daRFDwwufUNCjEw0Bxd4ZhBHJ6UISKgTig9bgq41b2f__GFUTGyU_rjvda2LMWTioonfMs-T1BLdXOSuR3qdM5JTlqBLdj/s1600/GOOGLE-PLUS-48x48.png"/></a>
<!--End Google Icon-->
<!--Start Pinterest Icon-->
<a title="Follow Our Pins" rel="nofollow" href="YOUR PINTEREST URL HERE" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7JxeqXEZwv_5_PVGo-fNYvMXHospMNUv0SpzouWCT8TxJGTRRW85Xx6DnIrs6_QJb4SkVKVtj_nno5m6_aihvjZmtNZweY9EZF4DoSPK_bAMqEH7cJuwXg9_BbVGuh06P8CxwEx4IbqAE/s1600/PINTEREST-48x48.png" alt="Follow Me on Pinterest" /></a>
<!--EndPinterest Icon--></div>
<!--Start Feed Count Button--> <a href="FEEDBURNER URL HERE" target="_blank"><img alt="Feedburner" src="http://feeds.feedburner.com/~fc/spiceupyourblog?bg=ff9933&fg=000000&anim=1" style="border:0" /></a>
<!--End Feed Count Button--> </center>
#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">
<!--Start Rss Icon--> <a title="Grab Our Rss Feed" href="YOUR FEED URL HERE" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6MU48N57hyYJBm4a8NjIm8zPGn3RRj3Ta-ip-LnK-s729W0yTaluLINz3nMllu6OvMnsP23aYf4qZ0_ZA0px_8J9li7EgSVREWJqBuQzgqxymKLDNRKysBBbd5hx3JJTFfMdpmgXW2EIS/s1600/RSS-48x48.png" style="margin-right:1px;" alt="Icon"/></a>
<!--End RssIcon-->
<!--Start Email Rss Icon-->
<a rel="nofollow" title="Get Free Updates Via Email" href="YOUR EMAIL RSS URL HERE" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpefXAGHRE1BQIS9avTuENMkjKHDlHlYCcKAhxoEmAlZS6ntXzfn8dnP1gUzbrFDs15rpkvvQjSaaWcuzWTsS1eKH7BRC0XIgOrGdNO4FG_aZjPZwQvJxNYuY02XO5lLrfoQ9Ao3wCwRec/s1600/RSS-EMAIL-48x48.png" style="margin-right:1px;" alt="Icon"/></a>
<!--End Email Rss Icon-->
<!--Start Facebook Icon-->
<a rel="nofollow" title="Like Our Facebook Page" href="YOUR FACEBOOK PAGE URL HERE" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6dJaU_Ks-q3ofkQ-Dj9MBv1LcErt_wNjIySwddfw4y2vYFVnSoYoi5QIRQ1h7Eu9ZnBe0XcikMTtUKT-MK_c30k83OBtxy5lxgkKYB6RrRHGQGhb4BLyL0JwQZ6RP1MrYwamrELTdKBCh/s1600/FACEBOOK-48x48.png" style="margin-right:1px;" alt="Icon"/></a>
<!--End Facebook Icon-->
<!--Start Twitter Icon-->
<a rel="nofollow" title="Follow Our Updates On Twitter" href="YOUR TWITTER URL HERE" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7JAoP1TxPCfL2Qx4OszhlzCe8vuOfwO2jGS9oZ4JR3MOsVH7OweeRPLjWXD5aWs8sD8SSOLZf-MR0xnM5aHtQPmwI1RvfACG5Lclofj62eyd6maChT5EIWt5cQ665UAzphAMobpyViTae/s1600/TWITTER-48x48.png" style="margin-right:1px;" alt="Icon"/></a>
<!--End Twitter Icon-->
<!--Start Google Icon--> <a title="Follow Us On Google " rel="nofollow" href="YOUR GOOGLE PLUS URL HERE" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtOZhcCgIPWD5O5UO_0AQJZx-gXdeIqXL3QJBV5JqsK8P411daRFDwwufUNCjEw0Bxd4ZhBHJ6UISKgTig9bgq41b2f__GFUTGyU_rjvda2LMWTioonfMs-T1BLdXOSuR3qdM5JTlqBLdj/s1600/GOOGLE-PLUS-48x48.png"/></a>
<!--End Google Icon-->
<!--Start Pinterest Icon-->
<a title="Follow Our Pins" rel="nofollow" href="YOUR PINTEREST URL HERE" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7JxeqXEZwv_5_PVGo-fNYvMXHospMNUv0SpzouWCT8TxJGTRRW85Xx6DnIrs6_QJb4SkVKVtj_nno5m6_aihvjZmtNZweY9EZF4DoSPK_bAMqEH7cJuwXg9_BbVGuh06P8CxwEx4IbqAE/s1600/PINTEREST-48x48.png" alt="Follow Me on Pinterest" /></a>
<!--EndPinterest Icon--></div>
<!--Start Feed Count Button--> <a href="FEEDBURNER URL HERE" target="_blank"><img alt="Feedburner" src="http://feeds.feedburner.com/~fc/spiceupyourblog?bg=ff9933&fg=000000&anim=1" style="border:0" /></a>
<!--End Feed Count Button--> </center>
NOTE
If you don't have any of these urls,you can simply remove it for the time being.
Just delete all codes from where you see 'START' to the 'END' part.
If you don't have any of these urls,you can simply remove it for the time being.
Just delete all codes from where you see 'START' to the 'END' part.
0 blogger-facebook:
Post a Comment