9 Mei 2013

Menu navigasi horizontal biasa digunakan pada situs web atau blog. Dilihat dari peranannya menu horizontal sangat berguna bagi pemilik ...

Menu navigasi horizontal Menu navigasi horizontal

Menu navigasi horizontal biasa digunakan pada situs web atau blog.

Dilihat dari peranannya menu horizontal sangat berguna bagi pemilik blog maupun pengunjung guna menavigasi ke halaman yang diinginkan.

Menu horizontal ini biasa diletakkan di bawah maupun di atas header. Anda bisa memasukkan link secara horizontal atau berderet kesamping.

Biasanya link yang diletakkan pada menu horizontal ini adalah menu yang dianggap penting, karena pengunjung blog ketika pertama kali membuka halaman secara tidak langsung akan melihat menu ini.

Menu ini sangat mudah diaplikasikan pada template blog, karena saya ini menggunakan css biasa yang tidak akan membebani loading blog Anda. Menu horizontal yang akan kita buat adalah seperti gambar di bawah ini :

Jika berkeinginan memasang atau membuat menu navigasi horizontal di blog Anda bisa ikuti langkah-langkahnya sebagai berikut :

Login atau masuk ke blog Anda.
Pilih blog yang ingin Anda pasang menu horizontal.
Pilih tata letak atau layout.
Tambahkan gadget.
Pilih HTML/JavaScript.
Masukkan kode di bawah ini.

 <style type="text/css">
/*----------------------------------*/
.Nav a { width: auto; height: auto; text-decoration: none; }
.Nav a { text-align: center; text-decoration:none;color:#ffffcc; padding:1px 20px 1px 20px;font-weight:bold; font-size:12px; }
.Nav a:hover {padding:3px 20px 3px; 20px; text-align:center; text-decoration:none; color:#000033; font-weight:bold; border:3px; background-color: #ffcc99;}
</style>
<div style="border: 3px solid #ffcc99; height:px;background-color:#FF6633;">
<div style="width: auto; padding: 10px;" class="Nav" align="left">
<a href="http://andyrra.blogspot.com/" target="_blank"><span style="font-weight:bold; color:#FFFF00; ">HOME></a>

<a href="http://andyrra.blogspot.com/" target="_blank"><span style="font-weight:bold; color:#FFFF00; ">About Me</span></a>

<a href="http://andyrra.blogspot.com/" target="_blank"><span style="font-weight:bold; color:#FFFF00; ">Contact</span></a>

<a href="http://andyrra.blogspot.com/" target="_blank"><span style="font-weight:bold; color:#FFFF00; "&gt;Internet</span></a>

<a href="http://andyrra.blogspot.com/" target="_blank"><span style="font-weight:bold; color:#FFFF00; "&gt;Tips</span></a>

<a href="http://andyrra.blogspot.com/" target="_blank"><span style="font-weight:bold; color:#FFFF00; ">Blogging tips</span></a>

<form action="http://andyrra.blogspot.com/search" id="searchform" method="get" style="display: inline; float:right; padding-right:10px; padding-bottom:px" > <input id="searchbox" maxlength="" name="q" onblur="if (this.value == "") {this.value = "search...";}" onfocus="if (this.value == "search...") {this.value = ""}" value="Search..." type="text" /> <input class="btn" name="" " value="search" type="submit" span style="font-weight:bold; font-size:12px; color:#ff3399" />
</form>
</div></div>


Ganti yang warna lime  dan tosca dengan alamat link milik Anda.
Warna dan ukuran menu navigasi horizontal ini bisa Anda edit sesuai dengan keinginan.


Kemudian save.

Semoga bermanfaat.

Cara Membuat Menu Drop Down yang Keren dengan Menu Search

bagi sobat sobat yang sedang mencari artikel cara Membuat Menu Drop Down yang keren atau mencari cara membuat Menu Horizontal yang keren sobat tidak salah tempat karena sekarang saya akan share sedikit ilmu kepada sobat blogger, menu ini memang bukan buatan saya, tapi sudah saya modifikasi sedikit semoga sobat sobat senang dengan menu ini, sebelum ke cara pembuatan nya ada baik nya kalau sobat-sobat melihat tampilan hasil nya lihat gambar di bawah ini sebagai tampilan hasil nya

setelah melihat gambar ternyata tidak tertarik, ya maaf deh, agan boleh cari Artikel yang lain nya DISINI, jika tertarik ayo kita mulai cara pembuatan nya langkah nya sbb :

Pertama tama sopasti kita harus login ke blog
setelah login masuk ke menu Template setelah itu Centang Expand Template Widget dan cari Code
setelah dapat copy code di bawah ini tepat di atas code yang tadi kita cari ]]></b:skin>

/* Menu Horizontal Dropdown
----------------------------------------------- */

#menu
{
width: 100%;
margin: 0;
padding: 10px 0 0 0;
list-style: none;
background: #111;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);

background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-border-radius: 50px;
border-radius: 50px;
-moz-box-shadow: 0 2px 1px #9c9c9c;
-webkit-box-shadow: 0 2px 1px #9c9c9c;
box-shadow: 0 2px 1px #9c9c9c;
}
#menu li
{
float: left;
padding: 0 0 10px 0;
position: relative;
line-height: 0;
}
#menu a
{
float: left;
height: 25px;
padding: 0 25px;
color: #999;
text-transform: uppercase;
font: bold 12px/25px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#menu li:hover > a
{

color:#fff; text-decoration:line-through;
}
*html #menu li a:hover /* IE6 */
{
color:#fff; text-decoration:line-through;
}
#menu li:hover > ul
{
display: block;
}
/* Sub-menu */
#menu ul
{
list-style: none;
margin: 0;
padding: 0;
display: none;
position: absolute;
top: 35px;
left: 0;
z-index: 99999;
background: #444;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-box-shadow: 0 0 2px rgba(255,255,255,.5);
-webkit-box-shadow: 0 0 2px rgba(255,255,255,.5);
box-shadow: 0 0 2px rgba(255,255,255,.5);
-moz-border-radius: 5px;
border-radius: 5px;
}
#menu ul ul
{
top: 0;
left: 150px;
}
#menu ul li
{
float: none;
margin: 0;
padding: 0;
display: block;
-moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
-webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
}
#menu ul li:last-child
{
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#menu ul a
{
padding: 10px;
height: 10px;
width: 130px;
height: auto;
line-height: 1;
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
*html #menu ul a /* IE6 */
{
height: 10px;
}
*:first-child+html #menu ul a /* IE7 */
{
height: 10px;
}
#menu ul a:hover
{
background: #0186ba;
background: -moz-linear-gradient(#04acec, #0186ba);
background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
background: -webkit-linear-gradient(#04acec, #0186ba);
background: -o-linear-gradient(#04acec, #0186ba);
background: -ms-linear-gradient(#04acec, #0186ba);
background: linear-gradient(#04acec, #0186ba);
}
#menu ul li:first-child > a
{
-moz-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}
#menu ul li:first-child > a:after
{
content: '';
position: absolute;
left: 30px;
top: -8px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 8px solid #444;
}
#menu ul ul li:first-child a:after
{
left: -8px;
top: 12px;
width: 0;
height: 0;
border-left: 0;
border-bottom: 5px solid transparent;
border-top: 5px solid transparent;
border-right: 8px solid #444;
}
#menu ul li:first-child a:hover:after
{
border-bottom-color: #04acec;
}
#menu ul ul li:first-child a:hover:after
{
border-right-color: #04acec;
border-bottom-color: transparent;
}

#menu ul li:last-child > a
{
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
/* Clear floated elements */
#menu:after
{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html #menu { zoom: 1; } /* IE6 */
*:first-child+html #menu { zoom: 1; } /* IE7 */

#search{ width:220px; float:right; margin:0px 5px 0px 5px; align:center;
}
#search input[type="text"] {height:24px; line-height:29px; background: url(http://3.bp.blogspot.com/-qcqxuwepuw8/T7Ts0Iso9VI/AAAAAAAAAkg/oGskZqNwrZY/s1600/search_icon.gif) no-repeat 8px 1px #fff; border: 0 none; font: bold 12px; color: #333; width: 172px; padding: 0 15px 0 32px; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; border:1px solid #eee; -webkit-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.3) , inset 0px 1px 3px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.3) , inset 0px 1px 3px rgba(0, 0, 0, 0.2); box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.3) , inset 0px 1px 3px rgba(0, 0, 0, 0.2); -webkit-transition: all 0.7s ease 0 s; -moz-transition: all 0.7s ease 0s; -o-transition: all 0.7s ease 0s; transition: all 0.7s ease 0s;
}
#search input[type="text"]:focus { width: 172px;
}
/* tutup Menu Horizontal Dropdown
----------------------------------------------- */

setelah itu save template dan pergi ke menu Tata Letak atau Layout dan Add Gedget Javascript lalu copy code di bawah ini

<ul id='menu'> <li><img border='0' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-UuMfUJlcLfW-5Eh7ELthd2gl6K-bpKSLljvrXKpcHceQZ9MwlWjPcMxuBz1dXdmwrPElGLiC3ioEBLa8J5uhziApKyZSEdiHb_qNRgo9WYbGr8yjRdso5pJSUcOhrH1KlY3QzY4ovvM/s1600/home-icon2.png" style='padding:0px;'/><a href='http://andyrra.blogspot.com'>Home</a><ul> <li><a href='javascript:void(0)' onclick='window.print()'>Print Halaman</a></li> <li><a href='javascript:void(0)' onclick='$('.header-outer,.main-outer,.round3.black50.post-header-line-line').hide('slow');'>Keluar</a></li> </ul></li> <li><img border='0' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTYnpLAotaAdofCQvU-AaO0vcczW5BZ377yz9GK6JDSMf0IVJ3LvKhKm_1DgaGt2_6YxPcdOSNeYuLNh49Cku2D8FzwQh1k13byT1ODH_OWGOhPwH44UFgOeD-kToZpIghT-jZEMYMJA/s1600/profil-saya+lah.png" style='padding:0px;'/><a href='http://andyrra.blogspot.com/2013/05/blog-post_6401.html'>About Me</a></li> <li><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDYhYR1cfa182RBNyNXZAJXlsA8G-5dHxygsXNx5E-zU54pvL2lllmuVt_3RRXK3NFcwUVspaHFDwRyvJuXqKvdJ62dkRfS9yrbhfbHUEQS_TqacxXxO21Si54j_MetcIy3zgEfpXERg/s1600/Start+Button4.png' style='padding:0px;'/><a href='#'>Sofware</a> <ul> <li><a href='http://andyrra.blogspot.com/2013/05/software_23.html'>Software PC</a></li> <li><a href='http://andyrra.blogspot.com/2013/05/tooling.html'>Java / Symbian</a></li> <li><a href='http://andyrra.blogspot.com/2013/06/free-download-psd-file.html'>PSD File</a></li> </ul> </li> <li><img border='0' src='http://img1.blogblog.com/img/icon18_wrench_allbkg.png' style='padding:0px;'/><a href='#'>Tutorial</a> <ul> <li><a href='http://andyrra.blogspot.com/2013/05/tutorial-blog.html'>Tutorial Blog</a></li> <li><a href='http://andyrra.blogspot.com/2013/05/code-blog-parse-html-javascript.html'>HTLM PARSE</a></li> <li><a href='http://andyrra.blogspot.com/2013/05/blog-post_3765.html'> More Generator</a></li> <li><a href='http://andyrra.blogspot.com/2013/06/template-windows_4.html'>Template Windows</a></li> <li><a href='http://andyrra.blogspot.com/2013/06/template-blog.html'>More Template</a></li> <li><a href='http://andyrra.blogspot.com/2013/05/cara-memasang-kode-warna-di-blogspot.html'>Separator kode warna</a></li> </ul> </li> <li><img border='0' src='https://fbstatic-a.akamaihd.net/rsrc.php/v2/y2/r/I7saevh1h6O.png' style='padding:0px;'/><a href='#'>Entertainment</a> <ul> <li><a href='http://andyrra.blogspot.com/2013/06/movies.html'>Movies</a></li> <li><a href='http://andyrra.blogspot.com/2013/06/free-games-pc.html'>Games PC</a></li> <li><a href='http://andyrra.blogspot.com/2013/06/blog-post_5.html'>Download MP3</a></li> <li><a href='http://andyrra.blogspot.com/2013/05/games.html'>Game Java / Symbian</a></li> <li><a href='http://andyrra.blogspot.com/2013/06/free-download-games-hp-china-220x176-jar.html'>Game HP China</a></li> </ul> </li> <li><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivN2N0yrOReV1BYNVDXunde-qlacyXMzEwD3AJXOAsZLr3gLi-xItq21WVXkJcKdgLkbDRljNknmKR1Y3U26TE13JyiNg7zdrLGjubEEYkVyrZ2xoE84WPz2B41W8ba72oyGtgePLKhw/s1600/mydocument.png' style='padding:0px;'/><a href='#'>Menu Update</a> <ul> <li><a href='http://andyrra.blogspot.com/2013/06/site-map.html'>Daftar Isi</a></li> <li><a href='http://andyrra.blogspot.com/2013/06/blog-post_29.html'>Jadwal Acara TV</a></li> <li><a href='http://andyrra.blogspot.com/2013/05/sony-sound-forge-audio-studio-10.html'>Info dan trick</a></li> <li><a href='http://andyrra.blogspot.com/2013/05/blog-post_3588.html'>Religi</a></li> </ul> </li> <form action='/search' id='search' method='get'> <input name='q' placeholder='Search...' size='40' type='text'/> </form></ul>

Get free daily email updates!

[Get this widget]

Written by : Unknown ~ ANDYRRA.COM | Our mission is quite simple and easy for the reader who MAKE YOUR BLOG LIKE A PRO, and also share with fellow bloggers post a quality serve and useful for others bloggers, especially those who are beginners like me ....

Article Menu navigasi horizontal posted by Unknown on the day 9 Mei 2013 . Thank you for your visit and your willingness to read this article. Criticisms and suggestions can you give via the comments box or chatbox. Hopefully Article Menu navigasi horizontal can be useful. When my friends and bloggers Unknown like this article in your post, please copy paste, in order to more widely disseminate useful knowledge And if you want to work rewarded, to appreciate the work of others...

Top Bottom Close