Kali
ini, saya akan memberikan tutorial untuk membuat menubar untuk Blogger yang
super simple, gak perlu pake“Edit HTML”yang bisa bikin pusing, soalnya kalo pake itu
apabila salah satu huruf atau simbol aja akibatnya udah fatal. Bisa-bisa
hasilnya jadi nggak sesuai dengan yang kalian inginkan. Nah, kalo tutorial yang
satu ini cocok banget buat pengguna Blogger terutama untuk pemula. Gimana
caranya? Langsung lihat yuk!
1. Pertama,
ini nih yang pasti kalian lakukan sebelum mengedit blog. Ya, Sign In dulu menggunakan akun Google kalian.
2. Terus,
buka menu Page Element / Tata Letak.
3. Klik Add Gadget / Tambah Gadget
4. Copy
- Paste kode di bawah 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-box-shadow: 1px 1px 10px #888;
-webkit-box-shadow:1px 1px 10px #888;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;}
.black ul{
margin: 0; padding: 0; padding-left: 10px;
font: bold 14px Verdana;
list-style-type: none; }
.black li{
display: inline; margin: 0;}
.black li a{
float: left; text-decoration: none;
margin: 0; padding:12px; color: white;}
.black li a:visited{color: white; }
.black li a:hover, .black li.selected a{color:#ccff00;}
#searchboxo{
width:250px; float:right; padding: 4px; margin:0px; }
#searchboxo form input.searchinput{
background: #fff; padding:6px; margin:0px; width: 160px;
border: solid 1px #999; outline: none;
-webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;
-moz-box-shadow: inset 0 1px 3px #666;
-webkit-box-shadow: inset 0 1px 3px #666;
box-shadow: inset 0 1px 3px #aaa; }
#searchboxo form input.submitbutton{
cursor:pointer; width: 60px;
background: #FCFCFC;
background: -moz-linear-gradient(top, #FCFCFC 0%, #E8E8E8 100%);
background: -webkit-gradient(linear, left top, left bottom,
color-stop(0%,#FCFCFC), color-stop(100%,#E8E8E8));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FCFCFC',
endColorstr='#E8E8E8',GradientType=0 );
border:1px solid #d8d8d8;
-webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;
color:#000; padding:4px; text-shadow:1px 1px #fff;}
</style>
<div class='black'>
<ul><li><a href=" #">NAMA MENU</a></li>
<li><a href="#">NAMA
MENU</a></li>
<li><a href="#">NAMA
MENU</a></li>
<li><a href="#">NAMA
MENU</a></li>
</ul>
<div id='searchboxo'>
<form action='/search' id='searchform' method='get'> <input
class='searchinput' id='searchbox' name='q' onblur='if (this.value ==
"") {this.value = "Insert keyword here...";}' onfocus='if (this.value == "Insert keyword here..."{this.value = "";}' type='text'
value='insert keyword here...'/><input class='submitbutton'
type='submit' value='search'/></form></div></div>
_________________________________________________________________________________
NB :Tulisan warna biru yang perlu diganti:
*Wajib kalian ganti:
-Simbol # : Ganti dengan URL link menu kalian
-Tulisan NAMA MENU : Ganti dengan nama menu kalian
- Kalo ingin menambah/mengurangi menu, tinggal copy-paste/delete kode menu
*Boleh
kalian ganti (gk diganti nggak apa-apa) :
-Tulisan black : Ganti dengan warna dasar menu
yang kalian inginkan. Ingat, pake bahasa Inggris, dan semuanya harus sama
-Kode
warna (#499bea ; dsb): Ganti dengan kode warna yang kalian
inginkan (Bisa didapat dari Adobe Photoshop ato yang lainnya)
-Tulisan bold : Ini adalah font style. Kalo pingin fontnya sama dengan yang
ada di blog, ganti dengan “none”
-Tulisan Verdana : Ini adalah font. Kalian bisa ganti fontnya sesuai
keinginan kalian, tapi jangan asal (Bisa didapat dari Microsoft Word ato yang
lain)
- Tulisan 14 px : Ini adalah font size. Kalian bisa ganti sesuai
dengan ukuran yang kalian inginkan.
-Tulisan white : Ganti dengan warna font menu
yang kalian inginkan
-Tulisan Insert keyword here... : Bisa diganti dengan kata
lainnya, tapi tetep harus berhubungan dengan search engine.
Kalo masih
bingung, silahkan comment atau hub. admin. Moga
Bermanfaat :)
sumber
: http://creativity2project.blogspot.com/2012/10/membuat-menu-horizontal-tanpa-edit-html.html