Cara Memasang Flat Slide Share Button Di Blog

Cara Memasang Flat Slide Share Button Di Blog | Hai sobat. Setelah kemarin saya memuat postingan Download Futurama Font, pada kesempatan kali ini saya akan share Cara Memasang Flat Slide Share Button Di Blog. Untuk previewnya bisa sobat lihat gambar di atas. Efek slide akan muncul ketika tombol share tersebut disentuh dengan mouse dan akan menutup lagi ketika mouse dipindahkan. Bagi yang berminat menggunakan Flat Slide Share Button di blog kesayangannya silahkan membaca postingan ini sampai selesai. Kalau pun nggak, juga harus tetap baca sampai selesai.. Hehehe

Nah, ini dia Cara Memasang Flat Slide Share Button Di Blog tersebut:

1. Silahkan sobat tambahkan kode css berikut tepat di atas ]></b:skin>
   

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

2. Lalu tambahkan script di bawah ini tepat di atas </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'/>
   

3. Terakhir, tambahkan kode ini di atas/sebelum kode <data:post.body/> jika sobat bermaksud meletakannya di akhir setiap postingan. Untuk penempatannya silahkan sobat sesuaikan dengan selera masing-masing ya. :)
   

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

Setelah semua kode tersebut ditempatkan di tempat nya masing-masing, silahkan sobat cek apakah sudah oke semua, kalau semuanya sobat lakukan dengan benar, pasti tombol sharenya akan muncul pada halaman blog sobat.

Oke sobat, sampai disini dulu ya Tutorial Blog tentang Cara Memasang Flat Slide Share Button Di Blog kali ini. Semoga bermanfaat ya sobat. Jangan lupa isi form komentarnya ya sobat. biar tambah semangat lagi postingnya. :) Silahkan baca postingan lain mengenai Tutorial Blog lainnya disini.