Panduan Langkah Mudah Membuat Menu Bar (Navbar) Blogspot
Monday, 17 September 2012
3 Comments
Panduan Langkah Mudah Membuat Menu Bar (Navbar) Blogspot. Sobat blogger yang budiman, keberadaan sebuah menu bar atau yang biasa di sebut navbar dalam halaman sebuah blog, selain menambah daya tarik, juga secara logika akan lebih memudahkan pengunjung blog untuk menjelajah (mencari) isi (konten) blog sobat. Bayangkan, apa jadinya kalau tulisan yang sobat unggulkan atau tulisan yang sobat persiapkan untuk memikat hati pembaca, ternyata tidak ditemukan hanya karena ketiadaan sebuah menu bar dalam blog sobat.
Namun, terkadang bagi blogger baru seperti saya yang tidak memiliki pengetahuan yang cukup tentang apa itu html (Hypertext Markup Language), maka angan – angan untuk membuat menu bar (navbar) terasa hanyalah sebuah mimpi belaka. Namun, terkadang sebuah mimpi juga bisa menjadi suatu kenyataan, begitu juga dengan mimpi untuk membuat menu bar (navbar) dalam blog kita.
Berawal dari kuatnya keinginan saya untuk membuat menu bar (navbar) dalam blog ini, saya pun berusaha untuk mencari panduan dengan memanfaatkan bantuan search engine (google). Seharian muter – muter ahirnya saya temukan juga panduan langkah mudah membuat menu bar (navbar) blogspot ini di blog seorang master blogger, silahkan berkunjung langsung ke blognya.
Oke, dari blog itulah saya kemudian mendapatkan panduan mengenai langkah membuat menu bar (navbar) dengan sangat mudah. Berikut ini langkah – langkahnya :
1. Silahkan login ke akun blogger sobat2. Setelah itu, klik rancangan, pilih edit html3. Centang kotak expand widget themplate4. Cari kode seperti di bawah ini</head>5. Setelah ketemu, tuliskan kode di bawah ini tepat di atas </head>
<style type="text/css">
#pelajaranblognav img {
margin: 0px 0px -8px 0px;
vertical-align: middle;
}
#pelajaranblognav {
background-color: #222222;
width: 100%;
left: 0px;
text-align: center;
font-family: Arial, Tahoma, Verdana;
font-size: 12px;
z-index:10000;
bottom:0;
}
#pelajaranblognav ul {
margin: 0px;
padding: 0px;
list-style: none;
color:white;
font-family:arial;
font-size:11px;
}
#pelajaranblognav a {
background: #222222;
color: #FFFFFF;
text-decoration:none;
font-weight: bold;
margin: 0px;
padding: 8px 12px 8px 12px;
border-left: 0px solid #444444;
border-top:0px solid #444444;
border-right: 0px solid #000000;
border-bottom: 0px solid white;
}
#pelajaranblognav a:visited {
background: #222222;
color: #FFFFFF;
text-decoration:none;
font-weight: bold;
margin: 0px;
padding: 8px 12px 8px 12px;
border-left: 0px solid #444444;
border-top:0px solid #444444;
border-right: 0px solid #000000;
border-bottom: 0px solid white;
}
#pelajaranblognav a:hover {
background: #222222;
color: green;
text-decoration:none;
font-weight: bold;
margin: 0px;
padding: 8px 12px 8px 12px;
border-left: 0px solid #444444;
border-top:0px solid #444444;
border-right: 0px solid #000000;
border-bottom: 0px solid white;
}
#pelajaranblognav li {
float: left;
margin: 0px;
padding: 0px;
}
#copyright a {
text-decoration: none;
font-family:arial;
font-size:11px;
}
#copyright {
color: black;
text-decoration: none;
float:right;
font-family:arial;
font-size:11px;
}
</style>
6. Lalu, cari lagi kode seperti ini<body>7. Kemudian tuliskan kode di bawah ini tepat di bawah kode <body>
<div id="pelajaranblognav"><table border="0" bgcolor="#222222"><tr><br/><ul><li><a href="#">Home</a></li><li><a href="#">About</a></li><li><a href="#">Daftar Isi</a></li><li><a href="http://edykurniawan27blog.blogspot.com/">Edykurniawan27blog</a></li><li><a href="http://edykurniawan27blog.blogspot.com/">Menu Tiga</a></li><li><a href="#">Links</a></li></ul><td><a href="http://www.profitclicking.com/?r=hqOyBO2e1j"><img border="0" src="http://www.awsurveys.com/Pictures/AWS2_ad3_600by100.jpg" width="500" height="80"/></a></td><td><center><a href="http://www.profitclicking.com/?r=hqOyBO2e1j"><img border="0" src="http://i1064.photobucket.com/albums/u365/Edykur/ce8cffa9.gif" width="80" height="50"/></a></center><br/><center><a href="http://www.profitclicking.com/?r=hqOyBO2e1j"><img border="0" src="http://i1064.photobucket.com/albums/u365/Edykur/643b577e.gif" width="80" height="50"/></a></center><br/></td><td><center><a href="http://www.profitclicking.com/?r=hqOyBO2e1j"><img border="0" src="http://i1064.photobucket.com/albums/u365/Edykur/643b577e.gif" width="80" height="50"/></a></center><br/><center><a href="http://www.profitclicking.com/?r=hqOyBO2e1j"><img border="0" src="http://i1064.photobucket.com/albums/u365/Edykur/643b577e.gif"width="80" height="50"/></a></center><br/></td></tr></table></div><div id="copyright">Langganan <a href="http://url_blog_anda.blogspot.com/feeds/posts/default" target="_self"><b>RSS Artikel</b></a>| Langganan <a href="http://url_blog_anda.blogspot.com/feeds/comments/default" target="_self"><b>RSS Komentar</b></a>| Buat <a href="http://edykurniawan27blog.blogspot.com/2012/09/panduan-langkah-mudah-membuat-menu-bar.html"><b>Navbar</b></a> Ini Di Blog Kamu</div>
7. Langkah terakhir, simpan themplate sobat dan lihat hasilnya
Opss, saking asyiknya jadi lupa deh. Untuk menjaga kemungkinan error pada themplate, sebelum mempraktekkan langkah – langkah membuat menu bar (navbar) di atas, ada baiknya jika sobat terlebih dahulu mengamankan themplate sobat dengan memilih pilihan download themplate lengkap. Tujuannya jika nanti terjadi kesalahan (error) pada saat pengeditan, sobat bisa dengan mudah mengembalikan tampilan themplate sobat seperti semula.
Satu hal lagi. Tidak semua themplate blog memiliki struktur kode html yang sama, kadang kode html pada themplate yang satu tidak ditemukan pada kode html themplate yang lain. Jadi berhati – hatilah dalam melakukan pengeditan blog. Jika sobat blogger merasa perlu untuk mengajukan pertanyaan terkait panduan langkah mudah membuat menu bar (navbar) ini, jangan sungkan untuk menyampaikannya melalui kolom komentar. Setiap pertanyaan atau kah sapaan dari sobat pembaca akan saya jawab sesopan dan semampu saya. Jangan sampai hanya karena gengsi atau malu bertanya, malah akan membuat sobat tersesat di pengeditan themplate (ingat, malu bertanya = sesat di jalan).
Maaf kawan, ya pantas navbar ente ancur begitu, coba cek di html blog jgn centang expand widget dulu, lihat kode cssnya, fokus ke */header wrapper dan Navnya, cek sudahkan sesuai ukuran (margin, padding) juga width yg tersedia sama width banner, saya belum lihat kode sourcenya tapi kesimpulannya, kode ini ndak cocok di blog ente, tp klo mo nekat pake, harus di edit antara space dan width yg ada dengan width banner yg mau di pasang (+/-) coba di cek dari awal dan konsec di headerwrapper dan nav, semoga membantu dan bermanfaat, salam kenal
ReplyDeleteTips mantap. Aku suka dan coba praktekkan meskipun masih kesulitan. Tetap semangat dan terus berkarya. Mampir juga ke blogku http://insidelearn.blogspot.com. Masih amburadul tuh karena aku masih awam sekali
ReplyDeleteGood Info, thanks ya! mampir juga ke blog ku http://insidelearn.blogspot.com
ReplyDelete