Memasang Tombol Flat Slide Share Keren Pada Blog

Tampilan 

Memasang Tombol Flat Slide Share Keren Pada Blog - Halo sobat Blog Billy-Art!  Selamat Siang! pada artikel kali ini Blog Billy-Art akan membahas cara memasang tombol share nih sesuai Request sobat blogger. Tombol Share kali ini berbeda loh gan, tombol share yang satu ini Lebih elegan dan keren!  untuk Demonya agan bisa liat gambar diatas. Tertarik untuk membuatnya? langsung aja cekidott.. 

1. Seperti biasa masuk Blogger terlebih dahulu. 

2. Pilih Template > Edit HTML 

3. Cari kode ]]></b:skin> atau </style> (Gunakan CTRL + F untuk memudahkan pencarian) Taruh kode dibawah ini tepat diatas kode ]]></b:skin> atau </style>

/* Slide Share */
#button-count-share {
    width: 100%;
    overflow: hidden;
    background: transparent;
    margin: 0 auto;
    padding: 3px;
}
#button-count-share span {
    float: left;
    position: relative;
    font-size: 13px;
    color: #fff;
    margin: 12px 5px 12px 5px;
}
.button-share {
    background: #dce0e0;
    position: relative;
    display: block;
    float: left;
    height: 40px;
    overflow: hidden;
    width: 140px;
    margin: 4px;
    border-radius: 3px;
}
.ikons {
    display: block;
    float: left;
    position: relative;
    z-index: 3;
    height: 100%;
    vertical-align: top;
    width: 38px;
    text-align: center;
}
.ikons i {
    color: #fff;
    line-height: 33px;
}
.slide-share {
    z-index: 2;
    display: block;
    height: 100%;
    left: 38px;
    position: absolute;
    width: 108px;
    margin: 0;
}
.slide-share p {
    font-family: Verdana;
    font-weight: 400;
    border-left: 1px solid rgba(255,255,255,0.35);
    color: #fff;
    font-size: 14px;
    left: 0;
    position: absolute;
    text-align: center;
    top: 10px;
    width: 100%;
    margin: 0;
}
.button-share .slide-share {
    transition: all 0.4s ease-in-out;
}
.facebook .fb_iframe_widget {
    display: block;
    position: absolute;
    right: 5px;
    top: 0;
    z-index: 1;
}
.twitter iframe {
    left: 50px;
    top: 10px;
    z-index: 1;
    display: block;
    position: absolute;
}
.google #___plusone_0 {
    width: 90px!important;
    top: 10px;
    right: 5px;
    position: absolute;
    display: block;
    z-index: 1;
}
.facebook .ikons,.facebook .slide-share {
    background: #4f79bc;
}
.twitter .ikons,.twitter .slide-share {
    background: #63cef2;
}
.google .ikons,.google .slide-share {
    background: #f36261;
}
.facebook:hover .slide-share,.twitter:hover .slide-share,.google:hover .slide-share {
    left: 180px;
    opacity: 0.6;
}

4. Kemudian, cari kode </head> Lalu letakkan kode dibawah ini tepat diatas kode </head>

<link href='//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/> 

5. Langkah Terakhir cari kode <data:post.body/> lalu letakkan kode dibawah ini tepat dibawah <data:post.body/>

<div class='clear'/><div id='button-count-share'><div class='facebook button-share'><i class='ikons'><i class='icon-facebook icon-large'/></i><div class='slide-share'><p>Share</p></div><a class='fb-share-button' name='fb_share' rel='nofollow' share_url='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' type='button_count'/></div><div class='facebook button-share'><i class='ikons'><i class='icon-facebook icon-large'/></i><div class='slide-share'><p>Like</p></div><div class='fb-like' data-action='like' data-layout='button_count' data-share='false' data-show-faces='false'/></div><div class='google button-share'><i class='ikons'><i class='icon-google-plus icon-large'/></i><div class='slide-share'><p>G+</p></div><div class='g-plusone' data-count='true' data-size='medium' expr:data-href='data:post.url' rel='nofollow'/><script type='text/javascript'>  window.___gcfg = {lang: &#39;id&#39;};   (function() {    var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true;    po.src = &#39;https://apis.google.com/js/plusone.js&#39;;    var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(po, s);  })();</script></div><div class='twitter button-share'><i class='ikons'><i class='icon-twitter icon-large'/></i><div class='slide-share'><p>Tweet</p></div><a class='twitter-share-button' data-count='horizontal' data-related='' data-via='' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' title='Share via Twitter'>Tweet</a><script async='async' src='http://platform.twitter.com/widgets.js' type='text/javascript'/></div><div class='clear'/></div><div class='clear'/>

 Biasanya kode <data:post.body/> ada lebih dari satu kode yang sama. sobat pilih kode <data:post.body/> yang berada paling bawah sendiri.

6. Klik Simpan Template dan lihat hasilnya! 

 Apabila tidak berhasil silahkan sobat bisa comment Dibawah permasalahannya apa atau bisa chat Lewat Pesbuk ane. Terus kunjungi Blog Billy-Art untuk tutorial menarik dan keren lainnya! see u next post! 

Tweet