Cara Membuat Tombol Share Facebook, Twitter Dan G+ Tanpa Javascript Di Blogspot

Baca Juga

Dipostingan kali ini Dukuntekno akan memberikan tutorial cara memasang tombol Share Facebook, Twitter Dan G+ Tanpa Javascript Di postingan Blogspot. Karena ini tanpa javascript maka ini akan membuat halaman blogspot kamu tetap ringan, selain itu juga responsif yang artinya bisa tampil baik diberbagai ukuran layar seperti layar Monitor maupun layar Smartphone.

Selain responsif, skrip kode tombol share ini juga sudah valid HTML5 dan CSS3 jadi kalian tidak perlu khawatir jika nantinya skrip ini akan error. Untuk pemasanganya juga cukup mudah bahkan bagi yang baru mengenal HTML di editor theme blogspot, berikut tutorialnya.

Tutorial Memasang Tombol Share Facebook, Twitter Dan G+ Tanpa Javascript Di Blogspot
1. Buka blog anda lalu buka tema dan edit HTML.

2. Cari kode </style> lalu diatasnya pastekan kode berikut:
#share-this{overflow:hidden;margin:10px 18px;line-height:1.4em}#share-this a{float:left;display:block;color:#fff;padding:10px 14px;text-align:center;margin:0 3px 3px;font-size:12px}#share-this a.this-fb{background:#395796;}#share-this a.this-tw{background:#4cb0ea;}#share-this a.this-gp{background:#de3425;width:44px;padding:0;text-align:center;height:41px;overflow:hidden;}#share-this a.this-gp i{margin:5px 0 0;text-align:center;padding:0}#share-this a.this-fb:hover,#share-this a.this-tw:hover,#share-this a.this-gp:hover {opacity:.9}#share-this i {margin-right:12px}<br /> .this-fb i,.this-tw i,.this-gp i{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrnznYBHANnXJ2c4N0LmDXkuxJl8Mpqz-_ge8zVEp-10TlcjqS-5MikJSCOCntd32h-DUx-IJ-tJp24n0oW1AKqlAGQC-uutoDkuzriwNybC6eYK1dgdtvYERuEUMRh9L3uSeJyRdWu-E/s1600/sosmed22.png) no-repeat;width:22px; height:18px; display:inline-block;vertical-align:text-top;margin-top:-6px;text-align:center}.gp-del{display:none}<br /> .this-fb i{background-position:0 -100px;margin-top:-4px}.this-tw i{background-position:0 -150px}.this-gp i{background-position:0 -200px}.notpay {font-size:13px;line-height: 22px;border:2px #df3f2a solid;padding:3px 15px;text-align:center;margin:0 0 25px;}.pay {font-size:13px;line-height: 22px;border:2px #5973b0 solid;padding:3px 15px;text-align:center;margin:0 0 25px;}<br /> @media screen and (max-width:414px){#share-this{margin:10px 15px}.gp-del{display:block}#share-this a{min-width:100%;padding:0;text-align:center !important;height:45px;line-height:45px;margin:0 auto 3px !important}#share-this a.this-gp i, #share-this i{display:none}#share-this a.this-gp{height:auto;margin:0 auto;padding:0}}
3. Cari kode <data:post.body/>  (Biasanya ada 3 kode <data:post.body/> pilih yang kedua) lalu dibawahnya pastekan kode berikut:
<div id='share-this'> <a class='this-fb' expr:href='"http://www.facebook.com/sharer.php?u=" + data:blog.url' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=500,resizable=0,top=50,left=100");return false;' rel='nofollow' target='_blank' title='Facebook'><i class='fb-1'/>Share on Facebook</a><a class='this-tw' expr:href='"http://www.blogger.com/share-post.g?blogID=" + data:blog.blogId + "&postID="+ data:post.id + "&target=twitter"' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=500,resizable=0,top=50,left=100");return false;' rel='nofollow' target='_blank' title='Twitter'><i class='tw-2'/>Tweet on Twitter</a><a class='this-gp' expr:href='"https://plus.google.com/share?url=" + data:blog.url' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=500,resizable=0,top=50,left=100");return false;' rel='nofollow' target='_blank' title='Google+'><i class='gp-2'/><span class='gp-del'>Plus on Google+</span></a></div>
4. Save Template.

Nah cara masangnya sangat mudah bukan? sekarang kalian lihat postingan blog anda apakah sudah terpasang Tombol Share nya atau tidak. Dan jangan lupa untuk mengetes / coba melakukan share artike ke Facebook, Twitter Dan G+ untuk menguji apakah sudah berkerja dengan baik atau tidak.

Share on Facebook