Saya pernah menulis bahwa gadget FOLLOWER itu sangat memberatkan loading dan menyita kecepatan halaman blog, dan itu benar adanya. Tetapi tanpa gadget follower bagi sementara blogger seperti ada yang kurang jadi saya berusaha mencari cara agar link follower tetap terpasang namun menjadi super ringan! Saya jadi teringat trik yang saya pakai untuk menghubungkan sebuah link langsung ke WA atau SMS melalui link Blogspot menggunakan Php. Dan walaupun caranya tidak sama persis, namun trik ini dapat bekerja dengan baik!
Lihat gambar dan perhatikan bagian footer pada tampilan mobile, perhatikan bagian bawah kanan layar hape telah ada menu footer "👫Follow Us".
Hasilnya? Jauh lebih ringan dan Jauh lebih enteng daripada widget Follower bawaan, hampir tidak terlihat mengurangi loading blog. Begitu sobat klik Follow Us tersebut akan muncul layar notifikasi kecil sbb:
1. LANGKAH PERTAMA GUNAKAN BLANKO WIDGET JAVASCRIPT/HTML
<div class="navbar">
<a href="https://www.editblogtema.net/p/privacy-policy-for-editblogtema-if-you.html" class="active">👤Privasi</a>
<a href="https://www.editblogtema.net/p/saying-goodbye-to-adsense-for-feeds.html">🌐Tentang</a>
<a href="http://www.blogger.com/follow-blog.g?blogID=3894474860842702694">👫Follow US</a>
</div>
Hapus dan ganti angka yang saya sorot kuning dengan angka atau nomor ID sobat sendiri. Caranya masuk kepengaturan blogspot, lihat pada bar alamat bagian atas komputer atau laptop atau tablet atau ponsel sobat, gambarnya sebagai berikut perhatikan angka yang saya sorot kuning juga ya.
Kemudian SAVE template.
2. LANGKAH KEDUA TAMBAHKAN CSS MELALUI HALAMAN EDITOR HTML
<style>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.navbar {
overflow: hidden;
background-color: #fff;
position: fixed;
bottom: 0;
width: 100%;
}
.navbar a {
float: left;
display: block;
color: #333;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover {
background: grey;
color: black;
}
.navbar a.active {
background-color: transparent;
color: #333;
}
.main {
padding: 16px;
margin-bottom: 30px;
}
</style>
Save Template.
Perhatian!, saya menggunakan dan memanfaatkan simbol emoji yang terdapat pada tool posting blogspot itu sendiri, sobat bisa menggantinya dengan ikon font awsome jika didalam template sobat telah terpasang link Pamanggilnya-di dalam tag <head>.
Simbol ini juga sangat mudah terpengaruh oleh perubahan struktur di dalam HTML terutama jika sobat membuka bagian gagdet JavaScript/HTMLnya. Simbol akan berubah jadi 2 buah persegi kue lupis berwarna hitam, jika hal tersebut terjadi hapus "2 kue lupis" tersebut dan kopikan kembali simbol baru dan save template.
Namun menggunakan simbol ini sangat ringan dan tidak terasa memberatkan loading.
www.editblogtema.net
Lihat gambar dan perhatikan bagian footer pada tampilan mobile, perhatikan bagian bawah kanan layar hape telah ada menu footer "👫Follow Us".
- Masuk kepengaturan blogspot
- Pilih Tataletak atau Lay out
- Tambahkan atau add gadget
- Pilih JavaScrit/HTML
Copy seluruh kode dibawah dan pada blanko kosong JavaScript/HTML yang telah terbuka pastekan.
<div class="navbar">
<a href="https://www.editblogtema.net/p/privacy-policy-for-editblogtema-if-you.html" class="active">👤Privasi</a>
<a href="https://www.editblogtema.net/p/saying-goodbye-to-adsense-for-feeds.html">🌐Tentang</a>
<a href="http://www.blogger.com/follow-blog.g?blogID=3894474860842702694">👫Follow US</a>
</div>
Hapus dan ganti angka yang saya sorot kuning dengan angka atau nomor ID sobat sendiri. Caranya masuk kepengaturan blogspot, lihat pada bar alamat bagian atas komputer atau laptop atau tablet atau ponsel sobat, gambarnya sebagai berikut perhatikan angka yang saya sorot kuning juga ya.
2. LANGKAH KEDUA TAMBAHKAN CSS MELALUI HALAMAN EDITOR HTML
- Masuk kepengaturan blogspot
- Pilih Tema atau "theme"
- Dibagian bawah Live on blog atau "langsung di blog" ada dua pilihan: Customize atau Sesuaikan dan Edit HTML
- Pilih Edit HTML
Cari kode </head> letakan kode CSS berikut tepat diatasnya:
<style>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.navbar {
overflow: hidden;
background-color: #fff;
position: fixed;
bottom: 0;
width: 100%;
}
.navbar a {
float: left;
display: block;
color: #333;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover {
background: grey;
color: black;
}
.navbar a.active {
background-color: transparent;
color: #333;
}
.main {
padding: 16px;
margin-bottom: 30px;
}
</style>
Save Template.
Perhatian!, saya menggunakan dan memanfaatkan simbol emoji yang terdapat pada tool posting blogspot itu sendiri, sobat bisa menggantinya dengan ikon font awsome jika didalam template sobat telah terpasang link Pamanggilnya-di dalam tag <head>.
Simbol ini juga sangat mudah terpengaruh oleh perubahan struktur di dalam HTML terutama jika sobat membuka bagian gagdet JavaScript/HTMLnya. Simbol akan berubah jadi 2 buah persegi kue lupis berwarna hitam, jika hal tersebut terjadi hapus "2 kue lupis" tersebut dan kopikan kembali simbol baru dan save template.
Namun menggunakan simbol ini sangat ringan dan tidak terasa memberatkan loading.
www.editblogtema.net
keren...
BalasHapusBoleh boleh.
BalasHapusOoh bisa gitu yak, ntar ane coba gan
BalasHapus