Inilah Share Button Yang di Gunakan Berminat Template

Inilah Share Button Yang di Gunakan Berminat Template

Berminat adalah nama template blog yang di buat oleh bungfrangki, konsep template ini sepertinya di buat minimalis untuk personal blog. Dari struktur kode yang ada didalam template ini Ada 1 hal yang menarik perhatian saya, hal tersebut adalah share button yang berada tepat dibawah postingan.

Share button Berminat template ini kelihatannya sangat rapi dan enak di pandang mata, nah jika anda tertarik membuatnya, silakan ikuti langkah-langkah di bawah ini.

Share button Berminat template


Kalo anda sering buka dan utak-atik template editor pasti tau dimana kode2 berikut ditempatkan, nah silakan buka template editor dan tambahkan ke 3 kode terpisah ini ke masing-masing posisinya didalam template:

KODE 1

/* 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}

KODE 2

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

KODE 3

<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 template dan lihat hasilnya. Demikian, selamat malam.
Advertisement
Advertisement

Artikel Terkait

CEO sekaligus Content Specialist di trikricky.com. Jangan lupa bahagia.