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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlk_5mZbHGFNXQiIK1VFgcxIpTiSvj2XsTBp8ENUaUOODtYP4SMnwc0TTBS1FUIa1IqdQ1_7HPHgblcwguMsmNqCGA82Wbkw_-4JpYKUstL1p0-sbHdYax1M3HGc1zndrIJPHmJMF3jcg/s1600/button-search.png' title='Search!' type='image'/>
    </div>
   </form>
  </div>
  <div class='logosearch'>
   <img alt='Google' height='28' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3iKWLbBy_yLI_Pm__GcVdxmJkPzSsd2zsynqdfE2K219v4t4YpOtqjPsHia4oq-xlDMdPoWGLYU0MNOZooBodl9XjuQBLnBf_2KFWZ9ikzrZzrG4x36K7Ir08dyAazDt_xwsPrqJ8QDs/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 Unknown 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.

3 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. Bisa di coba nih.. Salam kenal brow :>)

    BalasHapus