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.
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:
setelah masuk Klik RUN untuk melihat hasilnya
www.editblogtema.net
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
Yap keren bang, akan bermanfaat sekali bagi template yang ga ada link di footernya.
BalasHapus@Aorlin😊
Hapuskeren bang
BalasHapus
BalasHapusOohh begitu...ok saya coba tutorialnya sob perlahan2..thanks nih sudah berbagi..😄😄