Blog Personal tentang tips Blogging dan Internet

Memasang Simple Share Button Di Blog

Jika sebelumnya Saya pernah share artikel sejenis yaitu Membuat Tombol Facebook, Twitter dan Google Plus Valid HTML5, kali ini Saya share artikel serupa yaitu membuat tombol share sederhana dengan penambahan Linkedin dan Pinterest. Tombol share ini sederhana dan tidak menggunakan sama sekali JavaScript, jadi cocok agar loading blog tetap stabil. Langsung saja bagaimana pemasangannya pada blog.

Social Media

Memasang Simple Share Button Di Blog

Pertama silakan Anda simpan CSS ini diatas kode ]]></b:skin> atau </style>.

/*Share Button*/
.sharebutton{display:block;list-style:none;margin:10px 0;padding:0}
.sharebutton a{color:#FFFFFF!important;display:block;text-decoration:none!important}
.sharebutton li{float:left;margin-right:5px;}
.share{font-weight:bold;margin-right:10px;padding:7px 0}
.fb a{background:#306199;padding:7px 15px}
.fb a:hover{background:#244872}
.linkedin a{background:#007bb6;padding:7px 15px}
.linkedin a:hover{background:#005983}
.twitter a{background:#26c4f1;padding:7px 15px}
.twitter a:hover{background:#0eaad6}
.gplus a{background:#e93f2e;padding:7px 15px}
.gplus a:hover{background:#ce2616}
.pinterest a{background:#b81621;padding:7px 15px}
.pinterest a:hover{background:#8a1119}
.pinterest{margin-right:0}
Kemudian simpan kode dibawah ini
<ul class='sharebutton'>
  <li class='share'>Bagikan :</li>
<li class='fb'>
<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url'  onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=700,resizable=0,top=50,left=100&quot;);return false;' target='_blank' title='Share on Facebook'>Facebook</a>
</li>
<li class='linkedin'>
<a expr:href='&quot;http://www.linkedin.com/cws/share?url=&quot; + data:post.url' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=700,resizable=0,top=50,left=100&quot;);return false;' target='_blank' title='Share on Linkedin'>Linkedin</a>
</li>
<li class='twitter'>
<a expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=700,resizable=0,top=50,left=100&quot;);return false;' target='_blank' title='Share on Twitter'>Twitter</a>
</li>
<li class='gplus'>
<a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=700,resizable=0,top=50,left=100&quot;);return false;' target='_blank' title='Share on Google Plus'>Google+</a>
</li>
<li class='pinterest'>
<a href='javascript:void((function(){var%20e=document.createElement(&apos;script&apos;);e.setAttribute(&apos;type&apos; ,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)})());' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=700,resizable=0,top=50,left=100&quot;);return false;' target='_blank' title='Share on Pinterest'>Pinterest</a>
</li>
</ul>
Untuk memasang Simple Share Button pada blog silakan Anda cari dahulu kode seperti dibawah ini.

<b:includable id='post' var='post'>
<article class='post hentry' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
.....
<data:post.body/>
.....
 </article>
</b:includable>
Setelah ditemukan kode diatas silakan Anda simpan kode tombol share tersebut diatas kode <data:post.body/> bila ingin menyimpanya diatas artikel atau simpan dibawah kode <data:post.body/> bila ingin menyimpannya dibawah artikel. Sehingga menjadi kode dibawah ini, perhatikan kode yang Saya tandai.

<b:includable id='post' var='post'>
<article class='post hentry' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
.....
<data:post.body/>
<ul class='sharebutton'>
  <li class='share'>Bagikan :</li>
<li class='fb'>
<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url'  onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=700,resizable=0,top=50,left=100&quot;);return false;' target='_blank' title='Share on Facebook'>Facebook</a>
</li>
<li class='linkedin'>
<a expr:href='&quot;http://www.linkedin.com/cws/share?url=&quot; + data:post.url' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=700,resizable=0,top=50,left=100&quot;);return false;' target='_blank' title='Share on Linkedin'>Linkedin</a>
</li>
<li class='twitter'>
<a expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=700,resizable=0,top=50,left=100&quot;);return false;' target='_blank' title='Share on Twitter'>Twitter</a>
</li>
<li class='gplus'>
<a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=700,resizable=0,top=50,left=100&quot;);return false;' target='_blank' title='Share on Google Plus'>Google+</a>
</li>
<li class='pinterest'>
<a href='javascript:void((function(){var%20e=document.createElement(&apos;script&apos;);e.setAttribute(&apos;type&apos; ,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)})());' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=700,resizable=0,top=50,left=100&quot;);return false;' target='_blank' title='Share on Pinterest'>Pinterest</a>
</li>
</ul>
.....
 </article>
</b:includable>

Berlangganan : Masukan e-mail Anda untuk mendapatkan kiriman artikel terbaru dari Kang Mousir langsung di pesan kotak masuk.

feedburner

40 Komentar untuk "Memasang Simple Share Button Di Blog"

Abu Zaini

Alhamdulillah saya sudah pasang... Oya kang saya pake template akang Sang SEO tapi pas pasang footer kox tampilan mobilenya dempet kagak jelas gitu... Mohon solusi y skalian salam kenal dari Pulau DOllar... Sebelumnya terima kasih udah berbagi...

Adhy Suryadi

Untuk memudahkan pemasangan, kayaknya urlnya coba pakai seperti ini kang
expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url'

santika fadilah

dicoba ya kang, mudah mudahan aku bisa..

Faaza Bil Amri

kang mousir memang mantap .. :D

DATAKOMPUTER SC

minyak kang :wow:

datakomputersc.web.id

LordKiller

Gan, ngerti caranya keluar dari sandbox gak? blog aku kena sandbox, padahal gk pernah copas :|

Irfan Syahputra

Tombol sharenya keren + simple Kang :D Udah saya pasang di blog yang satunya :D

fachri muharam

lumayan lah buat blog download saya biar lebih terkenal

http://bataviashare.blogspot.com

Mbah dinan

simple dan hasilnya lumayan. selain itu valid html5 dan tidak memberatkan blog. makasih kang.

eddy utomo

Kang saya pakai template anda ( Sang Seo ) mau saya pakai untuk main adsense. Apakah template tersebut perlu di update ? kalau perlu biayanya berapa ? tolong hubungi saya di eddystrada@gmail.com. terimakasih

Kang Mousir

Seperti tampilan footernya belum diberi CSS responsive jadi dempet :D

Kang Mousir

Gak Kang, kalau mau responsive tinggal ditambah aja CSS Media Queries :)

Kang Mousir

Makasih Kang Adhy dengan ini jadi lebih simple tanpa JavaScript, sudah Saya ganti Kang. Sekali lagi terima kasih sarannya :D

Kang Mousir

Maaf gan Saya gak bisa bantu bagaimana caranya keluar dari Google Sandbox, soalnya Saya sendiri juga belum tahu dan kalau tahu pasti Saya beri solusinya :D

Kang Mousir

Sip sip, pasti keren pokoknya haha

Kang Mousir

Kalau mau terkenal harus banyak - banyak promosi gan, kalau ini gak berpengaruh kali hehe

Kang Mousir

Pasti dong kan tidak menggunakan JavaScript hehe

Kang Mousir

Template tersebut sudah support Google AdSense kok jadi tidak perlu ada yang dirubah lagi atau update :)

Aran Setiadi

kang menurut saya kalau widget ini kurang rapi di blog. apalagi sama blog saya.. kurang balance banget... tapi sip kang artikelnya

Kang Ariq

kang saya pengguna template Sang seo, mau tanya bagaimana caranya membuat widget di bagian paling bawah. seperti yang punya kang mousir yang artikel terbaru, artikel acak, sama widget blogger.

di tunggu jawabannya kang terima kasih

Andrie Danang Kurniawan

komentar pada mantap tapi kok gak pada sadar bagian ini http://kang-mousir.blogspot.com/2014/08/koleksi-widget-blog-keren-ala-kang-mousir.html di ganti apa masak ya share muncul nya malah itu

Jose Ward

terus link kang mousir itu di hapus atau gimana gan ??

Kang Mousir

Sudah diperbaiki, mohon maaf ada kesalahan dalam penulisan

Kang Mousir

Ada kesalahan dalam penulisan, silakan dicoba lagi :)

santika fadilah

oot ya kang yah, aku ingin kotak pencariannya itu dipindah kayak template ini, (makasih andai mau jawab)

Muslih Maulana

anu om, pas saya klik share button fb kenapa page not found ya ? apa karena saya sebelumnya memasukan facebook komentar ?

Kang Mousir

Bisa diperjelas lagi error nya seperti apa, kalau bisa screen shoot :)

Joe Kusanagi

keren kang...ane coba bisa..thanks kang...

sumartana wayan

trims gan saya sudah coba,, tapi kenapa kadang-kadang saat saya coba klik salah satu buttonnya malah yang keluar page iklan gan,, bukan di arahkan ke page share site nya,, tolong dibantu gan,, terimakasih

hasan wirayuda

kang saya mau nanyak blog saya masih ada tombol share bawaan blogger jadi untuk ganti tombol share yang lain tidak bisa tolong solusinya

Cepi Ali Anwari

Bagus juga kang buat ane coba.. Izin pake ilmunya.. :D

Bek t

keren gan, saya coba terapin dulu,...
Makasih sebelumnya,..

Silakan berkomentar sesuai dengan topik. Jangan menyisipkan link pada komentar dan jangan sampai komentar Anda masuk komentar SPAM.

Jangan salahkan Saya bila komentar Anda dihapus !

Klik emoticon : :) :D :( :-o @@, :s :wow: 8) :x :P :| ;) :lol: :oops: :cry: :evil: :twisted: :roll: :!: :?: :idea: :arrow: :mrgreen: :-d