Cool Social Media Sharing Touch Me Widget by Blogger Widgets

Home » , » Elegant Horizontal Menu Include Search Box Untuk Blog

Elegant Horizontal Menu Include Search Box Untuk Blog

Hampir tidak ada rasanya sebuah Blog atau Website tanpa menggunakan Menu Navigasi, banyak sekali macam-macam menu navigasi yang tersedia di internet dengan berbagai variasinya, seperti vertikal menu, horizontal menu, drop down menu, popup menu, atau mungkin bisa beberapa jenis menu navigasi digunakan pada sebuah blog, tentu saja hal ini disesuaikan dengan kebutuhan dari banyaknya informasi pada blog tsb.

Cara Pasang Elegant Horizontal Menu Include Search Box Untuk Blog

Pada dasarnya fungsi dari Menu Navigasi diatas secara umum hampir sama, sebagai navigator atau pemandu bagi pengunjung blog sehingga pengunjung bisa bebas memilih mau membaca artikel yang mana. Biasanya pemilik blog menempatkan link yang dianggap penting agar mudah ditemukan dan dibaca oleh pengunjung. Atau bisa juga link label sehingga apabila pengunjung mengkliknya langsung terbuka sederetan artikel yang tergabung dalam label tersebut. Link yang biasa dipasang pada menu horisontal, yang paling umum misalnya : Profil, Contact, Sitemap, Buku Tamu dan lain-lain tergantung selera pemilik blog.

Horizontal Menu, Menu Horizontal, Tab Menu Horizontal, Horizontal Navbar, Navigasi Horisontal adalah merupakan istilah yang sama. Kalau didefinisan menurut pemahaman kami adalah serentetan menu yang tersusun secara mendatar, menyamping, dimana menu tersebut berupa link yang apabila di-klik akan tertuju kepada sebuah halaman web.

Horizontal Menu yang ingin kami sharing kali ini disertai dengan kotak pencarian atau lebih dikenal dengan nama search box, padahal sama saja hanya beda penggunaan bahasa. Kami memberikan embel-embel "elegant" bukan semata-mata membuat nice judul posting, namun dengan tampilan yang simple/sederhana, rapi tetapi enak dipandang dari situlah rasanya tidak terlalu berlebihan jika kami memberikan tambahan kata "elegant" untuk Horizontal Menu ini.

Jika rekan-rekan pembaca tertarik untuk menambahkan Horizontal Menu ini pada blog rekan-rekan atau mengganti menu navigasi sebelumnya, berikut kami paparkan cara pengaplikasiannya pada flatform blogger, silahkan disimak :
  • Seperti biasa silahkan login ke akun Blogger rekan-rekan.
  • Silahkan lakukan backup Template rekan-rekan sekalian, untuk jaga-jaga bila nanti ada kesalahan penempatan kode, atau tidak cocok dengan blog rekan-rekan.
  • Tuju bagian Edit HTML.
  • Cari kode ]]></b:skin> pada template rekan-rekan, kemudian letakan kode CSS dibawah ini tepat sebelum kode ]]></b:skin>.
/* Elegant Top Menu With beautiful Search Box Start */
#top-menu{background:none repeat scroll 0 0 #DDDDDD;margin-bottom:15px;padding:0;width:100%}
#topbar{margin-left:5px;width:100%}
.clearit{clear:both;font-size:0;height:0;line-height:0;margin:0;padding:0}
#top{width:100%}
#top,#top ul{list-style:none;margin:0;padding:0}
#top a{background:none repeat scroll 0 0 transparent;border-top:3px solid transparent;color:#333333;display:block;font:700 11px Arial;margin-right:20px;padding:6px 0 7px;text-decoration:none;text-transform:none;transition:all 0.3s ease-in-out 0s}
#top a.trigger:before{border-color:#333333 transparent transparent;border-style:solid;border-width:8px 5px 0;content:"";display:block;float:right;height:0;margin:5px 0 0 5px;transition:all 0.3s ease-in-out 0s;width:0}
#top a.trigger:hover:before{border-color:#B0130D transparent transparent;border-style:solid;border-width:8px 5px 0;content:"";display:block;float:right;height:0;margin:5px 0 0 5px;width:0}
#top li{list-style:none;float:left;position:static;width:auto}
#top li ul,#top ul li{list-style:none;background:none repeat scroll 0 0 #DDDDDD;box-shadow:1px 1px 3px #999999;padding-left:5px;width:150px}
#top ul li a{border:medium none;color:#333333;font:bold 13px Arial;padding:5px 0;text-align:left;text-transform:none}
#top li ul{background:none repeat scroll 0 0 transparent;display:none;margin:0;padding:0;position:absolute;z-index:100}
#top a:hover{border-top:3px solid #A73F3C;color:#B0130D}
#top li:hover ul,#top li.hvr ul{display:block}
#top ul li a:hover{border-bottom:medium none;color:#B0130D;padding-left:10px}
#top a.trigger:hover{border-bottom:3px solid #DDDDDD}
.searchfield {color: #555555;font: 11px Tahoma,Verdana,Arial,Sans-Serif;padding: 2px 5px;width: 150px;}
.logosearch {background: none repeat scroll 0 0 transparent;float: right;height: 28px;padding: 3px 6px 0 0;width: 50px;}
.searchbutton {border: medium none;cursor: pointer;height: 21px;margin: 0;padding-top: 1px;vertical-align: top;width: 50px;}
/* Elegant Top Menu With beautiful Search Box End */
  • Kemudian cari kode <body>, letakan kode HTML berikut ini tepat dibawahnya.
<div id='top-menu' style='border-top:3px solid #A73F3C;-o-box-shadow:0px 0px 7px 0 #c7c7c7;-ms-box-shadow:0px 0px 7px 0 #c7c7c7;-moz-box-shadow:0px 0px 7px 0 #c7c7c7;-webkit-box-shadow:0px 0px 7px 0 #c7c7c7;box-shadow:0px 0px 7px 0 #c7c7c7;'>
  <div class='content-wrapper'>
  <div id='topbar'>
   <ul id='top'>
    <li><a href='/'>Home</a></li>
    <li><a href='LINK 1'>Daftar Isi</a></li>
    <li><a href='LINK 2'>Privacy</a></li>
    <li><a href='LINK 3'>Hubungi Kami</a></li>
   </ul>
  <div class='searchbox' style='float:right;padding:0 6px;margin-bottom:-3px;margin-right:-3px;overflow:hidden'>
  <div style='float:right;padding:4px 2px 1px 0;'>
   <form action='/search' id='cse-search-box' method='get' target='_blank'>
    <div>
     <input class='searchfield' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;' style='width:180px;padding:2px 0 2px 3px;' type='text' value='  Search here...'/>
     <input alt='search' class='searchbutton' src='http://1.bp.blogspot.com/-o8fjdffMPm8/Ud1W1DZ0efI/AAAAAAAAZYs/a5FKTv53o0c/s1600/button-search.png' title='Search!' type='image'/>
    </div>
   </form>
  </div>
  <div class='logosearch'>
   <img alt='Google' height='28' src='http://3.bp.blogspot.com/-JBH7frcCZsQ/Ud1XAkLDQhI/AAAAAAAAZY0/dEhu6IsYUUI/s1600/google-search.png' title='Google Search' width='50'/>
  </div>
  </div>
  <div style='clear:both;'/>
  </div>
 </div>
  </div>
  • Simpan Template.
Bagaimana langkahnya mudahkan ?, Horizontal Menu sudah terpasang pada blog rekan-rekan, masih ada pengaturan yang perlu dilakukan agar tampilannya lebih serasi untuk blog rekan-rekan, silahkan ikuti petunjuk berikut :
  • Cari kode "#A73F3C", ini adalah kode warna untuk merah maroon, untuk border atas dan hover saat link pada Horizontal Menu di tunjuk, silahkan ganti dengan kode warna yang sesuai dengan blog rekan-rekan.
  • Ganti tulisan "LINK 1" dengan link yang rekan-rekan kehendaki, misalkan http://www.fenuto.com/p/daftar_isi.html untuk link Daftar Isi, lakukan hal yang sama untuk "LINK 2" dan "LINK 3" atau tambahkan list lain jika diperlukan.
Itu saja yang paling berpengaruh untuk Horizontal Menu ini, selebihnya jika rekan-rekan cukup menguasai bahasa CSS silahkan modifikasi sesuai keinginan, semoga artikel ini bermanfaat untuk kami team penulis disaat mulai lupa dan untuk rekan-rekan para pembaca dalam membangun blog / web.

Ferry NurdiantoDitulis Oleh : Ferry Nurdianto

Artikel Elegant Horizontal Menu Include Search Box Untuk Blog, diterbitkan oleh Ferry Nurdianto pada hari 10 Agustus 2013. Semoga artikel ini dapat menambah wawasan Anda. Oleh Admin, Sobat diperbolehkan mengcopy paste / menyebar luaskan artikel ini, namun anda harus meletakkan link dibawah ini sebagai sumbernya.

6 komentar:

  1. kami sekeluarga tak lupa mengucapkan puji syukur kepada ALLAH S,W,T dan terima kasih banyak kepada AKI atas nomor togel.nya yang AKI berikan 4 angkah 1500 alhamdulillah ternyata itu benar2 tembus AKI. dan alhamdulillah sekarang saya bisa melunasi semua utan2 saya yang ada sama tetangga.dan juga BANK BRI dan bukan hanya itu AKI. insya allah saya akan coba untuk membuka usaha sendiri demi mencukupi kebutuhan keluarga saya sehari-hari itu semua berkat bantuan AKI.. sekali lagi makasih banyak ya AKI… bagi saudara yang suka main togel .
    yang ingin merubah nasib seperti saya silahkan hubungi AKI SOLEH,,di 0823 1333 6747,, insya allah anda bisa seperti saya…menang togel 175 juta, wassalam.


    dijamin 100% jebol saya sudah buktikan...sendiri....







    Apakah anda termasuk dalam kategori di bawah ini !!!!


    1"Dikejar-kejar hutang

    2"Selaluh kalah dalam bermain togel

    3"Barang berharga anda udah habis terjual Buat judi togel


    4"Anda udah kemana-mana tapi tidak menghasilkan solusi yg tepat


    5"Udah banyak Dukun togel yang kamu tempati minta angka jitunya
    tapi tidak ada satupun yang berhasil..







    Solusi yang tepat jangan anda putus aza....AKI SOLEH akan membantu
    anda semua dengan Angka ritwal/GHOIB:
    butuh angka togel 2D3D4D SGP / HKG / MALAYSIA / TOTO MAGNUM / dijamin 100% jebol
    Apabila ada waktu
    silahkan Hub: AKI SOLEH DI NO: (((082313336747)))



    angka GHOIB: singapur 2D/3D/4D/



    angka GHOIB: hongkong 2D/3D/4D/



    angka GHOIB; malaysia



    angka GHOIB; toto magnum 4D/5D/6D/



    angka GHOIB; laos

    BalasHapus
    Balasan
    1. assalamualaikum wr, wb.AKI saya:IBU RIANTI dan SEKELUARGA mengucapkan banyak2
      terimakasih kepada AKI ALI ,atas angka togel yang di
      berikan “4D” alhamdulillah ternyata itu benar2 jebol dan berkat
      bantuan AKI ,ALI, saya bisa melunasi semua hutang2 orang tua saya yang
      ada di BANK dan bukan hanya itu AKI alhamdulillah sekarang saya
      sudah bisa bermodal sedikit untuk mencukupi kebutuhan keluarga saya
      sehari2. itu semua berkat bantuan AKI ,ALI, sekali lagi makasih banyak
      yah AKI… yang ingin merubah nasib seperti saya hubungi AKI ,ALI, di
      nomor: 082 394 334 877

      dijamin 100% jebol saya sudah buktikan…sendiri….

      Apakah anda termasuk dalam kategori di bawah ini !!!!

      1″Dikejar-kejar hutang

      2″Selaluh kalah dalam bermain togel

      3″Barang berharga anda udah habis terjual Buat judi togel

      4″Anda udah kemana-mana tapi tidak menghasilkan solusi yg tepat

      5″Udah banyak Dukun togel yang kamu tempati minta angka jitunya
      tapi tidak ada satupun yang berhasil..

      Solusi yang tepat jangan anda putus asah….AKI ,ALI, akan membantu
      anda semua dengan Angka ritwal/GHOIB:
      butuh angka togel 2D_3D_4D SGP / HKG / MALAYSIA / TOTO MAGNUM / dijamin 100% jebol
      Apabila ada waktu
      silahkan Hub: AKI ,ALI, DI NO: 082 394 334 877

      angka GHOIB: singapur 2D/3D/4D/

      angka GHOIB: hongkong 2D/3D/4D/

      angka GHOIB; malaysia

      angka GHOIB; toto magnum 4D/5D/6D/

      angka GHOIB; laos

      Hapus
    2. Assalamualaikum warahmatullahi wabarakatu,saya dari Ibu Solimah sekeluarga mengucapkan banyak terimah kasih kepada MBAH KASURI atas bantuanya kini impian saya selama ini sudah jadi kenyataan dan berkat bantuan MBAH KASURI pula yang telah memberikan angka jitu kepada saya yaitu 4D dan alhamdulillah angka yang diberikan mbah bener-bener tembus. sekali lagi makasih ya MBAH karna waktu itu saya cuma punya uang Rp.200 ribu buat pasan angkanya dan akhirnya saya menang. Berkat angka gaib hasil meditasi ritual MBAH KASURI saya sudah bisa bangkit dari keterpurukan juga udah buka usaha yang dijalankan suamiku dan kini kehidupan keluarga saya jauh lebih baik dari sebelumnya,bagi anda yg ingin seperti saya silahkan hubungi MBAH di: 0853 4646 0388 atau silahkan KLIK DISINI ramalan MBAH KASURI memang memiliki ramalan GAIB” yang insy allah dijamin tembus 100%. makasih atas tumpanganya moga tetap jp !!!


      Hapus
    3. saya mengucapkan banyak terimakasih kepada MBAH KABOIRENG yang telah menolong saya dalam kesulitan,ini tidak pernah terfikirkan dari benak saya kalau nomor yang saya pasang bisa tembus dan ALHAMDULILLAH kini saya sekeluarga sudah bisa melunasi semua hutang2 kami,sebenarnya saya bukan penggemar togel tapi apa boleh buat kondisi yang tidak memunkinkan dan akhirnya saya minta tolong sama MBAH KABOIRENG dan dengan senang hati MBAH KABOIRENG mau membantu saya..,ALHAMDULIL LAH nomor yang dikasi MBAH KABOIRENG semuanya bener2 terbukti tembus dan baru kali ini saya menemukan dukun yang jujur,jangan anda takut untuk menhubungiya jika anda ingin mendapatkan nomor yang betul2 tembus seperti saya,silahkan hubungi MBAH KABOIRENG DI 082=322=212=111 ingat kesempat tidak akan datang untuk yang kedua kalinga dan perlu anda ketahui kalau banyak dukun yang tercantum dalam internet,itu jangan dipercaya kalau bukan nama MBAH KABOIRENG KLIK TOGEL 2D 3D 4D 6D DISINI











      saya mengucapkan banyak terimakasih kepada MBAH KABOIRENG yang telah menolong saya dalam kesulitan,ini tidak pernah terfikirkan dari benak saya kalau nomor yang saya pasang bisa tembus dan ALHAMDULILLAH kini saya sekeluarga sudah bisa melunasi semua hutang2 kami,sebenarnya saya bukan penggemar togel tapi apa boleh buat kondisi yang tidak memunkinkan dan akhirnya saya minta tolong sama MBAH KABOIRENG dan dengan senang hati MBAH KABOIRENG mau membantu saya..,ALHAMDULIL LAH nomor yang dikasi MBAH KABOIRENG semuanya bener2 terbukti tembus dan baru kali ini saya menemukan dukun yang jujur,jangan anda takut untuk menhubungiya jika anda ingin mendapatkan nomor yang betul2 tembus seperti saya,silahkan hubungi MBAH KABOIRENG DI 082=322=212=111 ingat kesempat tidak akan datang untuk yang kedua kalinga dan perlu anda ketahui kalau banyak dukun yang tercantum dalam internet,itu jangan dipercaya kalau bukan nama MBAH KABOIRENG KLIK TOGEL 2D 3D 4D 6D DISINI

      Hapus
    4. KISAH NYATA DARI SAYA BPK.KARTA BUKAN REKAYASA INI BETUL2 NYATA DIKELUARGA KAMI.

      Assalamualaikum wr.wb,saya BPK.KARTA seorang buruh tani di madium jawa timur ingin mengucapka banyak terimah kasih kepada KI WARSA atas bantuan AKI. kini impian saya selama ini sudah jadi kenyataan dan berkat bantuan KI WARSA pula yang telah memberikan angka gaib hasil ritual beliau kepada saya yaitu 4D dan alhamdulillah telah berhasil memenangkan 5x berturut turut tembus.sekali lagi makasih yaa AKI karna waktu itu saya cuma bermodalkan uang cuma 200 ribu dan akhirnya saya menang.Berkat angka gaib hasil ritual AKI WARSA saya sudah buka usaha matreal di jakarta dan istri saya juga buka butyk baju dimall mangga dua. Kini kehidupan keluarga saya jauh lebih baik dari sebelumnya,bagi anda yg ingin seperti saya silahkan HUB/SMS AKI WARSA di nomor hpnya di: 0852 4968 9269 atau KLIK DISINI dan ramalan AKI WARSA memang memiliki ramalan GAIB” yang dijamin 100% tembus.
      KARNA RASA HATI YANG GEMBIRA MAKANYA NAMA BELIAU SAYA CANTUNKAN DI INTERNET…

      *angka ritual gaib singapura

      *angka ritual gaib hongkong

      *angka ritual gaib malyaisia

      *angka ritual gaib sidney

      *angka ritual gaib kuda lari

      Hapus
  2. Bisa di coba nih.. Salam kenal brow :>)

    BalasHapus