Bank Artikel

ku-Cari, ku-Baca, ku-Arsip-kan. ^Semoga bermanfaat^

28 April 2011

Cara Menampilkan Tombol Share di Blogspot

Bismillah...
Seperti halnya readmore, sebenarnya sudah banyak juga para ahli blog yang menulis tentang artikel "Cara menampilkan tombol share di Blog". Namun, diantara semua yang saya baca, saya sekali lagi tertarik dengan cara yang menurut saya cukup simple dan mudah dimengerti oleh blogger pemula seperti saya. Tampilannya pun cukup menarik karena hanya berisi sedikit tombol "share to" tapi blog kita bisa di share kemana-mana. Caranya dengan menggunakan layanan dari addthis.com. Berikut langkah-langkahnya :

Langkah pertama, dapatkan kodenya di addthis :
1. Buka situs addthis.com

2. Pilih model/style yang kita inginkan. Ada 3 pilihan, silakan dipilih.
3. Klik "Get AddThis" untuk mendapatkan kodenya.
4. Akan muncul formulir pendaftaran (register). Bisa diisi, bisa pula tidak dengan mengklik tombol "Close" atau "X".
5. Klik "Copy Code".
Alhamdulillah, kodenya telah kita dapatkan.

Sekarang,

Langkah kedua, copy paste kode tersebut di blog kita. Caranya:

1. Login (masuk) ke blogger/blogspot.

2. Klik "Tata Letak" atau "Design" > Edit HTML

3. Centang kotak "Expand widget template"

4. Carilah kode <div class="post-header-line-1"> kalau tidak ketemu, cari saja kode <data:post.body>. [cara mudah: copy kode yang ingin kita cari, lalu tekan ctrl+f, paste kode].

5. Letakkan kode yang telah anda dapatkan dari addthis.com di atas salah satu kode yang anda temukan (salah satu dari kode pada poin no.4 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... Alhamdulillah.


Mudah kan??


sumber : dari sini

1 comments:

Posting Komentar