Social Share Buttons Slide Effect. Ok sobat karena sekarang lagi hangat-hangatnya dengan pemasangan efek "slide" pada blog, maka berikut ini saya akan membagikan tentang cara Membuat Tombol Share dengan Efek Slide di Blog, jadi tombol share ke jejaring sosial ini ada efek slidenya.

Membuat Tombol Share dengan Efek Slide di Blog
Social Share Buttons Slide Effect

Jika kamu ingin membuat tampilan tombol share ke SosMed di blog kamu menjadi lebih menarik, lebih keren, maka kamu dapat mencoba tombol sosila share seperti ini. Baca juga : Membuat tombol Download dan Demo dengan efek SLIDE dan cara membuat slide rekomendasi artikel terkait. Ok, berikut ini adalah cara membuat dan cara memasangnya di blog Blogspot kalian.

Cara memasang Tombol Share dengan Efek Slide di Blog

1. Login ke Blogger dan pilih Blog yang ingin anda pasangin widget ini.
2. Klik Template » Edit HTML
3. Tambahkan kode CSS berikut ini diatas kode ]]></b:skin> atau </style>
#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. Berikutnya 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. Terakhir cari kode <data:post.body/> lalu letakkan kode dibawah ini tepat dibawah <data:post.body/>,  Biasanya kode <data:post.body/> ada lebih dari satu kode yang sama. Sobat coba saja satu persatu biasanya ada di kode kedua atau ketiga.
<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='' 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'/>
</b:if>
6. Simpan Template dan lihat hasinya.
7. Kamu juga dapat menambahkan widget email subciribe di bawah sosial button ini, baca caranya di sini.

Ok sob, sekian cara membuat tombol share dengan efek slide di Blogspot, semoga bermanfaat.
26 Komentar untuk "Cara Membuat Tombol Share dengan Efek Slide di Blog"

Jadi Keren gan di pasang di blog ane hahahha.. Semua isi dari pada web ini berbobot dan sangat membatu, mantap banget buat Pemula seperti saya... cek blog saya gan abumaryana.blogspot.com kritik dan saran agan sangat membantu buat saya.. terima kasih sebelumnya (o)

Wah selamat blog sobat jadi tambah keren, ok termakasih kembali sudah berkunjung.

(k) siip...tanks gan sudah terpasang

Sumpah! Arigatou gozaimasu bang. Setelah sekian lama nyari akhirnya ketemu juga. Tampilan keren + ada ada kode data-via nya juga. Sukses untuk blog dan karirnya! Kapan-kapan main dong ke imyonrosadi.blogspot.com hehehe

;(( gmana caranya biar tombol share dibawah postingan saja.masalahnya yang ini juga muncul di halaman utama blog yaitu sebelum "Read more"...

Baca bagian update di atas gan..

:) gan gimana ya caranya ubah tampilan komentar biar kayak punya agan ini?? ada tutorialnya g?? pliss keren abis nih punya agan,plus ada scrorll dan imonya gitu

kaya nya lebih keren nich,langsung saya coba dulu mas

Cara memasang emo disini:

http://www.seocips.com/2014/09/cara-membuat-emoticon-di-komentar-blog.html

Untuk menambahkan scroll : lihat css template, temukan css komentar blog, misalnya .comments dan tambahkan kode dibawah ini didalam tanda kurungnya: height: 370px; overflow: auto;

Contohnya:

.comments {height: 400px;
background-color:$(wid.content.color);
border:1px solid $(wid.border.color);
margin:10px 10px 15px 5px;
padding:0 15px;overflow: auto;
}

saya coba kok ga ada efek apa2 yaa ... @-)

gan,gimana cara menghapus tombol share yang dulu?maklum masih newbie :>)

Sebenarnya mudah saja,tapi saya bingung juga karena tergantung template yang digunakan, setiap template berbeda kodenya tergantung yang bikin template itu.

Many-many Thanx, gan...
Baru sekarang ane puas sama penampakan, ehh... penampilan blog ane. (h)
Share button yang ane pasang kemaren emang keren, tapi nggak ada FB like buttonnya.
That's the problem !. @-)

# btw, sila mampir ke blog ane, gan...

Siip...dan telah berhasil terpasang di Blog Ane :)
Thanks atas tutor nya Gan.. 8-)

Keren sob tombol sharenya, simple banget, saya pasang yah di blog saya.

siiipp selamat gan, thanks juga.

Mungkin karena belum ada script facebooknya gan, coba ambil scriptnya di facebook developer gan

berhasil di yang kedua thanks gan... (o)

Gan, supaya share buttonnya tepat di tengah (center) digimanain ya? He he he, hatur nuhun (kode NO.5 sudah saya coba dikasih tanda < center > dari awal kode sampai terakhir, nggk ngefek :D

Gan untuk rata tengahnya gmana ya?saya coba di blog saya arifinbp.blogspot.com udah coba kok gkmau ke tengah?mohon solusinya

mantap gan langsung ane pasang, template ane jadi lebih keren :D