CARA MEMBUAT LINK FOOTER PLUS FOLLOWER RINGAN

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".
dilengkapi dengan tombol link follower cantik
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:
Muncul setelah Follow Us di klik
1. LANGKAH PERTAMA GUNAKAN BLANKO WIDGET JAVASCRIPT/HTML
  1. Masuk kepengaturan blogspot
  2. Pilih Tataletak atau Lay out
  3. Tambahkan atau add gadget
  4. 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.
Kemudian SAVE template.

2. LANGKAH KEDUA TAMBAHKAN CSS MELALUI HALAMAN EDITOR HTML

  1. Masuk kepengaturan blogspot 
  2. Pilih Tema atau "theme"
  3. Dibagian bawah Live on blog atau "langsung di blog" ada dua pilihan: Customize atau Sesuaikan dan Edit HTML
  4. 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 Tempalte.

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


Comments

Post a Comment

🌐请给我们一个礼貌的评论与任何相关的主题
⚘⚘Kami menghargai semua masukan
👫👫 Namun kami juga menjunjung tinggi kesopanan

Popular Minggu ini:

MEMPERBAIKI ADD NUMBERING DAN ADD BULLETS YANG TIDAK BISA TAMPIL PADA POSTINGAN BLOG

AUTODIDACT, WHY YOU FAIL TO PERFORM IT

INI DIA UKURAN GAMBAR TERBARU YANG IDEAL UNTUK KONTEN BLOG AMP