Menu Horisontal Inverted Shiftdown

Menu Horisontal Inverted Shiftdown – seperti yang sudah saya bahas pada sebelumnya, bahwa menu merupakan bagian penting dalam blog yang berfungsi untuk mengelompokan beberapa label pada konten yang terdapat pada blog.

Menu horisontal yang simpel dan sederhana ini, untuk menerapkannya kedalam blog juga tidak terlalu rumit. Hanya saja pada menu horisontal inverted shiftdown ini memang tidak terlihat begitu mewah jika di banding dengan menu-menu hosrintal yang lain. Namun walaupun demikian, apabila mungkin ada yang berminat untuk memasang kedalam blognya maka berikut adalah tutorialnya untuk cara memasang Menu Horisontal Inverted Shiftdown kedalam blog dengan menggunakan rangkain kode CSS yang sangat sederhana dan sangat mudah.

1. Login ke akun blogger.
2. Copy kode CSS dibawah ini, lalu pada dashboard blog anda klik Template > Sesuaikan > Tingkat Lanjut > Tambahkan CSS (paste kode didalam kolom tersebut).

.invertedshiftdown{
padding: 0;
width: 100%;
border-top: 5px solid #000;
background: transparent;
voice-family: "\"}\"";
voice-family: inherit;
}

.invertedshiftdown ul{
margin:0;
margin-left: 40px;
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 verdana;
color: black;
text-decoration: none;
margin: 0 1px 0 0;
padding: 5px 10px 9px 10px;
background-color: #7f7fff;
-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: #000;
padding-top: 9px;
padding-bottom: 5px;
color: white;
}

.invertedshiftdown .current a{
background-color: #000;
padding-top: 9px;
padding-bottom: 5px;
color: white;
}

#myform{
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;
background-color: black;
color: white;
}

3. Klik Terapkan ke Blog.

Note: Untuk menaruh kode CSS tidak harus seperti langkah di atas, bisa juga dengan cara klik Template > Edit HTML > lalu cari kode ]]></b:skin> kemudian paste kode CSS tersebut tepat di atasnya / sebelum kode ]]></b:skin> lalu klik Simpan Template.

4. Selanjutnya untuk memanggil dan menampilkan Menu Horisontal Inverted Shiftdown di Blog caranya copy kode HTML dibawah ini, kemudian klik Tata Letak > Tambah Widget > HTML/Javascript lalu paste kode ini didalamnya:

<div class="invertedshiftdown">
<ul>
<li class="current"><a href="#">Home</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">SEO</a></li>
<li><a href="#">Blogging</a></li>
<li><a href="#">Tool</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:
Silahkan ubah tulisan yang berwarna merah dengan URL tujuan.
Silahkan ubah tulisan yang berwarna biru dengan judul menu.

Langkah terakhir klik Save, maka selesai dan lihat hasilnya dari cara membuat Menu Horisontal Inverted Shiftdown di Blog.