Thursday, July 19, 2012

Sosial Share Icon Gaya Berputar Dengan CSS3

By Sriudin sahrudin   Posted at  2:59 PM   Tips NgeBlog No comments

Sosial Media
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,


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="http://3.bp.blogspot.com/-ck0bnvgk5uI/T_fxhb7Ay-I/AAAAAAAACRY/yZR4hu8omnE/s1600/helperblogger.com-facebook.png" /></a>
    <a href="http://www.twitter.com/helperblogger/">
<img border="0" src="http://4.bp.blogspot.com/-P_NkdPIsSQQ/T_fxjUKUF2I/AAAAAAAACRs/KXfA3LnHej8/s1600/helperblogger.com-twitter.png" /></a>
    <a href="https://plus.google.com/u/0/106527290580119996124">
<img border="0" src="http://1.bp.blogspot.com/-uSOHwlVeA68/T_fxiHgtoJI/AAAAAAAACRc/-UZ8ujxc7Ic/s1600/helperblogger.com-google_plus.png" /></a>
    <a href="http://www.feeds.feedburner.com/hblogger/">
<img border="0" src="http://2.bp.blogspot.com/-2sRpqFhID4A/T_fxipoh7DI/AAAAAAAACRo/kn_qiQKBT-o/s1600/helperblogger.com-rss.png" /></a>
    <a href="http://www.youtube.com/helperblogger1/">
<img border="0" src="http://3.bp.blogspot.com/-2wY3FQCZgoM/T_fxkMsCqtI/AAAAAAAACR4/jsNUZdVcCCg/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.

About the Author

Nulla sagittis convallis arcu. Sed sed nunc. Curabitur consequat. Quisque metus enim, venenatis fermentum, mollis in, porta et, nibh. Duis vulputate elit in elit. Mauris dictum libero id justo.
View all posts by: BT9

0 komentar:

Back to top ↑
Connect with Us

What they says

© 2013 BLOG SI PALUI. WP Mythemeshop Converted by Bloggertheme9
Blogger templates. Proudly Powered by Blogger.