Rahina Blog. Ok sobat karena sekarang lagi rame" nya dengan gaya "slide" maka berikut ini saya akan share tentang cara Membuat Tombol Share dengan
Efek Slide di Blog, jadi tombol share ke jejaring sosial ini ada efek slidenya.
Oke berikut penampakan nya di gambar yang tertera di atas
Gmana sob lumayan lah daripada lumanyun =))
Oke berikut ini adalah tutorial nya atau cara buat nya
Carabuat 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>
4. Berikutnya cari kode </head> Lalu letakkan kode dibawah ini tepat diatas kode </head>
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. Oh iya jika sudah ada widget share di template anda silahkan hapus dan ganti dengan kode html di bawah ini. (Langkah ini bagi yang udah tau tentang template sangat mudah jadi nyimpen nya sesuai ke butuhan saja)
Demikian lah Artikel tentang Cara buat tombol share Dengan efek Slide Semoga bermafaat.
Efek Slide di Blog, jadi tombol share ke jejaring sosial ini ada efek slidenya.
Image by simplecips .com |
Oke berikut penampakan nya di gambar yang tertera di atas
Gmana sob lumayan lah daripada lumanyun =))
Oke berikut ini adalah tutorial nya atau cara buat nya
Carabuat 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. Oh iya jika sudah ada widget share di template anda silahkan hapus dan ganti dengan kode html di bawah ini. (Langkah ini bagi yang udah tau tentang template sangat mudah jadi nyimpen nya sesuai ke butuhan saja)
<b:if cond='data:blog.pageType == "item"'>
<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='"http://www.facebook.com/sharer.php?u=" + 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: 'id'};
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[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>
Demikian lah Artikel tentang Cara buat tombol share Dengan efek Slide Semoga bermafaat.
8 comments
izin nyoba sob
Sip min, berhasil, barusan nyoba nih.
Terima kasih infonya.
Sukses sellalu buat blog nya ya gan :)
siap coba
wahhh keren nih, udah bisa bro (h) thanks info nya :)
tanks gan ,ijin sedot ya gan
Thanks broo, Berhasil (y) . Jangan lupa Kunjungan Balik nya ya .. :D
http://mas-rozams.blogspot.com/ Xixixii
Berkomentarlah dengan Bahasa yang Relevan dan Sopan.. #ThinkHIGH! ^_^