Cara Membuat Menu Navigasi Horizontal Plus Kotak Pencarian - Hallo sahabat Anak Google, Pada Artikel yang anda baca kali ini dengan judul Cara Membuat Menu Navigasi Horizontal Plus Kotak Pencarian, admin mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. Mudah-mudahan isi postingan Artikel Blogger, Artikel Tutorial Blog, yang kami tulis ini dapat anda pahami. Selamat membaca ya.

Judul : Cara Membuat Menu Navigasi Horizontal Plus Kotak Pencarian
link : Cara Membuat Menu Navigasi Horizontal Plus Kotak Pencarian

Cara Membuat Menu Navigasi Horizontal Plus Kotak Pencarian

Tutorial Blogger dan SEO Blogger - Cara Membuat Menu Navigasi Horizontal Plus Kotak Pencarian.
Menu navigasi horizontal adalah menu navigasi yang sangat di perlukan ke beradaannya dalam suatu website. Di menu navigasi ini terdapat beberapa menu yang di sajikan seperti home, about, contanct atau apa saja yang di sediakan oleh pembuat website/ blog untuk memudahkan pengunjung memilih halaman yang tersedia di website/ blog tersebut.

Menu navigasi yang akan kita bahas kali ini adalah menu navigasi mirip template-nya oom yang seperti yang ada di blog saya. Dan menu navigasi ini di lengkapi dengan kotak pencarian lho. Screenshots-nya bisa anda lihat di bawah ini.

Klik untuk memperbesar, atau sobat lihat saja menu navigasi horizontal di blog saya ini. Nanti tampilannya akan seperti itu. Bagaimana apakah sobat tertarik untuk mencoba  Membuat Menu Navigasi Horizontal? Jika ya, silahkan ikuti langkah-langkah Cara Membuat Menu Navigasi Horizontal Plus Kotak Pencarian berikut ini.

1.Log in ke blogger dengan akun yang anda miliki.
2.Klik rancangan  » edit HTML » centang kotak expand template widget. Atau yang menggunakan tampilan blogger yang baru anda klik template » edit HTML » centang kotak expand template widget.
3.Cari kode ]]></b:skin> dan letakkan kode di bawah ini tepat di atas-nya.

#nav-element{width:900px; margin:0; padding:0px 0 0px 0; float:center;margin-left:0px;}
#nav{background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm0G7GOo6jTlWs__vOdAfz33gO3zSAJXVC8oIKenxcw-ttZgoNGFzvDceCFOO2yc91_GwainL73Fw0ux3B4UGUifw6mIGmCxHk6tM3j_2FEWyu1HcUxPkZNuihRhRceaCGSaF7I2zuxdLI/s1600/topmenu-c.png) no-repeat; height:32px; padding:4px 0 0; margin-bottom:0px; clear:both; margin:0 auto;}
#nav-left{float:left; display:inline; width:700px; padding-left:6px; padding-top:1px}
#nav-right{float:right; display:inline; width:170px;  padding-top:3px; padding-right:20px}
#nav ul{position:relative; overflow:hidden; padding-left:0px; margin:0; font:1.0em Verdana,Arial,Helvetica,sans-serif; font-weight:bold}
#nav ul li{float:left;  list-style:none}#nav ul li a, #nav ul li a:visited{ display:block; color:#fff; margin:1px 4px; padding:4px 2px; text-decoration:none;}
#nav ul li a:hover{background-color:#222; color:#fff; background-color:#999; margin:1px 4px; padding:4px 2px; border-radius:3px 3px; -moz-border-radius:3px 3px 3px 3px;  -khtml-border-radius:3px 3px 3px 3px;  -webkit-border-radius:3px 3px 3px 3px;  border-radius:3px 3px 3px 3px}
#nav ul li a.current, #nav ul li a.current:visited, #nav ul li a.current:hover{color:#fff; background-color:#999; margin:1px 3px; padding:4px 2px; border-radius:3px 3px; -moz-border-radius:3px 3px 3px 3px;  -khtml-border-radius:3px 3px 3px 3px;  -webkit-border-radius:3px 3px 3px 3px;  border-radius:3px 3px 3px 3px}
/* SEARCH */
#src-m{border:1px solid #999;  height:18px; width:180px; padding-top:0px;  background:#f6f4f4; }
#src-m input{border:0;  background:none;  color:#777}
#s-m{font-size:12px; width:180px; padding-left:4px;  margin:0;  background:none}
#tsrc-m #src-m{margin-top:0px;background-color:#FFFFFF;border:1px solid #000000; border-radius:3px 3px; -moz-border-radius:3px 3px 3px 3px;  -khtml-border-radius:3px 3px 3px 3px;  -webkit-border-radius:3px 3px 3px 3px;  border-radius:3px 3px 3px 3px}
#tsrc-m #s-m{width:155px}

4.Letakkan kode di bawah ini tepat di atas kode <div id='content-wrapper'> .

<div id='nav-element'>
<div id='nav'>
<div id='nav-left'>
<ul>
<li class='current_page_item'><a href='http://anakgoogle.xyz/' title='Home'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3my8zZIA4r_Rq1xNNvaVmlb_RYI_90lYiEt_x16PrW3osk420ZPWYtfyrw2y3RPz6sXUT8X_6Jnl04DnZG4o7Bed7Nj5V-eSwzAF4VBjOMwGKqgjfaZ7F5wWBWwh6enOMW3UzoKG9C-G_/s200/icon-home.png' style='padding: 0px;'/></a></li>
<li><a href='/2012/01/about.html' rel='nofollow' title='Mengenai Blog'>About</a></li>
<li><a href='/2012/02/kontak.html' rel='nofollow' title='Kontak saya'>Contact us</a></li>
<li><a href='/search/label/Tutorial%20Blog' rel='nofollow' title='Tutorial blogger'>Blogger tutorial</a></li>
<li><a href='/search/label/SEO%20blogger' rel='nofollow' title='SEO blogger'>SEO</a></li>
<li><a href='/2012/01/tukeran-link.html' rel='nofollow' title='Tukeran link'>Link exchange</a></li>
<li><a href='/2012/01/peta-situs.html' rel='nofollow' title='Daftar isi/ arsip artikel lengkap'>Site map</a></li>

</ul>
<script language='javascript'>setPage()</script>
</div>
<div id='nav-right'>
<div id='tsrc-m'>
<div id='src-m'>
<form action='http://anakgoogle.xyz/search' id='searchform' method='get' name='searchform'>
<input class='keyword' id='s-m' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Cari artikel..&quot;;}' onfocus='if (this.value == &quot;Cari artikel..&quot;) {this.value = &quot;&quot;}' type='text' value='Cari artikel..'/>
<input src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtAVDWTlGyy9UuvYof-EaCX8t3FAvxh1jA4_5cCkoaSreqqF5FaVde3tklLdWt-crka7nSqWw2Xhyphenhyphen0DEaYCHH5PfA7-dLYMx7aYceO20s1H_297GZcOBa3wzlwiVgTn1UL40AaCLt-OX4/s200/search-c.png' style='border: 0pt none ; vertical-align: top; padding-top:3px' type='image'/>
</form>
</div>
</div>
</div>
</div>
</div>

Keterangan :

• Kode yang berwarna biru ganti dengan url yang ingin anda tujukan.
• kode yang berwarna orange ganti dengan kalimat yang anda inginkan.
• kode yang berwarna merah  ganti dengan url blog anda. 

5.Save template anda.

Selesai sudah langkah-langkah Cara Membuat Menu Navigasi Horizontal Plus Kotak Pencarian ,jika mengalami kesulitan silahkan bertanya pada kotak komentar ya.

Demikianlah artikel tentang Cara Membuat Menu Navigasi Horizontal Plus Kotak Pencarian

Sekianlah artikel Cara Membuat Menu Navigasi Horizontal Plus Kotak Pencarian kali ini, mudah-mudahan bisa memberi manfaat untuk pembaca semua.

Anda sekarang membaca artikel Cara Membuat Menu Navigasi Horizontal Plus Kotak Pencarian dengan alamat link https://anakugoogle.blogspot.com/2012/02/cara-membuat-menu-navigasi-horizontal.html

Tweet

Unknown