Senin, 23 Desember 2013

Cara Membuat Menubar Keren Tanpa Menggunakan Edit HTML

toriqoel. Cara bikin atau membuat menubar meren tanpa menggunakan Edit HTML (Menggunakan Javascript)
Kali ini, saya akan membantu memberikan tutorial cara untuk membuat menubar untuk Blogger yang super simple, tidak 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 saja caranya :
  1. Yang Pertama,  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>
_________________________________________________________________________________

Catatan : Pada tulisan warna biru yang perlu diganti:

Wajib dan harus 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

Bisa kalian ganti sendiri (tidak diganti juga tidak kenapa napa) :
  • 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.

Demikian Cara Membuat Menubar Keren Tanpa Menggunakan Edit HTML, semoga bermanfaat.


This Is The Oldest Page

2 komentar

Sumpah, gue make ini keren banget hasilnya broh.. Thank'ss banget ya. LIhat hasilnya di tulisanwortel.com

kalo copy, pastenya kemana, Gan ???? hehehehe maklum pemula.
https://sastrapringadhy.blogspot.co.id/


EmoticonEmoticon