9 Mei 2013

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


<!-- This HTML code has been optimized by http://www.iwebtool.com/html_optimizer --> <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='$(&apos;.header-outer,.main-outer,.round3.black50.post-header-line-line&apos;).hide(&apos;slow&apos;);'>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>
di

Tidak ada komentar:

Posting Komentar