Latest News

Cara Memasang Share Button Flat UI Slide Di Blogger

Ingin memasang share button yang keren dan beda dari yang lain. Kali ini AnggaSave akan membuatkan tutorial cara membuat share button flat ui slide di blog. Sebelum berlanjut ke tutorialnya apakah kalian tahu apa itu share button? Apa fungsi dan kegunaannya? 

Share button yaitu widget yang digunakan ditujukan memudahkan pengunjung untuk membuatkan artikel yang telah mereka baca ke media umum dengan mudahnya. Mereka tidak perlu menyalin url artikel untuk membuatkan namun mereka hanya perlu mengklik media umum apa yang akan digunakan untuk berbagi.

Cara Memasang Share Button Flat UI Slide Di Blogger

Selain manfaat diatas bila banyak yang membagikan artikel anda berarti itu mengambarkan bahwa artikel anda memiliki banyak manfaat. Semakin banyak di share artikel anda maka peringkat artikel anda akan semakin cantik dimata google. Dengan kata lain jumlah share mensugesti SEO blog kita. Nah gimana yuk eksklusif saja pasang share buttonnya?

Cara Membuat Share Button Flat UI Slide

Share button ini menggunakan font awesome jadi bila anda belum memasang script js font awesomenya silakan pasang dulu biar share buttonnya nanti mampu berkerja dengan tampilan yang menarik. Pasang js font awesome disini

Langkah 1
Masuk dulu ke blogger,pilih Template → Edit HTML. Salin arahan berikut lalu letakkan diatas arahan </head>

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

Langkah 2
Salin arahan css dibawah ini dan pastekan diatas kode </style>

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

Langkah 3
Terakhir silakan anda salin arahan pemanggil share button dibawah ini lalu pastekan dibawah arahan <data:post.body/>

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

Karena arahan <data:post.body/> ada lebih dari satu maka silakan anda pilih dan cocokan arahan sesuai dengan template blog anda. Coba satu per satu.

Terakhir simpan template. Sekarang coa buka blog anda dan lihat apakah share button sudah muncul atau belum di blog anda. Cukup sekian tutorial cara membuat share button dengan flat ui slide design. Semoga mampu membantu dan bermanfaat.