Iyan Blog |
Tombol Share merupakan salah satu unsur penting bagi blog. dan kali ini saya akan membagikan satu tutorial untuk membuat tombol share yang lengkap dan simple. Tombol share kali ini sangat cocok bagi kalian yang menggunakan template simple dan minimalis, dan juga tidak memakan banyak tempat.
Tombol Share sendiri bermanfaat sebagaimana namanya, yaitu berfungsi membagikan artikel-artikel yang dirasa penting ke sosial media. Sosial media yang dimaksud adalah seperti Facebook, twitter, google+, linkedin, tumblr, dan lain-lain. tombol share ini akan diletakkan di bagian bawah postingan kalian.
Baca Juga: Cara Agar Post/Artikel Cepat Terindex Google
Screenshoot Tombol Share Simple Untuk Blog
Untuk cara penerapannya kamu bisa ikuti langkah dibawah ini.
1. Log in ke blogger > Template > Edit HTML.
2. Cari kode <data:post.body/>, pilih yang kedua.
3. Letakkan kode dibawah ini setelah kode <data:post.body/>.
<b:if cond='data:blog.pageType == "item"'>
<div style='clear:both;'/>
<h2 class='sharetitle'>Share this </h2>
<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 gotea"></i> Google</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 fbtea"></i> Facebook</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 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 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&url=' + siteurl + '" target="_blank" title="Share This On Linkedin">Linkedin</a></li> \
<li><a href="//www.stumbleupon.com/submit?url=' + siteurl + '&title='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Stumbleupon">Stumbleupon</a></li> \
<li><a href="//delicious.com/post?url=' + siteurl + '&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> \
</ul> \
</div><div class="clear"></div></div> \
');
$(document).ready(function(){$(".pl").click(function(){$("#share-menu").slideToggle("fast")})});
//]]>
</script></b:if>
4. Letakkan kode dibawah ini sebelum kode ]]></b:skin> atau </style>
/* Share Button */
h2.sharetitle{font-size:16px;font-weight:700;margin-top:20px;}
.share,.sharethis{position:relative;display:inline-block;}
.sharethis{margin-bottom:20px;}
.sharethis a.fb,.sharethis a.gp,.sharethis a.tw,.sharethis span.pl{text-decoration:none!important;display:inline-block;margin:0 5px 5px 0;font-weight:400;border-radius:3px;color:#888;background:#fdfdfd;border:1px solid #e6e6e6;box-shadow:0 1px 0 rgba(0,0,0,.08);text-shadow:none;line-height:23px;padding:1px 8px 0 5px;transition:all .3s}
.fbtea,.gotea,.plustea,.twtea{font-size:13px!important;vertical-align:middle}
.sharethis a.fb:hover,.sharethis a.gp:hover,.sharethis a.tw:hover,.sharethis span.pl:hover{color:#444;background:#fff;border-color:#bbb}
.sharethis a.fb:active,.sharethis a.gp:active,.sharethis a.tw:active,.sharethis 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;top:100%;right:5px;z-index:99;float:left;min-width:100px;padding:5px 10px;margin:0!important;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;box-shadow:0 6px 12px rgba(0,0,0,.12);}
.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:0;padding:5px 15px}
5. Tambahkan jquery ini sebelum kode </head> *abaikan jika sudah ada
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'/>
6. Simpan Template
Sekian artike kali ini
Cara Membuat Tombol Share Simple Untuk Blog semoga bermanfaat, dan terima kasih.
