Membuat Flat Slide Share

Laba-Laba Blog - Pasti anda asing mendengar kata Flat Slide Share, flat slide share adalah sebuah widget yang terdapat pada blogger yang digunakan untuk me-share sebuah postingan blogger dengan slide. Hanya ada beberapa orang saja yang menggunakan widget ini salah satunya adalah +Andhika Official dan masih belum digandrumi oleh para pengguna blogger. Pemasangan widget ini tidak memakan waktu yang cukup lama dan tentunya tidak memberatkan blogger anda. Bagaimana? apakah anda berminat untuk memasang widget ini? Berikut, ikutilah langkah-langkah di bawah ini.

1. Simpan kode CSS ini di atas ]]></b:skin> atau </style>

/* 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 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; }

2. Simpan script ini di atas </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'/>

3. Simpan HTML ini di atas <data:post.body/>

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

4. Simpan
Resource : http://andhika-official.blogspot.com/2014/05/cara.memasang.flat.slide.share.html