Senin, 17 September 2012

Cara Membuat Tombol Share Di Bawah Posting Blog


By on 21.36

Tutorial - Tombol share dalam blog sangat penting untuk meningkatkan pengunjung ke blog kamu. Namun untuk menarik perhatian agar pengunjng blog mau berbagi artikel yan dibaca ke berbagai jejaring sosial, tentunya kamu membutuhkan tombol share yang cukup keren.


1. Login ke blog kamu
2. Pilih Edit HTML > Jangan lupa Centang Expand Widget Template > Cari kode <data:post.body/>
3. Setelah ketemu letakan kode di bawah ini tepat di atas kode nomor 2.

<style>
/*--------Social Sharing Widget Below Blog Post ------*/
.sharebelow a {
display:block;
height:48px;
width:48px;
padding:0 4px;
float:left;
background:transparent url(http://3.bp.blogspot.com/-vslV5wtB7Hc/T_iYKWWojFI/AAAAAAAAAKc/IBi91mIC0b8/s1600/sharebelow.png) no-repeat;
}
.sharebelow  a.googleplus {
background-position: 0px -348px;
}
.sharebelow  a.googleplus:hover {
background-position: 0px -406px;
}
.sharebelow  a.pinterest {
background-position: 0px -464px;
}
.sharebelow  a.pinterest:hover {
background-position: 0px -522px;
}
.sharebelow  a.delicious {
background-position: 0px 0px;
}
.sharebelow  a.delicious:hover {
background-position: 0px -58px;
}
.sharebelow  a.digg {
background-position: 0px -116px;
}
.sharebelow  a.digg:hover {
background-position: 0px -174px;
}
.sharebelow  a.stumbleupon {
background-position: 0px -812px;
}
.sharebelow  a.stumbleupon:hover {
background-position: 0px -870px;
}
.sharebelow  a.technorati {
background-position: 0px -928px;
}
.sharebelow  a.technorati:hover {
background-position: 0px -406px;
}
.sharebelow  a.twitter {
background-position: 0px -928px;
}
.sharebelow  a.twitter:hover {
background-position: 0px -986px;
}
.sharebelow  a.facebook {
background-position: 0px -232px;
}
.sharebelow  a.facebook:hover {
background-position: 0px -290px;
}
.sharebelow  a.reddit {
background-position: 0px -580px;
}
.sharebelow  a.reddit:hover {
background-position: 0px -638px;
}
.sharebelow  a.rss {
background-position: 0px -696px;
}
.sharebelow  a.rss:hover {
background-position: 0px -754px;
}
.shareandbookmark{
margin:10px 0px;
color:#333333;
font-weight:bold;
font-size:18px;
font-family:sans-serif;
}
</style>
<div class='sharebelow'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class="shareandbookmark">
Kindly Bookmark and Share it:</div>
<!--Facebook-->
<a class='facebook' 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' title='Share this on Facebook :&gt;'/>
<!--Google Plus-->
<a class='googleplus' expr:href='&quot;http://plus.google.com/share?url=&quot; + data:post.url' rel='external nofollow' target='_blank' title='+1 it :&gt;'/>
<!-- Twitter -->
<a class='twitter' expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Tweet this :&gt;'/>
<!-- Pinterest -->
<a class='pinterest'  href="http://pinterest.com/" rel='external nofollow' target='_blank' title='Pin it :&gt;'/>
<!-- Delicious -->
<a class='delicious' 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' title='Add this to Delicious :&gt;'/>
<!--Stumble-->
<a class='stumbleupon' 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' title='Stumble this :&gt;'/>
<!--DIGG-->
<a class='digg' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot;  + data:post.url' rel='external nofollow' target='_blank' title='Digg this :&gt;'/>
<!-- Reddit -->
<a class='reddit' expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Add this to Reddit :&gt;'/>
<!--RSS -->
<a class='rss' expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' target='_blank' title='Bookmark :&gt;'/>
</b:if></div>
<div style="clear:both"/>
4. Simpan dan lihat hasilnya.

About Syed Faizan Ali

Faizan is a 17 year old young guy who is blessed with the art of Blogging,He love to Blog day in and day out,He is a Website Designer and a Certified Graphics Designer.

66 komentar:

  1. Kok Punya gak ada perubahan ya gan ..???

    BalasHapus
  2. Maksud Anda gagal? Jika iya coba ulangi, soalnya tidak ada kesalahan, setelah saya cek. Dan widget ini hanya akan tampil pada halaman posting saja.

    BalasHapus
  3. Nanti sya praktekin gan.. tp kyanya ga bsa :(

    BalasHapus
  4. nice share bro..
    cobain ah XD

    BalasHapus
  5. mantap langsung bisa dicobain di blog ane gan, makasih ya!!

    BalasHapus
  6. oke.. makasih buat tipsnya :)

    BalasHapus
  7. gan , yang bisa di share kok cuma pinterest ?

    BalasHapus
  8. thanks tutorialnyah...

    untuk kecilin sizenya gimana ya om?

    BalasHapus
  9. nice info
    kunjungi blig saya gan
    http://bagi-bagi0ilmu.blogspot.com

    BalasHapus
  10. nice info bos..matur thank you. Visit me back..

    BalasHapus
  11. 1001% Work !!! Thanks Infonya Gan !!!

    Jangan Lupa Juga Untuk Singgah Di Blog Saya
    " www.aRizaL-007.Blogspot.Com "

    #. Terimakasih !!

    BalasHapus
  12. nice share kang... maju terus blogger indonesia..

    BalasHapus
  13. nicepost bang , artikelnya sangat bermanfaat bagi para newbie seperti saya ^^ kalau ada waktu mampir juga ya ke blog sederhana saya di www.cyborg-error.blogspot.com

    BalasHapus
  14. Tutorial yang bagus.
    Semoga bermanfaat Tutorialnya.

    BalasHapus
  15. untuk wordpress bisa tidak gan,klu bisa mhn kasih tahu caranya.

    BalasHapus
  16. Thx Info'a yaa Udh berhasil hehe

    BalasHapus
  17. informasi yang sangat bermanfaat

    BalasHapus
  18. mantab... udah dicoba... dan sukses nih...

    BalasHapus
  19. Artikelnya sangat sangat manjuuur ..
    berhasil gan .!

    BalasHapus
  20. mantap dah pokoknya...
    visit ya http://www.sumardani.name/

    BalasHapus
  21. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  22. kok gk work ya ??
    uda berulang2 ni !
    gmn ya ?

    BalasHapus
  23. di-posting-ini-kok-ngak-dibuat-ya?

    BalasHapus
  24. Aduh kok punyaku gabisa :(

    BalasHapus
  25. kok di template ku nggak ada nya ya??? hmmm.... minta bantuannya ya..

    BalasHapus
  26. gak bisa mas..

    mohon di perbaiki :P

    Http://rellsafan.blogspot.com

    BalasHapus
  27. mantap gan,, ini yang lagi saya cari.

    BalasHapus
  28. makasih sob,tampilan nya bagus

    BalasHapus
  29. Mantap bro

    www.bmatindas.com

    BalasHapus
  30. wah, keren artikelnya gan. Salam sukses selalu. jangan lupa mampir ke http://adeputra-pkp.blogspot.com jgn lupa follow back juga. thx gan.

    BalasHapus
  31. terimakasih banyak mas, ini yang saya cari-cari dari tadi, akhirnya nemu disini, salam hangat farhanshare.blogspot.com

    BalasHapus
  32. Terimakasih, jangan lupa follow back blog Saya :-D

    BalasHapus
  33. mantab, nih. saya sudah coba dan alhamdulillah langsung berhasil

    BalasHapus
  34. mantep nih, dicoba dulu gan :)

    BalasHapus
  35. terimakasih gann, tapi kok gagal teruss yhh?
    check:
    www.mbahgahol.blogspot.com

    BalasHapus
  36. infonya mantap gan..
    salam....

    BalasHapus
  37. nice post broww,,, sangat membantu sekali broww

    sekedar berbagi info broww<<<<games gratis terkini http://filestone.blogspot.com

    dan tak lupa makasi buat artikelnya< kalo bisa boleh request artikel gak broww?

    BalasHapus
  38. Blum ketetmu MR Admin Tapi saya menemukan ini

    <a class='goog-inline-block share-button sb-email'tp blum di coba

    BalasHapus
  39. Makasih Gan Infonya Saya Coba Gan Salam Kenal ......
    Furniture Jepara

    BalasHapus
  40. Nice Post Gan,,,,,langsung ke TKP

    Visit Back yaa :)

    BalasHapus
  41. mkasie gan sgt co2k ama blog q
    mampir di blog ane ea,,,,

    BalasHapus
  42. keren gan tutornya,,bisa di coba nih kebetulan saya lagi mencari cara agr bisa diksih tombol share ini...terimakasih banyak salam kenal ya,,jangan lupa mampir ke http://volimaniak.blogspot.com

    BalasHapus