Tutorial Blog Mas Andes Official - Tips Blogging | Trik Blogger | Tutorial Blogger | Widget Blogger | Blog Design | Taktik SEO (Search Engine Optimization)

Menu Horisontal Inverted Shiftdown

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).
Menu Horisontal Inverted Shiftdown
.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.

Berlangganan artikel via email

16 Response to "Menu Horisontal Inverted Shiftdown"

wah, pake edit html ya... wah saya kewalahan kalo pake edit html

Balas

waduh mamang belum berani tuh pakai edit HTML .... tampilan HTML nya berubah sekarang ... tapi mamang coba deh..

Balas

Jadinya keren nih sepertinya gan

Balas

ini mirip menu di postingan kemarin yah?

Balas

kenapa yah aku ga pernah ngerti sama yang beginian,
dibaca berulang-ulang tetep ga nyambung ,
hahaha *jadi nyimak aja deh mas ;D

Balas

Keren juga Mas. Kapan-kapan boleh dicoba nie :D

Balas

panas nih sob nunut ngiup sambil baca trik yg bagus dimari

Balas

keren yang ini tutorialnya mas, izin copas kodenya ya mas, terima kasih

Balas

saya juga takut edit html, takut salah edit,tapi jadi masukan infonya,,,,,,,,,,,,,,

Balas
avatar
Anonymous

Wah dapat info baru nih, terimakasih sob atas infonya.

Salam kenal

Balas

ngerti, makasi sobat, sudah saya praktekkan

Balas

Lumayan asyik nih menu nya mas. Sayangnya saya belum berminat gonta-ganti tampilan menu nih, karena kebetulan saya lebih prefer memodifikasi..hehehe.

Balas

Menunya keren bro,ijin untuk mencobanya nanti bro,,hehe thx

Balas

Berkunjung sambil mempelajari postingan yg berkualitas ms andes hehehehe,,,,,,,,,

Balas

gampang mang,justru lebih gampang yang sekarang Mang hehe

Balas

wah yang ini lebih praktis nih kayaknya sob,,,

Balas
  • Berkomentarlah dengan sopan dan bijak sesuai dengan isi konten.
  • Komentar yang tidak diperlukan oleh pembaca lain [spam] akan segera dihapus.
  • Apabila artikel yang berjudul "Menu Horisontal Inverted Shiftdown" ini bermanfaat, share ke jejaring sosial.
Konversi Kode