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

Oleh Ade Sanusi

2.06.2009

Bagikan :

Tweet

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.

Tag : Tips and Trik, Unik