Sosial Share Icon Gaya Berputar Dengan CSS3

Sosial Icon Berputar Dengan CSS3 Styles. Akhirnya Mas yusa punya kesempatan buat nge-post. Sebenarnya bukan kesempatan buat nge post, tapi punya ide untuk nge-post. Kalo kesempatan sih banyak. Sama aja kan, punya kesempatan nge-post tapi gak punya ide. Hahahaha,

DEMO

Seperti judulnya, Mas yusa akan bagi bagi Widget lagi. Sosial Icon Berputar Dengan CSS3, Nah... widget ini adalah widget untuk memudahkan pengunjung atau anda untuk share post anda di Sosial Media. Diantaranya : Facebook, Twitter, Digg, Technorati, Reddit, dan Stumbleupon. Widget ini mempunyai efek berputar ketika di Hover atau Mouse Over atau mudahnya lagi disorot. (Hahahaha). Berikut kodenya :

<style>p#hb_socialicons img {
 /* Spinning Social Icons Widget By Masyusablog*/
    -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;
}

p#hb_socialicons img:hover {
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
}

/* Spinning Social Icons Widget By Masyusablog */
</style>


<center><p id="hb_socialicons">
    <a href="http://www.facebook.com/btsnts/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGdXICsJU7rfE_dOGMAiqCgHUdr9V7hjRBVYpRnygSHwFy24HoqCys3kD1u9HYE3V8avIEyQ-tPnH12W_uUJszkZCtOKkjlFIp5eWk70WIYKBLzG4nGkG4A_K0gVoXqJ5SWSODDlvB9Hs/s1600/helperblogger.com-facebook.png" /></a>
    <a href="http://www.twitter.com/helperblogger/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKor2vnIZE_KnhVbQpnofFbbKZ4zJWmB_rCVIiOoKkJlaaQO7YFoPZGM2aEiFr-dWg9Dfw7r1ZSkuci-FvRtcq6WLn7wRou4_uiTPGK6bRWbv-ds14j1NcQsUa7spKP47GeUGfpGgoZMY/s1600/helperblogger.com-twitter.png" /></a>
    <a href="https://plus.google.com/u/0/106527290580119996124">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQ9Te858PXM1oaTv-RTMf9EIGNaAiSedV3xo64Zp2PSfrw7ylduOlVk07B4OPRka8NLzDxzZ2G03qu3AASujFVWmb64OF1wBICdQMwi2MfrjLwSJLB1iMq-PrbiLpLw-58pJSMvyiMNEI/s1600/helperblogger.com-google_plus.png" /></a>
    <a href="http://www.feeds.feedburner.com/hblogger/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8EvCqHJO1KJVnnU7KiTYV0BMsXz0DgxfaovTqV9aIjGnzcpUaRjh-Pf782mRjjFkkY95ZvHTJCDN5V2TpgnWNg-hAkQ_nW-Mx8H-JTmnyLQNXHhRgj2A56PKTxxncakzZ8McLMKaGjRs/s1600/helperblogger.com-rss.png" /></a>
    <a href="http://www.youtube.com/helperblogger1/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhE9CcytnuXL-okZPFEF2Qo0KOaJXtHLhv0e2mwzhQ-5S-NFbQzH4qaUJwScmAKH4Ih9oe-wA0Xc_pGbb8HejwyPp5V8Lddu4UdnVIWB6du2giGJj5E2inYV3cMcTffsUY-6HuCsrURK1Y/s1600/helperblogger.com-youtube.png" /></a>
</p></center>

• Jika anda ingin Widget diatas tampil dibawah postingan, berikut caranya :
• Masuk ke akun blogger anda,
• Lalu masuk ke Rancangan->Edit HTML->Centang Expand Template
• Jangan Lupa Back up dulu bro...!!
• Cari Kode <div class='post-footer'> (Ctrl + F)
• Lalu letakan kode Sosial Share Icon dibawah kode <div class='post-footer'>.
• Lalu simpan template...

Semoga berhasil bang... :) Ada pertanyaan, tanyakan VIA Komentar.

Tweet

Baca Peraturan Copy Paste !

Anda sedang membaca artikel tentang Sosial Share Icon Gaya Berputar Dengan CSS3 dan anda bisa menemukan artikel Sosial Share Icon Gaya Berputar Dengan CSS3 ini dengan url http://masyusa.blogspot.com/2012/07/sosial-share-icon-gaya-berputar-dengan.html, Anda boleh menyebar luaskannya atau mengcopy paste-nya jika artikel Sosial Share Icon Gaya Berputar Dengan CSS3 ini sangat bermanfaat bagi teman-teman Anda, namun jangan lupa untuk meletakkan link postingan Sosial Share Icon Gaya Berputar Dengan CSS3 sebagai sumbernya. Jika tidak saya akan laporkan Google ! Yusa Syihab Akbar

About Me-->