Kali ini saya akan memberikan tutorial mengenai Navbar. "Apa sih navbar?" itu loh, papan navigasi yang melayang - layang di halaman blog kita.
Pertama, seperti biasa, pastikan anda sudah login ke akun blogger anda, kemudian Design - Edit HTML.
Kedua, search tag ]]></b:skin> lalu copy script dibawah lalu pastekan diatas tag ]]></b:skin>
< Script 1 >
- Code:
-
<span style="font-family: inherit;"><span style="background-color: white; color: red; line-height: 16px; text-align: left;">/*-- CUSTOM NAVIGATION BAR--*/</span><br style="line-height: 16px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left;" /><span style="background-color: white; line-height: 16px; text-align: left;">* html #mta_bar{position:absolute}</span><br style="line-height: 16px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left;" /><span style="background-color: white; line-height: 16px; text-align: left;">#mta_bar{background:#000 url(<span style="color: blue;">http://3.bp.blogspot.com/_C6KkooKXCEw/TIBnl52l4iI/AAAAAAAAGx0/lVYBna0YOTI/s200/nav-background-c.png</span>) top left repeat-x; border-bottom:1px solid #333; z-index:100; padding-top:6px; width:100%; top:0; left:0; overflow:auto; height:25px; overflow:hidden}</span><br style="line-height: 16px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left;" /><span style="background-color: white; line-height: 16px; text-align: left;">#mta_bar .bar_logo{background:url(<span style="color: blue;">http://1.bp.blogspot.com/_C6KkooKXCEw/SiwZH4BjB-I/AAAAAAAAEX4/qw31k-6bjzo/s400/feed.gif</span>) 7px 2px no-repeat; float:left; padding-left:7px; text-align:left; font-family:Arial; font-size:14px; font-weight:bold; font-style:normal; color:#fff; width:200px; padding-left:20px;padding-top:1px}</span><br style="line-height: 16px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left;" /><span style="background-color: white; line-height: 16px; text-align: left;">#mta_bar .bar_logo a{text-decoration:none; color:#fff; padding-left:21px}</span><br style="line-height: 16px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left;" /><span style="background-color: white; line-height: 16px; text-align: left;">#mta_bar .bar_search{float:left; padding:0; margin:0; text-align:left; font-family:tahoma; font-size:14px; font-weight:bold; font-style:normal; color:#fff; width:165px}</span><br style="line-height: 16px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left;" /><span style="background-color: white; line-height: 16px; text-align: left;">#mta_bar .bar_search a{text-decoration:none; color:#fff; padding-left:21px; padding:0}</span><br style="line-height: 16px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left;" /><span style="background-color: white; line-height: 16px; text-align: left;">#mta_bar .bar_search a:hover{text-decoration:underline; color:#fff}</span><br style="line-height: 16px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left;" /><span style="background-color: white; line-height: 16px; text-align: left;">#mta_bar .bar_navbarmenuleft{float:right; text-align:left; font-family:tahoma; font-size:13px; font-weight:normal; font-style:normal; color:#999; width:468; padding:3px 1px}</span><br style="line-height: 16px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left;" /><span style="background-color: white; line-height: 16px; text-align: left;">#mta_bar .bar_submit{float:left; text-align:left; font-family:arial; font-size:13px; font-weight:normal; font-style:normal; color:#fff; padding:3px 0; width:140px}</span><br style="line-height: 16px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left;" /><span style="background-color: white; line-height: 16px; text-align: left;">#mta_bar .bar_submit a{background:url(http://2.bp.blogspot.com/_C6KkooKXCEw/SjNkb64JO4I/AAAAAAAAEbI/oALk2rlXwdg/s400/facebook.png) 0 no-repeat; text-decoration:none; color:#fff; padding-left:21px}</span><br style="line-height: 16px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left;" /><span style="background-color: white; line-height: 16px; text-align: left;">#mta_bar .bar_submit a:hover{text-decoration:underline; color:#fff}</span><br style="line-height: 16px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left;" /><br style="color: red; line-height: 16px; margin: 0px; outline-width: 0px; padding: 0px; text-align: left;" /><span style="background-color: white; color: red; line-height: 16px; text-align: left;">/* SEARCH */</span><br style="line-height: 16px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left;" /><span style="background-color: white; line-height: 16px; text-align: left;">#search{border:1px solid #d1cdcd; height:18px; width:250px; padding:0; background:#f6f4f4; }</span><br style="line-height: 16px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left;" /><span style="background-color: white; line-height: 16px; text-align: left;">#search input{border:0; background:none; color:#575757}</span><br style="line-height: 16px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left;" /><span style="background-color: white; line-height: 16px; text-align: left;">#s{font-size:12px; width:230px; padding-left:4px; margin:0; background:none}</span><br style="line-height: 16px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left;" /><span style="background-color: white; line-height: 16px; text-align: left;">#topsearch #search{margin-top:0px;-moz-border-radius-bottomleft:3px;-moz-border-radius-bottomright:3px;-moz-border-radius-topleft:3px;-moz-border-radius-topright:3px;background-color:#FFFFFF;border:1px solid #000000;}</span><br style="line-height: 16px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left;" /><span style="background-color: white; line-height: 16px; text-align: left;">#topsearch #s{width:225px}</span><br style="line-height: 16px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left;" /><span style="background-color: white; line-height: 16px; text-align: left;">#footheader {</span><br style="line-height: 16px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left;" /><span style="background-color: white; line-height: 16px; text-align: left;">width: 100%;</span><br style="line-height: 16px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left;" /><span style="background-color: white; line-height: 16px; text-align: left;">float:left;</span><br style="line-height: 16px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left;" /><span style="background-color: white; line-height: 16px; text-align: left;">margin:0 0 0;</span><br style="line-height: 16px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left;" /><span style="background-color: white; line-height: 16px; text-align: left;">padding:0 0 0;</span><br style="line-height: 16px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left;" /><span style="background-color: white; line-height: 16px; text-align: left;">height:35px;</span><br style="line-height: 16px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left;" /><span style="background-color: white; line-height: 16px; text-align: left;">}</span></span><br /> <span style="font-family: inherit;"><span style="background-color: white; line-height: 16px; text-align: left;"></span><br style="line-height: 16px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left;" /><span style="background-color: white; color: red; line-height: 16px; text-align: left;">/* -- SET SMALL ICON-- */</span><br style="line-height: 16px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left;" /><span style="background-color: white; line-height: 16px; text-align: left;">#main .icon-demo-download {border:none; width:9px; height:9px; padding:0 0px; margin: 3px 0px 0 3px; vertical-align: top;}</span><br style="line-height: 16px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left;" /><br style="line-height: 16px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left;" /><span style="background-color: white; line-height: 16px; text-align: left;">#bottom-bottom{-moz-border-radius:4px; -khtml-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; letter-spacing:.0001em;font-size: 9pt;color:#ffffff;padding-left:10px;padding-right:10px; padding-top:10px; padding-bottom:10px; margin-bottom:5px; clear:both;</span><br style="line-height: 16px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left;" /><span style="background-color: white; line-height: 16px; text-align: left;">background:#111;</span><br style="line-height: 16px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left;" /><span style="background-color: white; line-height: 16px; text-align: left;">}</span></span><span style="line-height: 16px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left;"><br style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" /></span>
Ketiga, search lagi tag </body>, lalu pastekan script dibawah ini tepat diatas tag </body>
< Script 2 >
- Code:
-
<span style="line-height: 16px; margin: 0px; outline-width: 0px; padding: 0px; text-align: left;"><span style="font-family: inherit;"><span style="background-color: white;"><div id='mta_bar' style='position:fixed;'></span><br style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" /><span style="background-color: white;"><div class='mta_bar bar_logo'></span><br style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" /><span style="background-color: white;"><a href='</span></span> <b><span style="color: red;">http://zonacilacap.blogspot.com/</span></b> <span style="font-family: inherit;"><span style="background-color: white;">'>Home</a></span><br style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" /><span style="background-color: white;"></div></span><br style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" /><span style="background-color: white;"><div class='mta_bar bar_search'></span><br style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" /><span style="background-color: white;"><div id='topsearch'></span><br style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" /><span style="background-color: white;"><div id='search'></span><br style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" /><span style="background-color: white;"><form action='</span></span><b><span style="color: red;"> <span style="color: red;">http://zonacilacap.blogspot.com/</span></span></b> <span style="font-family: inherit;"><span style="background-color: white;">search' id='searchform' method='get' name='searchform'></span><br style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" /><span style="background-color: white;"><input class='keyword' id='s' name='q' onblur='if (this.value == "") {this.value = "search..";}' onfocus='if (this.value == "Cari disini..") {this.value = ""}' type='text' value='Cari disini..'/></span><br style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" /><span style="background-color: white;"><input src='http://4.bp.blogspot.com/_C6KkooKXCEw/S_ux4s60thI/AAAAAAAAF0o/cifM6NFq5S8/s1600/search.gif' style='border: 0pt none ; vertical-align: top; padding-top:3px' type='image'/></span><br style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" /><span style="background-color: white;"></form></span><br style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" /><span style="background-color: white;"></div></span><br style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" /><span style="background-color: white;"></div></span><br style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" /><span style="background-color: white;"></div></span><br style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" /><span style="background-color: white;"><div class='mta_bar bar_share'></span><br style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" /><span style="background-color: white;">xxxxxxxx</span><br style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" /><span style="background-color: white;"></div></span><br style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" /><span style="background-color: white;"><div class='mta_bar bar_GoogleAds'></span><br style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" /><span style="background-color: white;">xxxxxxx</span><br style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" /><span style="background-color: white;"></div></span><br style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" /><span style="background-color: white;"></div></span> </span></span><br /> <span style="line-height: 16px; margin: 0px; outline-width: 0px; padding: 0px; text-align: left;"><span style="font-family: inherit;"><br /> </span></span>
◄Penjelasan link yang dapat sahabat ubah.►
< Script 1 >
☻http://3.bp.blogspot.com/_C6KkooKXCEw/TIBnl52l4iI/AAAAAAAAGx0/lVYBna0YOTI/s200/nav-background-c.png ►Link gambar tekstur navbar.
☻http://1.bp.blogspot.com/_C6KkooKXCEw/SiwZH4BjB-I/AAAAAAAAEX4/qw31k-6bjzo/s400/feed.gif ►Favicon yang terdapat pada navbar.
☻http://2.bp.blogspot.com/_C6KkooKXCEw/SjNkb64JO4I/AAAAAAAAEbI/oALk2rlXwdg/s400/facebook.png ►Untuk yang satu ini, saya pun belum mengerti.
< Script 2 >
☻<a href='
[You must be registered and logged in to see this link.] '>Homel</a> ►Untuk menambah menu navigasi ex(Home, About me, Contact me.)
☻http://zonacilacap.blogspot.com/ ►Ganti dengan link blog sahabat.
Sekian tutorial Membuat Navbar Sendiri (Navigation Bar) dari saya, semoga membantu para sahabat yang lagi cari - cari artikel semacam ini.
Subyek: Membuat Navbar Sendiri (Navigation Bar) 
Sun Jun 10, 2012 6:26 pm
