Cara Membuat Sharing Button Animasi Slide Ganteng Maksimal

Cara Membuat Sharing Button Efek Slide Ganteng Maksimal dengan animasi slide ini hasilnya akan seperti gambar di bawah. Sharing button animasi slide ini tampilannya lebih ganteng. Mau pakai sharing button ini? Simak cara pasangnya di bawah.

Membuat Sharing Button Animasi Slide Ganteng Maksimal

Sharing button animasi slide ini bisa kamu terapkan di blog dengan mengikuti beberapa langkah di bawah ini:

• Login ke blogger
• Masuk ke Template, kemudian Edit HTML
• Copy kode di bawah ini dan paste di atas kode ]]></b:skin>

#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; }

• Copy kode di bawah ini dan paste di atas 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'/>

• Copy kode di bawah ini dan paste di bawah kode <data:post.body/> (akan terdapat beberapa kode <data:post.body/> silakan Sobat coba satu persatu, biasanya sih di kode kedua atau ketiga)

<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><div class='clear'/>

Setelah semua tahap di ata dilakukan dengan benar, sesuai petunjuk, klik Save Template dan lihat hasilnya. Kini blog Sobat sudah punya sharing button animasi slide yang ganteng maksimal. Happy blogging :)

Tweet

Artikel keren lainnya: