CARA MENAMBAHKAN LINK FOOTER UNTUK TEMPLAT BLOGSPOT DENGAN LINK WHATSAPP

Sebenarnya ini bisa di terapkan ke dalam template blogspot yang lebih lama. Namun karena sebaiknya sobat menggunakan templat terbaru blogspot yang sudah dibuat otomatis responsive dan mobile, maka cara ini sangat baik diterapkan.
untuk template blogspot terbaru

1. CSS

Tidak ada JavaScript. Hanya elemen CSS yang kita butuhkan disini dengan syarat hanya 3 link saja yang saya sarankan itupun dengan judul link yang singkat seperti: privasi, perihal, dan kontak atau menurut selera sobat  karena layar hape yang kecil hanya bagus menampung panjang posisi inline sedemikian.

Masuk ke pengaturan blogspot>>Tema>>Masuk ke opsi edit HTML, lalu cari kode: </head> dan letakan kode 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 templat sobat.

2. HTML
Masuk kepengaturan blogspot>>tataletak>>tambahkan gagdet>>pilih gagdet JavaScript/HTML, lalu pada kotak atau blank yang muncul kopi seluruh kode berikut dan pastekan kedalam blanko tersebut.

<div class="navbar">
  <a href="LINK SOBAT">Privasi</a>
  <a href="LINK SOBAT">Tentang</a>
  <a href="https://api.whatsapp.com/send?phone=masukan saja nomor telepon disini">Kontak</a>
</div>

Catatan: instruksi yang saya sorot merah harus diisi dengan nomor telepon misalnya: 08127020xxxx maka 0 harus diganti dengan 62 (kode Indonesia) menjadi sbb: 628127020xxxx

Save templat

Selamat negeblog, semoga sukses.

Contoh pembuatan:

  W3SCHOOL 

setelah masuk Klik RUN untuk melihat hasilnya

www.editblogtema.net


Comments

  1. Yap keren bang, akan bermanfaat sekali bagi template yang ga ada link di footernya.

    ReplyDelete

  2. Oohh begitu...ok saya coba tutorialnya sob perlahan2..thanks nih sudah berbagi..😄😄

    ReplyDelete

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