Cara Membuat Menu di Blog

Cara Membuat Menu di Blog - Selamat malam, hadir kembali disini, kali ini saya memposting karena permintaan salah satu teman saya yang sangat bawel yaitu Fadil S Hardy. Dia minta dibuatkan Menu yang keren katanya, karena saya hanya bisa begini yaudah saya buat yang seperti ini, lihat tutorial Cara Membuat Menu di Blog dan demonya dibawah sini :

1. Silahkan copas code berikut ini dan taruh di atas code ]]></b:skin>
   

   /* -----------------------------
   Created by : Fahmi Athailla
   ------------------------------ */
   #menu_fahmi{
   width:1000px;
   height:auto;
   background-image: linear-gradient(bottom, rgb(241,139,83) 0%, rgb(255,167,117) 61%, rgb(255,201,153) 100%);
   background-image: -o-linear-gradient(bottom, rgb(241,139,83) 0%, rgb(255,167,117) 61%, rgb(255,201,153) 100%);
   background-image: -moz-linear-gradient(bottom, rgb(241,139,83) 0%, rgb(255,167,117) 61%, rgb(255,201,153) 100%);
   background-image: -webkit-linear-gradient(bottom, rgb(241,139,83) 0%, rgb(255,167,117) 61%, rgb(255,201,153) 100%);
   background-image: -ms-linear-gradient(bottom, rgb(241,139,83) 0%, rgb(255,167,117) 61%, rgb(255,201,153) 100%);
   padding:5px;
   font-family:Arial;
   font-size:13px;
   text-shadow:1px 1px 1px #000;
   }
   #menu_fahmi ul li{
   display:inline;
   padding:18px;
   }
   #menu_fahmi a{
   color:#fff;
   text-decoration:none;
   }
   .tombol:hover, #menu_fahmi li:hover{
   box-shadow:0 0 2px #777;
   }
   .tombol:active, #menu_fahmi li:active{
   box-shadow:inset 5px 2px 10px rgb(255,167,117);
   background:rgb(255,201,153)
   }
   .kotak-search{
   float:right;
   position:relative;
   top:-5px;
   right:20px;
   }
   .tombol{
   background:rgb(241,139,83);
   border:none;
   color:#fff;
   font-family:Arial;
   font-size:13px;
   text-shadow:1px 1px 1px #000;
   padding:5px;
   border-radius:5px;
   cursor:pointer;
   }
   .tempat-text{
   width:50px;
   border:none;
   -moz-transition:all 0.5s ease 0s;
   -webkit-transition:all 0.5s ease 0s;
   -o-transition:all 0.5s ease 0s;
   -ms-transition:all 0.5s ease 0s;
   transition:all 0.5s ease 0s;
   }
   .tempat-text:focus{
   width:250px;
   }
   

2. Kalau sudah jangan disave dulu, karena kita belum memberikan code pemanggilan css tersebut, code pemanggilan css tersebut seperti ini :
   

   <div id='menu_fahmi'>
   <ul>
   <li><a href='#'>Beranda</a></li>
   <li><a href='#'>Kontak</a></li>
   <li><a href='#'>Arsip</a></li>
   <li><a href='#'>Facebook</a></li>
   <li><a href='#'>Twitter</a></li>
   <span class='kotak-search'>
   <form action='http://nama-blog-anda.blogspot.com/search' method='get'>
   <input class='tempat-text' name='q' size='30' type='text'/>
   <input value='Cari Disini' class='tombol' name='submit' type='submit'/></form>
   </span>
   </ul>
   </div>

3. Simpan saja code tersebut diatas <div id='header-wrapper'> atau diatas Header anda sendiri.
4. Lalu terakhir save template anda, dan coba lihat perubahannya.
   

Perhatian : Perhatikan Code yang berwarna merah "http://nama-blog-anda.blogspot.com/search" silahkan ganti dengan Url blog anda, contoh seperti ini "http://alkian.blogspot.com/search" .

Lalu background juga bisa disesuaikan, ganti saja code ini :

background-image: linear-gradient(bottom, rgb(241,139,83) 0%, rgb(255,167,117) 61%, rgb(255,201,153) 100%);
background-image: -o-linear-gradient(bottom, rgb(241,139,83) 0%, rgb(255,167,117) 61%, rgb(255,201,153) 100%);
background-image: -moz-linear-gradient(bottom, rgb(241,139,83) 0%, rgb(255,167,117) 61%, rgb(255,201,153) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(241,139,83) 0%, rgb(255,167,117) 61%, rgb(255,201,153) 100%);
background-image: -ms-linear-gradient(bottom, rgb(241,139,83) 0%, rgb(255,167,117) 61%, rgb(255,201,153) 100%);

Jika anda ingin menggantinya menjadi warna merah seperti ini

background:red;

Biru (blue) dan lain-lain.
Dan jika ingin menggunakan gambar caranya seperti ini :

background:url(urlgambar.jpg)no-repeat;

Mudah bukan? selamat berkreasi, Demikianlah sedikit ulasan saya yang mengenai Cara Membuat Menu di Blog, semoga dapat berguna dan bermanfaat.