MEMASANG TOMBOL FLAT SLIDE SHARE KEREN DI BLOG MEMASANG TOMBOL FLAT SLIDE SHARE KEREN DI BLOG

Selamat Sore! pada artikel kali ini saya akan membahas cara memasang tombol share nih sesuai Request sobat blogger. Tombol Share kali ini berbeda loh gan, tombol share yang satu ini Lebih elegan dan keren!  untuk Demonya agan bisa liat gambar diatas atau klik DISINI. Tertarik untuk membuatnya? langsung aja ke TKP.. 

1. Seperti biasa masuk Blogger terlebih dahulu. 
2. Pilih Template > Edit HTML 
3. Cari kode ]]></b:skin> atau </style> (Gunakan CTRL + F untuk memudahkan pencarian) Taruh kode dibawah ini tepat diatas kode ]]></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; }

4. Kemudian, cari kode </head> Lalu letakkan kode dibawah ini tepat diatas kode </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'/>

5. Langkah Terakhir cari kode <data:post.body/> lalu letakkan kode dibawah ini tepat dibawah  

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

 Biasanya kode <data:post.body/> ada lebih dari satu kode yang sama. sobat pilih kode <data:post.body/> yang berada paling bawah sendiri.

6. Klik Simpan Template dan lihat hasilnya! 

 Apabila tidak berhasil silahkan sobat bisa comment Dibawah permasalahannya apa atau bisa chat Lewat Facebook saya. Terus kunjungi Blog Irvan Efendy untuk tutorial menarik dan keren lainnya! see u next post!