Sebenarnya jika kita sering berkunjung ke blog rekan-rekan blogger, tentunya banyak sekali variasi dan modifikasi yang mereka lakukan guna mempercantik tombol sharing mereka, seperti yang sudah saya bahas juga sebelumnya tentang membuat tombol sharing di bawah postingan dengan icon, namun pada kesempatan kali ini saya akan sedikit membahas tentang sharing button yang saat ini saya gunakan, widget tersebut di refrensikan oleh teman saya kompi ajaib dan dibuat oleh mas sugeng, tetapi ada beberapa script yang saya tambahkan agar lebih lengkap.
Tak jauh berbeda dengan tombol share icon yang sebelumnya pernah saya publikasikan, sekarang ini saya akan sedikit meringkas kode dari css dasarnya agar dapat berjalan walaupun tidak menggunakan javascript, atau script yang sudah di modified, pasalnya penggunaan javascript yang terlalu banyak juga akan berpengaruh pada loading blog yang akhirnya akan berdampak pula pada rating dan seo blog kita.
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.
1. Login ke Blogger.
2. Pilih Template.
3. Klik Edit HTML
4. Klik tanda panah hitam disebelah ]]></b:skin> (antarmuka Edit HTML yang baru), lalu akan muncul semua kode css-nya.
5. 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 sesuaikan dengan kode yang menunjukkan letak dari konten atau tempat artikel anda berada.
6. Letakkan kode di bawah ini tepat dibawah-nya (dibawah artikel) atau di atas-nya (diatas artikel).
<b:if cond='data:blog.pageType == "item"'>
<div style='border-top:3px dotted #ccc;border-bottom:1px solid #b8b8b8;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:15px;font:bold 13px Arial;color:#777'>
<strong>Share this article</strong> :
</div>
<a expr:href='"http://www.facebook.com/sharer.php?u=" + 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'>Share on FB</a>
<a expr:href='"http://digg.com/submit?url=" + 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'>Submit to Digg</a>
<a expr:href='"http://twitter.com/share?url=" + 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'>Tweet</a>
<a expr:href='"https://plus.google.com/share?url=" + 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+'>Share on G+</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+
7. Klik "Save Template", dan selesai,
Demikian informasi seputar tutorial blog tentang cara membuat social share button warna warni, semoga bermanfaat, dan selamat mencoba. Adorable Choice, Good Result...
EmoticonEmoticon