Cara Memasang Flat Slide Share di Blogger

Cara Memasang Flat Slide Share di Blogger

 sobat blogger, kali ini akan saya bagikan kepada Anda cara pasang flat slide share di blog terbaru. Nah untuk Anda yg ingin blognya tampil modis..silahkan ikuti langkah"-nya di bawah ini:

• Anda cari kode  </head> dan copy kode javascript di bawah ini lalu taruh kode tersebut tepat di atas-nya.

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

• copy kode css di bawah ini dan taruh tepat di atas salah satu kode ini ]]></b:skin> atau</style> (anda pilih salah satu)

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

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

• Silahkan save template Anda, dan lihat hasilnya !!
• selamat mencoba semoga berhasil.