Oleh Muhammad Farhan
Cara Membuat Social Share Button Warna Warni -
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.
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...
