Cara Membuat Tombol Share dengan Efek Slide di Blog

Gaya "slide" sekarang sering menjadi pilihan untuk membuat blog menjadi lebih menarik. maka berikut ini saya akan membagikan tentang cara Membuat Tombol Share dengan Efek Slide di Blog, jadi tombol share ke jejaring sosial ini ada efek slidenya.

Demonya dapat anda lihat di template simplecips yang telah dibagikan sebelunya. Ok Mungkin saja sobat tertarik untuk memasang tombol share seperti ini biar templatenya lebih terlihat keren. Langsung saja berikut ini adalah kode-kodenya, dan cara memasangnya di blog sobat.

DEMO

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. Tambahkan 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;
}

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

5. Terakhir cari kode <data:post.body/> 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'/>

6. Simpan Template dan lihat hasinya,

Update.

Untuk memunculkan widget hanya di halaman posting, Pada kode No.5 diatas silahkan tambahkan kode berikut ini dan letakan paling atas:

<b:if cond='data:blog.pageType == &quot;item&quot;'>dan tambahkan kode dibawah ini di paling bawah kode No.5.</b:if>

Ok sobat bagaimana hasilnya? nah mudah-mudahan berhasil. Sekian tutorial yang dapat dibagikan saat ini dan semoga bermanfaat.

sumber artikel