Saturday, July 21, 2012

Cara Membuat Widget Sosial Bookmark Berputar


Sore-sore begini enaknya membagikan tutorial widget social bookmark. Yup ditengah kegalauan saya yang sudah 5x lebih daftar google adsense namun terus2an di tolak, akhirnya saya memutuskan untuk membagikan tutorial saja. Di kesempatan kali ini saya akan membagikan widget sosial bookmark yang di postingan sebelumnya sudah banyak sekali saya berikan tentang widget ini.

Widget ini akan memberikan kepada pengunjung kamu untuk like fan page facebook kamu, follow twitter kamu hingga berlangganan artikel-artikel blog kamu hanya dengan sekali klik. Widget yang di buat menggunakan CSS3 ini sangat menakjubkan dan cocok dengan blog kamu. Dan ketika di sorot, langsung deh wusss wuss, widget ini akan berputar- putar dengan cantiknya :D Oh iya, saya juga sudah menyertakan demo widgetnya loh :)

Langsung saja kamu lihat tutorialnya di bawah ini oke.

1. Login ke Blogger.com

2. Klik Tata Letak --> Tambah Gadget --> HTML/Javascript dan kemudian kamu salin kode di bawah ini sesuai dengan keinginan kamu. Saya sudah menempatkan 3 widget spesial yang bisa kamu pilih :)

A. Gaya Putar 180'





<style>
p#hb_socialicons img {
 /* Spinning Social Icons Widget By hzndi.blogspot.com */
    -moz-transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

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

/* Spinning Social Icons Widget By hzndi.blogspot.com */
</style> 


<center><div id="hb_socialicons">
<a href="MASUKKAN URL FACEBOOK KAMU DISINI">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5AcuanL9OD4AIIXd4QWMeqOc7K8J-Mc4aHkE5i1nsQwNN1DBrF6iLFcfgEYa92ejtP692f1TKzy4Ay8iFMmfaahXJEd87KD_bKk-vSknrLDc5kK59JU_jOPpgjwoCe0JkVhD9qKgUESI/s1600/helperblogger.com-facebook.png" /></a>
    <a href="MASUKKAN URL TWITTER KAMU DISINI">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi04t8OU4Hkn7y-g0RFCZYxixVSmwOqiJTVcpjiRrqUq3kLqabHE6RH7FXc0BIVJJ74y5-qkh2K8wF-9AL5ga2NSaZb2C3NIvQoYd8RL9Pl2koCO65T9693SZiQaT_FVBacl_Xay7JfggU/s1600/helperblogger.com-twitter.png" /></a>
    <a href="MASUKKAN URL GOOGLE PLUS KAMU DISINI">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbqQkU6NNpuQ0bMcDyFjcrlbPL0YseA62EJVPNeKS7Hwb7wjJA6C7n26FgsBKXJ_X73FrxfI_sHDxuM81dvOe-2LiuG9RNP6Hz_RizNG8tkp04wCwZhBzf8yPkW2EE1IyudPbDMXNaVSE/s1600/helperblogger.com-google_plus.png" /></a>
    <a href="MASUKKAN URL FEEDBURNER KAMU DISINI">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJwyhWlsr34ZwrBNjV2ejqKy_eHy_nMmia9bGC4pe9myhl3KszzRS04_PFp1ABZ6_mrgZPghzs79nH-iBQG6mRCfeoh66IWS2HKzwk2y-NoqTGY9H__R-n_jjOnOTOPoyw4tPkxxT9enU/s1600/helperblogger.com-rss.png" /></a>
    <a href="MASUKKAN URL YOUTUBE KAMU DISINI">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRxuwE9_2blC13Oi8n9vqoY7yJkw-4opD42At49B8KhvCf6CWIvnt5uZRPPnvKkczVU7HKCkhv4cey1Qm27RYLd3TwDgexiBp2jQgYYIRmRBCfYyfGaS67GZ8dzdi9EYKUEFyCAPnyuQ0/s1600/helperblogger.com-youtube.png" /></a>
</div>
</center>


B. Gaya Putar 360'








<style>p#hb_socialicons img {
 /* Spinning Social Icons Widget By HelperBlogger */
    -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 Hzndi.blogspot.com */
</style> 


<center><div id="hb_socialicons">
<a href="MASUKKAN URL FACEBOOK KAMU DISINI">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5AcuanL9OD4AIIXd4QWMeqOc7K8J-Mc4aHkE5i1nsQwNN1DBrF6iLFcfgEYa92ejtP692f1TKzy4Ay8iFMmfaahXJEd87KD_bKk-vSknrLDc5kK59JU_jOPpgjwoCe0JkVhD9qKgUESI/s1600/helperblogger.com-facebook.png" /></a>
    <a href="MASUKKAN URL TWITTER KAMU DISINI">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi04t8OU4Hkn7y-g0RFCZYxixVSmwOqiJTVcpjiRrqUq3kLqabHE6RH7FXc0BIVJJ74y5-qkh2K8wF-9AL5ga2NSaZb2C3NIvQoYd8RL9Pl2koCO65T9693SZiQaT_FVBacl_Xay7JfggU/s1600/helperblogger.com-twitter.png" /></a>
    <a href="MASUKKAN URL GOOGLE PLUS KAMU DISINI">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbqQkU6NNpuQ0bMcDyFjcrlbPL0YseA62EJVPNeKS7Hwb7wjJA6C7n26FgsBKXJ_X73FrxfI_sHDxuM81dvOe-2LiuG9RNP6Hz_RizNG8tkp04wCwZhBzf8yPkW2EE1IyudPbDMXNaVSE/s1600/helperblogger.com-google_plus.png" /></a>
    <a href="MASUKKAN URL FEEDBURNER KAMU DISINI">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJwyhWlsr34ZwrBNjV2ejqKy_eHy_nMmia9bGC4pe9myhl3KszzRS04_PFp1ABZ6_mrgZPghzs79nH-iBQG6mRCfeoh66IWS2HKzwk2y-NoqTGY9H__R-n_jjOnOTOPoyw4tPkxxT9enU/s1600/helperblogger.com-rss.png" /></a>
    <a href="MASUKKAN URL YOUTUBE KAMU DISINI">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRxuwE9_2blC13Oi8n9vqoY7yJkw-4opD42At49B8KhvCf6CWIvnt5uZRPPnvKkczVU7HKCkhv4cey1Qm27RYLd3TwDgexiBp2jQgYYIRmRBCfYyfGaS67GZ8dzdi9EYKUEFyCAPnyuQ0/s1600/helperblogger.com-youtube.png" /></a>
</div>
</center>


C. Gaya Putar 360' bagian 2








<style>p#hb_socialicons img {
 /* Spinning Social Icons Widget By HelperBlogger */
    -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 Hzndi.blogspot.com */
</style> 

<center><div id="hb_socialicons">
<a href="MASUKKAN URL FACEBOOK KAMU DISINI">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5AcuanL9OD4AIIXd4QWMeqOc7K8J-Mc4aHkE5i1nsQwNN1DBrF6iLFcfgEYa92ejtP692f1TKzy4Ay8iFMmfaahXJEd87KD_bKk-vSknrLDc5kK59JU_jOPpgjwoCe0JkVhD9qKgUESI/s1600/helperblogger.com-facebook.png" /></a>
    <a href="MASUKKAN URL TWITTER KAMU DISINI">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi04t8OU4Hkn7y-g0RFCZYxixVSmwOqiJTVcpjiRrqUq3kLqabHE6RH7FXc0BIVJJ74y5-qkh2K8wF-9AL5ga2NSaZb2C3NIvQoYd8RL9Pl2koCO65T9693SZiQaT_FVBacl_Xay7JfggU/s1600/helperblogger.com-twitter.png" /></a>
    <a href="MASUKKAN URL GOOGLE PLUS KAMU DISINI">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbqQkU6NNpuQ0bMcDyFjcrlbPL0YseA62EJVPNeKS7Hwb7wjJA6C7n26FgsBKXJ_X73FrxfI_sHDxuM81dvOe-2LiuG9RNP6Hz_RizNG8tkp04wCwZhBzf8yPkW2EE1IyudPbDMXNaVSE/s1600/helperblogger.com-google_plus.png" /></a>
    <a href="MASUKKAN URL FEEDBURNER KAMU DISINI">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJwyhWlsr34ZwrBNjV2ejqKy_eHy_nMmia9bGC4pe9myhl3KszzRS04_PFp1ABZ6_mrgZPghzs79nH-iBQG6mRCfeoh66IWS2HKzwk2y-NoqTGY9H__R-n_jjOnOTOPoyw4tPkxxT9enU/s1600/helperblogger.com-rss.png" /></a>
    <a href="MASUKKAN URL YOUTUBE KAMU DISINI">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRxuwE9_2blC13Oi8n9vqoY7yJkw-4opD42At49B8KhvCf6CWIvnt5uZRPPnvKkczVU7HKCkhv4cey1Qm27RYLd3TwDgexiBp2jQgYYIRmRBCfYyfGaS67GZ8dzdi9EYKUEFyCAPnyuQ0/s1600/helperblogger.com-youtube.png" /></a>
</div>
</center>



3. Simpan Template dan lihat hasilnya :D

Postingan Terkait:

19 comments:

  1. pertamax sob..
    aku mensupportmu..
    I like it..

    ReplyDelete
  2. begitu ya caranya... ^^ barutau.. makasih ya infonya.. kapn kapan dipraktekin deh.. :D

    ReplyDelete
    Replies
    1. loh kok kapan2 medningan sekrang sja heehe

      Delete
  3. wah keren sob tutorialnya, ijin nyoba ya :D

    ReplyDelete
  4. wah lengkap kali gan, tapi ane masih bingung pengunaan sosial bookmark, emang orang bakalan make sebanyak itu ya? ehm, tapi makasih ya.

    ReplyDelete
    Replies
    1. sosial bookmark salah satu elemen penting dalam blogger, denngan memaasang fitur ini, orang2 atau pegunjung dapat berbagi artikel kita dan membuat blog kita semakin terkenal

      Delete
  5. saya lagi buka-buka file postingan situ, mau saya terap2in di blog saya. makasih ya menginspirasi ilmunya. cuma ya itu, saya memang tetep aja lambat, hehe..

    ReplyDelete
  6. sekedar kunjungan siang sobat . .
    izin menyimak dulu . .
    kyknya seruu

    ReplyDelete
  7. Hadir pagi ini sobat. sangat mantaf tutornya. Support

    ReplyDelete
  8. kira nya cocok ga ya sama template sya.. :)
    trims sob buat share tutor nya..

    ReplyDelete
    Replies
    1. heheh y gpp gan kalau tertarik di bookmark dahulu saja, thanks juga sudah datang :)

      Delete
  9. mantap sob..nanti ane praktekin tutorialnya

    ReplyDelete
  10. Hanya mampir untuk numpang baca artikel nih . Blog nya bagus

    Tukeran link yuk sama blog saya . Oiya Follow Blog saya nanti saya folback 4 kali sob :)

    Salam Share4rt Berbagi

    ReplyDelete
  11. ane copas bos.... mau di praktekin .. biar mantap..

    ReplyDelete

Komentarmu menunjukan kecerdasanmu, Kalau komentar cuma buat cari link buat apa ? :)

Twitter Delicious Facebook Digg Stumbleupon Favorites More