Memasang Ikon Sosial Media 3D Dengan Efek Berputar di Blog

Sosial media, selain sebagai ajang silaturrahmi dengan teman-teman, juga bisa digunakan sebagai tempat untuk berbagi tulisan misalnya tulisan kita di blog. Jangan pernah menyepelekan peran sosial media dalam promosi blog anda, karena dengan membagikan artikel kita di berbagai sosial media, teman-teman kita pun akan tertarik untuk membaca tulisan-tulisan kita di blog, sehingga dengan sendirinya akan menaikkan trafik pengunjung di blog kita. Terlebih lagi, bila ternyata teman kita juga membagikan artikel kita ke teman-temannya yang lain, tentunya ini akan sangat menguntungkan bukan?

Ikon sosial media yang terpasang di blog, tidak selalu hanya berupa ikon statis. Kita pun dapat memodifikasinya hingga terlihat menarik saat di pasang di blog. Salah satu dari modifikasi ikon sosial media ini adalah dengan memasang ikon sosial media 3D dengan efek berputar di blog. Bila anda penasaran dengan cara  memasangnya, maka sebaiknya anda simak caranya berikut ini.

Memasang Ikon Sosial Media 3D Dengan Efek Berputar di Blog

Step 1

Masuk ke halaman dashboard > Layout >Add Gadget > HTML/JavaScript

Step 2

Letakkan kode berikut ke dalam halaman 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">
<!--Awal Kode RSS -->
<a title="Grab Our Rss Feed" href="URL-FEED-Anda" target="_blank">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeQpWpRnv5bwh409GBwcyPEqeBBpC0rBTF1dcvuX5Tuve25B7ZZlMMvJXTDCouX1Hy9Rm1ioKs9ixF9wo9zqKrGy7boTNv9PY7SLTViW4_Jg5Vxk5o_bAxbBbOtbIbXSG0lLwUOSK3fqPh/s1600/RSS-48x48.png" style="margin-right:1px;" alt="Icon"/></a>
<!--Akhir Rss Icon-->

<!--Email RSS-->
<a rel="nofollow" title="Get Free Updates Via Email" href="URL-RSS-EMAIL-Anda" target="_blank">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEruoC37pP2qROJ5unOM__j2FW_wcF13qKcb1XQ1piUpZtnlWj-yWgeP_K0cl-LIIr9g3-5uYn4TlkLBl0lv8A2yTgjbVHkv-x8WZdAXwHhU3xJhTH7nkqpxxwCG-8SUoSdSIxhobj-MhL/s1600/RSS-EMAIL-48x48.png" style="margin-right:1px;" alt="Icon"/></a>
<!--Akhir Kode Email Rss Icon-->

<!--Google+-->
<a title="Follow Us On Google+" rel="nofollow" href="URL-GOOGLE-PLUS-Anda" target="_blank">
<img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJbT29E6xnxytoWI02Y5robCuKfsueE-vl_e78oWJOlGjUxtcrJ-gBd0bcVYxC2HqCZFewvYMh-9iyR5DlDpIE2X_nMU7H-Tei3thN4iAdAgawph81sBY_hGfMAns0_cYIFdPo3-o2G_mc/s1600/GOOGLE-PLUS-48x48.png"/></a>
<!--Akhir Kode Google+-->

<!--Awal Kode Pinterest-->
<a title="Follow Our Pins" rel="nofollow" href="URL-PINTEREST-Anda" target="_blank">
<img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-RXvr_vVQQK-6W2QV_Wj8O-0ZJ8zISa0mjA34CGzHrolfKFNsG1eBYJ_ZYxAlhKyHXSd9tDHwjzCwM-Ycxwoj0xQASx7hp8ClXaVtJxB5bc3R3arnyU5hmL2VaUFLoxbORGweld_VElAL/s1600/PINTEREST-48x48.png" alt="Follow Me on Pinterest" /></a>
<!--Akhir Kode Pinterest-->

<!--Awal Kode Facebook Icon-->
<a rel="nofollow" title="Like Our Facebook Page" href="URL-FACEBOOK-Anda" target="_blank">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9AOfHZD9sd6hRXlaETIck-Dt0ZWjdksbCxfpfDjtYQQV1K6lLy1mTulsSTxHmau2icJYkQdBvmKWh8e7mngjNN-N04ndcIEjf6x-z8XvpmDRUrjZlhj3F_GWjUrvCRit587z2kOjwXTRe/s1600/FACEBOOK-48x48.png" style="margin-right:1px;" alt="Icon"/></a>
<!--Akhir Kode Facebook-->

<!--Awal Kode Twitter Icon-->
<a rel="nofollow" title="Follow Our Updates On Twitter" href="URL-TWITTER-Anda" target="_blank">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL3AI0nR50SYtq6cPiSI5NOLWwNUcBCI9KUocyzTn_fTa9tBAXvSGWAhWYMNZUHLj8eqmYbfwY-jUK90ikxm6leltlfcw2IHfHxNFL1Xto0AqZUYidWsDvL4-LO7uTkV1eo275aBN9sPIw/s1600/TWITTER-48x48.png" style="margin-right:1px;" alt="Icon"/></a>
<!--Akhir Kode Twitter-->
</div>
<br/>
<!--Awal Kode Tombol Feed Count-->
<a href="URL-FEEDBURNER-Anda" target="_blank">
<img alt="The Kampoeng Blogger" src="http://feeds.feedburner.com/~fc/thekampoengblogger?bg=ff9933&fg=000000&anim=1" style="border:0" /></a>
<!--Akhir Kode Tombol Feed Count-->
</center>

Catatan!
Silahkan anda mengganti kode yang diberi warna merah dengan URL sosial media dan URL Feed anda sendiri.

Step 3

Klik Save

Semoga bermanfaat.
Wassalam.

Written by: Rysmah Zainal Arifin

The Kampoeng Blogger, Updated at: 8:59 PM

Posted in: Efek , Sidebar , Social Media , Widget