Cara membuat menu Horizontal diblog

Menu Hirizontal yang satu ini cocok dipergunakan untuk menambah menu yang telah ada, apa bila kita mau menempatkan menu dibawah Halaman ( footer ) ataupun diatas header pada halaman kita, menu horizontal yang satu ini dapat menampah kesan yang elegan buat template blog kita. Menu Horizontal yang satu ini memang sudah banyak yang memakainya tapi bila kita mampu  untuk lebih berkreasi akan lebih indah bila diletakkan diblog kita. Oke seperti biasa kita langsung ke TKP...

1. Login ke Blog anda
2. Masuk menu Edit HTML Jangan lupa  Expand Template Widget  dicentang.
3. Cari kode ]]></b:skin> untuk mempercepat pencarian klik Ctrl + F
4.Copy script dibawah ini Letakan kode tersebut  tepat diatas kode ]]></b:skin>

.menupic2{background:#049c04;}
.menuhorisontal2 {width:980px;height:24px;margin:0 auto; padding:5px 0px;border-bottom:solid 1px #fff;}
.menuhorisontal2 ul{margin: 0; padding-left:7px;color:#666;text-transform: capitalize;list-style-type: none;font:normal 12px Arial, Helvetica,Verdana,sans-serif;}
.menuhorisontal2 li{display: inline; margin: 0;}
.menuhorisontal2 li a{float: left;display: block;text-decoration:none;
padding: 5px 6px 4px 6px;border-right:0px solid #01fc01;font-weight:bold;color: #000000}
.menuhorisontal2 li a:visited{color: #fff;}
.menuhorisontal2 li a:hover {background:#ffff00;border-radius:10px;-webkit-border-radius:10px;-opera-border-radius:10px;-moz-border-radius:10px;color:#222;text-decoration:none;-moz-box-shadow: inset 2px 2px 2px #d5d501;-webkit-box-shadow: inset 2px 2px 2px #d5d501;box-shadow: inset 2px 2px 2px #d5d501;}

Keterangan Code

• {background:#049c04;}         code biru ini adalah warna backgroundnya
• width:980px;height:24px   code ini panjang & tinggi sesua ikan menurut template anda
• background:#ffff00              code ini warna background bila tersentuh cursor
• #d5d501  ini adalah code warna bayangannya ( Shadow )  

Cari Kode <div id='header-wrapper'>
Kemudian Copy Code dibawah ini dan pastekan diatas code
<div id='header-wrapper'>
NB :  untuk menempatkan kode sibawah ini, tergantung dengan kebutuhan anda, saat ini saya meletakkan code yang ada dibawah ini tepat diatas Header. 
 

<div class='menupic2'>
<div class='menuhorisontal2'>
<ul>
<li><a href='#' title='Menu 1'>Menu 1</a></li>
<li><a href='#' title='Menu 2'>Menu 2</a></li>
<li><a href='#' title='Menu 3'>Menu 3</a></li>
<li><a href='#' title='Menu 4'>Menu 4</a></li>
<li><a href='#' title='Menu 5'>Menu 5</a></li>
<li><a href='#' title='Menu 6'>Menu 6</a></li>
<li><a href='#' title='Menu 7'>Menu 7</a></li>
<li><a href='#' title='Menu 8'>Menu 8</a></li>
<li><a href='#' title='Menu 9'>Menu 9</a></li>
<li><a href='#' title='Menu 10'>Menu 10</a></li>
</ul>
</div>
</div>

• Keterangan Code

# warna biru ganti dengan URL
title='Menu 1'>Menu 1</a>  Kanan dan kiri samakan tulisannya, contoh : bila anda ganti Menu 1 yg disebelah kanan dengan " Kontak " Maka ganti juga tulisan yang disebelah kiri Menu 1 dengan tulisan " Kontak "


Bila anda ingin lebih kreativ dan ingin menampilkan menu ini dengan lebih elegan silahkan ganti code ]]></b:skin>  dengan code dibawah ini, ( Gantikan code yang diatas ]]></b:skin> tadi dengan code dibawah ini )

Copy code dibawah ini untuk hasil gambar diatas.

.menupic2{background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEir0omVEFW5n5DexlNLcXFgxaJZWj4KSx3Id34n7wNfprgncXuiMKgAwlEf3zehrrqw-vcualvVkQgEQBGRC37ofwcULQ9AfZDleOXBnYzGpEcv4M_sKFU8b1mbMLB6oyFkAroGPjL5rRI/s1600/1.gif) repeat-x bottom left;width:980px;margin:0 auto;padding:0 auto;border-left:1px solid $bordercolor;border-right:1px solid $bordercolor;}
.menuhorisontal2 {width:980px;height:25px;margin:0 auto; padding:5px 0px;border-bottom:solid 1px #0715fd;}
.menuhorisontal2 ul{margin: 0; padding-left:7px;color:#666;text-transform: capitalize;list-style-type: none;font:normal 12px Arial, Helvetica,Verdana,sans-serif;}
.menuhorisontal2 li{display: inline; margin: 0;}
.menuhorisontal2 li a{float: left;display: block;text-decoration:none;
padding: 5px 6px 4px 6px;border-right:0px solid #01fc01;font-weight:bold;color: #fe0101}
.menuhorisontal2 li a:visited{color: #ff0000;}
.menuhorisontal2 li a:hover {background:#fc5959;border-radius:10px;-webkit-border-radius:10px;-opera-border-radius:10px;-moz-border-radius:10px;color:#0413fc;text-decoration:none;-moz-box-shadow: inset 2px 2px 2px #2a1716;-webkit-box-shadow: inset 2px 2px 2px #d5d501;box-shadow: inset 2px 2px 2px #2a1716;}

Copy code dibawah ini untuk hasil gambar diatas.

.menupic2{background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXA0ySjO9Al3GmM9qTZ35LwgpYzUXcK8ZEnVRnUU4GeEtjtW8zogpmyk6OkVaCJY8gN0c2mtoZ7T3aITwf_7JJpc1m4JohrWnMkcNf6j-AsXsFKDI7PRfPYRF9c-du9pCVAwR5XBZV590/s1600/2.gif) repeat-x bottom left;width:980px;margin:0 auto;padding:0 auto;border-left:1px solid $bordercolor;border-right:1px solid $bordercolor;}
.menuhorisontal2 {width:980px;height:25px;margin:0 auto; padding:5px 0px;border-bottom:solid 1px #0715fd;}
.menuhorisontal2 ul{margin: 0; padding-left:7px;color:#666;text-transform: capitalize;list-style-type: none;font:normal 12px Arial, Helvetica,Verdana,sans-serif;}
.menuhorisontal2 li{display: inline; margin: 0;}
.menuhorisontal2 li a{float: left;display: block;text-decoration:none;
padding: 5px 6px 4px 6px;border-right:0px solid #01fc01;font-weight:bold;color: #fe0101}
.menuhorisontal2 li a:visited{color: #020000;}
.menuhorisontal2 li a:hover {background:#00ff00;border-radius:10px;-webkit-border-radius:10px;-opera-border-radius:10px;-moz-border-radius:10px;color:#450a02;text-decoration:none;-moz-box-shadow: inset 2px 2px 2px #88ab88;-webkit-box-shadow: inset 2px 2px 2px #d5d501;box-shadow: inset 2px 2px 2px #88ab88;}

Copy code dibawah ini untuk hasil gambar diatas.

 .menupic2{background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwpE5m8eTgcnpXWFpbMVdhBxw1XofrZySYAit9i_udArGaOdtQkzs-oy52kYM_y7glavVVPeTXKFQ1FehIZgTp17JAvIq5yHvf8-e8BJ0O4T1R4QBYt_JbK1j7s2xfBTgzRwSXte81tQg/s1600/3.gif) repeat-x bottom left;width:980px;margin:0 auto;padding:0 auto;border-left:1px solid $bordercolor;border-right:1px solid $bordercolor;}
.menuhorisontal2 {width:980px;height:25px;margin:0 auto; padding:5px 0px;border-bottom:solid 1px #0715fd;}
.menuhorisontal2 ul{margin: 0; padding-left:7px;color:#666;text-transform: capitalize;list-style-type: none;font:normal 12px Arial, Helvetica,Verdana,sans-serif;}
.menuhorisontal2 li{display: inline; margin: 0;}
.menuhorisontal2 li a{float: left;display: block;text-decoration:none;
padding: 5px 6px 4px 6px;border-right:0px solid #01fc01;font-weight:bold;color: #fe0101}
.menuhorisontal2 li a:visited{color: #020000;}
.menuhorisontal2 li a:hover {background:#ff0000;border-radius:10px;-webkit-border-radius:10px;-opera-border-radius:10px;-moz-border-radius:10px;color:#f3fc00;text-decoration:none;-moz-box-shadow: inset 2px 2px 2px #890303;-webkit-box-shadow: inset 2px 2px 2px #d5d501;box-shadow: inset 2px 2px 2px #890303;}

 Copy code dibawah ini untuk hasil gambar diatas.

.menupic2{background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE90wiYyQWYdvfOGoOVKDRA_5aXDDqDh9GisY8-rJ82mqD7oP059zR3iknXeHQsdqEmpWJwOLriE-Nc9f0WV7HWaaLqHD_5EcmBgoRvJEA3D6_YBc2kj8hSsaEMMKGSuOb2q5toX0Qgqo/s1600/4.gif) repeat-x bottom left;width:980px;margin:0 auto;padding:0 auto;border-left:1px solid $bordercolor;border-right:1px solid $bordercolor;}
.menuhorisontal2 {width:980px;height:25px;margin:0 auto; padding:5px 0px;border-bottom:solid 1px #0715fd;}
.menuhorisontal2 ul{margin: 0; padding-left:7px;color:#666;text-transform: capitalize;list-style-type: none;font:normal 12px Arial, Helvetica,Verdana,sans-serif;}
.menuhorisontal2 li{display: inline; margin: 0;}
.menuhorisontal2 li a{float: left;display: block;text-decoration:none;
padding: 5px 6px 4px 6px;border-right:0px solid #01fc01;font-weight:bold;color: #fe0101}
.menuhorisontal2 li a:visited{color: #04fe16;}
.menuhorisontal2 li a:hover {background:#fdd601;border-radius:10px;-webkit-border-radius:10px;-opera-border-radius:10px;-moz-border-radius:10px;color:#fd0101;text-decoration:none;-moz-box-shadow: inset 2px 2px 2px #890303;-webkit-box-shadow: inset 2px 2px 2px #d5d501;box-shadow: inset 2px 2px 2px #890303;}

 Copy code dibawah ini untuk hasil gambar diatas.

.menupic2{background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP4xQSR7ZJXQEHnf3D98s9-NIMFuC5_oymzvharVSmzjxlGesVzkRWZIk1Mlg2bKUDT49cXTKkFEvJMjmrs0oyRTNb_RaQ9qrTwnGvI2c1Ge33rkkfCJhYBrgE48CATe6yTxQlBLxkVpg/s1600/5.gif) repeat-x bottom left;width:980px;margin:0 auto;padding:0 auto;border-left:1px solid $bordercolor;border-right:1px solid $bordercolor;}
.menuhorisontal2 {width:980px;height:25px;margin:0 auto; padding:5px 0px;border-bottom:solid 1px #0715fd;}
.menuhorisontal2 ul{margin: 0; padding-left:7px;color:#666;text-transform: capitalize;list-style-type: none;font:normal 12px Arial, Helvetica,Verdana,sans-serif;}
.menuhorisontal2 li{display: inline; margin: 0;}
.menuhorisontal2 li a{float: left;display: block;text-decoration:none;
padding: 5px 6px 4px 6px;border-right:0px solid #01fc01;font-weight:bold;color: #fe0101}
.menuhorisontal2 li a:visited{color: #fffc00;}
.menuhorisontal2 li a:hover {background:#01fbfe;border-radius:10px;-webkit-border-radius:10px;-opera-border-radius:10px;-moz-border-radius:10px;color:#000000;text-decoration:none;-moz-box-shadow: inset 2px 2px 2px #04888a;-webkit-box-shadow: inset 2px 2px 2px #d5d501;box-shadow: inset 2px 2px 2px #04888a;}

Tentukan pilihan anda dengan berbagai contoh gambar menu horizontal diatas, bila sohib ingin lebih kreativ dan mengalami  kesulitan dalam memakai code code ini, mari kita share bersama saya juga ingin belajar lagi, silahkan tinggalkan komentar....

Terimakasih atas kunjungannya,Bila anda suka dengan artikel ini silahkan JOIN TO MEMBER BLOG atau berlangganan geratis Artikel dari blog ini, daftarkan email anda pada form subscribe dibawah halaman . Pergunakan vasilitas diblog ini untuk mempermudah anda. Bila ada masalah dalam penulisan artikel ini silahkan kontak saya melalui kotak komentar yang ada dibawah atau gunakan fasilitas yang ada diblog ini untuk menghubungi saya.

Salam Blogger.... !!! .

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter

Di posting oleh : Unknown Update pada : 12:43 AM