Tips dan Trik Blogger

Navbar Blogger di Bawah atau Footer (Navbar di Atas jadi di Bawah)

Navbar Blogger anda di atas? sudah pasti. Mungkin anda ingin tampil beda dengan cara " Menampilkan Blogger di Bawah /Footer." setelah sebelumnya saya membuat tutorial tentang "Menyembunyikan Navbar Blogger" kali ini Dunia Blogger, mencoba sesuatu hal yang unik saya coba aplikasikan untuk menampilkan Navbar berbeda dari biasanya.
Warning:!! Silahkan baca Revisinya di bawah artike ini, langkah ini kurang efektif dan menambah berat loading blog kita. terima kasih atas sarannya untuk seorang yang baik yang gak mau diketahui namanya "Anonymous"


Langkah-langkahnya sebagai Berikut: /* disarankan menggunakan firefox agar lebih mudah mengerjakanya */
Mungkin anda perlu mengulang untuk memahaminya karena besar kemungkinan membingungkan dan berbelit-belit :)


1). Buka Blog  yang ingin di buat navbar di bawah footer blog anda misalnya: http://cari-google.blogspot.com
2). Setelah halaman blog anda tampil, silahkan lihat source kodenya dengan cara kombinasi Ctrl+ U atau Klik Kanan kemudian klik "View Source Page" untuk firefox dan klik "Page" kemudian klik "View Source" atau klik kanan kemudian klik " View Sorce" bagi yang menggunakan Internet explorer.
3). Setelah Blok/ kumpulan kode blog anda tampil, kemudian silahkan cari kode ini: Gunakan pasilitas Find pada Iinternet Explorer atau Kombinasi Ctrl+F untuk Firefox dan cari kode yang mirip/hampir sama:


<iframe src="http://www.blogger.com/navbar.g?targetBlogID=................... 


Kodenya panjang dan untuk memudahkannya dalam pencarian cukup gunakan kode yang ditandai merah di atas.


Setelah menemukan kode di atas, silahkan blok kode tersebut "satu baris" dari <iframe src ...... sampai kode </iframe> dan Copy kode tersebut pada Notepad atau MS Word.


4). Buka Layout Blog anda melalui Dashboard kemudian klik " Layout" setelah itu klik "Edit HTML" dan klik juga "Expand Widget Template"


5). Cari kode </body>


6). Letakan kode yang sebelumnya anda copy ke Notepad/MS Word "pada langkah ke-3" dan pasang di atas kode </body> pada langkah no 5. lihat Gambar:
7. Pada Kode Ifrmae terdapat ID sebagai berikut id="navbar-iframe" title="Blogger Navigation and Search"></iframe> Untuk menghindari bentrok dengan kode default bawaan blogger silahkan ganti kode ID di atas dengan menambahkan angka2 atau teks lainnya sesuai selera anda. seperti ini id="navbar-iframe2" title="Blogger Navigation and Search"></iframe>


8) Silahkan klik Tombol " Preview untuk melihat hasilnya. pada tahap ini Navbar Blogger anda sudah berhasil anda pasang di bawah/footer. Silahkan Klik " Save" untuk menyimpannya.


Tambahan:
9). Supaya Navbar Blognya selalu tampil  meskpun scroll di gulung berikut kode CSS yang perlu anda tambahkan" dan ingat kode ini berdasarkan ID iframe pada langkah no7 untuk itu sesuaikan nama IDnya dengan kode CSSnya " di sini ditandai warna biru."


#navbar-iframe2 a {
color: #000;
font-weight:bold;
}

#navbar-iframe2 {
align: center;
position: fixed;
border-top: 1px solid #ddd;
border-bottom: 10px solid #f5f5f5;
background-color: #fff;
width: 100%;
left: 0px;
text-align: left;
color: #000;
font-family: Verdana;
font-size: 11px;
z-index:10000;
opacity: 0.9;
filter: alpha(opacity: 90);
bottom:0;
}


10. Pasang kode CSS di atas dan letakan di atas kode ]]></b:skin>
Catatan: Pastikan anda telah Menyembunyikan Navbar bawaan Blogger untuk menghindari navbar tampil menjadi dua. Kode CSS terinspirasi dari blognya Mas Anang's tentang "Blogger Footer navbar"
Caranya Cukup  menggunakan Kode CSS berikut ini:

#navbar-iframe {
align: center;
position: fixed;
bottom:0px;
}


Mungkin Position: fixed; gak bisa untuk Sebagian Internet Explorer. Tapi Untuk Internet Explorer 7.0.xxx sudah di coba dan ternyata hasilnya BISA. Selamat mencoba.
17 Komentar untuk "Navbar Blogger di Bawah atau Footer (Navbar di Atas jadi di Bawah)"

pertamaxx dulu pastinya.. hehehehe

wah ini harus disimpen dulu nih di notepad.makasih om ade.seppp

keren juga yah,,, nice info oom,,

style position:fixed, tidak support di IE

navbar jadi terpanggil 2x, meskipun navbar default di hidden, browser tetap memanggil

apa gak mubasir pake 2 navbar.

Sebenarnya ada cara memindahkan navbar default ke bottom tanpa harus menambah navbar lagi , ubah aja di style CSS nya, ganti position : absolute, bottom : 0px

lama ga jumpa mas.. :D

Gmn nich kabarnya???

ooh... ini yang navbar ternyata. kirain sama seperti yang ada di anangku. soalnya aq mau naruh jadi di header, bukan footer.

but, this is usefull. thanks! =)

Enak donk kalau navbar kayak di facebook bisa buat chating seperti di blogku icang69. tapi agak kacau kalau sudah beda browser dan resolusi

nice info nih ^_^ thanks yah... tukeran link yuk sob...

thanks materinya mas...
akan saya coba..
kalau bisa...

tips-nya bagus untuk referensi, terima kasih.

oke sob makasih infonya

Terima Kasih telah Mengunjungi Blog ini dan Silahkan tinggalkan Komentar Anda...

Back To Top