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

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

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

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

2. Cari aba-aba </style> kemudian diatasnya pastekan aba-aba 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/AVvXsEjroPTCYEJFYsPCdyLddr8Rhcux8paayKaCFoSWdfreYvjLs8eTF4GYMjbM3-wcPMbVrx_OLV6JyaCoaB3P_n89_fomdiQgdSTP4isdC6VW5gXUpVZzBwyWsJec_TQo7RM3HOzlVpx-ll0/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 aba-aba <data:post.body/> pilih yang kedua) kemudian dibawahnya pastekan aba-aba 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 gampang bukan? kini kalian lihat postingan blog anda apakah sudah terpasang Tombol Share nya atau tidak. Dan jangan lupa untuk mengetes / coba melaksanakan share artike ke Facebook, Twitter Dan G+ untuk menguji apakah sudah berkerja dengan baik atau tidak.

Berbagi :

Anda mungkin menyukai postingan ini :

• 
  Cara Memperbaiki Resolusi Icon Thumbnail Blogspot Yang Buram
• 
  Cara Memasang Peta Google Maps Di Blogspot Maupun Wordpress
• 
  Cara Mendaftarkan Situs Ke Google News Dan Segudang Manfaat Yang Gila-Gilaan
• 
  Cara Menciptakan Iklan Sticky Sidebar Suport Versi Mobile Pada Blogspot