Floating Social Share Buttons for Blogger

Tutorial ini akan membantu Anda dalam menambahkan tombol share Sosial di bawah setiap posting blog Anda. Widget ringan dalam ukuran dan terlihat elegan. Di setiap pos setelah bergulir widget akan muncul di bagian bawah bawah layar. Widget berisi empat tombol berbagi - Facebook, Twitter, Google+, LinkedIn. Ada tombol close juga untuk menutup tombol share.

Adding the Marker

Untuk menambahkan widget ini Anda harus pergi ke
1. Blogger
2. Template
3. Edit HTML
4. Cari Kode <data:post.body/>
dan paste kode di bawah ini diletakan tepat di bawah <data:post.body/>

CATATAN

Mungkin ada lebih dari satu <data:post.body/> jadi pastikan bahwa Anda telah memilih kode yang benar.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
 <div id='md-active-share-comment-marker'/>
</b:if> 

Adding the JavaScript Editor

Kemudian cari kode </head> dan letakan kode di bawah ini tepat di atas kode </head>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
 <script src='https://dl.dropboxusercontent.com/u/76401970/All%20Blogger%20Tricks/abt-floating-share.js' type='text/javascript'/>
 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
</b:if>

Adding the CSS Editor

Kemudian cari kode </head> dan letakan kode di bawah ini tepat di atas kode </head>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400);
@import &quot;//netdna.bootstrapcdn.com/font-awesome/3.0/css/font-awesome.css&quot;;
#share-buttons{border-radius:5px;background:#FFF;width:660px;overflow:hidden;margin-left:60px;box-shadow:0 2px 3px rgba(71,71,71,0.31);padding:14px 7px}
.share-button{ background:#DCE0E0!important; position:relative; display:block; float:left; height:40px; overflow:hidden; width:150px; border-radius:3px;-o-border-radius:3px;-ms-border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;margin:0 7px}
.icon{ display:block;float:left;position:relative;z-index:3;height:100%;vertical-align:top;width:38px;-moz-border-radius-topleft:3px;-moz-border-radius-topright:0;-moz-border-radius-bottomright:0;-moz-border-radius-bottomleft:3px;-webkit-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;text-align:center}
.icon i{color:#fff;line-height:42px}
.slide{z-index:2; display:block; height:100%; left:38px; position:absolute; width:112px;-moz-border-radius-topleft:0;-moz-border-radius-topright:3px;-moz-border-radius-bottomright:3px;-moz-border-radius-bottomleft:0;-webkit-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0;margin:0}
.slide p{font-family:Open Sans;font-weight:400;border-left:1px solid 
rgba(255,255,255,0.35);color:#fff;font-size:16px;left:0;position:absolute;text-align:center;top:10px;width:100%;margin:0}
.share-button .slide{-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-ms-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out}
.facebook iframe{display:block;position:absolute;right:16px;top:10px;z-index:1}
.twitter iframe{width:90px!important;right:5px;top:10px;z-index:1;display:block;position:absolute}
.google #___plusone_0{width:70px!important;top:10px;right:15px;position:absolute;display:block;z-index:1}
.linkedin .IN-widget{top:10px;right:22px;position:absolute;display:block;z-index:1}
.facebook:hover .slide{left:150px}
.twitter:hover .slide{top:-40px}
.google:hover .slide{bottom:-40px}
.linkedin:hover .slide{left:-150px}
.facebook .icon,.facebook .slide{background:#305c99}
.twitter .icon,.twitter .slide{background:#00cdff}
.google .icon,.google .slide{background:#d24228}
.linkedin .icon,.linkedin .slide{background:#007bb6}
</style>
</b:if>

Adding the HTML Editor

Dan tambahkan kode di bawah ini diletakan tepat di atas </body>.
Kode ini telah dioptimalkan dan membuat loading lebih cepat.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='md-share-window' style='width: 100%; display: block; position: fixed; bottom: -450px; left: 0px; background-color: rgba(128, 128, 128, 0.6); z-index: 100; padding: 0 0 10px 0;'>
<div style='width: 800px; margin: 20px auto;'>
<a class='boxclose' id='boxclose'/> 
<div id='share-buttons'>
<div class='facebook share-button'>
<i class='icon'>
  <i class='icon-facebook'>
  </i>
</i>
<div class='slide'>
<p> facebook </p> 
</div>
<iframe allowTransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2FSoundBrigade&amp;send=false&amp;layout=button_count&amp;width=80&amp;show_faces=false&amp;font&amp;colorscheme=light&amp;action=like&amp;height=20&amp;appId=568581339861351' style='border:none; overflow:hidden; width:80px; height:20px;'> 
</iframe>
</div>
<div class='twitter share-button'> 
<i class='icon'>
  <i class='icon-twitter'>
  </i> 
</i>
<div class='slide'>
<p> twitter </p> 
</div> 
<a class='twitter-share-button' data-via='Anarchyta' href='https://twitter.com/share'> Tweet </a>
<script>
!function(d,s,id){
var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?&#39;http&#39;:&#39;https&#39;;
if(!d.getElementById(id)){
js=d.createElement(s);
js.id=id;
js.src=p+&#39;://platform.twitter.com/widgets.js&#39;;fjs.parentNode.insertBefore(js,fjs);}}(document, &#39;script&#39;, &#39;twitter-wjs&#39;);
</script>
</div> 
<div class='google share-button'> 
<i class='icon'>
  <i class='icon-google-plus'>
  </i> 
</i>
<div class='slide'>
<p> google+ </p> 
</div>
<div class='g-plusone' data-size='medium'> 
</div>
<script type='text/javascript'>
    (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='linkedin share-button'>
<i class='icon'>
  <i class='icon-linkedin'>
  </i>
</i> 
<div class='slide'>
<p> linkedin </p>
</div> 
<script data-counter='right' type='IN/Share'> </script> 
<script src='//platform.linkedin.com/in.js' type='text/javascript'> lang: en_US </script> 
 </div>
</div>
<div style='display:block; margin: 0 200px; padding: 5px 0px 0px;font-family: Oswald; font-weight: 700;color: #000'>
Jangan Lupa Untuk Membagikan Kiriman Ini!!
<br />
<span style='color: #000; font-size: 18px;'>| <data:blog.pageName/> |</span>
   </div>
  </div> 
</div>
</b:if>

Catatan

Ganti URL SoundBrigade dengan URL fanspage facebook Anda.

Kemudian "Save"
Sekian tutorial singkat ini, semoga menambah wawasan sobat lagi dan dapat berguna di kehidupan sobat.