Tutorial Membuat Menu Horisontal Pada Blogger
Rabu, 08 Juni 2011
3
komentar
Sugeng enjang dumateng sedoyo pamidanget seperciktinta.blogspot.com . isuk iki aku ake meh ngekei wejangan kanggo koe kabeh ngenani carane gawe menu horizontal ono ing Blogspot. Sebenere ora nganggo menu horizontal iso nek gur ngelompokke menu-menu posting. Koyoto AOK koyo sik dadi tugase pak Aheng, carane Buka’en menu posting, isiken judul, isine njuk sadurunge di terbitkan entri tulisno AOK ono ing kolom label, nah kui iso kanggo posting-posting lanjutane, misale koe kabeh meh gawe postingan anyar sik meh dikolompokke ning AOK podo koyo mau, sadurunge di tertibtkan entri mok tulis AOK ono ing label. Njuk kanthi otomatis (automatically without thingking) blogspot meh ngelompokke label-label AOK mau.
Tapi sik jenenge manungso kan pingine sik luwih apik tur enak dipandeng moto, nek wes ngunu njuk pingine gawe sik unik nah iki salah sijine. Gawe menu horizontal, yawes rasah kesuen simaken toto coro ing nigsor iki
1. Koe podo mlebu’o ing blogmu, pilih rancangan-edit html nah kanggo mengurangi segala resiko, download dhisik templete blogmu, njuk disimpen kanggo ngantisipasi mbok-mbok mengko gawene menu horisontal ra dadi. menurut pengalame enyong, sekali salah satu titik, blog mu ra bakalan iso tampil. Bedes... ngeri juga tow? heee. nek wis di download centang tulisan Expand Template Widget ono ing duwur tengen.
Nek wis golek’o tulisan ]]></b:skin> ono ing script kui, piye?? Mumet to? Rasah bingung disik, pencet tombol F3 ono ing keyboard mengko ono ing bagian ngisor seko browser ono kolom trus tulisan find. Masuke tulisan mau njuk tekan enter, ngko secara otomatis koe dituduhke nggone tulisan mau kui nandi, biasane ditandai nggo warna ijo. Nek wes ketemu, kopi kode ing ngisor iki, njuk paste ning duwure kode ]]></b:skin>
/*=== Navigasi pulldown ===*/
body{ behavior:url("csshover2.htc"); }
.NavMenuPD {
float:left;
padding:0;
margin:0;
color: #FFFFFF;
background: #071585;
width:100%;
border:solid 1px #004080; clear:both;} /*Warna Navigasi Utama*/
.NavMenuPD a, .NavMenuPD a:visited {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-style:normal;
font-weight:bold;
font-size:12px;
color: #FFFFFF;
background-color: transparent;
text-decoration: none;}
.NavMenuPD ul {list-style-type:none;padding:0; margin:0;}
.NavMenuPD ul li {float:left; position:relative; z-index:auto !important ; z-index:1000 ; border-right:solid 1px #004080; border-left:solid 1px #004080;}
.NavMenuPD ul li a {color: #FFFFFF;background: transparent;float:none !important ; float:left ; display:block; height:30px; line-height:30px; padding:0 10px 0 10px; text-decoration:none; }
.NavMenuPD ul li ul {display:none; border:none;color: #FFFFFF;background: #000000; width:1px}
.NavMenuPD ul li:hover a {background-color:#C0C0C0; text-decoration:none; color:#000000;} /*Warna main cells mode hover */
.NavMenuPD ul li:hover ul {display:block; position:absolute; z-index:999; top:29px; margin-top:1px; left:0;}
.NavMenuPD ul li:hover ul li a {display:block; width:100px; height:auto; line-height:1.3em; margin-left:-1px; padding:5px 10px 5px 10px; border-left:solid 1px #004080; border-bottom: solid 1px #004080; background-color:#C0C0C0; color:#FFFFFF;} /*warna subcells mode normal */
.NavMenuPD ul li:hover ul li a:hover {background-color:#808080; text-decoration:none;color:#FFFF00;} /*Warna subcells mode hover*/
.NavMenuPD ul li a:hover {background-color:#C0C0C0; text-decoration:none;color:#0000FF;} /*warna main cells mode hover */
.NavMenuPD ul li a:hover ul {display:block; width:100px; position:absolute; z-index:999; top:29px; left:0; }
.NavMenuPD ul li ul li a:visited { background-color:#C0C0C0; color:#FFFFFF;} /*Warna subcells normal mode*/
.NavMenuPD ul li a:hover ul li a {display:block; width:100px; height:1px; line-height:1.3em; padding:4px 16px 4px 16px; border-left:solid 1px #004080; border-bottom: solid 1px #004080; background-color:#C0C0C0; color:#FFFFFF;}
.NavMenuPD ul li a:hover ul li a:hover {background-color:#00FFFF; text-decoration:none;color:#FFFF00;} /*Color subcells hovering mode*/
/*= by akang samy url blog: http://seperciktinta.blogspot.com =*/
Nah langkah sepisan wes rampung, pikiran ojo tegan dhisik, kopine disripit dhisik, selak adem kui, telo gorenge yo mok maem sik, ngempos disik lah coro gampange ngomong. Nek wes siap tak lanjutke wae ya..
2. Langkah ke 2 kuwi golek’o kode iki
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1'
showaddelement='no'>
<b:widget id='Header1' locked='true' title='test
(Header)' type='Header'/>
... dan seterusnya ...
</b:section>
</div>
<b:section class='header' id='header' maxwidgets='1'
showaddelement='no'>
<b:widget id='Header1' locked='true' title='test
(Header)' type='Header'/>
... dan seterusnya ...
</b:section>
</div>
njuk paste kode ing ngisor iki ono ing sak ngisore kode sik warnane ijo,
<div class='NavMenuPD'>
<ul><li><a href='/'>BERANDA</a>
</li></ul>
<ul><li><a href='http://seperciktinta.blogspot.com/search/label/cerita kita'>TENTANG SAYA</a>
</li></ul>
<ul><li><a href='#'>KULIAHKU</a>
<ul>
<li><a href='http://seperciktinta.blogspot.com/search/label/Pemrograman%20C%20dan%20C++'>Pemrograman C dan C++</a></li>
<li><a href='http://seperciktinta.blogspot.com/search/label/Bahasa%20Indonesia%20dan%20Inggris'>Bahasa Indonesia dan Inggris</a></li>
<li><a href='http://seperciktinta.blogspot.com/search/label/Kewirausahaan%20II'>Kewirausahaan II</a></li>
<li><a href='http://seperciktinta.blogspot.com/search/label/IMK'>IMK</a></li>
</ul>
</li></ul>
<ul><li><a href='#'>SOFTWARE</a>
<ul>
<li><a href='http://seperciktinta.blogspot.com/search/label/Anti%20Virus'>Anti Virus</a></li>
<li><a href='http://seperciktinta.blogspot.com/search/label/Audio'>Audio</a></li>
<li><a href='http://seperciktinta.blogspot.com/search/label/Video%20Software'>Video</a></li>
<li><a href='http://seperciktinta.blogspot.com/search/label/Internet%20Sofware'>Internet Software</a></li>
<li><a href='http://seperciktinta.blogspot.com/search/label/Design%20Graphic'>Graphic Design</a></li>
<li><a href='http://seperciktinta.blogspot.com/search/label/Tools'>Tools</a></li>
<li><a href='http://seperciktinta.blogspot.com/search/label/Utility'>Utility</a></li>
</ul>
</li></ul>
<ul><li><a href='#'>FOTO</a>
<ul>
<li><a href='http://seperciktinta.com/search/label/foto editan'>Foto Editan</a></li>
<li><a href='http://seperciktinta.com/search/label/foto kita'>foto kita</a></li>
</ul>
</li></ul>
<ul><li><a href='http://seperciktinta.blogspot.com/search/label/Blog Teman'>BLOG TEMAN</a>
</li></ul>
<ul><li><a href='http://seperciktinta.blogspot.com/search/label/Komputer'>INFO T I</a>
</li></ul>
<ul><li><a href='http://seperciktinta.blogspot.com/search/label/download'>DOWNLOAD</a>
</li></ul>
<ul><li><a href='http://seperciktinta.blogspot.com/search/label/Tutorial Blogspot'>TUTORIAL BLOGSPOT</a>
</li></ul>
</div>
</div>
Wes to?? ojo lali mas bro/mbak sis jeneng URL’e gantien URL’e kowe…..
Njuk nek wes diganti kabeh, njuk di klik simpan template, njuk liat blog…..
Wes dadi menu horisontal’m, nek rung dadi juga monggo konfirmasi nign facebook'u
ojo lali bagi jempole ya....
sugeng enjang sugeng makaryo.....
sugeng enjang sugeng makaryo.....
Baca Selengkapnya ....
