[Update] Cara Membuat Tombol Follow Blog

Tombol follow blog atau disebut juga blogger subscribe button merupakan widget yang sangat penting untuk perkembangan blog. Dari sisi pengelola tombol follow mempermudah author dalam mempromosikan konten-konten baru di blog tersebut, sedangkan dari sisi pengguna tombol follow blog mempermudah mereka dalam mengikuti blog dan mendapatkan informasi terupdate dari blog favorit mereka.

Oleh karena itu disini saya akan menjelaskan secara rinci cara membuat tombol follow blog dengan menggunakan link follow blog yang pada dasarnya berasal dari widget "ikuti blog".

Tapi sebelumnya perlu diketahui bahwa ada dua tipe link follow blog yang bisa kamu gunakan untuk membuat tombol follow blog yaitu:

Tipe 1:
<a href='https://www.blogger.com/follow.g?blogID=6286909915724512730' title='Follow This Blog'>Follow This Blog</a>
Tipe 2:
<a expr:href='&quot;https://www.blogger.com/follow.g?blogID=&quot; + data:blog.blogId' title='Follow This Blog'>Follow This Blog</a>
[ads id="ads1"] Dari sisi penggunaan link follow blog tipe 1 dapat digunakan dimana saja baik itu di sidebar, footer atau di menu bahkan dapat digunakan didalam postingan dan didalam template blog.

Sedangkan link follow blog tipe 2 hanya dapat digunakan dan berfungsi pada pengeditan html template blogger. Tetapi itu bukan berarti link follow blog tipe 1 lebih baik dari link follow blog tipe 2 karena link follow blog tipe 2 memiliki kelebihan yaitu auto get blog id.

Maksudnya adalah jika menggunakan link follow blog tipe 1 maka id blog harus ditambahkan secara manual. Sedangkan link follow blog tipe 2 (dua) id blog akan ditambahkan secara otomatis. Untuk creator template blogger link follow tipe 2 tentu lebih tepat untuk digunakan karena dapat diolah menjadi fitur template yang meningkatkan daya jual template yang mereka buat.
Blogger Follow Button
Setelah tau perbedaan kedua tipe link follow blog, mari ikuti tutorial membuat tombol follow blog di blog anda.

Membuat Tombol Follow Blog Dengan Tag <button/>

HTML
<button>
  <a href='https://www.blogger.com/follow.g?blogID=6286909915724512730' title='Follow This Blog'>Follow This Blog</a>
</button>

OUTPUT

Atau kamu dapat menambahkan class pada tag <button> seperti contoh berikut.

HTML

<button class="follow-button">
  <a href='https://www.blogger.com/follow.g?blogID=6286909915724512730' title='Follow This Blog'>Follow This Blog</a>
</button>

CSS

.follow-button{
   background-color:rgba(56, 141, 128,1);
   padding: 12px;
   border: 0;
   border-radius: 5px;
}
.follow-button a{
   color:#fff!important;
   font-weight:bold;
}
.follow-button:hover{
   background-color:rgba(64, 64, 64,1.00);
}

OUTPUT


Membuat tombol follow tanpa tag <button/> (Link Only)

HTML

<a class="gradient-follow-button" href="https://www.blogger.com/follow.g?blogID=6286909915724512730">Follow This Blog</a>

CSS

.gradient-follow-button{
   background:-webkit-linear-gradient(left, #ad39e4 0%, #3f59d7 100%);
   font-weight: bold;
   padding: 13px;
   border: 0;
   border-radius: 6px;
   color: #fff!important;
}

OUTPUT

Follow This Blog

Membuat Tombol Follow Blog Di Menu Navigasi

Perhatikan contoh kode menu navigasi di bawah ini sebagai ilustrasi penerapan tombol follow blog di menu navigasi, penambahan class='current' bertujuan untuk memudahkan anda menambahkan style css pada link follow blog misalnya: .current{background-color:rgba(252, 79, 8,1);} untuk menambahkan warna baground khusus pada class='current'.

HTML

<nav class='example-menu' id='example-menu'>
 <div class='example-nav' id='example-nav'>
  <ul>
   <li><a href='#' title='About Us'>About Us</a></li>
   <li><a href='#' title='Contact Us'>Contact Us</a></li>
   <li><a class='current' expr:href='&quot;https://www.blogger.com/follow.g?blogID=&quot; + data:blog.blogId' title='Join our site'>join Us</a></li>
  </ul>
 </div>
</nav>

Nah, setelah mengetahui cara-cara membuat tombol follow blog cobalah untuk mengkreasikan link/tombol follow blog dengan ide anda sendiri.

Praktik Terbaik:
  1. Tempatkan tombol follow blog di tempat yang mudah dilihat oleh pengunjung blog anda.
  2. Kombinasikan link follow blog dengan icon lonceng/icon notification agar lebih menarik.
Selamat mencoba dan jangan lupa untuk mendukung cordialblogger.com dengan cara follow blog ini agar admin terus semangat memberikan trik-trik menarik seputar blogging.
Lebih baru Lebih lama
Close