[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='"https://www.blogger.com/follow.g?blogID=" + 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.
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 BlogMembuat Tombol Follow Blog Di Menu Navigasi
Perhatikan contoh kode menu navigasi di bawah ini sebagai ilustrasi penerapan tombol follow blog di menu navigasi, penambahanclass='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='"https://www.blogger.com/follow.g?blogID=" + 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:- Tempatkan tombol follow blog di tempat yang mudah dilihat oleh pengunjung blog anda.
- Kombinasikan link follow blog dengan icon lonceng/icon notification agar lebih menarik.
Komentar
Posting Komentar