Cara Membuat Tombol Share Facebook, Twitter dan Google +

Cara Membuat Tombol Share Facebook, Twitter dan Google +
Cara Membuat Tombol Share Facebook, Twitter, Google + dll. Membuat tombol share facebook, twitter, digg atau mungkin ditambah dengan Google + diatas setiap posting / artikel blog dengan cara menambahkan kode atau script pada template anda. Share button atau tombol share untuk blogger sebenarnya bisa langsung anda dapatkan kodenya di situs situs yang menyediakannya, seperti contoh situs sharethis.com yang menyediakan kode untuk di pasang pada blog anda dengan fitur share yang lengkap. Namun yang kurang menarik adalah penempatannya yang kurang stretegis. Kali ini saya akan share cara membuat tombol share facebook, twitter, Google + dll di atas posting blog anda.

Cara membuat tombol Share atau Share button Blogger

  • Pertama silahkan login blog anda
  • Klik menu Design > Edit HTML > centang expand widget templates
  • Cari kode <div class='post-body entry-content'> atau class='post-body entry-content' dan biasanya ada 2 kode tersebut, pakailah kode yang pertama
  • Jika sudah ketemu, copy kode dibawah ini dan paste tepat diatas kode <div class='post-body entry-content'>
Kode
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='border-top:1px solid #ccc;border-bottom:1px solid #ccc; padding:8px 0px;margin:5px 0px 5px 0px;width:100%;float:left;height:20px;'>
<div style='float:left;padding-left:0px;font:normal 12px Georgia;'>
Share on :
</div>
<div style='float:left;padding-left:10px;'>
<a name='fb_share' type='button_count'/>
<script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'>
</script></div>
<div style='float:left;padding-left:10px;'>
<a class='DiggThisButton DiggCompact'/>
<script type='text/javascript'>
(function() {
var s = document.createElement(&#39;SCRIPT&#39;), s1 = document.getElementsByTagName(&#39;SCRIPT&#39;)[0];
s.type = &#39;text/javascript&#39;;
s.async = true;
s.src = &#39;http://widgets.digg.com/buttons.js&#39;;
s1.parentNode.insertBefore(s, s1);
})();
</script>
</div>
<div style='float:left;padding-left:10px;'>
<a class='twitter-share-button' data-count='horizontal' data-via='User Name' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
</div>
<div style='float:left;padding-left:10px;'>
<!-- Place this tag where you want the +1 button to render -->
<g:plusone size="medium"></g:plusone>
<!-- Place this render call where appropriate -->
<script type="text/javascript">
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>
</div>
</div>
</b:if>
  • Langkah terahir yaitu simpan template
Cara Membuat Tombol Share atau share button di blogger ini adalah cara paling mudah untuk memasang fitur share / membagikan artikel anda. Share button ini juga bisa anda edit sesuai keeinginan anda, tapi jangan lupa back up templatenya dulu untuk menghindari kesalahan pada proses editing. Oh ya "User Name" diganti user name twitter anda. Untuk blog yang sudah menggunakan read more biasanya bukan menggunakan kode
<div class='post-body entry-content'>
melainkan kode di bawah ini
<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>
Pahami dulu, baru praktekkan cara membuat tombol share atau share button blogger type ini.

Manfaat Tombol Share / Share button blogger

Manfaat tombol share adalah memberikan kesempatan para pengunjung / visitor blog agar mereka bisa berbagi dengan teman atau jaringan mereka melalui fitur share yang tersedia pada blog anda. Tentunya ini sangat penting, secara langsung pengunjung akan mengajak orang lain untuk megunjungi blog anda. Selamat kebanjiran visitor dengan memasang tombol share / share button pada blog anda.

138 comments:

melankolis mengatakan...

alhamdulillah sukses. thanks sob tutornya

BamZ mengatakan...

ok sama2 mz... thankssudah mampir

Fenomania mengatakan...

tanks bos,tutornya,,,ane coba dulu

BamZ mengatakan...

@Fenomania: yup sama2.. thanks juga sudah mau mampir dan meninggalkan komentar disini :)

Er'end mengatakan...

Makasih banayak infonya sob,happy blogging.

BamZ mengatakan...

@Er'end: yua,, thanks sudah bersedia mampir disini sobat :)

kakalushop mengatakan...

nice tutor. thx

BamZ mengatakan...

@kakalushop: iyah sama2 thanks juga sudah mampir

Laras Mays mengatakan...

Terdampar disini mencari cara memasang tombolbshare .Makasih tipsnya sob,happy weekend and happy blogging.

BamZ mengatakan...

@Laras Mays: iyah sama2 mbak... makasih sudah mampir juga :)

Pruproteksi mengatakan...

Many Thnaks Gan langsung ke TKP

BamZ mengatakan...

@Pruproteksi: iyah.. sukses yah :)

Akhsa Nant mengatakan...

nice info kaka...like it...

siap dicoba...:)

BamZ mengatakan...

@Akhsa Nant: silahkan di coba :D semoga sukses

Rizki mengatakan...

thk ya http://mashasih.blogspot.com

BamZ mengatakan...

iyah sama2 thanks juga sudah mampir

Alam Maya mengatakan...

Muantap gan infonya...

mampir ke warung ane gan..

BamZ mengatakan...

@Alam Maya: iyah nanti saya mampir makan2 kkwwwkwkw

Wikarso mengatakan...

Terima kasih infonya. Sangat membantu.

BamZ mengatakan...

@Wikarso: iyah sama :) thanks juga sudah mampir

Ekhyshare mengatakan...

Nice info gan....
follow balik ya...

BamZ mengatakan...

@Ekhyshare: ia sama2

campor bawor mengatakan...

makasi ilmunya mas bro..salam knal...

BamZ mengatakan...

@campor bawor: iyah sama2 mas

andaikupunya mengatakan...

keren mas,udah akau cobak langsung berhasil

ayunakudo mengatakan...

saya sudah coba, tapi ga ada google plus one nya ya?
klo FB, Digg n twitter ada..
salah dimana ya saya? hehehe

BamZ mengatakan...

@andaikupunya: mantab dah :)

BamZ mengatakan...

@ayunakudo: mungkin koneksinya yg lelet mas.. kadang ilang2an itu :0

Edykurniawan27blog mengatakan...

Dicoba dulu ah, mudahan bisa sukses. udah nyoba pasang berdasarkan tutorial dari blog lain tapi kagak berhasil. mudahan yang ini berhasil. makasih gan ilmunya...

BamZ mengatakan...

@Edykurniawan27blog: yup silahkan di coba dulu, kalo berhasil ditunggu laporannya hehe :)

Blogger Tutorials mengatakan...

nice unfo.. saya coba dulu di blog kesayanganku..

BamZ mengatakan...

@Blogger Tutorials: silahkan semoga sukses

thaufan mengatakan...

makasih infonya... sangat membantu loh

BamZ Gz mengatakan...

@thaufan: iyah sama2 :)

sentir mengatakan...

thank's mas bro muantap pool...
simple n' gampang di pasang..

BamZ Gz mengatakan...

@sentir: sama2 mas,, :)

Fumi mengatakan...

cara hapus digg nya gimana ?
kalo bisa digg nya di ganti sama fb like button..
tolonh yaa...

BamZ Gz mengatakan...

@Fumi: tinggal hapus script yang digg :D

Fumi mengatakan...

scrip fb ike untuk di post apa yaa ?

BamZ Gz mengatakan...

@Fumi: <a href='http://www.bamz.us/2011/12/memasang-facebook-like-di-blog.html">Memasang facebook like di blog</a>

Computer Triks mengatakan...

nice info

BamZ Gz mengatakan...

@Computer Triks: iyah sama2

Pecandu Wordpress Dan Blogger mengatakan...

awalnya saya gagal,, ternyata saya slah meletakkan kode yg dikarenakan banyaknya kode entry d tempate saya,, hhe,, terima kasih gan,,

BamZ Gz mengatakan...

@Pecandu Wordpress Dan Blogger: hehe yah sama2 mas :)

Hnd324 mengatakan...

thx gan infonya,,, bermanfaat bgt.. mampir gan ke tempat ane,,

BamZ Gz mengatakan...

@Hnd324: ok sama2 :)

beby mengatakan...

wohoo makasih om tutorialnya :)

Takdir Rizki A. mengatakan...

thanks tutorialnya.
salam kenal tyan-bima.blogspot.com

BamZ Gz mengatakan...

@beby: yup sama2 mas

BamZ Gz mengatakan...

@Takdir Rizki A.: iyah, semoga sukses promosinya

Kartanom mengatakan...

terima kasih mas Bamz...sudah saya coba and sukses,,,nice info

BamZ Gz mengatakan...

yup sama2 mz :D

Hojindo mengatakan...

selalu aja tutorial dari mas Bamz yg berhasil, blogger2 yg laen kok ga bisa kayak gini ya hehehe...mas bamz salam kenal, udah berulang kali pake tutorial mas bamz selalu berhasil... :)

BamZ Gz mengatakan...

hehe sip dah, salam kenal juga mz. :)

Busro Alkarim mengatakan...

Alhamdulilah sobat,,,,ok saya coba and berhasil,,,,makasih banyak,,,salam kenal

BamZ Gz mengatakan...

@Busro Alkarim: yoi mas salam kenal

putra pendawa mengatakan...

terima kasih ilmunya..........

Deny Kurniawan mengatakan...

baca juga yang ini kang buat kontes seo hhihi Baca juga yang ini gan In My Mystery web penuh misteri dan
Uefa euro 2012, bertaruh di 12bet terimakasih

BamZ Gz mengatakan...

sama sama gan

teguh mengatakan...

mantap pak boss,, berhasil horeee

kucing botak mengatakan...

gue di weebly.com sob , dan ngak ngerti caranya nambah google+... tolong bantuannya ? class='post-body entry-content'> kalimat ini kok gak ada ya ???

BamZ Gz mengatakan...

@teguh: selamat bung, :)

BamZ Gz mengatakan...

@kucing botak: waduh q g pernah buka webly sob, so g tau deh gmn kalo disana

griya mebel jepara mengatakan...

toko furniture jepara

www.griyamebel.com

BamZ Gz mengatakan...

sukses dah promosinya

obatdiet mengatakan...

Waww ini pertama kali buat dan berhasil Thanks ya dari http://obatdietmahal.blogspot.com

AM mengatakan...
Komentar ini telah dihapus oleh administrator blog.
Represented by Dictus mengatakan...

bos punyaku bs muncul, tp saat d sentuh mouse pointer g bs d klik, kenapa ya?

Fs-Galery mengatakan...

nice

arie nuerhansyah mengatakan...

sukses terus banngg
infonya bermanfaat

Ian D. Greenwood mengatakan...

coba dulu gan..

kalo ada kendala boleh tanya kan?? hehehe

BamZ Gz mengatakan...

Yup silahkan, harus lebih teliti lagi bir langsung sukses kwkwkwk

Ian D. Greenwood mengatakan...

@BamZ Gz:

Alhamdulillah berhasil gan..

Thanks a lot..

panbran mengatakan...

terimakasih share ilmunya mas bro.
postingan ini sangat membantu.

BamZ Gz mengatakan...

@Ian D. Greenwood: sip dah sukses terus

BamZ Gz mengatakan...

@panbran : ok gan sama sama :)

BRO mengatakan...

mantep artikelnya,,, sangat membantu

terimakasih dari PERALATAN CUCI MOBIL MOTOR

Shared All Artikel mengatakan...

Wah. . Wah . .
Thx Yak Bang . .. ^_^

BamZ Gz mengatakan...

@BRO: sukses promosinya

BamZ Gz mengatakan...

@Shared All Artikel: sama2 bang

Lab Komputer mengatakan...

Sudah Suskes gan..thks artikelx..

mukti bawono wicaksono mengatakan...

thanks ya kawan sangat membantu , sudah saya tes dan berhasil

maju terus dan tetap berkarya ...

sekali lagi thanks.. :D

BamZ Gz mengatakan...

@Lab Komputer: wokeh gan sip

BamZ Gz mengatakan...

@mukti bawono wicaksono: sama sama mas mukti. thanks juga sudah berkunjung

imeulia mengatakan...

makasih mas sharing nya

thanks

BamZ Gz mengatakan...

sama sama mbak apa mas yah. hoohoh

eni mengatakan...

koq gak ketemu ya yg post body itu disebelah mana??? puyeng euy liat kode2nya...

blogger bontang mengatakan...

Berhasil,..terima kasih kak...saya dah berhasil pasang dengan cara yg kakak sebutkan...salam kenal kak

andika djaya suprana mengatakan...

ukey

Boby Aoliya mengatakan...

makasih kang, infonya bermanfaat banget =)

bolali mengatakan...

kok kagak muncul juga y bang..

tolus agal mengatakan...
Komentar ini telah dihapus oleh administrator blog.
pos subtitle mengatakan...
Komentar ini telah dihapus oleh administrator blog.
Nurings mengatakan...

cari class body contentnya susah :(

Yuno Anova mengatakan...

ijin sedot caranya y mas...terus bekarya...happy blogging :)

wahid sahidu mengatakan...

langsung ane coba bang

CyberYogz mengatakan...

salam kenal...

http://duniacyberyogz.blogspot.com

Tifan Dwi Avianto mengatakan...
Komentar ini telah dihapus oleh administrator blog.
hylmandaenk mengatakan...

gue coba engga bisa yah, knpa..?

hylmandaenk mengatakan...
Komentar ini telah dihapus oleh pengarang.
widyanti mengatakan...

Informasi yang penting untuk pengembangan blog. akan sy coba..trims

Nurul Mahmud mengatakan...
Komentar ini telah dihapus oleh administrator blog.
Indonesiaku mengatakan...

T'X atas ilmunya bro, join kembali ya..

Tondiki mengatakan...

Thanks Gan Infonya....

didySinchan mengatakan...

kalau nambahin stumble upon gimana ya?

Cyber88 mengatakan...

Makasih om untuk tutornya berjalan dengan baik sekali

faza bachkim mengatakan...

sookses ane praktekin gan
makasih infonyaa

Software Download Full mengatakan...

Makasi boz uda sharing ....

cara memperbanyak likers fan page mengatakan...

mantap nih info, ni yg lagi saya cari. lngsng ke TKP buat praktek. salam kenal boz

arie5758 mengatakan...

Apakah penampakannya seperti yang ada dibawah artikel blog ini mas?

Ojezz Lastfriend mengatakan...

mantep gan tutorial'y , ijin sedot .. :)
jangan lupa kunjungan baliknya ..

http://ojezzlastfriend.blogspot.com/

Tempe Penyet mengatakan...

Sip,...aku juga berhasil pasang di blog tempe ku kak,...ma kasih ya kak...

Blog Jaja mengatakan...

berhasil banget,

jalz mengatakan...

masih bingung gan @_@ tolong dengan gambar

alam maya mengatakan...

Keren gan...

alam maya mengatakan...

Keren gan...

Logo vector mengatakan...

Makasih tutornya gan, moga blognya tambah sukses

Esia Max-D mengatakan...

Salam Kenal,...saya berhasil pasang dengan tips dari mas bamz,..

muhammad arnaz mengatakan...
Komentar ini telah dihapus oleh administrator blog.
Rebutan Rumah Gratis Semudah 1-2-3 mengatakan...

izin praktek gannn

freddy mengatakan...
Komentar ini telah dihapus oleh administrator blog.
HHRMA mengatakan...

makasi bang... langsung ke TKP aja dah biar ga lupa..
salam kenal

Dede Sulaiman mengatakan...

kok gak jadi gan

Achmad Hadi Kurnia mengatakan...
Komentar ini telah dihapus oleh administrator blog.
Obat herbal mengatakan...

mantap nih gan,,,tp klo aku pasang triks seperti ini knp gagal mulu yakh..kayaknya susah klo cari script misalkan tempatkan dibawah kode anu...pas di cari kodenya ekhh gax ada...

Dede Sulaiman mengatakan...

coba dulu ahhh

Dede Sulaiman mengatakan...
Komentar ini telah dihapus oleh administrator blog.
sri suandari mengatakan...

gan mohon banget untuk di bales, kan setelah saya buat sudah jadi dan sudah bisa, yang bermasalah cuma tombol share facebooknya gan. cuma keliatan gini setelah saya coba share http://www.padmablog.com/2012/08/null gak ngerti saya, sudah coba saya share artikel yg lain masih saja gitu yg muncul solusinya gimana gan? tolong dibales gan

Blogger Bodoh mengatakan...

Mantap ......

Dika mengatakan...

mas kok twitter aja yg nongol

Dika mengatakan...

mas kok twitter aja yg nongol

SONNY MBOZO mengatakan...

Makasih atas Infonya,,Tetapi bagaimana caranya kalau ingin menampilkan ini samping tulisan komentar atau disamping nama yang mempostingnya..?? Mohon penjelasannya..

Bangkit News mengatakan...

mantab blognya kang...

Ajang bola mengatakan...
Komentar ini telah dihapus oleh administrator blog.
Laku.com Belanja Online Grosir Eceran Murah dan Aman mengatakan...


So much of occasions it's very tricky to make with the intention of "perfect steadiness" linking user friendliness and advent.

ca'oni prend mengatakan...

perdana kang

niarosita mengatakan...

cari kode nya susah bgt,,terlalu banyak kode :(

Obat Alami Penyakit Kista mengatakan...

Terimakasih banyak atas informasinya...!
salam kenal dan semoga sukses :D

Posting Komentar

Catatan: Hanya anggota dari blog ini yang dapat mengirim komentar.

◄ Posting Baru Posting Lama ►
 
Exit Di Like yah Sob!! Makasih