Memasang tab menu di new blogger

Banyak cara yang di lakukan orang untuk menampilkan blog biar lebih menarik lagi, salah satunnya yaitu memasang tab menu baik di atas judul blog ( top bar ) atau di bawah judul blog.

Dan untuk memasang tab menu ini pun banyak sekali cara yang bisa kita pakai, salah satu-nya bisa saudara baca dalam tulisan ini.
dan hasilnya bisa di lihat pada blog DEMO ini.

INSTALL TAB MENU

Pertama : Untuk latihan lebih baik kita pakai atau membuat sebuah blog baru di new blogger. dan pilih template yang standar template Minima .

Kedua : Setelah beres meng-installnya, buka Template-> Edit Html. kemudian tambahkan kode di bawah ini, di atas tag body.

lihat yg di pertebal sebagai kode tambahan.

#outer-wrapper{
}

#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}

/* Use this with templates/template-twocol.html */

body {
background:#000000 ;

* Keterangan *

- memindahkan Outer-wrapper ke atas biar lebarnya sama dengan Body halaman blog.

- Sedangkan Navbar-iframe untuk menghilangkan navbar blogger.

Ketiga :
Kemudian geser kebawah, dan cari kode ini.

/* Outer-Wrapper
----------------------------------------------- */
#Outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}

Setelah ketemu ganti dengan kode di bawah ini.

/* Content-Wrapper
----------------------------------------------- */
#content-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}

Keempat :
Geser lagi ke bawah cari kode ini.

]]></b:skin>

Setelah ketemu masukan kode di bawah,
setelah kode ]]></b:skin> tersebut.

<style type="text/css">
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
.invertedshiftdown{
padding: 0;
width: 100%;
border-top: 5px solid #D10000; /*Red color theme*/
background: transparent;
voice-family: "\"}\"";
voice-family: inherit;
}
.invertedshiftdown ul{
margin:0;
margin-left: 40px; /*margin between first menu item and left browser edge*/
padding: 0;
list-style: none;
}
.invertedshiftdown li{
display: inline;
margin: 0 2px 0 0;
padding: 0;
text-transform:uppercase;
}
.invertedshiftdown a{
float: left;
display: block;
font: bold 12px Arial;
color: black;
text-decoration: none;
margin: 0 1px 0 0; /*Margin between each menu item*/
padding: 5px 10px 9px 10px; /*Padding within each menu item*/
background-color: white; /*Default menu color*/
/*BELOW 4 LINES add rounded bottom corners to each menu item.
ONLY WORKS IN FIREFOX AND FUTURE CSS3 CAPABLE BROWSERS
REMOVE IF DESIRED*/
-moz-border-radius-bottomleft: 5px;
border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
border-bottom-right-radius: 5px;
}
.invertedshiftdown a:hover{
background-color: #D10000; /*Red color theme*/
padding-top: 9px; /*Flip default padding-top value with padding-bottom */
padding-bottom: 5px; /*Flip default padding-bottom value with padding-top*/
color: white;
}
.invertedshiftdown .current a{ /** currently selected menu item **/
background-color: #D10000; /*Red color theme*/
padding-top: 9px; /*Flip default padding-top value with padding-bottom */
padding-bottom: 5px; /*Flip default padding-bottom value with padding-top*/
color: white;
}
#myform{ /*CSS for sample search box. Remove if desired */
float: right;
margin: 0;
margin-top: 2px;
padding: 0;
}
#myform .textinput{
width: 190px;
border: 1px solid gray;
}
#myform .submit{
font: normal 12px Verdana;
height: 22px;
border: 1px solid #D10000;
background-color: black;
color: white;
}
</style>

Kelima :
Geser lagi ke bawah kemudian cari kode ini.

<!-- skip links for text browsers -->
<span id='skiplinks' style='display:none;'>
<a href='#main'>skip to main </a> |
<a href='#sidebar'>skip to sidebar</a>
</span>

Setelah ketemu masukan kode di bawah ini. setelah kode di atas tersebut.

<div class="invertedshiftdown"> <ul> <li><a href="alamat url" title="Home">Home</a></li> <li><a href="alamat url" title="New">New</a></li> <li class="current"><a href="alamat url" title="Revised">Revised</a></li> <li><a href="alamat url" title="Tools">Tools</a></li> <li><a href="alamat url" title="CSS">CSS</a></li> <li><a href="alamat url" title="DHTML Forums">Forums</a></li> </ul> <form id="myform"> <input type="text" class="textinput" /> <input class="submit" type="submit" value="Find" /> </form> </div> <br style="clear: both;" />

Keterangan :
Ganti tulisan " alamat url ", dengan alamat link Url yang kamu inginkan. Misalkan: " http://blogkamu.blogspot.com/ "

Keenam:
Geser lagi ke bawah kemudian cari kode ini.

<div id='content-wrapper'>

Setelah ketemu ganti dengan kode ini.

<div class='clearfix' id='content-wrapper'>

Ketujuh :
Geser lagi kebawah kemudian cari kode ini.

<!-- spacer for skins that want sidebar and main to be the same height-->
<div class='clear'>&#160;</div>

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

Setelah ketemu ganti dengan kode ini.

<!-- spacer for skins that want sidebar and main to be the same height-->
<div style='clear:both;'/></div> <!-- end content-wrapper -->

Setelah beres coba tekan tulisan PRATINJAU. kalau telah sukses kemudian klik SIMPAN TEMPLATE.

Pasang Tab Menu di bawah Judul Blog

Tulisan di atas saya menyimpan tab menunya di bagian atas judul blog. untuk memasangnya di bawah judul blog simpan code langkah yang kelima, di atas code ini.

<div class='clearfix' id='content-wrapper'>

Technorati tags: Ngeblog, New Blogger