Cara Memindahkan Letak Navbar Blog - Terbaru

Ada beberapa cara memindahkan letak navbar dalam posisi default ke tempat atau posisi yang kita inginkan. Secara default, navbar blogger terletak di atas header .

Cara yang pertama adalah dengan memindahkan kode html navbar yang berada dalam body. Sedangkan yang kedua adalah dengan merubah kode "locked" navbar dari nilai "true" menjadi "false", kemudian memindahkan Gadget Navbar yang ada di edit tata letak ke posisi yang diinginkan.

Pada artikel kali ini yang jadi pokok bahasan adalah cara yang pertama. Sebab selain lebih mudah, navbar juga bisa dipindah - pindah lebih leluasa sesuai keinginan dan dengan ditambah berbagai variasi.

Detail Cara terbaru memindahkan navbar blog dari posisi default ke posisi header bagian bawah, untuk template standar blogger sebagai berikut:

Poin 1:
Login ke blogger.com --> Template --> Edit Html

Poin 2:
Dengan menggunakan Ctrl+F cari kode:
<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>


Poin 3:
Klik angka di samping kode tersebut sampai muncul tanda segitiga hitam (tanda kode tersembunyi) , sehingga kode menjadi:

<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>...</b:section>

Blok kode diatas dengan mengklik sebelum kode <b:section --> tekan dan tahan Shift --> Klik setelah kode </b:section> agar kode tidak terbuka.
Selanjutnya copylah kode tersebut.

Poin 4:
Cari Kode :
</div>
</header>
Letakkan kode yang telah di copy pada poin 3 tepat di atasnya , sehingga menjadi:

<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>...</b:section>

</div>

</header>

Poin 5:
Simpan Template dan lihat hasilnya seperti nampak pada . Selesai

Agar nampak lebih menarik navbar bisa ditambah dengan background dan border , caranya:
Carilah kode ]]></b:skin>, kemudian letakkan kode dibawah ini tepat diatasnya

#navbar-iframe {

  height:40px;/*tinggi background*/

  background:#ee5f00;/*warna background*/

  border-bottom:2px solid #000;/*border atas*/

  border-top:2px solid #000;/*border bawah*/

  }

Untuk mengatur jarak antara navbar dengan posting dan sidebar tambahkan kode:

.main-inner {padding-top:10px}. Dan letakkan diatas kode ]]></b:skin> 

Ganti nilai jarak 10px dengan jarak yang dikehendaki, lalu Simpan Template. Lebih detail dalam mengatur jarak dapat dibaca pada artikel cara mengatur jarak antara header dengan posting dan sidebar.

Selain dapat dipindah letak atau posisinya, navbar juga dapat disembunyikan bahkan dihapus. Selamat mencoba.

Related Posts :