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>

Tentang Penulis

Kang Mousir

Seorang blogger sejak tahun 2012 sampai sekarang. Saya hanyalah orang biasa yang senang dengan blog dan membagikan tulisan lewat media blog, karena itu saya membangun Blog Kang Mousir.

Facebook | Twitter | Instagram

  • 0 Artikel
  • 0 Komentar

Artikel Terkait

Komentar

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...
Kang Mousir
Seperti tampilan footernya belum diberi CSS responsive jadi dempet :D
Kang Kudhen
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..
Kang Mousir
Ok, silakan pasti bisa kok :D
Anonim
kang mousir memang mantap .. :D
DATAKOMPUTER SC
minyak kang :wow:

datakomputersc.web.id
Kang Mousir
Sudah habis minyak nya hehe
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
fachri muharam
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 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
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
Kang Mousir
Sudah diperbaiki, mohon maaf ada kesalahan dalam penulisan
Jose Ward
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 :)
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,..
Alg070
keren... nuhun kaangg:)

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