Cara Pasang Widget Share dengan Efek Slide

 

Widget Share dengan Efek Slide ChekMad dapatkan hasil dari blog walking malam ini dan sudah di lakukan uji coba dan berhasil. Sebelumnya blog Chekmad juga pernah share widget menarik dari Sassy (Bisa Baca disini ).

Kali ini ChekMad coba berbagi kembali Widget Share yang juga menarik menurut ChekMad, dan semoga juga menarik Buat para sobat bloger semua.

Mari kita Intip bagaimana cara pasang Widget Share dengan Efek Slide ..!!!

Cara memasang Tombol Share dengan Efek Slide di Blog

1. Login ke Blogger dan pilih Blog yang ingin anda pasangin widget ini.
2. Klik Template » Edit HTML
3. Berikutnya silahkan caari 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'/>

4. Kemudian cari kode <b:if cond='data:blog.pageType == &quot;item&quot;'>
lalu letakkan kode dibawah ini tepat dibawah <data:post.body/>,  Biasanya kode <data:post.body/> ada lebih dari satu kode yang sama. sobat pilih kode <data:post.body/>. Sobat coba saja satu persatu biasanya ada di kode kedua atau ketiga. Oh iya jika sudah ada widget share di template anda silahkan hapus dan ganti dengan kode html di bawah ini..

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

Terakhir silahkanTambahkan kode CSS berikut ini diatas kode ]]></b:skin> atau </style>

#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;
}

Selamat Mencoba