Wednesday, May 30, 2012

Cara Membuat Menu Gulir Ke Bawah pada Blog

7:37 AM    1 comment
Contoh Menu Horizontal Feat Gold

Gambar di atas adalah contoh Menu Horizontal Feat Gold, sobat bisa memasangnya di atas atau di bawah header sekaligus, dan untuk warnaya bisa sobat sesuaiakan sendiri dengan keinginan sobat sendiri.

Kita lansung aja ya bahas Cara Membuat Menu Horizontal Feat Gold:

1. Masuk ke akun bloggger sobat.

2. Pada menu klick Rancangan ➨ Edit HTML ➨ Centang Expand Template Widget ➨ Download dulu templatenya untuk mengantisipasi bila terjadi kesalahan.


3. Selanjutnya sobat di dalam Edit Template sobat cari kode ]]></b:skin> jika kesulitan mencarinya coba sobat baca Cara Cepat Mencari Kode HTML.

4. Jika sudah ketemu letakkan kode berikut di atas kode ]]></b:skin>

#tejahtc{-moz-border-radius: 0x;height:33px; width:975px; margin:0 auto; display:block; padding:0px 0 0px 0px; font-size:12px; font-family:"Segoe UI",Calibri,"Myriad Pro",Myriad,"Trebuchet MS",Helvetica,Arial,sans-serif; font-weight:normal;} #tejas{ margin: 0px; padding: 0px; width:970px;height:33px;width:auto;background:#111;border-left:5px solid #FFCC00;border-right:5px solid #FFCC00;border-bottom:5px solid #C5B200;border-top:5px solid #C5B200;} #tejas ul { float: left; list-style: none; margin: 0px; padding: 0px;}

 #tejas li { float: left; list-style: none; margin: 0px; padding: 0px; } #tejas li a, #tejas li a:link, #tejas li a:visited { color: #fae7df; display: block; margin: 0px; padding: 9px 10px 10px 10px; } #tejas li a:hover, #tejas li a:active {color:#ff0000;cursor:pointer;background:#ccff00;-moz-border-radius:40px 40px 40px 40px;-webkit-border-radius:40px 40px 40px 40px;height:auto;border-left:5px solid #ccc;border-right:5px solid #ccc;}
#tejas li li a, #tejas li li a:link, #tejas li li a:visited { background:#ED4A05; width: 150px; color: #fae7df; font-family:Tahoma,century gothic,Georgia, sans-serif; font-weight: normal; float: none; margin: 0px; padding: 9px 10px 10px 10px; border-bottom: 1px solid #FF7800; } #tejas li li a:hover, #tejas li li a:active { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMKef_7G_H2JlhMfNvQ-zELZeFPXFRrAFnJYw30X7cyY0wPh3SNJTpvGVTdjVWBxLo8F86CROSFCoAA1HDHDoJh8d_wQeLTHsU4JrOJ-Dnsk8UVwj6ro4qH8TSJ6d-WgVPKtA1ivfkHXfh/) repeat-x; color: #fff; padding: 9px 10px 10px 10px; } #tejas li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 170px; margin: 0px; padding: 0px; } #tejas li li { } #tejas li ul a { width: 140px; } #tejas li ul a:hover, #tejas li ul a:active { } #tejas li ul ul { margin: -34px 0 0 170px; } #tejas li:hover ul ul, #tejas li:hover ul ul ul, #tejas li.sfhover ul ul, #tejas li.sfhover ul ul ul { ldft: -999em; } #tejas li:hover ul, #tejas li li:hover ul, #tejas li li li:hover ul, #tejas li.sfhover ul, #tejas li li.sfhover ul, #tejas li li li.sfhover ul { left: auto; } #tejas li:hover, #tejas li.sfhover { position: static; }

5. Masih di dalam Edit Template, sekarang sobat cari kode:
  • Jika di bawah header letakkan kode di bawah ini di bawah kode <div id='content-wrapper'>
  • Jika di atas header letakkan kode di bawah ini di atas kode <head>
Keterangan:
setiap template berbeda-beda jika sobat ingin meletakkan di bawah header maka sobat cari kode yang mirip dengan kode <div id='content-wrapper'>


<center>
<div id='tejahtc'>
<div id='tejas'>
<ul>
<li><a href='#'>Home</a></li>
<li><a href='#' title='Isi Dengan Diskripsi'>Menu 1</a></li>
<li><a href='#' title='Isi Dengan Diskripsi '>Menu 2</a></li>
<li><a href='#' title='Isi Dengan Diskripsi'>Menu 3</a></li>
<li><a href='#' title='Isi Dengan Diskripsi '>Menu 4</a></li>
<li><a href='#' title='Isi Dengan Diskripsi '>Menu 5</a></li>
<li><a href='#' title='Isi Dengan Diskripsi'>Menu 6</a></li>
<li><a href='#' title='Isi Dengan Diskripsi'>Menu 7</a>
<ul>
<li><a href='#' title='Isi Dengan Diskripsi'>Menu 7.1</a></li>
<li><a href='#' title='Isi Dengan Diskripsi'>Menu 7.2</a></li>
<li><a href='#' title='Isi Dengan Diskripsi'>Menu 7.3</a></li>
</ul></li>
<li><a href='http://otowebsite.blogspot.com' title='Sumber'>@otowebsite</a></li>
</ul>
</div>
</div>

<div class='clear'/>
</center>

6. Klick pertinjauan terlebih dahulu, bila sukses baru simpan.

Keterangan:
  • Ganti tanda # dengan url tujuan.
  • Ganti Isi Dengan Diskripsi dengan teks sobat sendiri, title adalah teks yang muncul sebelum menu di klick.
  • Ganti teks Menu dengan nama menu sobat sendiri.
  • Jika sobat ingin mengganti warna background, border dan sebagainya, sobat silahkan rubah, dengan merubah kode script yang pertama(kalo yang ini saya rasa tidak perlu di jelaskan, karna kalo di jelaskan akan panjang, dan pasti tentunya sobat sudah pada ngerti kan!) Untuk melihat kode warna silahkan sobat lihat di sini Kode Warna V1 - Kode Warna V2 atau Kode Warna V3.

Sedikit keterangan lagi:
  • Untuk mengubah warna dan sebagainya sobat perhatikan dan sedikit rubah kode yang pertaman:
  • background:#111 = kode #111 adalah warana backgrround, kalo kurang suka silahkan do rubah dengan meliahat kode warna yang saya sebutkan di atas.
  • Untuk mengatur ketebalan border dan warnanya sobat cukup ubah kode: border-left:5px solid #FFCC00;border-right:5px solid #FFCC00;border-bottom:5px solid #C5B200;border-top:5px solid #C5B200 = ini adalah kode border bagian kanan,kiri,bawah dan atas, untuk merubah ketebalan cukup sobat ganti 5px sesuai ketebalan yag sobat inginkan. Untuk warna border silahkan sobat ganti kode #C5B200/#FFCC00 dengan warna sesuai selera sobat sendiri.
  • Untuk mengubah font huruf sobat coba perhatikan kode: font-family:"Segoe UI",Calibri,"Myriad Pro",Myriad,"Trebuchet MS",Helvetica,Arial,sans-serif itu semua adalah font huruf yang ada/muncul pada menu, silahkan sobat sendiri deh. untuk melihat font huruf sobat bisa lihat di sini Macam-Macam Jenis Font Huruf.
Di antara kode di atas masih banyak lagi yang bisa sobat rubah sesuai selera!

1 comments:

Subscribe to: Post Comments (Atom)