Saturday, July 21, 2012

Cara Membuat Widget Sosial Bookmark Berputar

6:00 PM Hzndi 19 comments


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:

Posted in: ,

19 comments:

  1. UnknownJuly 21, 2012 at 6:18 PM

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

    ReplyDelete
  2. srulzJuly 21, 2012 at 6:45 PM

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

    ReplyDelete
    Replies
    1. HzndiJuly 23, 2012 at 3:12 PM

      loh kok kapan2 medningan sekrang sja heehe

      Delete
  3. Cirebon-Cyber4rtJuly 21, 2012 at 10:39 PM

    wah keren sob tutorialnya, ijin nyoba ya :D

    ReplyDelete
  4. cerita anak kostJuly 22, 2012 at 4:39 AM

    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. HzndiJuly 23, 2012 at 3:14 PM

      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. zachflazzJuly 22, 2012 at 11:57 AM

    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. cak oniJuly 22, 2012 at 12:57 PM

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

    ReplyDelete
  7. UnknownJuly 24, 2012 at 7:08 AM

    Hadir pagi ini sobat. sangat mantaf tutornya. Support

    ReplyDelete
  8. Staff AdministratorJuly 31, 2012 at 8:24 AM

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

    ReplyDelete
    Replies
    1. HzndiJuly 31, 2012 at 9:46 PM

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

      Delete
  9. Bocah KampoenkOctober 2, 2012 at 1:38 PM

    mantap sob..nanti ane praktekin tutorialnya

    ReplyDelete
  10. Share4rt BerbagiNovember 2, 2012 at 2:02 PM

    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. barodastJanuary 14, 2013 at 12:24 AM

    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