23.06
Cara Membuat Menubar Keren Tanpa Menggunakan Edit HTML (Menggunakan Javascript)
Kali
ini, saya akan memberikan tutorial cara untuk membuat menubar untuk
Blogger yang super simple, gak perlu pake“Edit HTML”yang bisa bikin
pusing, soalnya kalau 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 ke TKP :
_________________________________________________________________________________
<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 :
Boleh kalian ganti (gk diganti nggak apa-apa) :
Mungkin haya itu dari kami, kalau masih bingung, silahkan comment atau hub. admin. Moga Bermanfaat :)
sumber : http://creativity2project.blogspot.com/2012/10/membuat-menu-horizontal-tanpa-edit-html.html
Kali
ini, saya akan memberikan tutorial cara untuk membuat menubar untuk
Blogger yang super simple, gak perlu pake“Edit HTML”yang bisa bikin
pusing, soalnya kalau 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 ke TKP :- Pertama, ini nih yang pasti kalian lakukan sebelum mengedit blog. Ya, Sign In dulu menggunakan akun Google kalian.
- Terus, buka menu Page Element / Tata Letak.
- Klik Add Gadget / Tambah Gadget
- 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.
Mungkin haya itu dari kami, kalau masih bingung, silahkan comment atau hub. admin. Moga Bermanfaat :)
sumber : http://creativity2project.blogspot.com/2012/10/membuat-menu-horizontal-tanpa-edit-html.html
