Cara Menampilkan Tombol Reaksi di Template Bukan Bawaan Blogger

Cara Menampilkan Tombol Reaksi di Template Bukan Bawaan Blogger - Menambahkan tombol Reaksi pada template asli bawaan Blogger memang tidak ditemukan kendala. Namun, begitu saya menerapkannya di template bukan bawaan Blogger, contohnya pada template yang sedang saya gunakan ini, tombol Reaksi tersebut tidak muncul walaupun saya sudah memberi tanda centang pada "Reaksi" di elemen "Posting Blog".

Untuk menampilkan tombol Reaksi di template non Blogger ini, saya harus menambahkan kode tombol Reaksi secara manual pada HTML template blog. Berikut langkah-langkah untuk menampilkan tombol reaksi pada template bukan bawaan Blogger.

1. Masuk ke akun Blogger.

2. Klik "Opsi lainnya" >> "Tata Letak".

3. Pada elemen "Posting Blog" klik "Edit".

4. Beri tanda centang pada "Reaksi:" dan lakukan pengeditan sesuai keinginan.

5. Klik tombol "Simpan".

6. Lihat pada salah satu artikel, jika tombol Reaksi tidak muncul juga, silakan coba langkah-langkah berikutnya di bawah ini.

7. Pergi ke menu "Template".

8. Klik tombol "Edit HTML" >> tombol "Lanjutkan".

9. Beri tanda contreng di "Expand Template Widget".

10. Cari kode <div class='post-footer-line post-footer-line-3'> lalu letakkan kode di bawah ini setelah kode tersebut.

<b:if cond='data:blog.pageType == &quot;item&quot;'><span class='reaction-buttons'>

        <b:if cond='data:top.showReactions'>

          <table border='0' cellpadding='0' cellspacing='0' width='100%'><tr>

            <td class='reactions-label-cell' nowrap='nowrap' valign='top' width='1%'>

              <span class='reactions-label'>

              <data:top.reactionsLabel/></span>&#160;</td>

            <td><iframe allowtransparency='true' class='reactions-iframe' expr:src='data:post.reactionsUrl' frameborder='0' name='reactions' scrolling='no'/></td>

           </tr></table>

        </b:if>

      </span></b:if>

Kalau posisinya tidak cocok, Sobat juga dapat mencoba meletakkannya setelah kode <div class='post-footer-line post-footer-line-1'> atau kode <div class='post-footer-line post-footer-line-2'>. Silakan disesuaikan dengan keadaan template masing-masing.

11. Klik tombol "Simpan template" dan lihat hasilnya.

Pasang Tombol Like Facebook, Tweet Twitter, Google +1, dan Share

S

eperti diketahui kalau tombol share atau berbagi berguna untuk memudahkan para pengunjung blog yang ingin membagikan artikel yang telah dibacanya ke jaringan mereka. Facebook Like, Twitter Tweet dan Google +1 merupakan layanan berbagi yang populer saat ini. AddThis membuatnya mudah bagi Anda untuk memilih versi terbaik dan menambahkannya ke blog Anda. Anda bisa mendapatkan tombol share dari AddThis ini tanpa perlu mendaftar terlebih dahulu. Namun, bila Anda mendaftar maka Anda akan mendapat AddThis Analytics Summary secara berkala.

Berikut ini langkah-langkah dalam memasang tombol share versi tersebut di Blogger.

1. Masuk ke akun Blogger Anda.

2. Kunjungi AddThis di http://www.addthis.com/

3. Klik Join Now bila ingin mendaftar atau langsung pilih tombol share seperti gambar di bawah ini lalu klik Blogger, WordPress anda more options.

4. Pada menu Options, pilih Platform Blogger.

5. Klik tombol Install Blogger Widget.

6. Kemudian klik lagi tombol Install Blogger Widget.

7. Klik tombol MENAMBAH WIDGET.

8. Selanjutnya pindahkan elemen tersebut ke area di bawah kolom Posting Blog.

9. Klik tombol SIMPAN.

10. Selesai.

Memasang Tombol Follow Me on Twitter di Blog

Apakah Sobat mempunyai sebuah akun di Twitter? Bila ya, promosikan saja akun Twitter Sobat dengan memasang tombol Follow Me on Twitter di blog. Tombol Follow ini dapat memudahkan pengunjung yang ingin menjadi follower akun Twitter Sobat.

Tombol Follow yang akan kita pasang ini bentuknya seperti di bawah ini.

Follow @klik_munadi

Ayo diklik tombol Follow di atas untuk menjadi follower klik_munadi di Twitter. Untuk memasang tombol Follow seperti di atas, silakan ikuti langkah-langkahnya di bawah ini.

1. Silakan kunjungi halaman http://twitter.com/about/resources/followbutton

2. Isikan username Sobat.

3. Pilih warna latar belakang yang akan digunakan.

4. Tentukan apakah Sobat mau menampilkan jumlah follower atau tidak di sebelah tombol.

5. Pilih bahasa yang ingin digunakan.

6. Pratinjau atau preview tombol dapat Sobat lihat di sebelah kanan.

7. Selanjutnya copy kode tombol Follow yang muncul.

8. Paste kode tersebut di blog Sobat. Penempatannya terserah Sobat, apakah pada halaman posting atau di sidebar, yang penting dapat dilihat dengan jelas oleh pengunjung blog.

Cara Memasang Tombol Tweet di Bawah Posting

Seperti halnya tombol Like Facebook, tombol Tweet ini juga dapat memudahkan para pengunjung blog untuk membagikan artikel yang menurut mereka menarik ke dalam  jaringan akun Twitter mereka. Bila ada yang mengeklik tautan atau link artikel kita, maka hal ini dapat meningkatkan traffik kunjungan ke blog kita.

Nah, berikut ini merupakan langkah-langkah dalam memasang tombol Tweet atau Tweet button di bawah posting pada Blogger.

Langkah 1

Silakan kunjungi halaman http://twitter.com/about/resources/tweetbutton

Langkah 2

Pilihlah satu tombol Tweet yang Anda sukai dari tiga pilihan yang tersedia.

Langkah 3

Pada langkah ini kita dapat merekomendasikan sampai dua akun Twitter untuk mengikuti setelah mereka berbagi konten dari blog kita. Akun ini dapat mencakup Anda sendiri, atau kontributor atau pasangan.

Langkah 4
Copy kode Tweet button yang muncul.

Langkah 5
Masuk ke akun Blogger Anda.

Langkah 6
Klik Rancangan > Edit HTML.

Langkah 7
Klik Download Template Lengkap untuk membuat salinan template.

Langkah 8
Beri tanda centang pada Expand TemplateWidget.

Langkah 9
Cari kode <data:post.body/>. Tekan tombol Ctrl + F untuk memudahkan pecarian.

Langkah 10
Paste kode Tweet button di bawah kode <data:post.body/>. Agar tombol Tweet hanya muncul di halaman posting apit kode Tweet button dengan kode <b:if cond='data:blog.pageType == &quot;item&quot;'> dan </b:if> serta tambahkan kode style agar letaknya di kiri sehingga secara keseluruhan kode yang di taruh di bawah kode <data:post.body/> menjadi seperti ini:

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div style='float:left; margin-top:10px;'><KODE TWEET BUTTON></div>

</b:if>

Langkah 11
Klik tombol SIMPAN TEMPLATE.

Cara Memasang Tombol Like Facebook di Blogger

Tombol Like Facebook memungkinkan pengunjung blog pengguna Facebook untuk berbagi artikel blog kita dengan teman-teman mereka di Facebook. Saat pengunjung mengeklik tombol ini maka sebuah cerita muncul di News Feed teman-teman Facebook pengunjung tersebut dengan link back yang mengarah ke blog kita. Bila ada teman pengunjung yang mengeklik link tersebut, hal ini merupakan suatu keuntungan buat kita karena dapat meningkatkan traffic.

Nantinya jika tombol Like sudah terpasang maka akan terlihat seperti gambar dalam tabel di bawah ini.

Nah, bila Anda tertarik untuk memasang tombol Facebook Like ini bawah setiap postingan Anda, silakan ikuti langkah-langkahnya di bawah ini.

1. Masuk ke akun BloggerAnda.

2. Klik Rancangan > Edit HTML.

3. Klik Download Template Lengkap untuk membuat salinan template. Hal ini untuk berjaga-jaga bila ada kesalahan dalam pengeditan kita dapat dengan mudah mengembalikan template seperti semula.

4. Beri tanda centang pada Expand Template Widget.

5. Cari kode <data:post.body/>. Tekan Ctrl + F lalu isikan kode yang dimaksud untuk mempercepat pencarian.

6. Copy kode di bawah ini dan paste di bawah kode <data:post.body/>.

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div style='float:left; margin-top:10px;'><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;action=like&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:25px;'/></div>

</b:if>

7. Klik tombol SIMPAN TEMPLATE.

Cara Membuat Tombol Go to Bottom di Blogger

Tombol Go to Bottom merupakan kebalikan dari tombol Back to Top. Jadi, tombol ini bila diklik akan membawa kita langsung menuju footer atau bagian terbawah dari halaman blog. Tombol ini nantinya akan berada di pojok kanan atas area layar halaman blog dan posisinya tetap di tempat tersebut.

Jika Anda tertarik untuk memasangnya pada blog, silakan simak langkah-langkahnya di bawah ini.

1. Masuk ke akun Blogger Anda.

2. Klik Rancangan > Elemen Laman > Tambah Gadget.

3. Pilih HTML/JavaScript.

4. Copy dan paste kode di bawah ini pada Konten.

<a style="display:scroll;position:fixed;top:5px;right:5px;" href="#footer" title="Pergi ke Bawah"><img src="http://i1119.photobucket.com/albums/k636/klikmunadi/down.png" /></a>

• top:5px; menunjukkan jarak antara tepi atas layar dengan sisi atas tombol sebesar 5 piksel. Jika ingin lebih renggang lagi, silakan angkanya diganti dengan nilai yang lebih tinggi.
• right:5px; menunjukkan jarak antara sisi kanan tombol dengan tepi kanan layar sebesar 5 piksel.
• title="Pergi ke Bawah" merupakan judul link. Silakan diganti sesuai keinginan Anda.
• URL gambarnya dapat Anda ganti dengan URL gambar Anda sendiri.

5. Klik tombol SIMPAN.

Membuat Back to Top di Bawah Posting

Link 'Back to Top' atau 'Kembali ke Atas' dibuat untuk memudahkan pengunjung yang ingin kembali ke atas halaman blog tanpa memutar scroll mouse. Link Back to Top tersebut dapat ditempatkan secara terapung seperti yang sudah pernah dibahas dalam posting yang berjudul Cara Memasang Tombol 'Back to Top' pada Blog.

Kali ini kita akan membuat link Back to Top di posting. Link Back to Top ini akan muncul pada bagian bawah posting. Linknya dapat berupa tulisan atau dapat diganti dengan gambar seperti yang terlihat pada tabel di bawah ini.

Back to Top tulisan	Back to Top gambar

Untuk membuat 'Back to Top' di posting, Anda dapat menyimak langkah-langkahnya di bawah ini.

1. Masuk ke akun Blogger Anda.

2. Klik Rancangan > Edit HTML.

3. Klik Download Template Lengkap untuk mem-backup template.

4. Beri tanda centang pada Expand Template Widget.

5. Cari kode yang seperti di bawah ini atau kode untuk icon email. Untuk mempercepat pencarian, tekan Ctrl + F, kemudian ketikkan kode yang akan dicari.

<b:if cond='data:post.emailPostUrl'>

          <span class='item-action'>

          <a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>

              <img alt='' class='icon-action' height='13' src='http://www.blogger.com/img/icon18_email.gif' width='18'/>

          </a>

          </span>

        </b:if>

6. Untuk membuat link Back to Top, silakan tambahkan kode <a href='#'>Back to Top</a> setelah kode sumber gambar icon email sehingga kodenya menjadi seperti di bawah ini.

<b:if cond='data:post.emailPostUrl'>

          <span class='item-action'>

          <a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>

              <img alt='' class='icon-action' height='13' src='http://www.blogger.com/img/icon18_email.gif' width='18'/>

          </a><a href='#'>Back to Top</a>

          </span>

        </b:if>

•  Tulisan Back to Top dapat Anda ganti sesuai keinginan Anda, misalnya Kembali ke Atas.

7. Jika ingin mengganti tulisan Back to Top dengan gambar, silakan tambahkan kode di atas dengan kode URL gambar Anda.

Contoh:

<b:if cond='data:post.emailPostUrl'>

          <span class='item-action'>

          <a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>

              <img alt='' class='icon-action' height='13' src='http://www.blogger.com/img/icon18_email.gif' width='18'/>

          </a><a href='#' title='Kembali ke Atas'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHUgBrJArVLwP85yN_QoRbFjAF3MNicqg46zj4n5-NHMM5_e8-pA-eWiHK3aIj9W3uKnP5RBopTfKu_tnL84jmzzCTw2DX_GrIQL_rlMVkWw0uM51HUPLZlWTw6jENlAR7uQnU5kmEjti7/s1600/Up.jpg'/></a>

          </span>

        </b:if>

• Anda dapat mengganti judul Kembali ke Atas sesuai keinginan Anda dan ganti URL gambar-nya dengan URL gambar Anda sendiri.

8. Klik tombol SIMPAN TEMPLATE.

Cara Memasang Tombol 'Back to Top' pada Blog

Tombol 'Back to Top' atau 'Kembali ke Atas' merupakan sebuah tombol yang jika diklik akan membawa kita menuju ke bagian atas suatu halaman pada blog. Tombol ini berguna untuk memudahkan pengunjung saat ingin kembali ke bagian atas halaman blog setelah selesai membaca artikel. Terlebih lagi bila isi posting terlalu panjang. Jadi, pengunjung tidak perlu repot-repot mengeklik scroll bar atau memutar scroll pada mouse untuk kembali lagi ke bagian atas halaman.

Letak tombol ini berada di pojok kanan bawah layar monitor dan melayang. Untuk memasang tombol ini, Anda dapat menyimak langkah-langkahnya di bawah ini.

1. Masuk ke akun Blogger Anda.

2. Klik Rancangan > Elemen Laman > Tambah Gadget.

3. Pilih HTML/JavaScript.

4. Copy dan paste kode di bawah ini di kolom Konten.

<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Kembali ke Atas"><img src="http://i1119.photobucket.com/albums/k636/klikmunadi/Up.png" /></a>

• Anda dapat mengganti Kembali ke Atas dengan judul yang Anda inginkan.
• Bila ingin menggunakan gambar Anda sendiri, silakan ganti http://i1119.photobucket.com/albums/k636/klikmunadi/Up.png dengan url gambar Anda.

5. Klik tombol SIMPAN.

6. Pindahkan elemen ke posisi paling bawah.

7. Klik tombol SIMPAN.

8. Selesai.

Cara Memasang Tombol Share di Blogger

Sudah hal yang umum bila para blogger memasang tombol share atau tombol berbagi di blog mereka. Ada yang meletakkannya di atas postingan atau ada juga yang menaruhnya di bawah postingan. Tujuannya agar pengunjung blog atau pemilik blog itu sendiri dapat dengan mudah membagikan link artikel ke berbagai situs jejaring sosial atau social bookmarking tanpa harus mengetik atau meng-copy url artikel terlebih dahulu.

Bila pengunjung blog merasa tertarik untuk membagikan artikel kita ke akun situs jejaring sosialnya, hal ini dapat menambah peluang artikel kita dibaca oleh banyak orang. Dengan demikian traffic blog kita pun akan meningkat. Oleh karena itu, buatlah artikel-artikel yang bermanfaat serta informatif agar orang tertarik untuk membacanya serta membagikan artikel tersebut kepada yang lain.

Ada banyak situs penyedia tombol share ini di internet. Namun, pada kesempatan kali ini saya akan membahas tombol share dari addthis.com. Kenapa saya memilih addthis.com? Karena tombol share dari situs tersebut mempunyai beberapa kelebihan antara lain:

• Ada beberapa pilihan tipe tombol.
• Ukuran tombolnya kecil, namun memuat lebih dari 300 layanan.
• Sudah dipakai di 1,5 juta domain.
• Gratis
• Dll.

Jika Anda tertarik untuk memasang tombol share di bawah postingan, silakan ikuti caranya di bawah ini.

• Kunjungi situs http://addthis.com
• Pilihlah jenis tombol share yang Anda inginkan.
• Pilih "Yes, I want analytics" bila ingin memantau perkembangan statistik jumlah share artikel blog Anda (perlu registrasi terlebih dahulu).
• Pilih "No, just give me the button" jika hanya ingin tombolnya saja.
• Klik tombol Get Your Button.
• Klik tombol Copy Code.
• Masuk ke akun Blogger Anda.
• Klik Rancangan.
• Klik Edit HTML.
• Backup template untuk mengantisipasi kalau nanti terjadi kesalahan dalam pengeditan.
• Beri tanda centang pada Expand Template Widget.
• Cari kode <data:post.body/>, gunakan F3 untuk memudahkan pencarian.
• Paste kode button yang tadi di-copy setelah kode <data:post.body/> sehingga hasilnya akan seperti ini <data:post.body/><kode button>
• Untuk meletakkan kode di sebelah kanan dapat di tambahkan kode <div style='float:right;margin-right:0px;margin-top:0px;'><kode button></div>
• Agar tombol share tidak mentok ke kanan atau ke atas nantinya, silakan diatur margin-right dan margin-top-nya.
• Klik tombol SIMPAN TEMPLATE.
• Jika berhasil akan ada pemberitahuan "Perubahan Anda telah disimpan". Klik Lihat Blog untuk melihat hasilnya.