Cara membuat social share button tanpa javascript di blog

Tutorial blog yang akan mimin bagikan kali ini mengenai cara membuat social button tanpa Javascript di blog. Nah widget social button ini sangat full responsive dan tentunya social buttonnya tidak mengandung javascript jadi untuk anda yang menggunakan tombol share ini akan lebih cepat dan tampilannya juga cukup menarik.

Selain itu widget ini juga sudah di setting sedemikian rupa mulai dari segi responsive sampai dengan valid HTML5 dan CSS3. Sehingga nantinya widget ini tidak akan mengganggu pikiran anda mengenai terjadi error di blog yang dikelola.

Widget tombol share ini juga sangat cocok diletakan dimana pun keingginan anda, diletakan di atas boleh dan diletakan di bawah juga pastinya keren sob. Widget ini juga sudah banyak sekali yang memakai karena memang social button ini sangat ringan banget guys.

Oke pada berikut ini adalah langkah bagaiamana cara membuat tombol share responsive, simple dan sangat ringan untuk blog.

Cara membuat widget tombol share di blog tanpa menggunakan javascript

1. Seperti biasanya langkah pertama login dan masuk ke dalam dashboard blogger anda.

2. Tambahkan kode di bawah ini tepat di atas kode ]]</b:skin> atau </style>.

/* share button*/
#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}
.this-fb i,.this-tw i,.this-gp i{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAsAXJFE8_vM2WRDLzDR3d97W-yuFe-jUl_I76jEbGvXhOaq8KHTcV_Z4DcatA-obKKnOgFyEPtXwEQ57UJ5EoUJdOj2rbLkvCjXU98X2Gsa6pwTueJ1BTE_mmnWGnIGKRqznIv5ZqNTA/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}
.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;}
@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. Setelah itu cari kode persis seperti ini <data:post.body> (kode kedua) kemudian letakan kode di bawah ini tepat di bawah kode tersebut.

<div id='share-this'>
<a class='this-fb' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=500,resizable=0,top=50,left=100&quot;);return false;' rel='nofollow' target='_blank' title='Facebook'><i class='fb-1'/>Share on Facebook</a><a class='this-tw' expr:href='&quot;http://www.blogger.com/share-post.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot;+ data:post.id + &quot;&amp;amp;target=twitter&quot;' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=500,resizable=0,top=50,left=100&quot;);return false;' rel='nofollow' target='_blank' title='Twitter'><i class='tw-2'/>Tweet on Twitter</a><a class='this-gp' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:blog.url' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=500,resizable=0,top=50,left=100&quot;);return false;' rel='nofollow' target='_blank' title='Google+'><i class='gp-2'/><span class='gp-del'>Plus on Google+</span></a></div>

4. Simpan template anda dan lihat hasilnya.

Demikianlah bagaiamana cara membuat social share button tanpa javascript.