Kumpulan menu unik horizontal

Share kali ini merupakan kelanjutan dari share tentang Kumpulan menu simple horizontal. Namun, yang beda disini ialah tipe nya, yang sebelumnya itu simple tapi kalo yang ini bisa di bilang unik. Oh ya kalo ada sobat yang belum tau deskripsi menu menurut versi svshare di klik disini !!!
Ok, tanpa berlama - lama langsung ke TKP aja ya sob. .

Follow ya step by step nya :

1. Pastinya, login dulu ke akun bloggernya sobat
2. Otomatis ke halaman dasbor
3. Pilih tabmenu Rancangan => Pilih Elemen Laman
4. Tambah Gadget (bisa di atas header atau dibawah header)
5. Pilih HTML/JavaScript
6. Copy semua kode tab yang terdapat dalam textarea dibawah, tab menu pilihan sobat itu paste pada kolom konten
Untuk mengganti link, edit pada bagian skrip HTML nya, sebagai berikut :
<li><a href="#"><span>Link 1</span></a></li>
<li><a href="#"><span>Link 2</span></a></li>
<li><a href="#"><span>Link 3</span></a></li>
<li><a href="#"><span>Link 4</span></a></li>
<li><a href="#"><span>Link 5</span></a></li>

Ganti kode (#) dengan URL halaman sobat dan untuk Link 1, Link2, Link3 dan seterusnya dengan title URL halaman sobat jika ingin menambahkan dan bisa menghapus disalah satu baris skrip HTML tersebut.
7. Terakhir simpan dan lihat deh blog nya sobat langsung.
Berikut kode sekaligus gambar nya.
Share navigation menu versi unik part I

<style> .container { width: 500px; padding: 0 0 5px 0; margin: 3px 0 10px 0; background: #fff; } #nav { margin: 0; padding: 0; border-top: 3px solid #5F6A71; } #nav li { margin: 0; padding: 0; display: inline; list-style-type: none; } #nav a:link, #nav a:visited { float: left; font: bold 7.5pt verdana; line-height: 14px; padding: 9px; text-decoration: none; color: #708491; } #nav a:link.active, #nav a:visited.active, #nav a:hover { color: #666; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLZytPlKKwrqPl45sfEOD9-KdHhudR0bjFyA6U5iImr1WNESQs6ns4jvX_TgBrSIvLLUerA2lQ-IRlBHEtPJ9mz4uJOKEJJlJ2UJ9B3Q9Bu1VOU9Y7MgOVBaBRxVUDWi1uxQ6u75kd4vo/s1600/Inverted.png) no-repeat top center; border-top: 4px solid #5F6A71; } </style> <div class="container"> <ul id="nav"> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Share navigation menu versi unik part II

<style> #navcontainer { background: #369; border-top: 1px solid #9CC; margin-top: 20px; font: normal normal 11px Verdana, Geneva, Arial, Helvetica, sans-serif; } #navlist { list-style: none outside none; margin: 0; padding: 0; } @media all { #navlist { text-align: center } } #navlist li { bottom: 11px; display: inline; line-height: 1.2em; margin: 0; padding: 0; position: relative; } html>body #navlist li { background: #000; margin: 0 3px 0 0; padding: 4px 0px 4px 0; } #navlist a, #navlist a:link, #navlist a:visited { background: #900; border: 1px solid #FFF; bottom: 2px; color: #FFF; cursor: pointer; display: inline; height: 1em; margin: 0; padding: 3px 5px 3px 5px; position: relative; right: 2px; text-decoration: none; } #navlist a:hover { background: #C00; bottom: 1px; color: #FFF; position: relative; right: 1px; } #navlist a:active { background: #999; bottom: 0px; color: #FFF; position: relative; right: 0px; } #navlist li#active { background: #369; bottom: 13px; display: inline; margin: 0 3px 0 0; padding: 0; position: relative; } html>body #navlist li#active { background: #000; margin: 0 4px 0 4px; } #navlist #active a, #navlist #active a:link, #navlist #active a:visited, #navlist #active a:hover { background: #369; border-bottom: none; border-left: 1px solid #9CC; border-right: 1px solid #9CC; border-top: 1px solid #9CC; bottom: 0; color: #FFF; cursor: text; margin: 0; padding: 2px 5px 0 5px; position: relative; right: 0; } </style> <div id="navcontainer"> <ul id="navlist"> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Share navigation menu versi unik part III

<style> .container { width: 500px; padding: 15px; margin: 3px 0 20px 0; border: 1px solid #ccc; background: #fff; } /* square */ #navSquare { margin: 0; padding: 0 0 20px 10px; border-bottom: 1px solid #9FB1BC; } #navSquare li { margin: 0; padding: 0; display: inline; list-style-type: none; } #navSquare a:link, #navSquare a:visited { float: left; font-size: 12px; line-height: 14px; font-weight: bold; padding: 0 12px 6px 12px; text-decoration: none; color: #708491; } #navSquare a:link.active, #navSquare a:visited.active, #navSquare a:hover { color: #000; background: url(file://localhost/C:/Program%20Files/CSS%20Tab%20Designer%202/styles/Square/Square.gif) no-repeat bottom center; } </style> <div class="container"> <ul id="navSquare"> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Sekian, sharing mengenai Kumpulan menu unik horizontal. Terima Kasih

Perlu Diingattt :
Apabila di arahkan ke halaman :
- shorte.st atau adf.ly, tunggu sejenak 5 detik dan mengklik tombol skip/lewati
- ke ouo, centang anda bukan robot dan tunggu 5 detik lalu get link, kemudian otomatis ke hosting download tersebut. Apabila sobat kesulitan ada panduan cara downloadnya klik >> disini <<

PERHATIAN!!!
- Jika kamu kesulitan mengunjungi halaman adf.ly, bisa atasi dengan cara INI
- Jika ada link mati atau bermasalah, laporkan saja langsung ya ke SINI. Terima Kasih. Enjoy...

Langganan Software Gratis

• Tweet
• Share
• Share
• Share
• Share

About svshare7

Blog ini lahir 5 Januari 2012 yang awalnya dikelola oleh Admin tunggal, kini sudah di kelola oleh beberapa pengurus. Tujuan ngeblog hanya untuk mengisi waktu luang dan hobby, tapi saya bersyukur apabila blog ini bermanfaat bagi teman - teman. Blog ini akan terus menyajikan informasi software, Cusrom Android, Tutorial, Game yang dibagikan secara gratis.

Related Post

• Membuat textarea di bloggerHallo sobat svshare pada sibuk apa nih??? Oh ya sory nih baru sekarang ngeshare lagi, tu sih karena
• Situs Investment ini bagus untuk nyari laba sob, cek disiniMasih mengulas tentang bitcoin sob, dan kali ini lebih mengarah kepada investment. Waaahhh, seperti
• Cara mendapatkan Uang BitcoinYap, posting kali ini saya akan sedikit membahas tentang bitcoin. apasih bitcoin itu? hayoooo, apa
• Cara membuat efek salju, bintang, daun bertaburan di blog Kembali svshare7 baru bisa mengepostkan lagi, sudah sekian lama tidak mengepostkan sesuatu di b