Cara Memasang Kotak Pencarian di Menu Navigasi

Cara Memasang Kotak Pencarian di Menu Navigasi » Postingan kali ini lagi lagi cara membuat dan cara memasang yang mengenai Cara Membuat Kotak Pencarian di Menu Navigasi karena menurut saya aKseSoris teMplate menu navigasi banyak yang tidak menyediakan kotak pencarian dan ini hanya arsip semata, he he he

Bagi anda yang ingin melihat contoh navigasi yang belum saya kasih kotak pencarian, silahkan lihat saja di bawah ini :

• Home
• Pasang Iklan
• Ahlus Sunnah Wal Jama'ah
• teMplate SEO Friendly

dan di bawah ini review navigasi yang sudah komplit dengan kotak pencarian-nya :

• Home
• Pasang Iklan
• Ahlus Sunnah Wal Jama'ah

Bila anda ingin memasang kotak pencarian, maka anda ikuti tips seperti di bawah ini :

Langkah pertama anda harus mencari rss navigasi lalu copy kode di bawah ini :

.js #site-nav li ul{top:100%;left:0;display:none}
#site-nav li li{float:none;display:block}
#site-nav li li a{height:30px;line-height:30px;padding:0 10px}
.js #site-nav li li ul{top:0;left:100%}
.no-js #site-nav li:hover>ul{top:100%;left:0}
.no-js #site-nav li li:hover>ul{top:0;left:100%}
#site-nav .search-form{float:right;text-transform:none}
#site-nav .search-form form{margin:0;height:40px;line-height:40px;padding:0 14px}
#site-nav .search-form .text-input{width:150px;border-color:transparent}

dan paste pas di bawahnya rss navigasi.

Langkah yang kedua seperti ini :

<li class='search-form'>
            <form expr:action='data:blog.homepageUrl + &quot;search&quot;'>
              <input class='text-input' name='q' type='text'/>
              <button class='submit-button' type='submit'><i class='icon-search'/> Search</button>
            </form>
          </li>

dan paste di atasnya </ul> navigasi.

Bila anda tidak ingin ambil pusing, maka saya akan review juga kode navigasi yang komplit di bawah ini :

<style>
#menu{width: 100%;margin: 0;padding: 5px 0 0 0;list-style: none;background: rgb(40, 43, 48);border-radius: 2px;}
#menu li{float: left;padding: 0 0 10px 0;position: relative;line-height: 0;}
#menu a{float: left;height: 20px;padding: 0 15px;color: #F25B29;text: uppercase;font: 12px/25px Arial, Helvetica;text-shadow: 0 1px 0 #000;}
#menu li:hover &gt; a{color: #fafafa;}
#menu:after{visibility: hidden;display: block;content: &quot; &quot;;clear: both;}
.js #site-nav li ul{top:100%;left:0;display:none}
#site-nav li li{float:none;display:block}
#site-nav li li a{height:30px;line-height:30px;padding:0 10px}
.js #site-nav li li ul{top:0;left:100%}
.no-js #site-nav li:hover&gt;ul{top:100%;left:0}
.no-js #site-nav li li:hover&gt;ul{top:0;left:100%}
#site-nav .search-form{float:right;text-transform:none}
#site-nav .search-form form{margin:0;height:40px;line-height:40px;padding:0 14px}
#site-nav .search-form .text-input{width:150px;border-color:transparent}
</style>
<ul id="menu">
<li><a href="http://templates-mmn.blogspot.com/" rel="nofollow">Home</a></li>
<li><a href="http://mufidmmn.blogspot.com/2014/03/pasang-iklan.html" rel="dofollow" target="_blank">Pasang Iklan</a></li>
<li><a href="http://mmn-dot-org.blogspot.com/2014/03/definisi-ahlus-sunnah-wal-jamaah.html" rel="dofollow" target="_blank">Ahlus Sunnah Wal Jama'ah</a></li>
<li><a href="http://templates-mmn.blogspot.com/2014/02/download-teMplate-seo-friendly-responsive.html" rel="dofollow" target="_blank">teMplate SEO Friendly</a></li>
<li><a href="http://templates-mmn.blogspot.com/2014/01/cara-membuat-blog-gratis-wordpress.html" rel="dofollow" target="_blank">Cara Membuat Blog</a></li>
<li class='search-form'>
            <form expr:action='data:blog.homepageUrl + &quot;search&quot;'>
              <input class='text-input' name='q' type='text'/>
              <button class='submit-button' type='submit'><i class='icon-search'/> Search</button>
            </form>
          </li>
</ul>

Bagaimana dengan menu navigasi anda? dan semoga postingan Cara Memasang Kotak Pencarian di Menu Navigasi atau Cara Membuat Kotak Pencarian di Menu Navigasi ini bisa membantu dan baca juga Cara Membuat Menu Navigasi dan Cara Membuat Menu Drop Down. terima kasih