Cara Membuat Menu Navigasi keren atau Cara Memasang Menu Navigasi keren di blog dan khususnya di blogspot » Sebenarnya ini cuma buat arsip aKseSoris teMplate, karena teMplate yang sudah banyak di share oleh para blogger itu sudah lengkap sama Menu Navigasi-nya.

Bagi anda yang ingin menggunakan silahkan lihat dulu contohnya di bawah ini :

Bagaimana, apakah anda menyukai Menu Navigasi yang saya share. bila menyukai silahkan copy kode di bawah ini dan caranya ada dua.

yang pertama bisa anda taruh di gadget dan yang kedua bisa anda taruh di html. untuk cara menaruh di html seperti di bawah ini :

Cari kode </header> lalu paste kode Menu Navigasi tepat di atasnya header. kodenya di bawah ini :

<style>

#site-nav,#site-nav ul{background-color:#F25B29;height:40px;color:#800080;text:uppercase}

#site-nav{border-bottom:2px solid #ddd}

#site-nav li{float:left;position:relative}

#site-nav a{display:block;height:40px;line-height:40px;padding:0 15px;color:inherit;white-space:nowrap;font-family:Oswald,"Arial Narrow","Source Sans Pro",Calibri,Segoe,"Segoe UI",Frutiger,"Frutiger Linotype","DeJavu Sans","Helvetica Neue",Arial,Sans-Serif;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}

#site-nav a.home-menu,#site-nav a.home-menu:hover{background-color:#800080;color:white;padding:0 10px;line-height:45px}

#site-nav a:hover,#site-nav li:hover>a{background-color:#8F408F;text-decoration:none;color:white}

#site-nav li ul{height:auto;position:absolute;z-index:999;top:-99999px;left:-99999px;width:170px;-webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);-moz-box-shadow:0 1px 3px rgba(0,0,0,.4);box-shadow:0 1px 3px rgba(0,0,0,.4)}

.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}

</style>

<ul>

<li><a href="http://mufidmmn.blogspot.com/2014/03/pasang-iklan.html" rel="dofollow" target="_blank" title="Jasa Review Pasang Iklan Murah">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" title="Pengertian Ahlus Sunnah Wal Jamaah">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" title="teMplate SEO Friendly Responsive">teMplate SEO Friendly</a></li>

<button class='submit-button' type='submit'><i class='icon-search'/> Search</button>

</form>

</li>

<!--

<li><a href='#'>Submenus <i class='icon-angle-down'/></a>

<ul>

<li><a href='#'>Submenu 1</a></li>

<li><a href='#'>Submenu 2</a></li>

<li><a href='#'>Submenu 3</a></li>

<li><a href='#'>Submenu 4 <i class='icon-angle-right'/></a>

<ul>

<li><a href='#'>Submenu 4.1</a></li>

<li><a href='#'>Submenu 4.2</a></li>

<li><a href='#'>Submenu 4.3</a></li>

</ul>

</li>

<li><a href='#'>Submenu 5</a></li>

</ul>

</li>

-->

</ul>

</nav>

Dengan postingan arsip "Cara Membuat Menu Navigasi keren atau Cara Memasang Menu Navigasi keren di blog" ini semoga saja anda puas dan semoga bermanfaat. terima kasih.

Artikel terkait » Cara Memasang Kotak Pencarian di Menu Navigasi dan Cara Membuat Menu Drop Down.