3 Membuat Menu Horizontal di Blog

Membuat menu horizontal di blog yang saya posting ini sebenarnya masih sama dengan postingan Membuat Menu Drop Down di Blog yang saya posting kemarin. Namun, membuat menu horizontal yang ini hasilnya berbeda dari kemarin, lebih agak berseni. Membuat menu horizontal  dengan sedikit seni yang berbeda ini saya peroleh dari blog sebelah. Setelah saya lihat-lihat, ternyata bagus juga makanya saya posting di sini. Membuat menu horizontal pada dasarnya adalah bertujuan untuk mempercantik blog dan juga sebagai navigasi blog agar para pengunjung dapat mudah mengetahui postingan blog lain atau mencari informasi tertentu dari navigasi tersebut.

Membuat menu horizontal  ini dikhususkan untuk blog-blog yang templatenya belum menyediakan menu seperti ini. Namun, setelah saya coba kemarin ternyata membuat menu horizontal  juga bisa diterapkan untuk blog yang sudah menampilkan fitur ini. Namun, agan harus berhati-hati agar ketika mengedit html tidak terjadi kesalahan seperti yang saya coba kemarin. Karena ada sedikit perbedaan dalam memasang menu seperti ini.

Membuat menu horizontal  Tutorial ini berasal dari Christiantatelu, jadi saya berterima kasih sekali atas sharenya, biar kawan-kawan blogger yang belum mengerti bisa menerapkannya sebagai pelajaran yang berharga. hasil dari tutorial ini bisa anda lihat screenshotnya di bawah ini.

Membuat menu horizontal  selengkapnya anda bisa ikuti langkah-langkah berikut ini :

1. Masuk ke aku blogger anda .
2. Pilih Template => Edit html
3. Silakan cari kode ]]></b:skin> (anda bisa menggunakan Ctrl + F agar lebih cepat)
4. Kemudian taruh kode berikut ini di atas kode di atas tadi.

#tejahtc{

height:33px;

width:1000px;

margin:0 auto;

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWlW5MSzA-NbXx3t4GzsJJlmYh2nBCHXHh-4UWlR6BqgJrKxThHyIs8tNRlsYEMPs7YHbXMmeyu5TLbS3PgHGi7-uMvhg-g0WbX8LuTlZGPYzNyadyHUZVuvNnWg8B6fdT1gl6cNrdSW64/) repeat-x;

display:block;

padding:0px 0 0px 0px;

font-size:12px;

font-family:"Segoe UI",Calibri,"Myriad Pro",Myriad,"Trebuchet MS",Helvetica,Arial,sans-serif;

font-weight:normal;

border-top:1px solid #252424;

}

#tejas{

margin: 0px;

padding: 0px;

width:1000px;

background:#252525 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWlW5MSzA-NbXx3t4GzsJJlmYh2nBCHXHh-4UWlR6BqgJrKxThHyIs8tNRlsYEMPs7YHbXMmeyu5TLbS3PgHGi7-uMvhg-g0WbX8LuTlZGPYzNyadyHUZVuvNnWg8B6fdT1gl6cNrdSW64/) repeat-x;

height:33px;

}

#tejas ul {

float: left;

list-style: none;

margin: 0px;

padding: 0px;

}

#tejas li {

float: left;

list-style: none;

margin: 0px;

padding: 0px;

}

#tejas li a, #tejas li a:link, #tejas li a:visited {

color: #fae7df;

display: block;

margin: 0px;

padding: 9px 10px 10px 10px;

}

#tejas li a:hover, #tejas li a:active {

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiohkqbENQCGzJyWEcNILqcUa-xO0dyVS5fhjLpV-omTJdNUlEmkaUwcxtyNT5gJKt5FmQcxF0gyzVsvc7ojPpThyphenhyphen24tpaamf2r-5zqGxIOQhIJXnyR5SI6FCleEXz8P07LNqMIFYGgyZSs/) repeat-x;

color: #fff;

margin: 0px;

padding: 9px 10px 10px 10px;

text-decoration: none;

}

#tejas li li a, #tejas li li a:link, #tejas li li a:visited {

background:#ED4A05;

width: 150px;

color: #fae7df;

font-family:Tahoma,century gothic,Georgia, sans-serif;

font-weight: normal;

float: none;

margin: 0px;

padding: 9px 10px 10px 10px;

border-bottom: 1px solid #FF7800;

}

#tejas li li a:hover, #tejas li li a:active {

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiohkqbENQCGzJyWEcNILqcUa-xO0dyVS5fhjLpV-omTJdNUlEmkaUwcxtyNT5gJKt5FmQcxF0gyzVsvc7ojPpThyphenhyphen24tpaamf2r-5zqGxIOQhIJXnyR5SI6FCleEXz8P07LNqMIFYGgyZSs/) repeat-x;

color: #fff;

padding: 9px 10px 10px 10px;

}

#tejas li ul {

z-index: 9999;

position: absolute;

left: -999em;

height: auto;

width: 170px;

margin: 0px;

padding: 0px;

}

#tejas li li {

}

#tejas li ul a {

width: 140px;

}

#tejas li ul a:hover, #tejas li ul a:active {

}

#tejas li ul ul {

margin: -34px 0 0 170px;

}

#tejas li:hover ul ul, #tejas li:hover ul ul ul,

#tejas li.sfhover ul ul, #tejas li.sfhover ul ul ul {

left: -999em;

}

#tejas li:hover ul, #tejas li li:hover ul,

#tejas li li li:hover ul, #tejas li.sfhover ul,

#tejas li li.sfhover ul, #tejas li li li.sfhover ul {

left: auto;

}

#tejas li:hover, #tejas li.sfhover {

position: static;

}

Keterangan :

• Anda bisa edit sendiri tinggi dan lebarnya jika masih belum pas pada blog anda.

5. Taruhlah kode berikut ini di bawah kode <div id='content-wrapper'>.

<div id='tejahtc'>

<div id='tejas'>

<ul>

<li><a href='http://linkutamakamu.blogspot.com/'>Home</a></li>

<li><a href='Link terserah anda di sini!' title='Link-Title'>Link-Name-1</a>

<ul class='children'>

<li><a href='Link terserah anda di sini!' title='Link-Title'>Link-Name-1-1</a></li>

<li><a href='Link terserah anda di sini!' title='Link-Title'>Link-Name-1-2</a></li>

<li><a href='Link terserah anda di sini!' title='Link-Title'>Link-Name-1-3</a></li>

</ul>

</li>

<li><a href='Link terserah anda di sini!' title='Link-Title'>Link-Name-2</a>

<ul class='children'>

<li><a href='Link terserah anda di sini!' title='Link-Title'>Link-Name-2-1</a></li>

<li><a href='Link terserah anda di sini!' title='Link-Title'>Link-Name-2-2</a></li>

<li><a href='Link terserah anda di sini!' title='Link-Title'>Link-Name-2-2</a></li>

<li><a href='Link terserah anda di sini!' title='Link-Title'>Link-Name-2-3</a></li>

</ul>

</li>

<li><a href='Link terserah anda di sini!' title='Link-Title'>Link-Name-3</a>

<ul class='children'>

<li><a href=Link terserah anda di sini!' title='Link-Title'>Link-Name-3-1</a></li>

<li><a href='Link terserah anda di sini!' title='Link-Title'>Link-Name-3-2</a></li>

<li><a href='Link terserah anda di sini!' title='Link-Title'>Link-Name-3-3</a></li>

</ul>

</li>

<li><a href='Link terserah anda di sini!' title='Link-Title'>Link-Name-4</a></li>

<li><a href='Link terserah anda di sini!' title='Link-Title'>Link-Name-5</a>

<ul class='children'>

<li><a href='Link terserah anda di sini!' title='Link-Title'>Link-Name-5-1</a></li>

<li><a href='Link terserah anda di sini!' title='Link-Title'>Link-Name-5-2</a></li>

<li><a href='Link terserah anda di sini!' title='Link-Title'>Link-Name-5-3</a></li>

<li><a href='Link terserah anda di sini!' title='Link-Title'>Link-Name-5-4</a></li>

</ul>

</li>

<li><a href='Link terserah anda di sini!' title='Link-Title'>Link-Name-6</a>

<ul class='children'>

<li><a href='Link terserah anda di sini!' title='Link-Title'>Link-Name-6-1</a></li>

<li><a href='Link terserah anda di sini!' title='Link-Title'>Link-Name-6-2</a></li>

</ul>

</li>

<li><a href='Link terserah anda di sini!' title='Link-Title'>Link-Name-7</a></li>

<li><a href='Link terserah anda di sini!' title='Link-Title'>Link-Name-8</a></li>

</ul>

</div>

</div>

<div class='clear'/>

• Ganti "Link terserah anda di sini" dengan link postingan anda atau link apa saja yang ingin anda masukkan disitu. dan ganti pula "Link Name" dengan tulisan yang ingi anda kehendaki.

6. Sebelum anda simpan, coba anda preview terlebih dahulu apakah terjadi eror atau tidak. Jika tidak, anda bisa langsung klik "Save Template".

Membuat menu horizontal  memang agak sedikit susah bagi yang belum pernah otak-atik template. Namun, jika anda ingin jadi blogger yang handal anda harus terus mencoba dan mencoba. Jika ada kesalahan itu sudah biasa, mungkin ada yang kurang dalam mengedit template atau karena faktor lain. Yang terpenting adalah terus mencoba.

Baca Juga Artikel Lainnya :

• Membuat Cursor di Blog