Wednesday, August 15, 2012

Cara Membuat Widget Social Sharing Berputar di Bawah Postingan

9:53 AM Hzndi 10 comments

Widget Social Sharing by Hzndi.blogspot.com


Di postingan saya kali ini saya akan menjelaskan tentang bagaimana caranya membuat widget sosial bookmark berputar. Memang sebelumnya saya sudah pernah kasih tahu caranya beberapa waktu yang lalu. Bisa kalian lihat di bawah ini :


Dengan memasang widget ini tentunya akan menambah trafik pengunjung blog kamu loh, karena para pembaca yang membaca postingan kamu dan tertarik untuk membagikannya di media sosial seperti facebook ataupun twitter. Sehingga pengunjung lainnya pun datang deh. Oke langsung saja lihat caranya di bawah ini :

1. Login ke Blogger.com

2. Klik Template --> Back Up template Terlebih dahulu, lihat caranya disini

3. Masih di bagian Template, Klik Edit HTML --> Klik lagi Lanjutkan --> Centang "Expand Widget Template".

4. Cari kode   <div class='post-footer-line post-footer-line-1'/>, gunakan CTRL + F untuk memudahkan pencarian.

5. Salin kode CSS di bawah ini dan letakkan diatas kode <div class='post-footer-line post-footer-line-1'/>.

<b:if cond='data:blog.pageType == "item"'>
<style>
p#socialicons img {    -moz-transition: all 0.2s ease-in-out;    -webkit-transition: all 0.2s ease-in-out;    -o-transition: all 0.2s ease-in-out;    -ms-transition: all 0.2s ease-in-out;    transition: all 0.2s ease-in-out;} p#socialicons img:hover {    -moz-transform: rotate(70deg);    -webkit-transform: rotate(70deg);    -o-transform: rotate(70deg);    -ms-transform: rotate(70deg);    transform: rotate(70deg);}
</style>
<center><p id='socialicons'>
<a expr:href='&quot;http://plus.google.com/share?url=&quot; + data:post.url' rel='external nofollow' target='_blank'><img border='0' src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzPJ-dZUPeSetePi5d7tP8Vq6XXOsJUupa_53shqFsrycXJgfOAxQQDhqe9C5hYLpb7HY_gbieJDbRwuZgZaHirOzpFHZZhqoqhGVd1k0X4m1YUDy48B5_6_Sw_ryaPth8x-EmlUs1HkU/s1600/hzndi.blogspot.com-google_plus.png'/></a>
<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='external nofollow' target='_blank'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjht4Mm38VVVTNm6ihrnMO-N0sFmbTw3GOcgObkvVCMFgGp4sP9Y2GLZPRRR7S72vLSYdT-d-VYyCHjKW6e-mb-IXigyEXZ1wOvH1mCdypRK4zu408Lr73Guafv4S1SID-RNPC_vm-crF0/s1600/hzndi.blogspot.com-facebook.png'/></a>
<a expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi91xRtwC5idOl7heHD1sEfSBx15gwpDeFDBL_rJIOYLvApTCpkUMhbkUeVhWKRf5FPVIr7Afy04En6ZB7xD2mdnr6n39b43otIjCU-hXePEElBB7WiWXEBWNDJ5c3bjwFuPUvTVBUGHE/s1600/hzndi.blogspot.com-twitter.png'/></a>      
<a expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot;  + data:post.url' rel='external nofollow' target='_blank'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSzW7VjjGMvKoI88RBnG8ptMieGI24G0p7p4ARvGis_UxDF6hGo8VgaDoCMv-3CbUl59NDrAomtC9WOk3DsDCEFwbK0NHMcLLs2AXHu9ZISz1rOFA18bWOaU0xDAQXAAh5jU9DVJIecvHR/s1600/digg.png'/></a>
<a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBxm71QgbunQw1EEOPiBv873rvccK0BqUpC5VUjQfb7eJHtUIouJKu6_03t7os7s6CuWKOWtuWdQ0oj5lkUm5riDGpsz_bPK6LKPScAL2BfCebl1iGLslTTuq1zrzFHTb-9RMp5E2frRY7/s1600/delicious.png'/></a>
<a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4BwyTFCHD6tqNosKfdrTFR_GpbB9AgVhw73kH9w6UcaRvoZ1TN5s8OUo5O8cPQje_rysRXQFbXOvQijSVWZGXiGs4SXDehs5jcuqtodWA3irAjVyApPnCqYrcfY6FCCtqAga4-cM_1Ay-/s1600/stumbleupon.png'/></a>
<a expr:href='&quot;http://www.technorati.com/faves?add=&quot; + data:post.url' rel='external nofollow' target='_blank'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhG6F_hwHa37ubHpEJBOzb9iAW0a4TN2GNc6OuRUo10oBW-bxVfY3s-lYr5JVFGncKLtt8hyphenhyphenCpQ4mBegSSJkrgJoEdNK1nw5C6oImd-FHoySQP0bBUEadLSRWw_lYXytLCRV6GTQ0k0sxEO/s1600/technorati.png'/></a></p></center><p style='display:none;'>Spinning icons by <a href='http://www.hzndi.blogspot.com'>Tutorial Blog dan SEO</a></p></b:if> 

6. Simpan Template

Postingan Terkait:

Blogger
Social Sharing
Social Bookmarking

Posted in: ,,

10 comments:

  1. cak oniAugust 15, 2012 at 10:03 AM

    pertamax gan . .izin mencoba

    ReplyDelete
  2. Asep HaryonoAugust 15, 2012 at 10:52 AM

    Informasi penting juga. Saya save dulu, akan dites di blog saya yang lain. Terima Kasih y

    ReplyDelete
  3. belajarblogspotAugust 15, 2012 at 10:24 PM

    sip deh gan...ane coba deh...trimssssss

    ReplyDelete
  4. cerita anak kostAugust 16, 2012 at 9:10 AM

    saya pernah liat ini. ternyata jamunya da di sini ya :D

    ReplyDelete
  5. ptikunmSeptember 4, 2012 at 2:47 PM

    thanks bro

    ReplyDelete
  6. UnknownFebruary 10, 2013 at 11:25 PM

    Open quote is expected for attribute "{1}" associated with an element type "src"

    saya mencoba kok mlah kluar peringatan kayak gini
    mhon penjelasan

    ReplyDelete

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

Twitter Delicious Facebook Digg Stumbleupon Favorites More