Cara Memasang Social Icon 3D dengan Rotate Spin Effect di Blogger dan Wordpress

Kindly Bookmark and Share it:

Live Demo

Berikut ini demo dari widget social icon yang akan saya bagikan, silahkan sobat lihat apa yang terjadi jika cursor mendekati widget tersebut; Jangan sungkan untuk klik icon tersebut supaya sobat bisa tetap terhubung dengan blog ini. 

Cara Menambahkan Social Icon dengan Efek CSS

Cara Pasang di Wordpress

1) Silahkan menuju Dashboard Wordpress, klik Apperance > Widget
2) Copy kode di bawah ini dan paste di tempat yang tersedia:

<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="URL-FEED-BLOG-SOBAT" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmSL5_WukbpPPQsXQtzboT438YjySgLEnUs7viGyCIV_HdcYM40o1WURHtn9Sj3uBFEW0GNwXkx3q7pYy4zcc12PNItNPZ1WBsJTSGi5Z0YzWXwo_qonGeWgMtgbXnrtf8YQ3_X7HRy7FM/s1600/RSS-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Rss Icon--> <!--Start Email Rss Icon--> <a rel="nofollow" title="Get Free Updates Via Email" href="URL-EMAIL-RSS-SOBAT target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiF83V3jrRVlpBC2lPcAdKoVjbip8FlprQtxVvucSeHcvPFag1QRBx8IwUuC3E8CT4Zgg22F6Es0ziK6V6zf99l-pJyYxc0o5no0uzEavEykUUXltssRZYJOgiMzvMJw23hkyQ02Fq-H64/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="URL-FANPAGE-FACEBOOK-SOBAT" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQulVEdTGy0TAM4iuVf_GKgEMousGQWCdo32A4Wp0YDurRCZnnQ_pZweR6x-FL2F1uorN3kZowQVscuwhw0ZTFGMcquW6xnVkUm1-IYB4xRPIZu3yFhuFs-BFUuC-MpNYwOPHWoIuFrTHq/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="URL-TWITTER-SOBAT" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuCciA2HIBDdMFuq9drhSA6DYYRPo6noK2ZIjhuRlhJxIiyzVfVD1uzkqtb0TfeHwpyG6b9nLB9lx_rR4TVrXtFHvRdfukCD6RWoqpg1oBhzUdOCJmcC0Ta38RWPvdOXc-aX1daaBxUIGP/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="URL-GOOGLE-PLUS-SOBAT" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYwGhZxRn_1BYEoKtSARhnXVRo8bsJLAXT4P2-LP27dl-O3gZnB_l_PAiFr5YDPvi4DOSU-56V08kLNS7UkA5Z_TmJHhsLzYZupmP2DHE-kv3BTzK_E9GIl4CzA7FjqQULmzjjF7MG2LIO/s1600/GOOGLE-PLUS-48x48.png"/></a> <!--End Google+ Icon--> <!--Start Pinterest Icon--> <a title="Follow Our Pins" rel="nofollow" href="URL-PINTEREST-SOBAT" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzdy5TBs2CJo3Zji5nUlzQVR35bHxHLnmWJhPIjUHysHpDaEFrHgjsSNK5jLymR5Qf-3dT48-i-8LbIpgE4QYDfFJnPVy0WDlaKOSrzrIkO29QwwG2D36Ktjx909K6hlFXB1G8McZRmSUm/s1600/PINTEREST-48x48.png" alt="Follow Me on Pinterest" /></a> <!--End Pinterest Icon--> </div><br/> <!--Start Feed Count Button--> <a href="URL-FEED-BLOG-SOBAT" target="_blank"><img alt="spice up your blog" src="http://feeds.feedburner.com/~fc/NAMA-FEED-SOBAT?bg=ff9933&fg=000000&anim=1" style="border:0" /></a><!--End Feed Count Button--> </center>

Keterangan

URL-FEED-BLOG-SOBAT ganti dengan URL feedburner blog yang akan sobat tampilkan.
URL-EMAIL-RSS-SOBAT ganti dengan URL email subscriber yang akan sobat tampilkan.
URL-FANPAGE-FACEBOOK-SOBAT ganti dengan URL fanpage/halaman facebook yang akan sobat tampilkan.
URL-TWITTER-SOBAT ganti dengan URL twitter yang akan sobat tampilkan.
URL-GOOGLE-PLUS-SOBAT ganti dengan URL google plus yang akan sobat tampilkan.
URL-PINTEREST-SOBAT ganti dengan URL pinterest yang akan sobat tampilkan.
NAMA-FEED-SOBAT ganti dengan nama (bukan URL) feed yang sobat gunakan.

Cara Pasang di Blogger/Blogspot

1) Silahkan menuju Dashboard > Tata Letak
2) Pilih Add Gadget / Tambah Gadget > Pilih HTML/JavaScript

<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="URL-FEED-BLOG" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmSL5_WukbpPPQsXQtzboT438YjySgLEnUs7viGyCIV_HdcYM40o1WURHtn9Sj3uBFEW0GNwXkx3q7pYy4zcc12PNItNPZ1WBsJTSGi5Z0YzWXwo_qonGeWgMtgbXnrtf8YQ3_X7HRy7FM/s1600/RSS-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Rss Icon--> <!--Start Email Rss Icon--> <a rel="nofollow" title="Get Free Updates Via Email" href="URL-EMAIL-RSS" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiF83V3jrRVlpBC2lPcAdKoVjbip8FlprQtxVvucSeHcvPFag1QRBx8IwUuC3E8CT4Zgg22F6Es0ziK6V6zf99l-pJyYxc0o5no0uzEavEykUUXltssRZYJOgiMzvMJw23hkyQ02Fq-H64/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="URL-FANPAGE-FACEBOOK" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQulVEdTGy0TAM4iuVf_GKgEMousGQWCdo32A4Wp0YDurRCZnnQ_pZweR6x-FL2F1uorN3kZowQVscuwhw0ZTFGMcquW6xnVkUm1-IYB4xRPIZu3yFhuFs-BFUuC-MpNYwOPHWoIuFrTHq/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="URL-TWITTER" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuCciA2HIBDdMFuq9drhSA6DYYRPo6noK2ZIjhuRlhJxIiyzVfVD1uzkqtb0TfeHwpyG6b9nLB9lx_rR4TVrXtFHvRdfukCD6RWoqpg1oBhzUdOCJmcC0Ta38RWPvdOXc-aX1daaBxUIGP/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="URL-GOOGLE-PLUS" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYwGhZxRn_1BYEoKtSARhnXVRo8bsJLAXT4P2-LP27dl-O3gZnB_l_PAiFr5YDPvi4DOSU-56V08kLNS7UkA5Z_TmJHhsLzYZupmP2DHE-kv3BTzK_E9GIl4CzA7FjqQULmzjjF7MG2LIO/s1600/GOOGLE-PLUS-48x48.png"/></a> <!--End Google+ Icon--> <!--Start Pinterest Icon--> <a title="Follow Our Pins" rel="nofollow" href="URL-PINTEREST" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzdy5TBs2CJo3Zji5nUlzQVR35bHxHLnmWJhPIjUHysHpDaEFrHgjsSNK5jLymR5Qf-3dT48-i-8LbIpgE4QYDfFJnPVy0WDlaKOSrzrIkO29QwwG2D36Ktjx909K6hlFXB1G8McZRmSUm/s1600/PINTEREST-48x48.png" alt="Follow Me on Pinterest" /></a> <!--End Pinterest Icon--> </div><br/> <!--Start Feed Count Button--> <a href="URL-FEED-BLOG" target="_blank"><img alt="spice up your blog" src="http://feeds.feedburner.com/~fc/NAMA-FEED?bg=ff9933&fg=000000&anim=1" style="border:0" /></a><!--End Feed Count Button--> </center>

Keterangan

URL-FEED-BLOG ganti dengan URL feedburner blog yang ingin sobat tampilkan.
URL-EMAIL-RSS ganti dengan URL email subscriber yang ingin sobat tampilkan.
URL-FANPAGE-FACEBOOK ganti dengan URL halaman facebook yang ingin sobat tampilkan.
URL-TWITTER ganti dengan URL twitter yang ingin sobat tampilkan.
URL-GOOGLE-PLUS ganti dengan URL google plus yang ingin sobat tampilkan.
URL-PINTEREST ganti dengan URL pinterest yang ingin sobat tampilkan.
NAMA-FEED ganti dengan nama (bukan URL) feed yang sobat gunakan.