Category : Labels: Blog Stuff, Blog Tutorial, Blogger Stuff, Tutorial
Suatu blog umumnya memiliki tombol menu navigasi/ pengarah yang digunakan untuk menunjukkan link langsung ke suatu bagian dalam blog sehingga memudahkan pengunjung blog tersebut untuk lebih mengeksplore semua yang ada dalam blog. Bila anda belum mempunyai menu dalam blog bisa mengikuti cara di bawah ini.
Saya mengambil contoh dari cssmenumaker.com. Dan saya bagi cara memasangnya untuk blog anda. Sehingga bila anda nantinya ingin merubah kembali menu anda dan mendapatkan menu yang baru dari situs penyedia script menu blog, anda tidak kesulitan lagi.
1. Kunjungi, Pilih, Download salah satu menu yang tersedia dari CssMenuMaker.Com. Sebagai contoh, saya memilih menu bernama Simple Grey Hover seperti yang terlihat di gambar di bawah ini.
2. Setelah file script dan image (source) yang dipaket menjadi bentuk file berekstensi .zip, .rar sudah anda download. Extract file tersebut. dan anda akan mendapati satu folder berisi image/gambar dari menu dan file css dan index html dari menu.
3. Buka file css dan html itu dengan notepad atau notepad++. Dianjurkan menggunakan notepad++ . Bila anda belum memiliki bisa didownload di situs resminya.
4. Buka file bernama menu_style.css dengan notepad sehingga didapati script seperti di bawah ini.
/****** H3 */
ul#menu{
margin:0;
padding:0;
list-style-type:none;
width:auto;
position:relative;
display:block;
height:36px;
text-transform:uppercase;
font-size:12px;
font-weight:bold;
background:transparent url("images/OFF.gif") repeat-x top left;
font-family:Helvetica,Arial,Verdana,sans-serif;
border-bottom:4px solid #555555;
border-top:1px solid #919191;
}
ul#menu li{
display:block;
float:left;
margin:0;
pading:0;}
ul#menu li a{
display:block;
float:left;
color:#8c3a3a;
text-decoration:none;
font-weight:bold;
padding:12px 20px 0 20px;
height:24px;
background:transparent url("images/DIVIDER.gif") no-repeat top right;
}
ul#menu li a:hover{
background:transparent url("images/HOVER.gif") no-repeat top right;
}
5. Copy dan paste kode/script tersebut di atas kode ]]></b:skin>
6. Buka file web bernama index.html dengan notepad. Caranya klik kanan file tersebut dan pilih open with.. dan pilih notepad. Dan anda akan mendapati script seperti di bawah ini.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="menu_style.css" type="text/css" />
</head>
<body>
<br /> <br />
<ul id="menu">
<li><a href="#" title="">Home</a></li>
<li><a href="#" title="">PRODUCTS</a></li>
<li><a href="#" title="" >FAQ</a></li>
<li><a href="#" title="">CONTACT</a></li>
<li><a href="#" title="">Contact Us</a></li>
</ul>
</body>
</html>
7. Copy lalu paste kode/script yang berwarna biru di atas kode
<div id='outer-wrapper'><div id='wrap2'> : Jika ingin meletakkan menu tersebut di puncak template anda.
<div id='main-wrapper'> : Jika ingin diletakkan di atas halaman posting/artikel.
Atau letakkan di bawah kode/script <div id='header-wrapper'> : Jika ingin diletakkan tepat di bawah header.
8. Upload semua file image/gambar dalam folder images di hosting gambar anda. Anda bisa menggunakan image hosting gratisan seperti photobucket.com, imageshack.com atau bisa juga di blogger sendiri. Jangan sampai lupa nama dari masing - masing gambar. Dianjurkan bagi yang belum terbiasa untuk mengupload gambar satu persatu. Copy link dari masing -masing gambar dan letakkan di tempat yang telah ditentukan dalam file CSS Menu anda. Misalnya, ganti tulisan dalam CSS bertuliskan (images/DIVIDER.gif) dengan link gambar DIVIDER.gif yang sudah anda upload tadi. Begitu sama seterusnya.
9. Selanjutnya, ganti tulisan nama link seperti HOME, PRODUCTS, FAQ, CONTACT, Contact Us dengan keinginan dan kebutuhan anda. Ganti tanda # dalam tanda kutip dengan link dari weblog anda yang ingin anda tuju. Sehingga seperti ini contohnya.
<ul id="menu">
<li><a href="http://lembar-coretan.blogspot.com/" title="">Home</a></li>
<li><a href="http://www.sham-af.co.cc/" title="">Anime Info</a></li>
<li><a href="link anda" title="" >FAQ</a></li>
<li><a href="link anda" title="">CONTACT</a></li>
<li><a href="link anda" title="">Contact Us</a></li>
</ul>
10. Terakhir, Save/ Simpan Template anda. Selamat menikmati menu anda. :)
Tips :
Wah makasih informasinya...
Sangat berguna :)
berkunjung balik ya sobat!