Memasang Flat UI Slide Share di Blog - Arlina Design
Sobat blogger, kali ini Arlina Design akan memberikan tutorial cara memasang flat slide share di blog terbaru. Nah untuk Anda yang ingin blognya tampil keren, silahkan ikuti langkahnya sebagai berikut.

Memasang Flat UI Slide Share di Blog

Untuk menggunakan kode ini, kita membutuhkan beberapa kode di bawah. Letakkan kode berikut di atas </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. Jika kode di atas telah kamu pasang, maka lewati langkah diatas dan lanjut pada langkah berikutnya.
2. Buat kamu yang mengutamakan validasi CSS3, maka script diatas kamu download terlebih dahulu dan di perbaiki kembali agar bisa valid CSS3. Kemudian upload kembali script tersebut menggunakan 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}

Letakkan HTML berikut pada area post footer. Caranya, cari <div class='post-footer-line-1'> atau <data:post.body/> kemudian pastekan kode HTML berikut bawahnya

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

Simpan template dan lihat hasilnya

Demikian tutorial Cara Memasang Flat Slide Share di Blogger, semoga bermanfaat.

Memasang Flat UI Slide Share di Blog

Sobat blogger, kali ini Arlina Design akan memberikan tutorial cara memasang flat slide share di blog terbaru. Nah untuk Anda yang ingin blognya tampil keren, silahkan ikuti langkahnya sebagai berikut.

Memasang Flat UI Slide Share di Blog

Untuk menggunakan kode ini, kita membutuhkan beberapa kode di bawah. Letakkan kode berikut di atas </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. Jika kode di atas telah kamu pasang, maka lewati langkah diatas dan lanjut pada langkah berikutnya.
2. Buat kamu yang mengutamakan validasi CSS3, maka script diatas kamu download terlebih dahulu dan di perbaiki kembali agar bisa valid CSS3. Kemudian upload kembali script tersebut menggunakan 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}

Letakkan HTML berikut pada area post footer. Caranya, cari <div class='post-footer-line-1'> atau <data:post.body/> kemudian pastekan kode HTML berikut bawahnya

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

Simpan template dan lihat hasilnya

Demikian tutorial Cara Memasang Flat Slide Share di Blogger, semoga bermanfaat.
Portal Bola Online

Related Post

Portal Bola Online
Disqus Codes
  • To write a bold letter please use <strong></strong> or <b></b>
  • To write a italic letter please use <em></em> or <i></i>
  • To write a underline letter please use <u></u>
  • To write a strikethrought letter please use <strike></strike>
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>
    And use parse tool below to easy get the style.
Show Parser Box

strong em u strike
pre code pre code spoiler
embed

Subscribe Our Newsletter

Notifications

Disqus Logo