Tips dan Trik Membuat Menu Horizontal
14.24 |
Diposting oleh
edy |
Edit Entri
Cara Membuat Menu Horizontal Pada Blogspot
Menu yang terdapat pada sebuah web selain berguna untuk memudahkan pengunjung
membuka halaman-halaman tertentu, juga bisa menambah estetika. Begitu pula dengan menu horizontal yang bisa membuat web kita menjadi lebih ergonimis dan keren. Nah, bagaimana dengan blogspot? Harus diakui bahwa pada template blogspot standart, fasilitas menu horizontal tidak ada didalamnya. Namun, kita tidak perlu berkecil hati sebab seperti yang telah saya katakan pada postingan sebelumnya bahwa kita bisa membuat menu termasuk menu horizontal pada blogspot. Berikut saya ulas langkah-langkah membuat menu horizontal pada Blogspot. Sebagai contoh kita akan membuat menu horizontal dibawah header
- Login ke akun Blogspot pembaca
- Klik link menu Tata Letak, kemudian pilih Edit HTML.
- Back up terlebih dahulu template pembaca dengan mengklik link Download Template Lengkap agar jika terjadi kesalahan saat mengedit, pembaca bisa mengembalikannya dengan menguploadnya kembali.
- Silahkan beri tanda centang pada kotak kecil disamping tulisan Expand Template Widget
- Cari kode seperti dibawah ini pada template pembaca:
<b:includable id='description'>
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
</b:includable>
</b:widget>
</b:section>
</div> - Jika sudah ketemu, silahkan copy struktur berikut tepat dibawah kode-kode pada langkah 5
<ul>
<li><a href='URL 1'>Home</a></li>
<li><a href='URL 1'>About Me</a></li>
<li><a href='URL 3'>Tutorial Website</a></li>
</ul> - Setelah itu klik tombol SIMPAN TEMPLATE, lalu lihat hasilnya
- Pembaca akan melihat bahwa menu-menu tersebut muncul sebagai list vertikal, bukan horizontal. Oleh karena itu, kita perlu mengatur tampilannya agar muncul berjejer secara horizontal dengan menggunakan CSS. Selain itu, kita juga bisa mengatur tampilan dari menu tersebut agar terlihat lebih menarik dengan CSS.
- Buka kembali bagian Edit HTML pada blogspot pembaca, kemudian cari kode ]]></b:skin>.
- Silahkan copy struktur berikut diatas kode ]]></b:skin>
/*CSS untuk menu horizontal*/
.menuhor ul{
font: bold 13px arial;
padding-left: 0;
margin-left: 0;
height: 20px;
}
.menuhor ul li{
list-style: none;
display: inline;
}
.menuhor ul li a{
padding: 2px 0.5em;
text-decoration: none;
float: left;
color: black;
background-color: #33FFCC;
border: 2px solid #33FFCC;
}
.menuhor ul li a:hover{
background-color: #33CCFF;
border-style: outset;
}
.menuhor ul merupakan atribut class yang berfungsi untuk mengatur tampilan parent dari list menu horizontal tersebut.
.menuhor ul li berfungsi untuk mengatur tampilan anak menu horizontal yang kita buat.
.menuhor ul li a berfungsi untuk mengatur tampilan link dari anak menu tersebut.
.menuhor ul li a:hover berfungsi untuk mengatur tampilan link anak menu ketika pointer digerakkan diatasnya.
- Kemudian ubah struktur yang Anda copy pada langkah 6 diatas sehingga menjadi seperti berikut:
<div class="menuhor">
<ul>
<li><a href='URL 1'>Home</a></li>
<li><a href='URL 2'>Tutorial Website</a></li>
<li><a href='URL 3'>About Me</a></li>
</ul>
</div> - Silahkan ganti URL 1 dengan URL halaman yang akan dituju jika menu "Home" diklik. URL 2 diganti dengan URL halaman yang akan dituju jika menu "Tutorial Website" diklik, dan seterusnya.
- Klik tombol SIMPAN TEMPLATE.
Selamat mencoba dan jangan lupa meninggalkan komentar ya
Langganan:
Posting Komentar (Atom)
Labels
- agar blog dikenal di search engine (2)
- antivirus (2)
- APA ITU HAMSTER (1)
- AWSurvey (1)
- bagaimana blog dibayar (1)
- bagaimana blog menghasilkan uang (1)
- biografi nabi muhammad saw (2)
- bisnis online (4)
- bisnis sampingan (1)
- buffering video (1)
- Bumbu Pecel (1)
- cara buka situs yang diblok (1)
- cara install POINT BLANK (1)
- CARA MEMASANG GAME DI BLOG (1)
- cara memasang game online di blog (1)
- cara memasang warnet (1)
- cara membuat antivirus (2)
- cara membuat antivirus sendiri (1)
- cara membuat cd hiren's (1)
- cara membuat halaman blog (1)
- cara membuat iso (1)
- cara membuat iso windows xp (1)
- CARA MEMBUAT MENU HORIZONTAL PADA BLOG (1)
- cara membuat menu horizontal pada blogspot (1)
- cara membuat program dengan visual basic (1)
- cara membuat virus dengan notepad (3)
- cara membuat virus sederhana (2)
- cara memelihara hamster (1)
- cara memperbaiki komputer yang sering restart sendiri (1)
- cara mempercantik blog (2)
- cara mendapatkan uang dari blog (1)
- cara mengganti temlpate blog (1)
- cara mengganti template blog (3)
- cara menghilangkan navigation bar (1)
- cara merakit komputer (1)
- cara merakit komputer dengan mudah (1)
- CARA PASANG GAME PADA BLOG (1)
- cara rujuk (1)
- cd bootable (1)
- cd mini windows xp (1)
- CD MINIPE (1)
- chatting dengan jaringan LAN (1)
- chatting facebook via Yahoo Messenger (1)
- dapat uang dari internet (1)
- dibayar per clik (1)
- Download (5)
- Download gratis (1)
- download gratisan (1)
- download teamviewer porttable (1)
- driver epson c79 (1)
- GAME BLOG (1)
- GAME JAVA (1)
- game online (1)
- game point blank (1)
- ganti template blogger (1)
- HAMSTER (1)
- Hamster melahirkan (1)
- hiren's boot cd (1)
- instal windows xp dengan flasdisk (1)
- instalasi warnet (1)
- INSTALL GAME JAVA (1)
- install windows dengan cepat (1)
- install windows xp dengan usb flasdisk (1)
- Install windows xp pake usb (1)
- Install windows xp sp2 (1)
- islam kaffah (1)
- ISO Image (1)
- iso windows xp sp2 (1)
- jual kerupuk kulit (1)
- kerupuk kulit (1)
- komputer lemot (1)
- makanan hamster (1)
- martabak bangka (2)
- martabak manis (2)
- memaksimalkan blog (1)
- Membuat antivirus (5)
- membuat antivirus sendiri (1)
- membuat boottable (1)
- membuat cd iso bootable windows xp dari hardisk (1)
- membuat file iso dengan nero 9 (1)
- Membuat ISO dari CD/DVD (1)
- membuat iso image (1)
- membuat menu bar horizontal pada blog (1)
- membuat menu bar sendiri di blog (1)
- membuat menu dropdown (1)
- MEMBUAT PROGRAM DENGAN VISUAL BASIC 6.0 (1)
- membuat virus notepad (1)
- membuka situs yg diblok (1)
- Menambah Kapasitas Flasdisk/USB (1)
- menghapus foto di facebook (1)
- menghias blog (1)
- menghilangkan navbar (1)
- menginstal windows dengan flasdisk (1)
- menjadi seorang muslim yang kaffah (1)
- menjebol password administrator windows (1)
- MENU DROPDOWN (1)
- MENU HORIZONTAL PADA BLOG (1)
- nabi yang agung (1)
- nasehat seorang sahabat (1)
- nortnon ghost via flasdsik (1)
- norton ghost (1)
- norton ghost usb (1)
- Obat Diare (1)
- optimalisasi blog (1)
- osama telah tewas (1)
- pasang banner di blog (1)
- pasang iklan di blog (1)
- Pecel Ayam atau Pecel Lele (1)
- peluang usaha (1)
- pemimpin dunia (1)
- penempatan kode html (1)
- PETERNAKAN HAMSTER (2)
- PowernISO (1)
- PPC (1)
- renungan muslim (1)
- resep martabak bangka (1)
- reseter epson c79 (2)
- rujuk (1)
- sang khalifah (1)
- sejarah nabi muhammad saw (2)
- service printer epson t11 (1)
- Share Printer (1)
- SOLAT NABI MUHAMMAD SAW (1)
- SOLAT ROSULULLAH SAW (1)
- supaya blog terditeksi di mesin pencari (1)
- tahlilan dan qunut (1)
- tahlilan menurut islam (1)
- TATA CARA SHOLAT NABI MUHAMMAD SAW (1)
- TATA CARA SOLAT MALAM DAN WITIR (1)
- TATA CARA WUDHU YANG BAIK (1)
- template blogger (1)
- tips dan trik blog (2)
- tips dan trik mendapatkan uang lewat blog (1)
- tips menghilangkan buffering video (1)
- tokoh dunia (1)
- ultraiso (1)
- usaha (1)
- usaha sampingan untuk karyawan (1)
- VB 6.0 (4)
- virus notepad (2)
- virus shortcut (1)
- warnet (1)
- WINDOWS LIVE MINIPE (1)
- WUDHUNYA ROSUL (1)
- yahoo messenger untuk linux (1)
ARSIP
-
▼
2011
(127)
- ► 02/20 - 02/27 (1)
- ► 02/27 - 03/06 (1)
- ► 03/06 - 03/13 (2)
- ► 03/20 - 03/27 (17)
- ► 03/27 - 04/03 (6)
- ► 04/03 - 04/10 (17)
- ► 04/10 - 04/17 (11)
- ► 04/17 - 04/24 (1)
-
▼
04/24 - 05/01
(16)
- Hukum Tahlilan
- Hukum Tahlilan dan Doa Qunut
- cara menghapus foto di face book
- DOWNLOAD GRATIS
- Cara Menambah Kapasitas Flashdisk 1GB menjadi 2GB
- CARA SHARING PRINTER
- Membuat Anti Virus Sendiri
- CARA MEMBUAT ANTIVIRUS SENDIRI
- Membuat Antivirus sendiri
- CARA INSTALL GAME JAVA KE HP
- CARA MENGINSTAL APLIKASI DI LINUX
- Download Hiren's Boot CD Version 10.2
- Tips dan Trik Membuat Menu Horizontal
- Membuat Bootable CD dengan UBCD4WIN
- Cara Mudah Buat CD ISO Bootable Windows XP dari Ha...
- CARA MEMBUAT ISO WINDOWS XP SP2
- ► 05/01 - 05/08 (14)
- ► 05/08 - 05/15 (2)
- ► 05/15 - 05/22 (6)
- ► 05/22 - 05/29 (2)
- ► 05/29 - 06/05 (2)
- ► 06/12 - 06/19 (3)
- ► 06/19 - 06/26 (1)
- ► 06/26 - 07/03 (1)
- ► 07/03 - 07/10 (2)
- ► 07/10 - 07/17 (7)
- ► 07/17 - 07/24 (2)
- ► 07/31 - 08/07 (7)
- ► 09/11 - 09/18 (1)
- ► 10/02 - 10/09 (5)
0 komentar:
Posting Komentar