Cara Membuat TombolShare Media Sosial Responsive Tanpa Java Script – obat pasti sudah tahu bahwa Java Script adalah penyumbang Berat loading pada blog terbanyak, sehingga semakin banyak sobat menggunakan Javascript di blog semakin lambat juga loading blog sobat. tidak percaya?, silahkan sobat coba sendiri, silahkan sobat tanya pakar Web design, maka sobat akan mendapatkan jawaban yang serupa seperti yang saja berikan ini.

Baca juga : Cara Memperbaiki Kode Google Tag Manager Yang Error

Maka dari itu kali ini saya akan memberikan tutorial mengenai cara membuat Shosial share Buton tapa Java Script, yang pastinya tidak akan memberatkan Template blog sobat. kenapa demikian?, karena widget ini menggunakan CSS dan HTML 5 yang sangat Responsive di blog sobat. terlebih lagi Sahe button media sosial ini sangat lah penting dan menjadi salah satu komponen yang harus ada di blog sobat. fungsi Button ini adalah memudahkan pengunjung untuk merekomendasikan atau membagikan sebuah artikel kepada pengguna media sosial seperti Facebook, twitter dan google Plus. Bagi sobat yang tertarik mencobanya atau tertarik untuk mempelajari nya silahkan sobat simak cara membuat berikut ini.

1. buka Blog Sobat > masuk menu “Template” > Edit HTML > Salin kode di bawah ini dan letakkan di atas kode ]]></b:skin> atau </Style>
]]></b:skin> atau </Style>

/* share button ala Bungfrangki.com */
#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/AVvXsEgxyIw4lATPXjPSymlkc2yuz-CZ3gliBiXVxYz58LwpnpCi3UVDoP3FTm0OSZTU6xIdIDiBa6gp12PsHY3qv-nLtbP2iSZ41kJQ8vY6wQlXB4FhCxwoWUlg_kLdzjAXmooTa7I3HeH1np4/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}}

2. cari kode <data:post.body/> ( cari yang ke dua) lalu letakkan kode ini tepat di bawah nya.

<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>

3. Terakhir simpan Template dan Lihat hasilnya. Saya yakin jika sobat mengikuti tutorial di atas dengan benar maka Tombol share button Media sosial sudah terpasang dengan baik di bawah postingan blog sobat.

Baca juga : Cara Paling Ampuh Mempercepat Loading Dengan Lazy Load

Demikianlah tutorial mengenai Cara Membuat Tombol Share Media Sosial Responsive Tanpa JavaScript, yang haru di ketahui. jika sobat ada masalah atau sudah berhasil jangan lupa untuk mengisi Kotak komentar di bawah ini. Semoga artikel ini dapat menjadi ilmu yang bermanfaat.