Cara Membuat Navbar Bawah (Ala Bp) Bagian 1 2

Jika anda pernah berkunjung pada website wibiya.com,ning.com,serta jisbar.com mungkin anda akan mendapatkan menu bar yang berada di bawah halaman website.Dan seperti pada blog bp ini anda akan mendapatkan menu bar tersebut dibagian bawah halaman blog, klik show dibagian kanan bawah untuk menampilkan menubar.Nah kali ini saya akan berbagi tentang bagai mana membuat menubar tersebut (Membuat Navbar Bawah (Ala Bp) Lihat Demo).

Contoh image :

Dan adapun cara pembuatanya adalah :

1.Seperti biasa anda harus log in dulu ke blogger
2.Pilih layout
3.Kemudian pilih edit HTML
4.centang Expand Widget Templates dan backup dulu templete anda (untuk menghindari apabila terjadi kesalahan)
5.Copy code dibawah ini dan pastekan diatas code </head> atau di bawah code ]]></b:skin>

<link rel="stylesheet" type="text/css" href="http://gudang-project.do.am/showhide-anim/script/reset-fonts-grids.css" />
<script type="text/javascript" src="http://gudang-project.do.am/showhide-anim/script/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://gudang-project.do.am/showhide-anim/script/animation-min.js"></script>
<script type="text/javascript" src="http://gudang-project.do.am/showhide-anim/script/script.js"></script>


<link href='http://gudang-project.do.am/bp-nav-bawah/script/ts.css' rel='stylesheet' type='text/css'/>
<script src='http://gudang-project.do.am/j-query-tog/jquery.js' type='text/javascript'>
</script>
<script src='http://gudang-project.do.am/j-query-tog/jquery-ui-customall.min.js' type='text/javascript'>
</script>
<script src='http://gudang-project.do.am/bp-nav-bawah/script/slide-nav-bawah.js' type='text/javascript'>
</script>

6.Untuk css code Copy code css di bawah ini copy dan pastekan diatas
]]></b:skin>

<style type="text/css">
ul, li{border:0; padding:0; margin:0; list-style:none;}
/* ----------- NAVIGATION Bawah ----------- */

#panelbawah {
background:url(http://gudang-project.do.am/navbar-glass/image/nav-bg-bp.jpg) repeat-x;

margin:0 auto;
width:94%;
position: fixed;
bottom: 0; left: 30px;
z-index: 9999;
margin: 0 3%;
border-style:none;
border-top: 1px solid #222;
border-bottom: 1px solid #222;
border-left:1px solid #222;
border-right:1px solid #222;
-webkit-box-shadow: 5px 5px 8px #818181;
-moz-box-shadow: 5px 0px 8px #818181;
-moz-background-clip: border; -moz-background-inline-olicy:continuous; -moz-background-origin: padding; -moz-border-radius-topright: 15px; -moz-border-radius-topleft: 15px;






}
#panelbawah {
float:left;
font-size:11px;
padding: 0;
margin:0 5px;
}
*html #panelbawah { /*--IE6 Hack - Fixed Positioning to the Bottom--*/
margin-top: -1px; /*--prevents IE6 from having an infinity scroll bar - due to 1px border on #footpanel--*/
position: absolute;
top:expression(eval(document.compatMode &&document.compatMode=='CSS1Compat') ?documentElement.scrollTop+(documentElement.clientHeight-this.clientHeight) : document.body.scrollTop +(document.body.clientHeight-this.clientHeight));
}



#panelbawah ul{
height:32px;
line-height:32px;
margin-left:10px;
margin-right:10px;
}
#panelbawah ul li{
display:inline;
position: relative;

}
#panelbawah ul li a.logo:link ,a.logo:visited ,a.Menu:link, a.Menu:visited, a.Tweetboard:link ,a.Tweetboard:visited ,a.facebook:link,a.facebook:visited ,a.Chat:link,a.Chat:visited,a.info:link,a.info:visited, a.toggle:link,a.toggle:visited,


#panelbawah ul li a:visited {
background:url() right no-repeat;
padding:0 20px;
display:block;
text-decoration:none;
float:left;
color:white;
font-weight:bold;
position: relative;
}
#panelbawah li#logo, #panelbawah li#Menu, #panelbawah li#Tweetboard, #panelbawah li#facebook { float: left; }
#panelbawah ul li a.logo {
background: url(http://gudang-project.do.am/j-query-tog/pic/bp-logo.png) no-repeat 15px center;
width: 40px;
padding-left: 40px;
text-indent: 60px; /*--Reset text indent--*/
}
#panelbawah ul li a.Menu{
background: url(http://gudang-project.do.am/j-query-tog/pic/menu.png) no-repeat 15px center;
width: 40px;
padding-left: 40px;
text-indent: 0; /*--Reset text indent--*/




}
#panelbawah ul li a.Tweetboard{
background: url(http://bambanggallery.at.ua/icon-image/menu-facebook/twitter.png) no-repeat 15px center;
width: 80px;
padding-left: 40px;
text-indent: 10px; /*--Reset text indent--*/


}
#panelbawah ul li a.facebook{

background: url(http://bambanggallery.at.ua/icon-image/menu-facebook/facebook.png) no-repeat 15px center;
width: 40px;
padding-left: 40px;
text-indent: 0; /*--Reset text indent--*/
}

#panelbawah li#toggle, #panelbawah li#info, #panelbawah li#chat { float: right; }


#panelbawah ul li a.info
{
background: url(http://gudang-project.do.am/j-query-tog/pic/info.png) no-repeat 15px center;
width: 40px;
padding-left: 40px;
text-indent: 0; /*--Reset text indent--*/


}
#panelbawah ul li a.Chat{

background: url(http://gudang-project.do.am/j-query-tog/pic/chat.png) no-repeat 15px center;
width: 40px;
padding-left: 40px;
text-indent: 0; /*--Reset text indent--*/
}
#panelbawah ul li a.toggle{

background: url(http://gudang-project.do.am/j-query-tog/pic/down-arrow.png) no-repeat 15px center;
width: 40px;
padding-left: 40px;
text-indent: 30px; /*--Reset text indent--*/


}


#panelbawah li:hover{
color:white;
background:black;
}
/* ----------- SUBLINKS ----------- */
#panelhide {
background:url(http://gudang-project.do.am/navbar-glass/image/nav-bg-bp.jpg) repeat-x;
height:32px;
width:140px;
margin:0 auto;
position: fixed;
bottom: 0; right:0;
z-index: 9999;
margin: 0 3%;
border-style:solid;
border-left:1px solid #222;
border-top: 1px solid #222;
border-bottom: 1px solid #222;
border-right: 1px solid #222;
-webkit-box-shadow: 5px 5px 8px #818181;
-moz-box-shadow: 5px 0px 8px #818181;
-moz-background-clip: border; -moz-background-inline-olicy:continuous; -moz-background-origin: padding; -moz-border-radius-topright: 15px; -moz-border-radius-topleft: 15px;
right: 0; left: auto; /*--Reset left positioning and make it right positioned--*/

}
#panelhide {
float:left;
font-size:11px;
line-height:32px;

}
*html #panelhide { /*--IE6 Hack - Fixed Positioning to the Bottom--*/
margin-top: -1px; /*--prevents IE6 from having an infinity scroll bar - due to 1px border on #footpanel--*/
position: absolute;
top:expression(eval(document.compatMode &&document.compatMode=='CSS1Compat') ?documentElement.scrollTop+(documentElement.clientHeight-this.clientHeight) : document.body.scrollTop +(document.body.clientHeight-this.clientHeight));
}
#panelhide ul{
height:32px;
line-height:32px;
margin-left:10px;
margin-right:10px;
}
#panelhide ul li{
display:inline;

}
#panelhide ul li a.toggle:link, a.toggle:visited,
#panelhide ul li a:visited {

padding:0 20px;
display:block;
float:left;
text-decoration:none;
color:white;
font-weight:bold;
position: relative;

}

#panelhide li#toggle { float:right; }
#panelhide ul li a.toggle{

background: url(http://gudang-project.do.am/j-query-tog/pic/up-arrow.png) no-repeat 15px center;
width: 50px;
padding-left: 50px;
text-indent: 40px; /*--Reset text indent--*/


}

#panelhide ul li a.selected {

background: url(http://gudang-project.do.am/j-query-tog/pic/up-arrow.png) no-repeat 15px center;
width: 50px;
padding-left: 50px;
text-indent: 40px; /*--Reset text indent--*/



}



#panelhide ul li:hover{
color:white;
background:black;
}


/* toggle */
.exampleEl { display:none; }
.show { display:block; }

</style>

7. Dan untuk kode html,letakan kode html dibawah ini pada bagian body Html kode

1.Letakan Kode html Dibawah ini diantara <body> dan

</body>

<div id="panelhide">
<ul id="mainpanel">
<li id="toggle"><a href="#"rel="panelbawah,fade,20" class='toggle' >Show</a>
</li>
</ul>
</div>
<div id="panelbawah"class="exampleEl">

<ul id="mainpanel">
<li id="logo"><a class='logo' href="http://bambangpage.blogspot.com/"class="logo">&nbsp;</a></li>
<li id="Menu"><a href="Menu"class='Menu'>Menu</a></li>

<li id="Tweetboard"><a href="Tweetboard"class='Tweetboard'>Tweetboard</a></li>
<li id="facebook"><a href="#"class='facebook'>Facebook</a></li>
<li id="toggle"><a href="facebook"rel="panelbawah,fade,20" class='toggle' >Hide</a>
<li id="chat"><a href="#" class='Chat' >Chat</a></li>
<li id="info"><a href="#" class='info' >Info</a>


</li>

</ul>

</div>

2.Letakan Kode html di bawah ini pada add Gadget
<div id="slidewrapper">
<div id="slide">

<div id="content">

<a id="close" href="close" title="close"><img width="35" src="http://gudang-project.do.am/j-query-tog/pic/close_containner.png" height="20"/></a>
<iframe style="width:100%;height:350px" src="http://gudang-project.do.am/bp-nav-bawah/html/Bpmenu-all.html">


</iframe>



</div>

</div>
</div>
<div id="slidewrapper1">
<div id="slide1">

<div id="content1">

<a id="close1" href="close1" title="close1"><img width="35" src="http://gudang-project.do.am/j-query-tog/pic/close_containner.png" height="20"/></a>
<iframe style="width:100%;height:350px" src="http://gudang-project.do.am/twet-gudang/Twidget.html"></iframe>



</div>

</div>
</div>

<div id="slidewrapper2">
<div id="slide2">

<div id="content2">

<a id="close2" href="close2" title="close2"><img width="35" src="http://gudang-project.do.am/j-query-tog/pic/close_containner.png" height="20"/></a>
<iframe style="width:100%;height:350px" src="http://www.facebook.com/people/Bambang-Badarudin/1827330547"></iframe>



</div>

</div>
</div>
<div id="slidewrapper3">
<div id="slide3">

<div id="content3">

<a id="close3" href="close3" title="close3"><img width="35" src="http://gudang-project.do.am/j-query-tog/pic/close_containner.png" height="20"/></a>

<iframe style="width:100%;height:350px" src="http://gudang-project.do.am/bp-nav-bawah/html/Bpmenu-info-page.html"></iframe>



</div>

</div>
</div>

Sekian dulu postingan kali ini jika anda ingin Navbar bawah ala bambangpage ini tinggalkan komentar anda dan ikuti terus info dari bambangpage.
sekian semoga bermanfaat.....