Explore » » » Membuat Menu Horizontal Online ( Bagian Kedua )

Membuat Menu Horizontal Online ( Bagian Kedua )

» Author : Ansory | Hari Senin, Juni 01, 2009
»

Sekarang kita akan Melanjutkan berkreasi untuk " Membuat Toptab Menu Horizontal Online " pada waktu lalu. Untuk anda yang belum mengikuti bagian pertama, silahkan menuju " Membuat Toptab Menu Horizontal Online ( Bagian Pertama ) ". OK...Kita Lanjut lagi!. Mungkin ada diantara anda yang bingung setelah mengikuti langkah-langkah dalam pengeditan Code-code yang telah kita bahas sebelumnya. Mengapa tidak! Code source yang kita Download dari situs ini sangat berbeda dengan Code-code dari Template Blog kita ( khususnya Templates Blogger ). Memang jenis menu yang ada di situs ini di peruntukkan untuk Templates Web, tapi tenang aja kita akan melakukan sedikit modifikasi sederhana agar menu ini bisa digunakan di template blogger kita.

Berikut Triknya :

Perhatikan Gambar :


 Pada gambar  diatas dapat kita lihat ada 3 jenis file yaitu "Folder Images", "Index.html", dan "Menu_style.css". Yang mana ketiga file ini kita dapatkan di saat kita mendownload Code-code dari Jenis menu yang kita pilih dari situs tersebut. Sebagai contoh saya masih menggunakan Jenis menu Sky Blue.

Perhatikan Gambar :


Ini adalah gambar background dari menu itu sendiri .

Satu hal yang harus anda persiapkan untuk memasang Menu ini :
1. Seperti biasa Upload lah ketiga file gambar diatas ke situs favorite  anda (contoh:Photobucket.com)  atau Hosting anda.

Setelah anda mengupload ketiga file gambar tersebut sekarang waktunya kita terapkan ke template blogger kita.

A. Silahkan anda login ke Blog anda

B. Setelah Login, langsung menuju » Tata Letak » Edit HTML. jangan lupa untuk mencentang tanda " expand template widget ".

C. Sekarang anda beralih ke 3 file yang sudah kita dapatkan tadi.
D. Buka file "Menu_style.css dengan Text Editor kesukaan anda (contoh:NotePad).

sekarang perhatikan Code css tersebut :

/****** 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 #004c99;
border-top:1px solid #74b0c6;
}
ul#menu li{
display:block;
float:left;
margin:0;
pading:0;}
ul#menu li a{
display:block;
float:left;
color:#6d7078;
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;
}

E. Ganti Tulisan yang berwarna merah dengan link gambar yang anda upload tadi.

F. Setelah anda mengganti link gambar tersebut, Copy/paste Code tersebut persis dibawah bagian "#header" section.

Contoh :
/* Header
-----------------------------------------------
*/

#header-wrapper {
background:url(http://grand2t.co.cc/wall/universal.gif);
width:100%;
height:130px;
margin:0 auto 0px;
border:0px solid $bordercolor;
}

#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}

#header {
margin: 5px;
height:118px;
border: 0px solid $bordercolor;
text-align: right;
color:$pagetitlecolor;
}

#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}

#header a {
color:$pagetitlecolor;
text-decoration:none;
}

#header a:hover {
color:$pagetitlecolor;
}

#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}

#header img {
margin-$startSide: auto;
margin-$endSide: auto;
}

Copy/paste disini.............!.
=============================================================
Ok... anda sudah melakukan setengah jalan dalam pemasangan Menu ini, yuk...kita lanjut.

G. Sekarang lakukan kembali langkah D, tapi sekarang buka file "index.html".

sekarang perhatikan Code css tersebut :
<body>

<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>

H. Sekali lagi Ganti tulisan yang berwarna merah dengan alamat link dan nama link kesukaan anda. atau anda ingin menambahkan beberapa daftar link lagi kedalam menu ini dengan cara copy pada bagian
<li><a href="#" title="">Contact Us</a></li>
dan pastekan dibawah code yang kita copy barusan.

I. Langkah terakhir, kita kembali ke Edit HTML dan cari Code
<div id='outer-wrapper'><div id='wrap2'>
<!-- skip links for text browsers -->
<span id='skiplinks' style='display:none;'>
<a href='#main'>skip to main </a> |
<a href='#sidebar'>skip to sidebar</a>
</span>

Letakkan code yang anda modif persis di bawah code diatas, tapi anda hanya perlu mengcopy bagian "
<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>
" ini saja, yang lain tidak perlu.

J. Silahkan Pratinjau Blog anda, jika sudah OK Langsung Save ya....

         "Selamat.... Di Blog anda sudah terpasang TopTab Menu"

Jika ada bagian yang kurang dimengerti silahkan bertanya pada form komentar dibawah.

0 komentar

» Ciptakan Komentar yang Membangun

Langganan: Posting Komentar (Atom)