[100% work] Membuat "Button Share" Sosial Media Efek Slider

www.MauBergaya.blogspot.com

Skylibkac, [100% work] Membuat "Button Share" Sosial Media Efek Slider - Di jaman modern seperti sekarang ini website merupakan sarana yang paling banyak digunakan untuk memberikan kemudahan informasi yang akurat serta sifatnya yang global (bisa diakses oleh siapapun). 

Ditambah lagi makin banyak dan berkembangnya sosial media raksasa seperti twitter, facebook dan google plus. Tentu makin mudah kita untuk memasasarkan website pribadi kita. Kemudahan itu bisa dilakukan dengan menambahkan plugin "share button" twitter, facebook dan google plus pada website pribadi kita.

Untuk itu ikuti langkah dibawah ini untuk menambahkan plugin share button untuk website yang akan dipasang dibawah postingan artikel/ tulisan kita. Berikut caranya;

• Pertama, copy saja kode css dibawah ini, lalu pastekan saja diatas/ sebelum ]]></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; }

• Kedua, copy lagi kode javascript dibawah ini, lalu pastekan lagi diatas/ sebelum </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'/>

• Ketiga, langkah terakhir copy kode HTML dibawah ini, pastekan tepat dibawah/ sesudah <data:post.body/>. Kode <data:post.body/> biasanya ada lebih dari satu. Letakkan pada posisi/urutan yang kedua.

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<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='Egon Novsky' data-via='Egon_Novsky' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' title='Share via Twitter' rel='nofollow'>Tweet</a>
<script async='async' src='http://platform.twitter.com/widgets.js' type='text/javascript'/>

</div>

</div>

<div class='clear'/>

</b:if>

• Keempat, save templete-Done. Jika ada pertanyaan boleh ditanyakan saja pada kolom komentar.

Semoga tutorial ini memberikan informasi yang bermanfaat untuk sahabat developer sekalian. Sehingga terlihat makin profesional dan interaktifnya website sahabat. Untuk demo bisa dilihat di MauBergaya.

Catatan:
Sengaja diberikan warna untuk memudahkan sahabat untuk membaca dan mengikutinya.

• Twitter
• Facebook
• Google
• Tumblr
• Pinterest