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
  1. 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}
    
    
  2. 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'/>
  3. Terakhir simpan, maka nanti hasilnya akan terlihat seperti pada gambar dibawah ini
    tombol share yang sudah jadi

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


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

  1. tombol share memang harus terlihat mencolok ya, biar yg baca gak bingung kalau mau ngeshare, lumayan kan buat nambahin traffic :)

    ReplyDelete
  2. Ini yang penting, kadang diabaikan oleh blogger pemula, padahal dengan adanya tombol share medsos akan meningkatkan jumlah trafik yang signifikan bagi sebuah blog...

    ReplyDelete
  3. 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.

    ReplyDelete
  4. Tombol sharenya mirip kaya punya arlina design..

    ReplyDelete
  5. 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)

    ReplyDelete
    Replies
    1. 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..

      Delete

Komentar yang Anda kirim akan terlebih dahulu di moderasi oleh Admin