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

Beri Komentar atau, Ajukan Pertanyaan

4 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

2 IN 1: from EDITBLOGTEMA to EDITBLOGTEMPLATE