Cara Memasang Tombol Share Keren Ala Berminat di Bawah Postingan Blogspot

Table of Contents

Share button atau tombol share adalah sebuah tombol yang berfungsi untuk membagikan sebuah artikel/konten ke sosial media yang diinginkan contoh media sosial facebook, google plus, twitter, digg, tumblr serta media sosial lainnya dengan cara mengklik salah satu tombol dengan berupa icon media sosial diantaranya.

Membuat tombol ini dan memasang share button di blog sebenarnya sangat penting untuk blog karena tombol ini adalah salah satu langkah untuk memajukan blog dan meningkatkan trafik blog. Mengapa demikian? Dengan memasang tombol share di bawah postingan ini ketika pengunjung hendak mengunjungi blog kita kemudian menyukai artikel pada blog anda maka tombol ini mampu membuat pengunjung untuk membagikan artikel blog ke teman-temannya yang barangkali artikel tersebut dapat membantu temannya dalam menemukan solusi dan mengatasi masalahnya.

Pada postingan kali ini saya akan memberikan tutorial bagaimana cara memasang tombol sosial share ala berminat template blogger yang dibuat oleh mas Bungfrangki. Tombol share ini akan memiliki desain unik dan menarik dimana pada tombol ini masing-masing akan memiliki warna yang berbeda misalkan facebook berwarna biru laut sedangkan twitter akan berwarna biru langit. Untuk lebih detailnya anda bisa melihat gambar yang ada di bawah ini.

Nantinya tombol share ini akan terletak di bawah postingan blog anda. Nah apabila anda ingin menerapkan sosial share button pada blogspot anda maka ikuti langkah-langkahnya pada berikut ini.

Cara Memasang Tombol Share Keren Ala Berminat di Blogspot

Langkah #1. Silahkan anda login dan masuk ke dalam dashboard blogger anda. Setelah itu masuk ke bagian menu Template > Edit HTML.

Langkah #2. Tambahkan kode css dibawah ini tepat dibawah kode </b:skin> atau kode </style>.

CSS/* share this */.share,h4.sharetitle{display:block;float:left;position:relative}h4.sharetitle{width:80px;text-transform:uppercase;font-size:15px;padding:0;margin-top:3px;margin-right:25px;text-align:center;font-weight:bold;color:#777}h4.sharetitle:before{content:"f1e0";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;font-size:17px;padding:2px 30px 0;text-align:center;}.sharethis{position:relative;margin:0}.share{position:relative;margin:0;}.share a,span.pl{display:inline-block;color:#fff;padding:12px 0 10px;width:85px;text-align:center;margin-right:8px;margin-bottom:8px;border-radius:5px;}.share a:hover,span.pl:hover{box-shadow:0 0 10px rgba(0,0,0,.3)}.share i,span.pl i {font-size:25px;padding:0;margin:0}a.gp{background:#de3425}a.fb{background:#395796}a.tw{background:#4cb0ea}a.pr{background:#0a7111}a.pin{background:#ce2127}span.pl{background:#ff9d40;cursor:pointer}#share-menu{display:none}.dropdown-menu{position: absolute;top: 100%;right:2px;z-index:9999;float: left;padding:0;margin:5px 0 0;font-size: 14px;list-style: none;-webkit-background-clip: padding-box;background-clip: padding-box}ul.dropdown-menu{margin:10px 0 0 !important;background-color:#fff;box-shadow: 0 1px 4px rgba(0,0,0,.6);border-radius:2px}.dropdown-menu li{list-style: none!important;margin: 0!important;padding:0 !important}.dropdown-menu li a{clear:both;margin:0 !important;color:#444!important;font-weight:400;display:block;padding:5px 20px !important;border-radius:0 !important}.dropdown-menu li a:hover{background:#2b427d!important;color:#fff !important}

Langkah #3. Carilah kode sama persis seperti kode ini <div class=’post-footer-line post-footer-line-1′> kemudian tambahkan kode di bawah ini tepat dibawah kode tersebut.

HTML<h4 class='sharetitle'>Shares</h4><script type='text/javascript'>//<![CDATA[var siteurl = window.location.href;  document.write('<div class="sharethis"><div class="share"> <a class="gp" href="https://plus.google.com/share?url=' + siteurl + '" target="_blank" title="Share to Google+">    <i class="fa fa-google-plus"></i></a> <a class="fb" href="https://www.facebook.com/sharer/sharer.php?u=' + siteurl + '" target="_blank" title="Share to Facebook">    <i class="fa fa-facebook"></i></a> <a class="tw" href="https://twitter.com/intent/tweet?text='+encodeURIComponent(document.title)+'&url='+siteurl+'" target="_blank" title="Share to Twitter">    <i class="fa fa-twitter"></i></a> <a class="pin" href="http://pinterest.com/pin/create/button/?source_url=' + siteurl + '" target="_blank" title="Share to Pinterest">    <i class="fa fa-pinterest"></i></a>     <span class="pl" id="pl" onclick="showhide()" title="More Share"><i class="fa fa-plus"></i></span> <ul class="dropdown-menu" id="share-menu">     <li><a href="//www.digg.com/submit?url=' + siteurl + '" target="_blank" title="Share This On Digg">Digg</a></li>     <li><a href="//www.linkedin.com/shareArticle?mini=true&amp;url=' + siteurl + '" target="_blank" title="Share This On Linkedin">Linkedin</a></li>     <li><a href="//www.stumbleupon.com/submit?url=' + siteurl + '&amp;title='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Stumbleupon">Stumbleupon</a></li>     <li><a href="//delicious.com/post?url=' + siteurl + '&amp;title='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Delicious">Delicious</a></li>     <li><a 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 href="http://bufferapp.com/add?text='+encodeURIComponent(document.title)+'&url=' + siteurl + '" target="_blank" title="Share This On BufferApp">BufferApp</a></li>     <li><a href="https://getpocket.com/save?url=' + siteurl + '&title='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Pocket">Pocket</a></li>     <li><a href="http://www.evernote.com/clip.action?url=' + siteurl + '&title='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Evernote">Evernote</a></li>     <li><a href="http://reddit.com/submit?url=' + siteurl + '&title='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Reddit">Reddit</a></li>     </ul> </div><div class="clear"></div></div> ');//]]></script>

Langkah #4. Tambahkan juga kode script dibawah ini tepat diatas kode </body>.

Javascript<script type='text/javascript'>//<![CDATA[function showhide(){var e=document.getElementById("share-menu");"block"!==e.style.display?e.style.display="block":e.style.display="none"};//]]></script>

Simpan dan lihatlah hasilnya.

Demikianlah bagaimana cara membuat dan memasang tombol bagikan di blog seperti tombol share berminat template blogger. Semoga bermanfaat Terimakasih.