Installing Flat UI Slide Share on Blog

Blogger friend, this time Stress Thinking will provide a tutorial on how to install a flat slide share on the latest blog. Well for those of you who want their blog to look cool, please follow the steps as follows.

To use this code, we need some code below. Put the following code above </ head>

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/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'/>

1. If you have installed the above code, then skip the above steps and continue in the next step.

2. For you who prioritize CSS3 validation, then the script above you download first and repair it again so that CSS3 can be valid. Then upload the script again using Google Drive.

Salin CSS di bawah ini, kemudian paste diatas </style> atau </b:skin>

/* CSS 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}.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,.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 .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:.6}

Place the following HTML in the post footer area. How, look for <div class = 'post-footer-line-1'> or <data: post.body /> then paste the following HTML code below

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

Save the template and see the results