Membuat Tombol Share Di Atas Postingan
1. Silahkan surfing ke situs addthis.com
2. Pertama-tama yang harus anda lakukan yaitu menentukan layanan apa yang anda gunakan untuk ngeblog di step "1. Select your service". Dalam hal ini saya akan mengambil contoh "Blogger", mengingat ini adalah tutorial Blogger.
2. di step "2. Select a button style", silahkan untuk memilih gaya tombol yang anda inginkan.
3. Di step "3. Do you want analytics?", silahkan pilih opsi -No, just give me the button-.
Anda bisa memiliki akun di addthis.com jika mau, kelebihannya yaitu anda bisa memantau perkembangan statistik jumlah share artikel yang ada di blog anda. Namun untuk sementara kita akan menggunakan opsi "No, just give me the button" sebagai contoh.
4. Untuk step terakhir dalam pembuatan kode, silahkan untuk mengklik tombol "GET YOUR BUTTON" di opsi -4. You're done!-
5. Klik tombol "Install to Sidebar", maka akan langsung terbuka tab baru. Yang harus anda lakukan yaitu klik menu "edit Konten", maka akan muncul kode. Silahkan untuk mengopi kode tersebut dan pastekan di notepad! Dan segeralah untuk menutup tab yang baru muncul tadi.
Tahap 2
1. Login ke akun Blogger
2. Klik Tata Letak => Edit HTML => Jangan lupa untuk mencentang kotak "Expand widget template"
3. Carilah kode <div class='post-header-line-1'/> kalau tidak ketemu, cari saja kode <data:post.body/>
4. Letakkan kode yang telah anda dapatkan dari addthis.com di atas salah satu kode yang anda temukan (salah satu dari kode pada poin no.3 di atas)
5. Untuk mengatur posisi tombol share, maka bisa dijepit dengan kode "text align". Sebagai contohnya, tombol saya di atas posisinya di sebelah kanan, maka formatnya seperti berikut:
<div style='text-align: right;'>DI SINI KODE YANG TELAH ANDA DAPATKAN DARI ADDTHIS.COM</div>
Jika anda menginginkan tombol share anda posisinya di bagian atas tengah postingan, maka tinggal diganti saja "right" dengan "center". Jika kiri, maka "left"_
Dari keseluruhan langkah di atas, maka posisi kode anda nanti akan seperti berikut:
<div style='text-align: right;'>DI SINI KODE YANG TELAH ANDA DAPATKAN DARI ADDTHIS.COM</div>
<div class='post-header-line-1'/>
ATAU
<div style='text-align: right;'>DI SINI KODE YANG TELAH ANDA DAPATKAN DARI ADDTHIS.COM</div>
<data:post.body/>
6. Simpan hasil kerjaan anda dengan cara mengklik tombol "Simpan Template". SELESAI SUDAH...
thank you jg and salam kenal coy...sukses buat kamu ya.
ReplyDelete