.jpg)
23 Nov 2013
Cara Membuat Widget Tombol Share Menarik Di Blog - sebenarnya banyak variasi yang dapat kita pasang di blog, dari yang keren, super keren hingga kita bisa membuat tombol share dengan warna-warni agar terkesan menarik dimata pengunjung.
Dengan adanya Widget Tombol Share yang Menarik di blog seakan memberi pesan kepada Visitor Blog dengan mudah melakukan Share/Berbagi atas apa yang telah mereka baca di artikel blog anda. Namun jika anda tidak memasang tombol share sekalipun sebenarnya blogger telah menyediakan widget tombol share di setiap template default blogger. Hanya saja banyak diantara pengguna blogger kurang menyukai tampilan widget tombol share default blogger karena tidak valid HTML5, sehingga mereka melakukan modifikasi widget tombol share tersebut hingga terlihat menarik dengan paduan warna-warni.
Untuk Membuat Widget Tombol Share Menarik Di Bawah Postingan Blog kita hanya menggunakan kode CSS dan sedikit menguasai kode HTML. Namun jika saya dan anda sama masih pemula di dunia blogger dan belum menguasai perkodean HTML, disini saya akan sedikit berbagi Kode CSS widget tombol share dipertemuan kita kali ini.
Berikut Cara Membuat Widget Tombol Share Menarik Di Blog | Super Keren dengan CSS
- Login ke Akun Blogger Sobat
- Pilih menu TEMPLATE lalu klik Edit-Template
- Silahkan Copy CSS berikut dan Paste ke-Template sobat tepat di bawah kode <data:post.body/>
<b:if cond='data:blog.pageType == "item"'>
<div class='bookmark'>
<style>
.bookmark{margin-top:5px;border:5px double red;border-right:1px solid red;border-left:1px solid red;background:#9fc5ed;box-shadow: 0 2px 5px 2px #ddd;}
.bookmark h4{color:#666;border-bottom:1px double red;padding:0;margin-bottom:10px;padding-left:10px;}
.bookmark img{}
.book{float:left;margin:0 8px 0 0;padding:1px;border:1px solid #eee;background:#ffffff;}
.booklast{float:left;margin:0;padding:1px;border:1px solid #eee;background:#ffffff;}
</style>
<h4>If You Like This Post, Share it With Your Friends</h4>
<div align='center'>
<span class='st_facebook_large' displayText='Facebook'/>
<span class='st_twitter_large' displayText='Tweet'/>
<span class='st_linkedin_large' displayText='LinkedIn'/>
<span class='st_digg_large' displayText='Digg'/>
<span class='st_stumbleupon_large' displayText='StumbleUpon'/>
<span class='st_reddit_large' displayText='Reddit'/>
<span class='st_tumblr_large' displayText='Tumblr'/>
<span class='st_email_large' displayText='Email'/>
<span class='st_dzone_large' displayText='DZone'/>
<span class='st_netlog_large' displayText='Netlog'/>
<span class='st_google_large' displayText='Google'/>
<span class='st_identi_large' displayText='identi.ca'/>
<div style='clear:both;'/></div></div>
</b:if>
<div class='bookmark'>
<style>
.bookmark{margin-top:5px;border:5px double red;border-right:1px solid red;border-left:1px solid red;background:#9fc5ed;box-shadow: 0 2px 5px 2px #ddd;}
.bookmark h4{color:#666;border-bottom:1px double red;padding:0;margin-bottom:10px;padding-left:10px;}
.bookmark img{}
.book{float:left;margin:0 8px 0 0;padding:1px;border:1px solid #eee;background:#ffffff;}
.booklast{float:left;margin:0;padding:1px;border:1px solid #eee;background:#ffffff;}
</style>
<h4>If You Like This Post, Share it With Your Friends</h4>
<div align='center'>
<span class='st_facebook_large' displayText='Facebook'/>
<span class='st_twitter_large' displayText='Tweet'/>
<span class='st_linkedin_large' displayText='LinkedIn'/>
<span class='st_digg_large' displayText='Digg'/>
<span class='st_stumbleupon_large' displayText='StumbleUpon'/>
<span class='st_reddit_large' displayText='Reddit'/>
<span class='st_tumblr_large' displayText='Tumblr'/>
<span class='st_email_large' displayText='Email'/>
<span class='st_dzone_large' displayText='DZone'/>
<span class='st_netlog_large' displayText='Netlog'/>
<span class='st_google_large' displayText='Google'/>
<span class='st_identi_large' displayText='identi.ca'/>
<div style='clear:both;'/></div></div>
</b:if>
Selanjutnya Copy CSS Berikut dan Paste ke-Template Sobat sebelum kode </head>
<script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/>
<script type='text/javascript'>stLight.options({onhover:false , doNotHash: true, doNotCopy: true, hashAddressBar: false});</script>
<script type='text/javascript'>stLight.options({onhover:false , doNotHash: true, doNotCopy: true, hashAddressBar: false});</script>
Jangan lupa langsung di Save Templatenya, dan lihat hasilnya.
Semoga apa yang saya sampaikan diartikel tentang Cara Membuat Widget Tombol Share Di Blog ini dapat memberikan manfaat, dan tunggu artikel menarik lainnya di pertemuan kita lain waktu. Terimakasih
- Happy Blogging -
Judul= Cara Membuat Widget Tombol Share Di Blog
Ditulis oleh= Unknown
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan dari isi artikel ini harap menyertakan link dofollow ke >> Ditulis oleh= Unknown
Rating Blog 5 dari 5
= TERIMA KASIH =
.png){kind=small}