Cara Membuat Widget Tombol Share Menarik Di Blog Part 1

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 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 berbagiKode CSS widget tombol share dipertemuan kita kali ini.

Berikut Cara Membuat Widget Tombol Share Menarik Di Blog | Super Keren dengan CSS

1. Login ke Akun Blogger Sobat
2. Pilih menu TEMPLATE lalu klik Edit-Template
3. Silahkan Copy CSS berikut dan Paste ke-Template sobat tepat di bawah kode<data:post.body/>

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

<div class='bookmark'>

<h4>If You Like This Post, Share it With Your Friends</h4>

<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_delicious_large' displayText='Delicious'/>

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

</b:if>

Keterangan- Silahkan ganti kata yang berwarna merah sesuai dengan selera anda

Selanjutnya Copy CSS Berikut dan Paste ke-Template Sobat sebelum kode ]]></b:sikin>

/* Bookmark */
.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;}

Jangan lupa langsung di Save Templatenya, dan lihat hasilnya.

Semoga apa yang saya sampaikan diartikel tentang Membuat Widget Tombol Share Menarik Di Blog ini dapat memberikan manfaat, dan tunggu artikel menarik lainnya di pertemuan kita lain waktu. Terimakasih

- Happy Blogging -

Artikel Terkait

• 10 Situs Ping Terbaik Untuk Meningkatkan Trafik Pengunjung Blog Terbaru Ping Blog Terbaik - Memiliki blog yang mempunyai trafik tinggi merupakan keinginan dari setiap blogger dan webmaster. Namun karena banyaknya sainga ... Read More
• Cara Membuat 2 Kolom Home Page Di Beranda (Home) Blog   Cara Membuat 2 Kolom Di Home Page Blog - contoh gambar y seperti gambar di atas oke , langsung saja kita praktekan.. Berikut Cara Membuat ... Read More
• Cara Membuat Tombol Share Keren Di Bawah Postingan BlogBagi sobat Blogger pecinta template minimalis dan fast loading serta seo pasti kenal yang namanya Blogbamz , yups blog yang beralamatkan www.blo ... Read More
• Cara Ampuh Membuat Loading Blog Super Cepat5 Cara Ampuh Membuat Template Blog Agar Loading nya Ringan dan Tidak Berat - Semua orang pasti ingin template blognya fast loading , karena dengan te ... Read More
• Cara Membuat Breadcrumbs Super SEO di Blog Terbaru Cara membuat breadcrumbs sangat mudah karena hanya memodifikasi template kita saja. Banyak para ahli seo yang percaya bahwa breadcrumbs&n ... Read More