Lampung Blogging Berbagi Info |
Desain Blog Anda Dengan Menu dan Sub Menu _Bagi para blogger senior, istilah
menu dan sub-menu bar, mungkin, sudah bukan hal yang asing lagi di telinga
mereka. Namun, akan lain cerita bagi rekan blogger pemula. Berikut, Lampung Blogging akan mengulas teknik desain blog, terkait menu dan sub-menu
bar, khususnya bagi rekan blogger pemula yang belum memahami cara pemasangannya
pada blog. Simak ulasan dibawah ini.
Menu
dan Sub-menu Bar sangat dibutuhkan guna mencari informasi berdasarkan pada
kategori atau sub menu . Sebab, dengan memberi sub menu bar, maka blog kita
akan tampak lebih ilmiah, teratur, dan simple, semua judul artikel bisa
ditampilkan di layar dalam satu kali tatapan mata. Dan jika rekan memasangnya di blog, ini artinya anda merupakan
orang yang berfikir sistimatis dan menyukai keteraturan.
Simak
langkah-langkahnya :
Langkah
Pemasangan
- Klik Desain
- Pilih Template lalu
pilih Edit HTML
- Pilih/klik
Lanjutkan
- Pilih/klik
Expand Template Widget
Cari scrift berikut
:
<div
class='main-outer'> atau
<div id='main-wrapper'> atau
<div id='main'>
<div id='main-wrapper'> atau
<div id='main'>
Agar lebih mudah,
klik saja F3 pada keyboard lalu pilh salah satu scrift diatas.
Berdasarkan pengalaman saya setelah membolak balik informasi di www.google.com
maka yang cocok adalah :
div
class='main-outer'>
Bisa jadi beda
dengan template yang lain…
Setelah
dapat, copas scrift berikut tepat diatas scrift
yang dicari tadi :
<style>
/* -- Menu
Horizontal + Sub Menu-- */
#cat-nav
{background:#156994;margin:0 15px;padding:0;height:35px;}
#cat-nav a {
color:#eee; text-decoration:none; text-shadow: #033148 0px 1px
0px;border-right:1px solid #156994;}
#cat-nav a:hover {
color:#fff; }
#cat-nav li:hover {
background:#000; }
#cat-nav a span {
font-family:Verdana, Geneva, sans-serif; font-size:11px;
font-style:normal; font-weight:400; color:#fff; text-shadow:none;}
#cat-nav
.nav-description { display:block; }
#cat-nav a:hover
span { color:#fff; }
#secnav, #secnav ul
{ position:relative; z-index:100; margin:0; padding:0; list-style:none;
line-height:1; background:#0d5e88; }
#secnav a {
font-family:Georgia, "Times New Roman", Times, serif;
font-style:italic; font-weight:700; font-size:14px; display:block; z-index:100;
padding:0 15px; line-height:35px; text-decoration:none;}
#secnav li {
float:left; width: auto; height:35px;}
#secnav li
ul { position: absolute; left: -999em; width: 200px; top:35px}
#secnav li ul
li { height:30px; border-top:1px solid #fff; }
#secnav li ul li
a { font-family:Verdana, Geneva, sans-serif; width:180px;
line-height:30px; padding:0 10px; font-size:11px; font-style:normal;
font-weight:400; color:#eee; }
#secnav li ul
ul { margin: -30px 0 0 180px; }
#secnav li:hover ul
ul, #secnav li:hover ul ul ul, #secnav li.sfhover ul ul, #secnav li.sfhover ul
ul ul { left:-999em; }
#secnav li:hover ul,
#secnav li li:hover ul, #secnav li li li:hover ul, #secnav li.sfhover ul,
#secnav li li.sfhover ul, #secnav li li li.sfhover ul { left: auto; }
#secnav
li:hover,#secnav li.hover { position:static; }
#cat-nav #secnav
{width:100%;margin:0 auto;}
</style>
<div
id='cat-nav'>
<ul class='fl'
id='secnav'>
<li><a
href='#'>Beranda</a></li>
<li><a
href='#'>Menu 1</a></li>
<li><a
href='#'>Menu 2</a>
<ul
id='sub-custom-nav'>
<li><a
href='#'>Sub Menu2 a</a></li>
<li><a
href='#'>Sub Menu2 b</a></li>
</ul>
</li>
<li><a
href='#'>Menu3</a>
<ul
id='sub-custom-nav'>
<li><a
href='#'>Sub Menu3a</a></li>
<li><a
href='#'>Sub Menu3b </a></li>
</ul>
</li>
<li><a
href='#'>Menu4</a>
<ul
id='sub-custom-nav'>
<li><a
href='#'>Sub Menu4a</a></li>
<li><a
href='#'>Sub Menu4b </a></li>
</ul>
</li>
<li><a
href='#'>Menu5</a></li>
</ul>
</div>
Keterangan :
1. Cara
memasukkan alamat URL:
Ganti tanda # dengan link/url yang anda inginkan. Bisa jadi link posting atau label (katagori) yang ada pada blog anda.
2. Cara menuliskan judul menu atau judul postingan:
Ganti tanda # dengan link/url yang anda inginkan. Bisa jadi link posting atau label (katagori) yang ada pada blog anda.
2. Cara menuliskan judul menu atau judul postingan:
Ganti Tulisan warna
biru dengan nama menu dan nama sub menu yang
anda inginkan.
3. Cara
merubah lebar menu: silakan cari kode:
#cat-nav
{background:#156994;margin:0 15px;padding:0;height:35px;} --->
baris ke-3. Kemudian tambahkan kode (width:900px) di antara { dan },
sehingga menjadi :
#cat-nav
{background:#156994;width:900px;margin:015px;padding:0;height:35px;}
Angka 900px hanya
sebagai contoh saja, silakan rubah angka 900 dengan ukuran lebar yang
kamu inginkan, bisa juga mengganti kode 900px dengan kode 100%.
4. Untuk
mengatur tinggi menu silakan ganti angka 35 pada kode 35px di
atas dengan tinggi yang kamu mau.
5. Untuk tambah atau kurangi
jumlah menu, silakan copas atau hapus Skrip dengan blokwarna
hijau (1 porsi menu) , jumlah sub-menunya bisa ditambah sesuai selera,
misalnya submenu ..c, d, e, f, dst.
6. Untuk mengganti warna, background dan huruf, perhatikan skrip di bawah ini.
[1]. <style>
[2]. /* -- Menu Horizontal + Sub Menu-- */
[3]. #cat-nav {background:#156994;margin:0 15px;padding:0;height:35px;}
6. Untuk mengganti warna, background dan huruf, perhatikan skrip di bawah ini.
[1]. <style>
[2]. /* -- Menu Horizontal + Sub Menu-- */
[3]. #cat-nav {background:#156994;margin:0 15px;padding:0;height:35px;}
[4]. #cat-nav a { color:#eee;
text-decoration:none; text-shadow: #033148 0px 1px ..........
A.
Mengganti warna background menu: Silakan ganti
warna pada baris ketiga yang saya beri warna merah, dengan
warna yang anda sukai. Cari kode warna di google.
B. Mengganti warna
tulisan/huruf, silakan ganti warina pada baris ke-4 yang saya beriwarna
hijau dengan warna yang anda sukai (ganti kodenya saja).
C. Mengganti model huruf (font), perhatikan skrip urutan ke-14; gantilah tulisan Times New Roman dengan jenis font kesukaan anda,
[14]. #secnav a { font-family:Georgia, "Times New Roman", Times, serif; font-
C. Mengganti model huruf (font), perhatikan skrip urutan ke-14; gantilah tulisan Times New Roman dengan jenis font kesukaan anda,
[14]. #secnav a { font-family:Georgia, "Times New Roman", Times, serif; font-
- Setelah itu
klik Pratinjau dulu untuk memastikan scrift sudah
benar .
- Lalu simpanlah/save.
Perhatian
1. Sebelum
merubah/menambah/menyimpan/save scrift diatas, usahakan di back up dulu
template anda, agar bisa dimanfaatkan kembali jika ada masalah dengan
penambahan srcritf diatas.
2. Untuk
menghilangkan tampilan-tampilan dobel dengan Laman Utama, ikuti saran
berikut :
§ Masuk ke
Menu Laman
§ Lalu pilih tampilan
halaman dengan memilih "jangan tampilkan"
3.
Simpan setelan, maka laman utama akan tampil
sendiri sesuai dengan scrift yang kita ketikkan tadi.
4.
Blog sudah bisa dipublikasikan...
5.
Apabila melalui cara yang kami bagikan ini
belum berhasil, rekan ulangi lagi dengan sabar. jika berkali-kali memang tidak
bisa, sahabat bisa berkonsultasi melalui komentar di bagian bawah
ini.
Demikian, info Lampung Blogging terkait desain
blog agar tampak lebih professional dimata pengunjung. Kunjungi terus
lampungblogger.blogspot.co.id dan dapatkan info menarik lainnya. Salam blogging
No comments:
Post a Comment
Hindari Komentar yang mengandung Spam, P*rn* dan SARA.