Cara Menciptakan Top Sajian Navigasi Diatas Header Untuk Privacy Policy

Oke malem sobat. Pada kesempatan kali ini, aku akan membagikan sebuah sajian mavigasi. Menu Navigasi ini sering dipakai para Blogger untuk Bagian About, Contact Us, Privacy Policy dan Disclaimer. Sebelumnya aku pernah memposting Cara Membuat Menu Navigasi Berbasis Media Sosial. Tetapi kali ini, aku akan membagikan Menu Navigasi berbasis kolom search dibagian kanannya. Top Menu ini, Biasa dipakai diatas </header>. Anda dapat melihat pola Top Menu Navigasi ini, digambar diatas.

Baca Juga :

Cara Membuat Menu Navigasi Plus Media Sosial

Cara Membuat Top Menu Navigasi diatas Header Untuk Privacy Policy

Cara Pertama :

1. Buka Blogger - Kemudian Login.
2. Dashboard - Template.
3. Edit HTML.

Proses Pembuatan :

1. Temukan arahan (CTRL + F ) ]]></b:skin> atau </style>
2. Copy & Paste arahan berikut ini, dan Letakkan diatas arahan ]]></b:skin> atau </Style>

/* Top Menu Navigasion */ .menu { font:normal normal 13px Open Sans Condensed, Arial, sans-serif; padding:0 0; background:#ffffff; margin:0 auto; height:38px; border:1px solid #f0f0f0; overflow:hidden; text-transform:uppercase; } .nav-menu { list-style-type:none; margin:0 0 0 0; padding:0 0 0 0; } .nav-menu li { display:block; float:left; line-height:38px; margin:0 0 0 0; padding:0 0 0 0; border-right:1px solid #f0f0f0; } .nav-menu li a { background:#ffffff; color:#8D8D8D; display:block; padding:0 8px; } .nav-menu li a:hover { background:#f5f5f5; } ul.nav-search { height:38px; margin:0 0 0 0; padding:0 0; float:right; } .navsearch { padding: 10px; border-left: 1px solid #ddd; color: #666; border-top:1px solid #fff;border-bottom:1px solid #fff;border-right:1px solid #ddd; transition:all 0.5s ease-out; font:normal normal 14px Open Sans Condensed, Arial, sans-serif; float:left; } .navsearch:focus { background:#fafafa; } .subsearch {padding:10px;color:#555;font:normal normal 14px Open Sans Condensed, Arial, sans-serif;border:none;background:#fff;cursor:pointer;} .subsearch:hover {background:#fafafa}

3. Temukan lagi arahan (CTRL+F) arahan <div class='header-wrapper'> atau </header>
4. Copy & Paste arahan berikut ini, dan Letakkan sempurna dibawah arahan <div class='header-wrapper'> atau </header>.

<div id='nav-wrap'> <nav class='menu'> <!-- idblanter.com top sajian start --> <ul class='nav-menu'> <li><a href='Your Link'>About</a></li> <li><a href='Your Link'>Contact Us</a></li> <li><a href='Your Link'>Privacy Policy</a></li> <li><a href='Your Link'>Disclaimer</a></li> </ul> <!-- idblanter.com top sajian end --> <!-- search form start --> <ul class='nav-search'> <form action='/search' method='get'> <input class='navsearch' name='q' onblur='if(this.value==&#39;&#39;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&#39;&#39;;' type='text' value='Search...'/> <button class='subsearch' type='submit'><i class='fa fa-search'></i></button> </form> </ul> <!-- search form end --> </nav> <div class='clear'></div> </div>

5. Jika sudah? Temukan lagi kode atau <head>.
6. Copy & Paste Kode JQuery Berikut, dan Letakkan dibawah arahan <head>
Jika arahan dibawah ini sudah dipasang, Jangan dipasang lagi.

<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700' rel='stylesheet' type='text/css'/> <link href='//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>

7. Simpan Template.

Demikianlah Tutorial Blogger kali ini, jikalau terjadi kesalahan, atau anda kurang mengerti?! Silakan jangan sungkan untuk berkomentar dibawah ini. Terakhir, silakan anda lihat homepage anda. Sekian dari saya, Semoga Bermanfaat! Thanks for Reading & Sharing : Cara Membuat Top Menu Navigasi diatas Header Untuk Privacy Policy