Salam sobat indonesia...
Kadang orang tak ingin blognya ada navbarnya...
Eh ternyata, ada pula yang justru ingin di tambahi navbar di bawah macam kolom karya ilmiah saya. Tak papa, saya coba berbagi, namun yang pasti, belajar saya ya dari Kang rohman. Hehehe
Key, kita mulai ya...

Untuk membuat navbar bawah ada kode yang harus ditambahkan pada HTML blog sobat.

Kode tersebut adalah


/* kode untuk navbar
--------------------------------------- */

#navbar-bawah img {
/* margin: 0px 0px -8px 0px; */
vertical-align: middle;
}

#navbar-bawah p.info {
float: right;
padding-right:40px;
line-height: 1.5;
height: 100%;
vertical-align: bottom;
}

#navbar-bawah p {
float: left;
margin: 0px;
padding-top:4px;
padding-left:40px;
line-height: 1.2;
vertical-align: bottom;
}

#navbar-bawah a {
color:#00CCFF;
text-decoration:none;
}

#navbar-bawah a:hover{
color: #00FFFF;
}

#navbar-bawah {
align: center;
position: fixed;
border-top: 1px solid #ddd;
border-bottom: 5px solid #003366;
background-color: #114477;
width: 100%;
left: 0px;
text-align: left;
color: #ffffff;
font-family: verdana;
font-size: 11px;
z-index:10000;
bottom:0;
}


Pasang kode tersebut tepat di atas kode :


]]></b:skin>


Nah... itu baru mendefinekan variabelnya. Untuk memasang dalam body HTML, yang dilakukan adalah menambahkan kode :


<br/><br/>
<div id='navbar-bawah'>
<p> 
Pakdhe's Blog | <a href='http://karyailmiah-ardhiprabowo.blogspot.com/'><b>Karya Ilmiah</b>
</a>| <a href='http://olimpiadematematika-ardhiprabowo.blogspot.com/'><b>Olimpiade</b>
</a>| <a href='http://tech-ardhiprabowo.blogspot.com/'><b>Blog</b>
</a>| <a href='http://perkuliahan-ardhiprabowo.blogspot.com/'><b>Kuliah</b>
</a></p>
<p class='info'>Powered by <a href='http://www.blogger.com'>Blogger</a> |
Design by <a href='http://news-ardhiprabowo.blogspot.com/'>Pakdhe</a>  © 2009 
   <br/>
Best viewed in Firefox 1.5+ at 1024x768 or higher resolution</p>
</div>


diantara kode


</div> <!-- end outer-wrapper -->


dan kode


</body>


Rasanya hanya itu yang ditambahkan, secara detil langkah tesebut adalah sebagai beikut:

1. Masuk ke accoun blogger sobat.
2. Masuk ke tata letak
3. Jangan lupa beri centang pada kolom expand template widgets
4. Cari kode ]]></b:skin>
5. Copy paste kode di bawah tepat di atas kode tersebut:


/* kode untuk navbar
--------------------------------------- */

#navbar-bawah img {
/* margin: 0px 0px -8px 0px; */
vertical-align: middle;
}

#navbar-bawah p.info {
float: right;
padding-right:40px;
line-height: 1.5;
height: 100%;
vertical-align: bottom;
}

#navbar-bawah p {
float: left;
margin: 0px;
padding-top:4px;
padding-left:40px;
line-height: 1.2;
vertical-align: bottom;
}

#navbar-bawah a {
color:#00CCFF;
text-decoration:none;
}

#navbar-bawah a:hover{
color: #00FFFF;
}

#navbar-bawah {
align: center;
position: fixed;
border-top: 1px solid #ddd;
border-bottom: 5px solid #003366;
background-color: #114477;
width: 100%;
left: 0px;
text-align: left;
color: #ffffff;
font-family: verdana;
font-size: 11px;
z-index:10000;
bottom:0;
}


6. Cari kode </div> <!-- end outer-wrapper -->
7. Copy paste kode di bawah tepat diantara kode diatas dan kode </body>


<br/><br/>
<div id='navbar-bawah'>
<p> 
Pakdhe's Blog | <a href='http://karyailmiah-ardhiprabowo.blogspot.com/'><b>Karya Ilmiah</b>
</a>| <a href='http://olimpiadematematika-ardhiprabowo.blogspot.com/'><b>Olimpiade</b>
</a>| <a href='http://tech-ardhiprabowo.blogspot.com/'><b>Blog</b>
</a>| <a href='http://perkuliahan-ardhiprabowo.blogspot.com/'><b>Kuliah</b>
</a></p>
<p class='info'>Powered by <a href='http://www.blogger.com'>Blogger</a> |
Design by <a href='http://news-ardhiprabowo.blogspot.com/'>Pakdhe</a>  © 2009 
   <br/>
Best viewed in Firefox 1.5+ at 1024x768 or higher resolution</p>
</div>


8. Selesai.
9. Masih belum bisa???
10. Hehehehe, coba terus ya...