28/07/12

Tutorial cara buat vertical menu versi Azhafizah.com



Lama x singgah kat blog http://www.azhafizah.com/,sekali singgah ternampak pulak vertical menu yang menarik tertarik dan juga da boom..

Jadi apa lagi..terus aku tengok la page source.. hehe,, jangan marah eek owner blog.. dah mmg hobi tgk page source blog rakan2 hehehe...

Oleh sebab aku ambil dari page source sihatimerahjambu aku namakan vertical menu ni versi Azhafizah.com




dalam petak kuning pada gambar di atas tu la dia vertical menu yang aku maksudkan tu..

dalam entri ni aku sertakan jugak live demo dan cara2 edit yang simple

Live Demo anda boleh lihat pada tepi sebelah kiri tu..



cara pasang pada blog senang ja

Mula2 pergi ke desbot---design---add gadget---pilih html/javascript... kemudian masukkan code di bawah





<style type='text/css'>
#list8 { }
#list8 ul { list-style:none;}
#list8 ul li {font:Georgia Serif, arial, serif; font-size:15px;margin:1px;text-align:right; }
#list8 ul li a { display:block; width:90px;height:33px; background-color:#8e7c5a; border-right:10px solid #f03484; padding:6px;
text-decoration:none; color:#ffffff; }
#list8 ul li a:hover { -moz-transform:rotate(-5deg); -moz-box-shadow:10px 10px 20px #000000;
-webkit-transform:rotate(-5deg); -webkit-box-shadow:10px 10px 20px #000000;
transform:rotate(-5deg); box-shadow:10px 10px 20px #000000;border-color:#8e7c5a;background-color:#f03484;}
</style>
<div style='display:scroll; position:fixed; top:250px; left:-30px;'>
<div id='list8'>
<ul>

<li><a href='URL'>Nama Url</a></li>
<li><a href='URL'>Nama Url</a></li>
<li><a href='URL'>Nama Url</a></li>
<li><a href='URL'>Nama Url</a></li>
<li><a href='URL'>Nama Url</a></li>

</ul>
</div>
</div>


untuk menukar warna background dan warna border menu tu., cuma perlu tukar code warna yang aku kasi kaler maler tu...

untuk menggantikan kaler tulisan tukar code warna yang kaler merah tu..

jika menu anda lebih atau kurang dari code yang diberi cuma perlu kurangkan atau tambahkan code

<li><a href='URL'>Nama Url</a></li>

pada code di atas tu ada 5 menu..

jika hendak dikurangkan menu tu delete 2 code <li><a href='URL'>Nama Url</a></li>

contoh

<li><a href='URL'>Nama Url</a></li>
<li><a href='URL'>Nama Url</a></li>
<li><a href='URL'>Nama Url</a></li>

jika hendak tambah menu tu tambah code <li><a href='URL'>Nama Url</a></li>

contoh

<li><a href='URL'>Nama Url</a></li>
<li><a href='URL'>Nama Url</a></li>
<li><a href='URL'>Nama Url</a></li>
<li><a href='URL'>Nama Url</a></li>
<li><a href='URL'>Nama Url</a></li>
<li><a href='URL'>Nama Url</a></li>
<li><a href='URL'>Nama Url</a></li>

untuk mengubah ketinggian menu tu ubah code tinggi yang berwarna pink tu.. ubah ikut kesesuaian yang anda rasa sesuai,,,..

di bawah ni contoh penggunaan code tu..






<style type="text/css">
#list8 { }
#list8 ul { list-style:none;}
#list8 ul li {font:Georgia Serif, arial, serif; font-size:15px;margin:1px;text-align:right; }
#list8 ul li a { display:block; width:90px;height:33px; background-color:#8e7c5a; border-right:10px solid #f03484; padding:6px;margin-left:19px;
text-decoration:none; color:#ffffff; }
#list8 ul li a:hover { -moz-transform:rotate(-5deg); -moz-box-shadow:10px 10px 20px #000000;
-webkit-transform:rotate(-5deg); -webkit-box-shadow:10px 10px 20px #000000;
transform:rotate(-5deg); box-shadow:10px 10px 20px #000000;border-color:#8e7c5a;background-color:#f03484;}
</style>
<div style="display: scroll; left: -30px; position: fixed; top: 250px;">
<div id="list8">
<ul>
<li><a href="http://blogger-blog-tutorial.blogspot.com/">Home</a></li>
<li><a href="http://blogger-blog-tutorial.blogspot.com/p/senarai-tutorialtip-tricks.html">Full Entri</a></li>
<li><a href="http://blogger-blog-tutorial.blogspot.com/search/label/Blogger%20Tutorial">Blogger Tutorial</a></li>
<li><a href="http://blogger-blog-tutorial.blogspot.com/search/label/Code%20tutorial">Code Tutorial</a></li>
<li><a href="http://blogger-blog-tutorial.blogspot.com/search/label/Javascript">Javascript</a></li>
<li><a href="http://blogger-blog-tutorial.blogspot.com/search/label/Blogger%20Tips%20and%20Tricks">Tips and Tricks</a></li>
<li><a href="http://blogger-blog-tutorial.blogspot.com/search/label/Template">Template</a></li>
</ul>
</div>
</div>


Bermacam2 lagi efek yang boleh ditambah tapi kena la blajar css dulu.. rajin2 la godek2 entri code tutorial tu.. hehehe..

Nanti aku buat lagi vertical menu yang lain kalau lapang... lalala

Sekian

Sekian...

11 ulasan:

outbound malang outbounddimalang.com berkata...

nice post :)
ditunggu kunjungan baliknya yaah ,

Azhafizah Md Nor berkata...

tengok boleh tapi jangan sama plak ^__^

Happy Eid and merdeka ^__^

Polskahackrew berkata...

@outbound malang outbounddimalang.com

thanks singgah

Polskahackrew berkata...

@Azhafizah Md Nor

hehe thanks tuan tanah.. hepi eid & merdeka too.. ('',)

wisata outbound malang berkata...



kunjungan gan,bagi - bagi motivasi
semoga bisa jadi semangat
Hal mudah akan terasa sulit jika yg pertama dipikirkan adalah kata SULIT.Yakinlah bahwa kita memiliki kemampuan dan kekuatan.
ditunggu kunjungan baliknya yaa :)

saifudin abu izzudin berkata...

nice day :)
hargailah hari kemaren,
mimpikanlah hari esok,
tetapi hiduplah untuk hari ini.
bagi-bagi motivasinya yaah...

http://www.nolimitadventure.com/

saifudin abu izzudin berkata...

nice day :)
Bermimpilah tentang apa yang ingin kamu impikan,
pergilah ke tempat-tempat kamu inginkan,
Jadilah seperti yang kamu inginkan,
karena kamu hanya memiliki satu kehidupan
dan satu kesempatan untuk melakukan hal-hal
yang ingin kamu lakukan

http://www.nolimitadventure.com/

Wahyu Eka Prasetiyarini berkata...

makasih infonya :)

www.rinigames.com

wisata outbound berkata...

nice day:)
saya adalah saya hari ini karena pilihan-pilihan
yang saya kemarin..


bagi-bagi motivasi yaa.. :)


http://wisataoutboundmalang.com/

vos vor berkata...

apapun yg anda kerjakan jgan pernah lupakan pasangan anda, follow blogku Blog saya

Bpk radi berkata...

Buat saudara punya permasalahan ekonomi: hub aki santoro,karna saya sudah membuktikan bantuan aki santoro yang berminat,hub aki santoro di nomor 0823 1294 9955, atau KLIK DI SINI

entri ja

Related Posts Plugin for WordPress, Blogger...