» » Membuat Tombol Share dengan efek slide di blog

langsung saja berikut tutorial dann sample gambarnya:

Sample Gambar: 

Tutorial:
  • Masuk ke dashboard Blog
  • Klik Template > Edit HTML
  • Masukan CSS berikut tepat diatas code ]]></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; }




  • Masukan script berikut 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'/>
    • Letakan script dibawah tepat diatas kode <data.post:body/>, ada beberapa kode <data.post:body/> cari diurutan yang paling bawah. jika sudah ada widget share di template anda silakan anda ganti dengan script dibawah.
    <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'/>

    • save template dan liat hasilnya..
    • untuk memunculkan widget hanya dihalaman posting saja, tambahkan kode berikut di atas script yang di tandai dengan warna merah:

      • <b:if cond='data:blog.pageType == &quot;item&quot;'>
      • lalu kode berikut di bagian akhir script:
      </b:if>
      selesai, semoga berhasil..