Cara Membuat Tombol Share Dengan Efek Slide Di Blog

Social Share Buttons Slide Effect. Assalamualaikum Wr. Wb. Jumpa lagi dengan saya di Cara Rosyid. Kali ini saya akan membahas tentang Cara Membuat Tombol Share Dengan Efek Slide Di Blog. Ok sobat karena sekarang lagi hangat-hangatnya dengan pemasangan efek "slide" pada blog, 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.

Jika kamu ingin membuat tampilan tombol share ke SosMed di blog kamu menjadi lebih menarik, lebih keren, atau apalah apalah, maka kamu dapat mencoba tombol sosila share seperti ini. Ok, berikut ini adalah cara membuat dan cara memasangnya di blog Blogspot kalian.

Cara memasang Tombol Share dengan Efek Slide di Blog

Catatan Wajib Di Baca : Sebelum sobat mengikuti langkah langkah ini sebaiknya template sobat di simpan dulu ya atau jika langkah ini gagal sobat bisa menghapus dengan cara hapus kode kode yang sudah sobat pasang di cara ini... sobat maksut kan? kurasa sobat sudah maksut deh....
oke langsung saja ikuti langkah langkah nya di bawah ini :
1. Pertama pastinya Login ke Blogger dan pilih Blog yang ingin anda pasangin widget ini.

2. Etelah itu pergi ke menu template ~>> 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 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. Terakhir cari kode <data:post.body/> lalu letakkan kode dibawah ini tepat di bawah <data:post.body/>,  Biasanya kode <data:post.body/> ada lebih dari satu kode yang sama. Sobat coba saja satu persatu biasanya ada di kode kedua atau ketiga.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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>
<div class='clear'/>
</b:if>

6. Langkah terakhir klik Simpan Template dan lihat hasilnya.


 Mudah kan sob?? apakah sobat masih bingung? klo bingung silahkan sobat berkomentar di bawah ini. Ok sob, kurasa cukup sekian cara membuat tombol share dengan efek slide di Blogspot, semoga artikel kali ini sangat bermanfaat bagi sobat blogger lainnya. Oh ya, efek ini bisa langsung sobat lihat tepat di bawah postingan saya ini.
Wassalamualaikum wr .wb