Cara Membuat Social Share Button Warna-warni dibawah Postingan Blog

Cara Membuat Social Share Button Warna Warni dibawah Postingan Blog - Social Share Button atau yang sering kita kenal dengan tombol untuk berbagi adalah widget yang bertujuan untuk memudahkan pengunjung dalam merefrensikan maupun merekomendasikan konten-konten bermanfaat di blog kita, dengan hanya satu klik saja mereka (pengunjung) sudah dapat membagikan artikel tersebut secara otomatis tanpa harus repot-repot lagi meng-copy permalink dari artikel di blog kita.

Sudah tidak asing lagi tutorial ini dimata kalian, tutorial blogger kali ini berguna untuk mendapatkan banyak pengunjung, dan juga untuk mempercantik tampilan blog, apalagi tombol berbaginya warna warni, seperti warna social yang aslinya, button share ini tidak memakai javascript karena memakai kode javascript yang berlebihan akan mempengaruhi kecepatan blog(walau saya tak tau cara membuat kode javascriptnya, hehe), button ini hanya memakai kode CSS saja, dan saya dapatkan kode CSS ini dari Muhamad Farhan.

Secara kasat mata, widget share button ini juga tidak kalah kok bagusnya dengan widget original dari developer social media yang belum di modifikasi. Selain itu, kita juga dapat menyesuaikan warna latar belakang dari tombolnya agar lebih kontras dengan warna tema blog kita, atau kita juga bisa memberikan warna tombol sesuai dengan social medianya, misalnya Facebook warna biru, Google+ warna merah, dan Twitter warna biru muda. Dari sedikit penjelasan saya di atas, mungkin sobat sudah ada gambaran. Oke kalo sudah mengerti langsung saja, berikut tutorialnya:

1. Login ke Blogger.com
2. Masuk ke Halaman Template -> klik edit HTML
3. Cari kode <data:post.body/> (gunakan CTRL+F), jika anda sudah memasang read more otomatis di blog, maka pilihlah <data:post.body/> yang ke-2 atau yang ke-4, kalo saya memakai yang ke-4, kalo sobat sudah memasang kode related artikel/artikel terkait, cari kode itu lalu simpan kode dibawah ini tepat di atas kode related artikel/artikel terkait, atau sesuaikan dengan kode yang menunjukkan letak dari konten atau tempat artikel anda berada.
4. Letakkan kode di bawah ini tepat dibawah-nya (dibawah kode artikel) atau di atas-nya (diatas artikel)

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='border-top:1px solid #ccc;border-bottom:1px solid #ccc;width:100%;height:25px;text-align:left;font:normal 11px Arial;color:#333;margin:10px 0;padding:10px 0 5px'>
<div style='float:left;padding:1px 0;margin-right:8px;font:bold 13px Arial;color:#444'>
<strong>Bagikan artikel ini pada</strong> :
</div>
<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url' style='color: #fff; background: #3b5998; text-decoration: none; border: 1px solid #313c7d; padding: 3px; border-radius: 3px; font-family: Arial, verdana, sans-serif; font-size: 13px; line-height: 20px;' target='_blank' title='Share to Facebook'>Facebook</a>
<a expr:href='&quot;http://digg.com/submit?url=&quot; + data:post.url' style='color: #fff; background: #808080; text-decoration: none; border: 1px solid #000000; padding: 3px; border-radius: 3px;font-family: Arial, verdana, sans-serif; font-size: 13px; line-height: 20px;' target='_blank' title='Submit to Digg'>Digg</a>
<a expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' style='color: #fff; background: #4099FF; text-decoration: none; border: 1px solid #3a8be8; padding: 3px; border-radius: 3px; font-family: Arial, verdana, sans-serif; font-size: 13px; line-height: 20px;' target='_blank' title='Share to Twitter'>Twitter</a>
<a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' style='color: #fff; background: #c0361a; text-decoration: none; border: 1px solid #9c2c15; padding: 3px; border-radius: 3px;font-family: Arial, verdana, sans-serif; font-size: 13px; line-height: 20px;' target='_blank' title='Share to Google+'>Google+</a>
</div></b:if>

Keterangan: (kode warna : disini)

• 3b5998 = kode warna HTML background tombol facebook
• 313c7d = kode warna HTML border tombol facebook
• 808080 = kode warna HTML background tombol digg
• 000000 = kode warna HTML border tombol digg
• 4099FF = kode warna HTML background tombol twitter
• 3a8be8 = kode warna HTML border tombol twitter
• c0361a = kode warna HTML background tombol google+
• 9c2c15 = kode warna HTML border tombol google+

yang terakhir simpan template, demikian tutorial blog kali ini tentang Cara Membuat Social Share Button Warna-warni dibawah Postingan Blog, semoga bermanfaat, dan selamat mencoba.

Tweet

Unknown pada 8/09/2013