4 Comment
A+ A-

Cara Membuat Tombol Follow di Blog - Tombol follow merupakan salah satu widget penting untuk di pasang pada situs blog, tombol follow blogger sering disebut juga sebagai tombol join us (join this site) berfungsi sebagai navigasi yang memudahkan pengunjung untuk mengikuti situs yang mereka sukai. Pada tutorial ini saya akan membagikan cara membuat tombol follow blogger yang dapat ditempatkan di berbagai tata letak seperti di atas kolom komentar, sidebar, menu navigasi dan tombol follow di dalam postingan.
Blogger Follow Button
Cara Membuat Tombol Follow di Blog
Metode yang saya gunakan untuk membuat tombol follow adalah dengan memanfaatkan link follow yang ada pada widget followers (join this site), dengan demikian maka tombol follow yang dihasilkan akan lebih ramah dan mudah di aplikasikan. Langsung saja ke tutorial membuat tombol follow blogger dan yang pertama harus dilakukan adalah menyiapkan link follow + id situs blog, lihat contoh dibawah ini;
https://www.blogger.com/follow.g?blogID=6093713042691745392
Nomor id yang ditandai dengan huruf tebal adalah nomor id situs blog saya, silahkan ganti dengan "id" situs blog masing-masing, untuk mendapatkan atau melihat "id" situs blog silahkan login ke blogger, pilih salah satu situs jika kamu memiliki banyak situs blog kemudian lihat pada addres bar id situs blog anda.
ID Situs Blog
ID Situs Blog
Setelah link follow situs disiapkan selanjutnya adalah memasang link follow tersebut ke tata letak atau tempat yang diinginkan dan menampilkan nya sebagai tombol follow (join us).

Memasang Tombol Follow di Atas Kolom Komentar

  1. Login ke blogger > Template > Edit HTML
  2. Cari kode penutup css yaitu ]]></b:skin>
  3. Tambahkah kode css berikut ini tepat di atas kode ]]></b:skin>
.comments .rightx{font-size:12px;position:absolute;$endSide:0;top:0;line-height:22px;max-height:22px;padding:4px 0 0 4px;margin-$endSide:0;background-color:#333333;overflow:hidden;display:block;}
.comments .rightx a{display:inline-block;min-width:75px;margin-$endSide:0;background-color:#333333;text-align:center;color:#ffffff;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;cursor:pointer;text-decoration:none;text-transform: uppercase;}
Save template, kemudian cari kode <h4 id='comment-post-message'> atau <h4 id='comment-post-message'><data:postCommentMsg/></h4> dan ganti dengan dengan kode di bawah ini.
<h4 id='comment-post-message'>
<span class='subscrnya'><data:postCommentMsg/></span>
<span class='rightx'><b:if cond='data:top.commentLabel'>
<a href='https://www.blogger.com/follow.g?blogID=6093713042691745392'>Join Us</a>
</b:if>
</span>
</h4>

Ganti text "Join Us" dengan Follow First atau Subscribe sesuai dengan selera masing-masing dan ganti juga nomor id "6093713042691745392" dengan id situs blog kamu sendiri. Save template dan lihat hasilnya, tombol follow akan muncul di atas kolom komentar seperti terlihat pada contoh dibawah ini.
Cara Membuat Tombol Follow di Atas Kolom Blog
Cara Membuat Tombol Follow di Atas Kolom Blog
Catatan: Kode <h4 id='comment-post-message'><data:postCommentMsg/></h4> adalah kode "comment message" single comment box dan merupakan kode default kolom komentar bawaan blogger. Jika sebelumnya pada template situs blog kamu sudah dimodifikasi atau menggunakan 3 comment system (blogger-facebook-disqus) silahkan lihat pada contoh gambar berikut [Klick Unduh]

Menambahkan Tombol Follow Pada Menu Navigasi

<nav class='naviy' id='nav'>
<ul class='sf-menu' id='menunav'>
<li><a href='add_url'>About</a></li>
<li><a href='add_url'>Contact</a></li>
<li><a href='https://www.blogger.com/follow.g?blogID=6093713042691745392'>Join This Site</a></li>
</ul>
</nav>

Membuat Tombol Follow di Sidebar

  1. Login ke Blogger > Tata Letak > Add Widget HTML
  2. Tambahkan kode berikut ini kemudian save
<button onclick="window.location='https://www.blogger.com/follow.g?blogID=6093713042691745392'" style="background-color: orange; color: white; height: 30px; width: 201px;"><b>Follow Us</b></button>
Ganti id blog dan warna tombol sesuai dengan yang di inginkan.

Menambahkan Tombol Follow di Dalam Postingan

Untuk menambahkan tombol follow di dalam post (artikel) sebenarnya metode yang digunakan sama dengan metode membuat tombol follow di sidebar, yaitu dengan menambahkan element button pada link follow blog. Kamu bisa mencoba variasi tombol yang berbeda seperti contoh berikut ini.
<a href="https://www.blogger.com/follow.g?blogID=6093713042691745392" target="_blank"><button><b>Subscribe Me</b></button></a>
Nah, itulah beberapa cara membuat tombol follow di blog (situs blogger) yang dapat di sesesuaikan dan di tempatkan di beberapa tata letak. Silahkan di garap atau cobalah ber experiment sendiri dengan link follow blogger. Metode ini juga dapat diterapkan pada situs blog yang sudah menghapus css bundlle (optimasi pagespeed insights) karena umumnya menghapus css bundle umumnya akan menyebabkan beberapa widget blogger tidak berfungsi termasuk widget followers.

Kelebihan:
  • Mengganti widget followers (join this site) dengan tombol follow, tidak membebani loading situs web sama sekali.
  • Tombol follow dapat diletakkan di banyak tempat yaitu, di atas kolom komentar, sidebar, menu navigasi, di dalam post blogger dan lain-lain.
  • Menghindari blocked rendering paruh atas situs
  • Dan dapat di variasikan dengan banyak style css button.
Demikian tutorial cara membuat tombol follow (subscribe button) blogger dan siap-siap untuk mendapatkan banyak followers situs blog kamu. Jika ingin melihat demonya silahkan gulir ke kolom komentar dan Subscribe situs blog tukang listrik batam. Anggap saja subscribe anda sebagai bonus untuk saya, akhir kata saya ucapkan terimakasih telah berkunjung dan semoga tuorial ini bermanfaat.

Post a Comment Subscribe

  1. Saya sudah terapkan tombol follow blog nya di dua situs blog saya, satu situs berhasil, tapi satu situs lg tidak muncul tombol follow nya.

    ReplyDelete
    Replies
    1. Beberapa desain template menyembunyikan tittle atau h4 comment message, cari kode CSS yang mirip seperti ini h4#comment-post-message {
      display: none;
      margin: 0 0 0 0; kemudian hapus kode display: none; agar tittle posts message dan tombol follow blog tampil.

      Delete
  2. Mampir ke http://sharing-apa-bae.blogspot.com

    ReplyDelete

Note: Subscribe terlebih dahulu untuk memposting komentar, Kami akan segera kembali untuk meninjau dan menanggapi respon dari anda.

Top