Widget Social Icon Unik Berputar Untuk Sidebar - Hallo sahabat Rumah Musafir Ilmu, Pada Artikel yang anda baca kali ini dengan judul Widget Social Icon Unik Berputar Untuk Sidebar, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Blogspot, Artikel Css3, Artikel Widget, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Widget Social Icon Unik Berputar Untuk Sidebar
link : Widget Social Icon Unik Berputar Untuk Sidebar

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 Akhbar Islam. 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:

Widget Social Icon Unik Berputar Untuk Sidebar

LIVE DEMO

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 http://tutorial.akhbarislam.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 http://tutorial.akhbarislam.com -->

    <a href="http://urlanda.com/RSS"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5Cq5HROYZ3nYjxtJMwO0srSnjOBzFyx7j1YBizPp799f9uxWA9P0OlxPLhsLPAs-1JNcCBbTcmGesvfElPNZAanTaF1j_YJ2C3PtzgeVmTszKTNOK1rwvSDgVQ7rzvo4k4jpbfPRJ_SZX/s1600/rss.png" /></a> <a href="http://www.delicious.com/delicious-ID"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgKX3w7sSr5x3CDPGMahhZfthti5dqe8YOj41duNG4imGmV7qxW4HJllrKQ8zC8s_-h8nQeZe2ojgyv990-js2tl6nQtGTeHD5lEArj-VUvhJdXO_gz9TUtg9WeE_BgDYOvv_GTFP2_wGl/s1600/delicious.png" /></a> <a href="http://www.facebook.com/FB-ID"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhULNjh-VkMeFNXERvHBLiHNmaZVht8SKUJNcB6cGxCCgtx3jXGD3NgBl7aHLN5oJcLSk5XJsFLQY6Zji4mk_2A1G_IQXwvvRnOOYLjYnjjogLb8LCA0ggzF1QxDDtqvg_u_TTBigeJXDBz/s1600/facebook.png" /></a> <a href="http://www.twitter.com/twitter-ID"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTHuUSanaOgJY44pfTW6avlnqSVqzc5LQk_P6VgoXoYiBybz07YqqFDtSMQutwifWpRa1T9fOJWKRT38XkuW18wcsNBbEmFMJcvss6PBsSZy3oKpJ9Wr8FStv4at0w8KQ6bSo4c-W9hCMv/s1600/twitter.png" /></a> <a href="http://www.yahoo.com/ID"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBYRIsLsXFz6iALuyT8IMu6vHz0GvJH17wWennm43UvtxzUlbd8gKlD7QWZqCgZNlL_PsVus2HWMLDoyeCIXz7VYzwZBiDKBa-cPe3KJfoWI4Jk0wBUQostHtlKjFjr7FsmWIg_u5JWlR7/s1600/yahoo.png" /></a></div>

    <div class="clear">

    </div>

Keterangan: Ganti URL bercetak kuning 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.

Keyword: Widget Social Icon Unik Berputar Untuk Sidebar | Tutorial Jitu Akhbar Islam

Demikianlah Artikel Widget Social Icon Unik Berputar Untuk Sidebar

Sekianlah artikel Widget Social Icon Unik Berputar Untuk Sidebar kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Widget Social Icon Unik Berputar Untuk Sidebar dengan alamat link http://bismillah-go.blogspot.com/2013/06/widget-social-icon-unik-berputar-untuk.html