Memasang Simple Share Button Di Blog

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.

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>

Artikel Terkait

Komentar

Aunillah
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...
Kang Mousir
Seperti tampilan footernya belum diberi CSS responsive jadi dempet :D
Unknown
Kang Mousir
Gak Kang, kalau mau responsive tinggal ditambah aja CSS Media Queries :)
Adhy Suryadi
Untuk memudahkan pemasangan, kayaknya urlnya coba pakai seperti ini kang
expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url'
Kang Mousir
Makasih Kang Adhy dengan ini jadi lebih simple tanpa JavaScript, sudah Saya ganti Kang. Sekali lagi terima kasih sarannya :D
santika fadilah
dicoba ya kang, mudah mudahan aku bisa..
Anonim
kang mousir memang mantap .. :D
datakomputersc
minyak kang :wow:

datakomputersc.web.id
LordKiller
Gan, ngerti caranya keluar dari sandbox gak? blog aku kena sandbox, padahal gk pernah copas :|
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
Irfan Syahputra
Tombol sharenya keren + simple Kang :D Udah saya pasang di blog yang satunya :D
Kang Mousir
Sip sip, pasti keren pokoknya haha
Unknown
lumayan lah buat blog download saya biar lebih terkenal

http://bataviashare.blogspot.com
Kang Mousir
Kalau mau terkenal harus banyak - banyak promosi gan, kalau ini gak berpengaruh kali hehe
Anonim
simple dan hasilnya lumayan. selain itu valid html5 dan tidak memberatkan blog. makasih kang.
Kang Mousir
Pasti dong kan tidak menggunakan JavaScript hehe
eddy
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
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
Unknown
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
test
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
Kang Mousir
Sudah diperbaiki, mohon maaf ada kesalahan dalam penulisan
Unknown
terus link kang mousir itu di hapus atau gimana gan ??
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)
Anonim
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 :)
Achmad Jauhari
keren kang...ane coba bisa..thanks kang...
Unknown
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
Unknown
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
Anonim
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 !

Batal