Cara Membuat Share Button Dengan Efek Slide Di Bawah Postingan Blog

Selamat datang agan atau aganwati kali ini saya akan berbagi tips tentang blogging yaitu cara membuat share button dengan efek slide di bawah postingan blog. Widget share pada blog merupakan widget yang menurut saya sangat bermanfaat bagi para blogger, mengapa? Karena blog dengan widget share akan memudahkan pengunjung untuk membagikan artikel yang dimana dianggap penting, selain itu kita juga mendapatkan manfaat lainnya yaitu blog semakin dikenal oleh banyak orang serta secara tidak langsung meningkatkan trafik pengunjung pada blog tersebut.



Dengan tampilan widget share yang cukup sederhana serta cukup menarik dengan efek slide, cukup memudahkan pengunjung dalam membagikan artikel yang dirasa bermanfaat. Widget share tersebut sangatlah mudah digunakan karena pengunjung hanya tinggal menekan tombol share manakah yang ingin digunakan akan langsung menuju ke laman share sehingga sangat mudah digunakan.



Berikut tutorial untuk membuat share button dengan efek slide :

Demo

Langkah

1. Login pada blog anda masing-masing,

2. Pada pilihan menu dashboard pilih menu template,

3. Pilih edit html,

4. Cari kode ]]></b:skin> dengan cara

Ctrl

+

F

,

5. Copy script dibawah ini,

 .kotakRSS1 {background-color: rgb(255, 255, 255); -moz-border-radius: 5px;-webkit-border-radius:5px; border: 1px solid #cccccc; padding:5px 5px; margin: 0 0 5px 0; } .seocips33 { background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8NQ2b1Kw55YYH9TKhQpOZN0oJ4j0ht-ngntTu6MhodMU-YupUGf_IqJ1IPQYd3t9O8eWMHNT-EqRL-ILZnIRDkOdl5lBfg0PGZcYGK53TOFHBEcPNZndoKkcfb2o6ys3BLbxjwp5CzJ0/s1600/maskolis.co.cc.jpg') no-repeat bottom right; } .seocips33 a { background: none;}  .inpseocips33 { border: 1px solid #B9C1C6; width: 170px;height: 16px; font-size: 12px; padding:3px 4px 4px 10px;-moz-border-radius:5px;-webkit-border-radius: 5px;} .sbmtseocips33 {background:#9b9b9b;border: 1px #9b9b9b solid;color:#FFF;font-size:13,5px;font-family:Arial,Tahoma,Verdana;margin-left:5px;padding:3px 5px 3px 5px;font-weight:bold;-moz-border-radius:7px;-webkit-border-radius: 7px;} .cips33subs table {border-collapse: inherit; border: none;} .cips33subs tr { border:0;} .cips33subs td { border:0;} .cips33subs th { border:0;} .clear { clear: both; }
#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;border-bottom:1px solid #4eabff;}
.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;} 

6. Pastekan kode tersebut tepat diatas kode ]]></b:skin>,

7. Selanjutnya cari kode </head> dengan cara

Ctrl

+

F

,

8. Copy script dibawah ini,

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

9. Pastekan script tersebut tepat diatas kode </head>,

10. Setelah itu cari kode <data:post.body/> dengan cara

Ctrl

+

F

,

11. Copy script dibawah ini,

 <!-- Script Artikel Berlangganan with sosmed  -->
<div class='kotakRSS1'>
<div class='seocips33'>
<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'/>
Jika Anda menyukai Artikel di blog ini, Silahkan <a href='http://feeds.feedburner.com/RenaldyWays' target='_blank' title='Berlangganan'>
<b>klik disini</b></a> untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di <a class='sitename' expr:href='data:blog.homepageUrl' expr:title='data:blog.title'><data:blog.title/></a>
<div class='cips33subs'>
<table border='0' cellpadding='0' cellspacing='0' width='100%'>
<tr>
<td align='left' style='padding:5px 0 0 0;' valign='top' width='65%'><form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=diesilver&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' style='border:0px;padding:3px;text-align:center;' target='popupwindow'><div align='left'>
<input class='inpseocips33' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Ketikkan email anda disini&quot;;}' onfocus='if (this.value == &quot;Ketikkan email anda disini&quot;) {this.value = &quot;&quot;;}' type='text' value='Ketikkan email anda disini'/>
<input name='uri' type='hidden' value='RenaldyWays'/>
<input name='title' type='hidden' value='RenaldyWays'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='sbmtseocips33' type='submit' value='Subscribe'/></div>
</form></td><td align='left' style='padding:6px 0 0 0;' valign='top' width='35%'><a href='http://feeds.feedburner.com/RenaldyWays’><img alt='' height='26' src='http://feeds.feedburner.com/~fc/RenaldyWays?bg=9b9b9b&amp;fg=fffffff&amp;anim=0' style='border:0' width='88'/></a></td></tr></table></div></div></div><div class='clear'/>
<!-- End Artikel Berlangganan with sosmed --> 

Jangan lupa ganti ID Feedburner Saya dengan ID Feedburner Anda!


12. Saat akan paste script tersebut , jika terdapat kode <data:post.body/> lebih dari 2 atau lebih maka pastekan script tersebut pada <data:post.body/> paling akhir, letakkan tepat di bawah <data:post.body/>,


13. Terakhir simpan.


Demikian artikel tentang cara membuat share button dengan efek slide di bawah postingan blog semoga artikel ini dapat membantu anda, jangan lupa like, share, dan google+nya serta tinggalakan komentar jika ingin bertanya. Terima kasih.

Share this