Membuat Tombol Share Sosial Media di Blog

Tidak bisa dipungkiri bahwa keberadaan tombol share pada sebuah situs web/blog terasa begitu penting. Dengan menambahkan tombol share pada blog tentunya pengunjung bisa dengan mudah membagikan artikel yang terdapat di blog ke sosial media, selain itu artikel yang telah di share oleh pengunjung juga akan menguntungkan bagi pemilik blog itu sendiri, karena bisa meningkatkan kunjungan/trafik blog.

Ada banyak acara yang bisa digunakan seseorang untuk membuat/menambahkan tombol share sosial media ke sebuah situs web/blog, meskipun sebenarnya secara default jika Anda menggunakan template bawaan blogger tombol share sudah ada, hanya perlu diaktifkan saja. Kendati demikian, jika Anda menginginkan tombol share yang berbeda, maka Anda perlu membuatnya sendiri

Lihat juga :

Saya disini akan sedikit berbagi tentang bagaimana membuat tombol share sosial media di blogspot, disini tombol share yang akan dibuat sangatlah sederhana, tiga tombol share Google _ Facebook dan Twiiter, kemudian tambahan tombol share seperti Pinteres, Digg dll yang juga akan ditambahkan namun akan menggunakan efek show hide.

Karena disini menggunakan efek show hide, maka tentunya diperlukan librari JavaScript/Jquery, umumnya untuk template – template sekarang ini sudah di lengkapi dengan Jquery, kalau belum ada silahkan tambahkan <script src='//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'/> daiatas kode </head>, kemudian juga disini untuk icon – icon sosial medianya menggunakan font awesome, bila di template Anda belum ada silahkan tambahkan <link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css' rel='stylesheet'/> diatas </head> atau dibawah <head>

Membuat Tombol Share Sosial Media di Blog

Masuk ke menu EDIT HTML dan tambahkan kode CSS dibawah ini dibagian susunan CSS yang telah sudah ada pada template Anda, atau bisa dibawah kode <b:skin><![CDATA[/*


/* Tombol Share Sosial Media */
.shareing,.shareroot{position:relative;display:block;font-size:0;margin:auto;text-align:center}
.shareroot{display:block;text-align:center;margin:30px 0 0 0}
.shareroot a.fb,.shareroot a.gp,.shareroot a.tw,.shareroot span.pl{text-decoration:none!important;display:inline-block;margin:0 .5px;font-weight:400;font-size:12px;color:#fff;text-shadow:none;padding:4px 10px;opacity:1;transition:all .3s}
.shareroot a.gp {background:#f20000;}
.shareroot a.fb {background:#516ca4;}
.shareroot a.tw {background:#00baff;}
.shareroot span.pl {background:#ff6600;}
.fbtea,.gotea,.plustea,.twtea{font-size:13px!important;vertical-align:middle}
.shareroot a.fb:hover,.shareroot a.gp:hover,.shareroot a.tw:hover,.shareroot span.pl:hover{color:#fff;opacity:.9}
.shareroot a.fb:active,.shareroot a.gp:active,.shareroot a.tw:active,.shareroot span.pl:active{box-shadow:inset 0 1px 0 rgba(0,0,0,.16)}
span.pl{color:green;cursor:pointer}
#share-menu{display:none}
.dropdown-menu{position:absolute;bottom:100%;right:15%;z-index:99;float:left;min-width:100px;padding:5px 10px;margin:0;font-size:13px;text-align:left;list-style:none;background-color:#fff;-webkit-background-clip:padding-box;background-clip:padding-box;border:1px solid #ddd;border-radius:3px;}
.dropdown-menu li{list-style:none!important;margin:0!important;padding-left:0!important;line-height:1.8em!important}
.dropdown-menu li a{color:#333!important;font-weight:400;display:block}
.dropdown-menu li a:hover{color:#e8554e!important}
ul#share-menu{margin:10px 0;padding:5px 15px}

Tekan CTRL+F lalu cari kode <data:post.body/> kemudian pastekan kode dibawah ini.

<script type='text/javascript'>
//<![CDATA[
var siteurl = window.location.href;
  document.write('<div class="shareroot"><div class="shareing"> \
<a class="gp social-popup" href="https://plus.google.com/share?url=' + siteurl + '" target="_blank" title="Share to Google+">\
    <i class="fa fa-google-plus gotea"></i> Google</a> \
<a class="fb social-popup" href="https://www.facebook.com/sharer/sharer.php?u=' + siteurl + '" target="_blank" title="Share to Facebook">\
    <i class="fa fa-facebook fbtea"></i> Facebook</a> \
<a class="tw social-popup" href="https://twitter.com/intent/tweet?text='+encodeURIComponent(document.title)+'&url='+siteurl+'" target="_blank" title="Share to Twitter">\
    <i class="fa fa-twitter twtea"></i> Twitter</a> \
    <span class="pl" data-target="#share-menu"><i class="fa fa-plus plustea"></i> More</span> \
<ul class="dropdown-menu" id="share-menu"> \
    <li><a class="social-popup" href="javascript:pinIt();">Pinterest</a></li> \
    <li><a class="social-popup" href="//www.digg.com/submit?url=' + siteurl + '" target="_blank" title="Share This On Digg">Digg</a></li> \
    <li><a class="social-popup" href="//www.linkedin.com/shareArticle?mini=true&amp;url=' + siteurl + '" target="_blank" title="Share This On Linkedin">Linkedin</a></li> \
    <li><a class="social-popup" href="//www.stumbleupon.com/submit?url=' + siteurl + '&amp;title='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Stumbleupon">Stumbleupon</a></li> \
    <li><a class="social-popup" href="//delicious.com/post?url=' + siteurl + '&amp;title='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Delicious">Delicious</a></li> \
    <li><a class="social-popup" href="http://www.tumblr.com/share/link?url=' + siteurl + '&name='+encodeURIComponent(document.title)+'&description='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Tumblr">Tumblr</a></li> \
    <li><a class="social-popup" href="http://bufferapp.com/add?text='+encodeURIComponent(document.title)+'&url=' + siteurl + '" target="_blank" title="Share This On BufferApp">BufferApp</a></li> \
    <li><a class="social-popup" href="https://getpocket.com/save?url=' + siteurl + '&title='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Pocket">Pocket</a></li> \
    <li><a class="social-popup" href="http://www.evernote.com/clip.action?url=' + siteurl + '&title='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Evernote">Evernote</a></li> \
    </ul> \
</div><div class="clear"></div></div> \
');
$(document).ready(function(){$(".pl").click(function(){$("#share-menu").slideToggle("fast")})});
function pinIt(){var t=document.createElement("script");t.setAttribute("type","text/javascript"),t.setAttribute("charset","UTF-8"),t.setAttribute("src","https://assets.pinterest.com/js/pinmarklet.js?r="+99999999*Math.random()),document.body.appendChild(t)};
//]]>
</script>
<div class='clear'/>

Terakhir simpan, maka nanti hasilnya akan terlihat seperti pada gambar dibawah ini

Kode <data:post.body/> pada template umumnya lebih dari satu, Pada template yang Saya gunakan terdapat tiga kode <data:post.body/> dan Saya tempelkan script yang berada pada poin dua dibagian kode <data:post.body/> yang terakhir karena supaya tombol share ditampilkan di bagian akhir artikel

Ahmad Zaelani

Seorang laki - laki biasa yang senang duduk sendirian di pinggir pantai, pengagum embun pagi dan lembayung senja, suka blogging, coding dan jogging. Moto hidupnya adalah hidup santai dan simple

6 Responses to "Membuat Tombol Share Sosial Media di Blog"

Lia LathifaApril 15, 2017 at 2:13 PM

tombol share memang harus terlihat mencolok ya, biar yg baca gak bingung kalau mau ngeshare, lumayan kan buat nambahin traffic :)
Maman AchmanApril 15, 2017 at 3:32 PM

Ini yang penting, kadang diabaikan oleh blogger pemula, padahal dengan adanya tombol share medsos akan meningkatkan jumlah trafik yang signifikan bagi sebuah blog...
Djangkaru BumiApril 15, 2017 at 4:08 PM

Tombol share memang penting dan wajib dipasang, agar memudahkan kita untuk menshare kemedia sosial. Tapi entah kenapa, saya lebih suka dengan bawaan blogpsot. walau sebenarnya bukan bawaan blospot hanay saya modifikasi agar mirip seperti punya blogspot. Maklum biar tampil beda.
UnknownApril 17, 2017 at 2:03 PM

Tombol sharenya mirip kaya punya arlina design..
EstudongApril 20, 2017 at 9:33 PM

Di acount adsense saya kok gak ada gambar roda gigi nya to....? mau stel iklan adsense yg hilang jadi gak bisa gan ,(maaf komennya salah tempat)
1. Ahmad ZaelaniApril 21, 2017 at 9:27 AM
  
  masa sih... kalau kamu pake tampilan adsense yang baru,, roda giginya memang tidak ada,,, karena menu - menu tersebut ada dibilah menu samping.... pojok kiri atas..