Dunia Internet : Gratis Tutorial, Artikel, Software, Movie, Mp3, E-Book, Game. : Menu Horizontal

"Bagaimana membuat Menu Horizontal pada blog kamu?"

Baiklah, tanpa perlu banyak basa-basi, kita langsung saja ke pembahasannya.

Untuk membuat Menu Horizontal seperti yang ada dalam Blog ini, kita cukup menambahkan kode CSS dan HTML melalui halaman edit html.

(Btw, untuk mendapatkan berbagai kode untuk membuat Menu-menu Horizontal, bisa kamu lihat di sini).

Langkah-langkahnya adalah sebagai berikut :

Setelah Login/masuk kedalam kontrol panel blog anda. Klik Menu "Layout" lalu kemudian klik "Edit Html".
Lalu Copy paste-kan kode berikut ini ke dalam menu edit html pada Blog Anda :

#horizontalmenu {
font-weight: bold;
font-size:16px;
font-family: "Times New Roman", Times, Serif;
line-height: 1.4em;
text-transform:none;
text-align: center;
}

#horizontalmenu:after { /*Add margin between menu and
rest of content in Firefox*/
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

#horizontalmenu ul {
text-indent: 10px;
padding:2px 0 2px 4px;
margin: 0;
background-color: #ffffff;
border-bottom:4px double #cc0000;
text-align: center; /*set value to "center" for
example to center items*/
}

#horizontalmenu ul li {
display: inline;
}

#horizontalmenu ul li a {
color: #cd5c5c;
padding: 3px 3px 3px 3px;
padding-right: 25px;
padding-left: 25px;
margin:1.2em 0 .75em;
text-decoration: none;
background: transparent url(media/slantdivider.gif)
top right no-repeat;
}

#horizontalmenu ul li a:visited {
color: #494949;
}

#horizontalmenu ul li a:hover {
color: black;
}

.cssbutton {
background-color: #ffffff;
border: 1px #cc0000 outset;
padding: 1px 40px;
color: black;
text-decoration: none;
font: bold 90% "Lucida Grande", "Trebuchet MS",
Verdana, Helvetica, sans-serif;
}

.cssbutton:visited {
color: black;
}

.cssbutton:hover {
border-style: inset;
background-color: #cc0000;
padding: 2px 3px 0 5px; /*shift text 1px to the
right and down*/
}

.cssbutton:active {
color: black;
}

Note : Letakkan kode dia atas di antara tag <head> dan </head>

Dan untuk mendapatkan tampilan Menu Horizontalnya pada blog, maka kamu harus menambahkan beberapa kode HTML seperti di bawah ini :

<div id='horizontalmenu'>
<a class='cssbutton' href='alamat url buat link1' title='Your title for link1'>Teks for link1</a>
<a class='cssbutton' href='alamat url buat link2' title='Your title for link2'>Teks for link2</a>
<a class='cssbutton' href='alamat url buat link3' title='Your title for link3'>Teks for link3</a>
<a class='cssbutton' href='alamat url buat link4' title='Your title for link4'>Teks for link4</a>
</div>

Note :

Gantilah teks atau tulisan "alamat url buat link" dengan alamat url yang anda ingin tambahkan.
Gantilah teks atau tulisan "Your title dengan teks atau tulisan yang ingin ditampilkan saat mouse berada di atas link.
Gantilah teks atau tulisan "Teks Link" dengan teks yang ingin ditampilkan sebagai link dari alamat URL yang telah anda tambahkan.

Oke, kiranya cara ini bisa membantu kamu yang ingin membuat Menu Horizontal pada Blog (new blogger).

DBK	Terima Kasih telah berkunjung dan membaca posting ini. Punya Saran dan Kritik? Silakan tuliskan lewat form Komentar di bawah. Dan tolong jangan kasih komentar spam!

	Find Me on : Facebook \| Twitter \| Mybloglog \| Grup Dunia Internet \| NetworkedBlogs

Kategori : Dunia Blogger

Bookmark Posting ini :

« Artikel Terkait »

« Posting terbaru »

Jumlah Komentar = 2 komentar:

Tuliskan Komentar Anda

pada Form di bawah

:)) :)] ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} ~x( :-t b-( :-L x( =))

Anonim mengatakan...: terima kasih atas infonya, dan komentarnya keren gimana caranya apakah memakai iframe; Senin, 03 Maret, 2008
DBK mengatakan...: Terima kasih atas kunjungannya Mas Purnama.

Memang benar mas, kalo form komentar saya menggunakan iframe yang di padukan dengan beberapa kode javascript yang saya dapatkan dari situs dynamicdrive.com.

Mungkin untuk lebih jelasnya lagi, Mas Purnama bisa membaca posting blog saya sebelumnya. Di posting tersebut di jelaskan bagaimana saya membuat form komentar seperti dalam blog ini. Coba lihat di http://ontheblogger.blogspot.com/2007/11/modifikasi-form-komentar-pada-template.html

Sekali lagi terima kasih ya Mas.

Keep smiling and keep blogging; Sabtu, 08 Maret, 2008