Widget Social Icon Unik Berputar Untuk Sidebar

Sambil menyelam minum air. Begitulah istilah yang tepat untuk Tutorial Jitu kali in, karena memang sebelumnya saya sedang meng-otak atik template milik sahabat Sifirman Jadi, ada baiknya Tutorial Jitu sambil belajar sambil berbagi. Tadi juga Tutorial Jitu sudah membuat artikel yang tidak kalah Jitu-nya tentang Menambah Widget Box Fitured Post Slider keren dengan CSS3, bagi anda yang juga mungkin membutuhkannya silahkan anda cek sendiri.

Tutorial Jitu kali ini membahas tentang Widget Social Icon Unik Berputar Untuk Sidebar blog anda. Apa itu? kuq ada berputar?… Jangan bingung sobat, karena kami memberikan tutorial sekali dengan contohnya. Mungkin ada baiknya sobat lihat screenshot dibawah ini untuk contoh dari widget ini:

Mungkin sudah cukup untuk pengenalan dari widget Social Icon ini. Langsung saja kita menuju tutorial membuatnya:

Widget Social Icon Unik Berputar Untuk Sidebar

1. Login ke account blog anda.
2. Pada Dasbor blog, pilih menu Template>>Edit HTML
3. Tekan Ctrl+f pada keyboard anda, dan cari kode ]]></b:skin> 
4. Kemudian Copy kode css berikut, dan letakkan tepat di atas kode ]]></b:skin>

/* Social Icon Widget Sidebar https://blog.sifirman.com*/

    div#socialicons1 img{ /* 1st set of icons. Rotate them 360deg onmouseover and out */

    -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;

    }

    div#socialicons1 img:hover{

    -moz-transform: rotate(360deg);

    -webkit-transform: rotate(360deg);

    -o-transform: rotate(360deg);

    -ms-transform: rotate(360deg);

    transform: rotate(360deg);

    }

5. Simpan template anda dengan menekan tombol Save Template, sampai disini proses penambahan code css ke dokumen HTML template selesai, dan lanjut ke tahap berikutnya.

6. Pastikan anda masih dalam keadaan login di Blogger. Pilih menu Layout >> Add a gadget >> pilih gadget type HTML/Javascript
7. Masukkan kode HTML dibawah ini:

<div id="socialicons1"> <!-- get this on https://blog.sifirman.com -->

    <a href="http://urlanda.com/RSS"><img border="0" src="http://1.bp.blogspot.com/-aFoaagR_vc0/Tv3m_2_OLBI/AAAAAAAABm8/MEmujyAi4Ag/s1600/rss.png" /></a> <a href="http://www.delicious.com/delicious-ID"><img border="0" src="http://4.bp.blogspot.com/-ZUhz4ru6RBs/Tv3m_X4XuYI/AAAAAAAABmo/6LQ4IolE0W0/s1600/delicious.png" /></a> <a href="http://www.facebook.com/FB-ID"><img border="0" src="http://4.bp.blogspot.com/-qWEX1j-tXHA/Tv3m_u0aWII/AAAAAAAABm0/AwN9Qkkl-Us/s1600/facebook.png" /></a> <a href="http://www.twitter.com/twitter-ID"><img border="0" src="http://2.bp.blogspot.com/-tyZhlZfCKjQ/Tv3m_0e3ovI/AAAAAAAABnM/MjE8VOFkO7M/s1600/twitter.png" /></a> <a href="http://www.yahoo.com/ID"><img border="0" src="http://1.bp.blogspot.com/-x4DBFqxf3Jo/Tv3nAadEdNI/AAAAAAAABnY/Q3onklhZIEc/s1600/yahoo.png" /></a></div>

    <div class="clear">

    </div>

Keterangan: Ganti URL website dengan URL milik anda.

8. Simpan, dan lihat hasilnya di blog anda.

Selesai sudah artikel tentang  Widget Social Icon Unik Berputar Untuk Sidebar ini. Semoga bermanfaat bagi sobat semuanya. Jika berhasil jangan lupa ucapkan alhamdulillah, jika sekiranya terjadi kegagalan berkenanlah sobat untuk berkomentar ria dibawah.