"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 :
Dan untuk mendapatkan tampilan Menu Horizontalnya pada blog, maka kamu harus menambahkan beberapa kode HTML seperti di bawah ini :
Oke, kiranya cara ini bisa membantu kamu yang ingin membuat Menu Horizontal pada Blog (new blogger).
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 :
Note : Letakkan kode dia atas di antara tag <head> dan </head>#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; }
Dan untuk mendapatkan tampilan Menu Horizontalnya pada blog, maka kamu harus menambahkan beberapa kode HTML seperti di bawah ini :
Note :<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>
- 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 bawahterima kasih atas infonya, dan komentarnya keren gimana caranya apakah memakai iframe
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