ChugyGogog

Melanjutkan dan menambahkan postingan yang lalu mengenai pembuatan menu navigasi horizontal dengan tab pointer no image , kali ini saya coba membuat menu navigasi horizontal dengan tambahan search box atau kotak pencari. menu navigasi horizontal ini masih cukup simple hanya menggunakan sedikit gradasi dan juga box shadow css3 pada background. Lihat Demo Untuk pemasangannya saya coba memasang pada area widget template supaya lebih cepat. Tambah widget pada bagian bawah header template blogger > Pilih HTML/JavaScript lalu masukan kode dibawah ini : <style type="text/css"> .black{ float:left; margin-bottom:10px; padding:0px; width: 100%; overflow: hidden; background: #499bea; background: -moz-linear-gradient(top, #999 0%, #000 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#999), color-stop(100%,#000)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#999', endColorstr='#000',GradientType=0 ); -moz

Untuk kali ini saya coba melengkapi atau menambahkan sedikit koleksi menu navigasi horizontal untuk blogger, yang mungkin ingin merubah tampilan menu navigasi di blognya. Untuk demonya bisa lihat gambar dibawah atau klik link demo yang ada di bawah. Demo Navigasi Untuk pemasangannya navigasi horizontal saya rasa blogger sudah paham jadi silahkan lihat kodenya di bawah ini. Kode CSS (Cascading Style Sheet) .menu { padding:0; margin:0; list-style-type:none; white-space:nowrap; } .menu li { float:left; min-width:100px; } .menu a { position:relative; display:block; text-decoration:none; min-width:100px; float:left; } * html .menu a { width:100px; } .menu a span { display:block; color:#fff; background:#7cbc0a; border:1px solid #fff; border-width:2px 1px; text-align:center; padding:4px 16px; cursor:pointer; } * html .menu a span { width:100px; cursor:hand; w\idth:66px; } .menu a b { display:block; border-bottom:2px solid #06a; } .menu a em { display:none; } .

postingan kali ini saya akan memberikan tutorial pembuatan menu navigasi dengan model circle atau lingkaran menggunakan css3. Menu navigasi ini full menggunakan css3 tanpa image, Circle Horizontal navigasi menu css3 ini cukup lumayan walaupun hasil dari iseng-iseng membuat lingkaran dengan css3 sehingga terpikir untuk di implementasikan kepada menu navigasi horizontal , ternyata cukup memuaskan hasilnya. Untuk contohnya lihat gambar dibawah ini. Untuk kode css3 lingkaran atau circle sebenarnya menggunakan border radius contoh kodenya seperti dibawah ini: -moz-border-radius:100px; -webkit-border-radius:100px; Langsung pada pembuatan circle menu navigasi dengan css3 : Untuk lebih mudah tanpa obrak abrik kode template, jadi saya memasang navigasi ini langsung di widget. Masuk pada Rancangan >> Tambah Gadget >> HTML/JavaScript Masukan kode di bawah ini : <style type="text/css"> ul#circle { display: inline;list-style: none; } ul#circle li { margin-right:6px;

postingan ini saya buat sebagai pilihan untuk posting sebelumnya yaitu membuat menu horizontal yang simple , berhubung ada teman yang koment Katanya kurang paham dengan postingan tersebut, jadi Saya membuat postingan mengenai cara membuat menu horizontal yang lebih mudah yang diletakan langsung pada widget, jadi kita tidak perlu membuka edit HTML. Mudah mudahan bisa dimengerti. Cara ini Sangat mudah sekali karena ini cuma menambah Kode HTML yang ada di bawah ini ke dalam Gadget + HTML/Javascript . Silahkan Ikuti caranya di bawah ini. Pertama Buka blog Blogger Kedua Pilih Tata Letak + Elemen Laman + Tambah Gadget + Pilih HTML/JavaScript Lalu Masukan Kode Di bawah ini : <style type="text/css"> ul.menu { margin:0px; padding:0px; } ul.menu li { list-style:none; float:left; width:100px; text-align:center; font:11px/25px verdana,arial,sans-serif; height:auto !important; height:25px; } ul.menu li a { display:block; text-decoration:none; background:#EFEFEF; color:#000000; }

Ada beberapa macam menu link horizontal yang biasa di pakai untuk sebuah blog ataupun website, dari yang menggunakan warna dasar sampai dengan menggunakan image, tapi toh fungsinya tetap sama yaitu menuju link yang diinginkan. Untuk membuat sebuah menu atau link yang horizontal tidaklah sulit. Disini saya coba untuk membuat menu link horizontal yang sederhana tatapi akan terlihat cantik. Silahkan ikuti langkah - langkahnya berikut ini : Masuk pada Tata Letak dan Edit HTML Masukan kode di bawah ini diatas kode ]]></b:skin> ********************************************************* /* horizontal solid menu di mulai ------------------------------------------- */ /*Credits: CSS Library for new blogger (beta) */ .menu-solid{ margin: 0; padding: 0; float: left; font: bold 12px Arial; width: 100%; border: 1px solid #625e00; border-width: 1px 0; background: #000 ; } .menu-solid { display: inline; } .menu-solid a{ float: left; color: white; padding: 9px 11px; text-decoration: no