29 July 2008

(142) Comments

Membuat Menu Vertikal (Vertical)

Kendhin

Sebelumnya kita pernah membahas tentang membuat menu horizontal, nha sekarang mari kita mencoba membuat menu vertikal. Menu vertikal ini cocok kalau dipasang di sidebar karena bentuknya berjajar sevara vertikal (ya iyalah). Contohnya seperti gambar disamping itu. Beginilah cara membuatnya :

1. Login ke blogger trus pilih "Layout-->Edit HTML"
2. Masukkan kode berikut sebelum kode ]]></b:skin> atau sebelum kode </style> . Pokoknya ditaruh di dalam Barisan kode CSS deh.

.glossymenu, .glossymenu li ul{
list-style-type: none;
margin: 0;
padding: 0;
width: 185px; /*WIDTH OF MAIN MENU ITEMS*/
border: 1px solid black;
}
.glossymenu li{
position: relative;
}
.glossymenu li a{
background: white url('http://kendhin.890m.com/blog/vertical/blue1.gif') repeat-x bottom left;
font: bold 12px Verdana, Helvetica, sans-serif;
color: white;
display: block;
width: auto;
padding: 5px 0;
padding-left: 10px;
text-decoration: none;
}
.glossymenu li ul{
position: absolute;
width: 190px;
left: 0;
top: 0;
display: none;
}
.glossymenu li ul li{
float: left;
}
.glossymenu li ul a{
width: 180px;
}
.glossymenu li a:visited, .glossymenu li a:active{
color: white;
}
.glossymenu li a:hover{
background-image: url('http://kendhin.890m.com/blog/vertical/blue2.gif');
}

* html .glossymenu li { float: left; height: 1%; }
* html .glossymenu li a { height: 1%; }



Untuk memilih warna menu, perhatikan kode2 yang berwarna merah (blue1.gif dan blue2.gif). Ganti kode tersebut dengan pilihan warna dibawah ini. Misal jika kamu ingin memilih menu warna merah maka kodenya menjadi seperti ini :

.glossymenu li a{
background: white url('http://kendhin.890m.com/blog/vertical/red1.gif') repeat-x bottom left;


dan

.glossymenu li a:hover{
background-image: url('http://kendhin.890m.com/blog/vertical/red1.gif');



Pilihan Warna menu vertikal :

blue1.gif

blue2.gif

green1.gif

green2.gif

red1.gif

red2.gif

pink1.gif

pink2.gif

black1.gif

black2.gif



3. Kemudian di save.
4. Lalu pergi ke menu "Page Elements"
5. Pilih "Add a Gadget -->HTML/JavaScript" kemudian masukkan kode berikut kedalamnya:

<ul id="verticalmenu" class="glossymenu">
<li><a href="/">Home</a></li>
<li><a href="http://trik-tips.blogspot.com">Trik Blog</a></li>
<li><a href="http://x-template.blogspot.com" >Free Template</a></li>
<li><a href="http://getebook.co.cc">Free Ebook</a></li>
</li>
</ul>


Kode yang berwarna merah adalah linknya dan yg warna biru adalah teks yang ditampilkan. Kalau mau menambahkan menu tingal buat lagi kode seperti yg berkedip2 dibawahnya.

Dah gitu aja. Gampang kan???? :D




Artikel yang Berhubungan :



Jumlah Komentar = 142
Ali said :
29 July, 2008
Sepertinya menarik juga ni buat di coba... :D y
Jatmiko said :
29 July, 2008
kalau pengen bikin layaout sendiri ilmu apa saj sih yang harus dikuaai????
dhawuh said :
29 July, 2008
trik baru mas, bagus cuman yang saya butuhkan belum tercapai nih :( ijin sedot aja artikele. suwun mas.
t1nez said :
29 July, 2008
Menarik juga buat dicoba, thx for sharing
Tedy said :
29 July, 2008
waduh...
tab menu horizontal baru dicoba nih...
muncul lagi tab menu vertikal . . .
mantab
29 July, 2008
wew kewren nih mas aku mau praktek jugaa... tapi kok pakai javascript yahh apa gak ada altefnatif lain mas soalnya blog aku udah kebanyakan javascript ntar jadi berat dunk
Oeoes said :
30 July, 2008
weh sip mas, kapan-kapan tak coba ah, sekarang lagi males utak-atik template coz abis rusak kapan hari gara-gara lupa backup
parlin said :
31 July, 2008
sep bosss...

ada aja baru yah:D
Revarius said :
31 July, 2008
wah bagus juga ini... hmmm di praktekin ah nanti buat blog baru aku heheheeh thanks ya bro....
01 August, 2008
kalo templitku seh kayaknya lebih oke yg horisontal dan ditempatkan di header..
01 August, 2008
suwun mas...
ARIF'S BLOG said :
03 August, 2008
AKU MAKASIH BANGET ATAS ILMU YANG SAMPEAN KASIH
TAPI ADA SATU UNEX2 YANG BELUM TERJAWAB NIH........ GIMANA CARANYA BUAT GAMBAR KAYA PUNYA MAS "SONIC DAN TEMENYA ITULOH" YANG DI HEADER
MOHON KEIKHLASANYA AKU TUNGGU DI "SETANCHAT@GMAIL.COM" SEKALIAN KALAU ADA YANG UDAH JADI THX...........................
JoVie said :
03 August, 2008
JoVie mau nyoba lagi nih Mas...oh iya yang tabview kemaren kok berpengaruh ama readmore ku yah?? karena readmoreku jadi gak bisa kerja lagi..hehe
vivan said :
04 August, 2008
thanks bang, mau tanya gimana cara ngilangin bingkai gambar yang bergaris tu di blogger? plis dijawab ya
narutoindo.co.cc
AR Eros said :
05 August, 2008
pak..cara mnampilkan recent comment gmn yach...
dhuwuh said :
06 August, 2008
tambah ilmu maneh :D omah anyar
cubajaya said :
08 August, 2008
mantaaaap
11 August, 2008
mas punya saya kok ghak dempet2 ya mas??
14 August, 2008
ya q bgung,.
tiar said :
14 August, 2008
makasih atas informasi yang sanagat berguna..aku juga sudah berlangganan artikel-artikelnyathanks
16 August, 2008
Luar biasa terima kasih atas ilmunya
selamat berkarya
Fr@
Didiet said :
17 August, 2008
malam mas.... tip ini yang saya tunggu2 mas.... siip deh mas
QiyA said :
19 August, 2008
saya lebih suka yang horizontal
by : http://nf-frenz.blogspot.com
19 August, 2008
saya suka dengan trik and tips kamu juga bagi2 ilmunya terimakasih man
dhuwuh said :
19 August, 2008
mohon ijin disedot kang. maturnuwun
22 August, 2008
Mantap Bener
rafibaiki said :
25 August, 2008
hjhj
Kendhin said :
06 September, 2008

@ARIF'S BLOG, kalo buat gambar itu sih pake photoshop, tinggal cari gambarnya trus diedit2 dna dikombinasikan.
@JoVie, mungkin ada kode yg kehapus.
@vivan, kayaknya harus nambahi kode di CSSnya.
@AR Eros, baca DISINI
@Rahadiyan Danar, salah kodenya kali

09 September, 2008
mas kendhin, gmn caranya agar tampilan postingan kayak Explore di Windows?terimakasih...semoga di bls...
pitscorner said :
11 September, 2008
wah makasih mas atas post menu vertikalnya asli ajiiiiip....
13 September, 2008
Hai friend.....
Gue ada masalah nih... gimana caranya, waktu gue membuat menu vertikal, setelah semua proses selesai, tetapi tidak mau disave, malah yang keluar ada semacam kode kode gitu.
Tolong friend ya..
Thanks........... bye...
Dynamic said :
15 September, 2008
hOLA, kok menu-menu vertikalnya hilang sih, mas. Menu di blog saya jadi hilang semua dech.
Venny Renti said :
19 September, 2008
Makasih banyak buat menu vertikalnya, udah aq coba di blog aq, even masih simple dan standard, maklum newbie :)... btw kalo kapan butuh artikelnya, boleh kan? :)
my blog said :
21 September, 2008
salam kenal,saya mau nanya nich gimana caranya ganti ikon blogspot defaultnya biar keren mohon penjelasannya yang detail seperti penjelasannya membuat menu vertikal terima kasih
. said :
27 September, 2008
Jujur nih mas:(,tadinya aku bingung:?

Itu dulu mas....Tapi sekarang berkat ALLAH dan tuntunan dari Dikau sang guru sejati.....:x.
Aku merasakan hidup ini jauh lebih berarti:)

Terimakasih ya mas:f
Kampret said :
07 October, 2008
angel cui :(
17 October, 2008
kok jadi hilang sih
18 October, 2008
:F
21 October, 2008
glogok akeh banget sechhhh;;)
Kendhin said :
25 October, 2008

@athonk's site, itu namanya menu Dtree, cb baca INI
@PERPUSTAKAAN STAI-SUSHA, dicoba aja lagi.
@Dynamic, masak sih?.
@my blog , itu namanya favicon, coba baca DISINI

indra said :
27 October, 2008
mas saya udah coba scriptnya dan berhasil
tapi kok kalo di preview kok masih ada tanda tang sama obeng yg nyilang itu ya
gimana cara ngilanginya mas...
saya udah coba2 tapi ga berhasil juga
pliss ya mas bantuin
.PPD JAKTIM said :
29 October, 2008
Makasih ya mas.....,Langsung Saya pergunakan untuk mempercantik Blog saya...
Makasih

M . Study
Deny said :
29 October, 2008
mas warna vertikal diatas dihapus ya?! ko ngefek ke blog saya ya mas :? kebetulan saya coba untuk blog saya dan berhasil tapi warna vertikalnya ga tampak mas :? mohon bimbingannya. Maklum saya masih newbie di dunia perBlog-an hehehe
31 January, 2013
http://knowledgeofsmart.blogspot.com/
02 July, 2013
nice post gan :D

kunbal ya ke http://justrevenger.blogspot.com
free games said :
03 August, 2013
I really enjoy simply reading all of your weblogs. Simply wanted to inform you that you have people like me who appreciate your work. Definitely a great post. Hats off to you! The information that you have provided is very helpful. Download NASCAR The Game
18 September, 2013
thanks
19 September, 2013
thanks infonya
30 September, 2013
Terimakasih infonya gan..
02 October, 2013
judul nya gak tampil gan ...
tolong di bantu
jo said :
16 November, 2013
Mantap gan
bokep said :
16 November, 2013
Yang mau nonton FILM BOKEP
Film Bokep said :
16 November, 2013
Makasih gan
NABILA SHOP said :
17 November, 2013
TOKO HANDPHONE TERBESAR TERLENGKAP TERMURAH TERPERCAYA NABILA SHOP Produk dijamin asli orginal.Dapatkan harga promo Nabila Shop Barang yang Kami Tawarkan Semuanya Barang ASLI ORGINAL Ada Garansi Resmi Distributor dan Garansi TAM 2 bebas resiko bebas penipuan.
Semua Produk Kami Baru dan Msh Tersegel dLm BOX_nya.
BERMINAT HUB-SMS 085-757-299-675 ATAU KLIK WEBSET RESMI KAMI http://nabilashop77.blogspot.com
Ready Stock! Samsung Galaxy S4 Mini Rp.2,500.000
Ready Stock! Apple iPhone 5 Rp.2,700.000
Ready Stock! BlackBerry 9380 Orlando - Black.Rp.900.000,-
Ready Stock! BlackBerry Curve 8520 Gemini.Rp.500.000,-
Ready Stock! BlackBerry Bold 9780 Onyx 2.Rp.800.000,-
Ready Stock! Blackberry Curve 9320.Rp.700.000,-
Ready Stock! Samsung Galaxy Note 10.1.Rp.2,500.000.
Ready Stock! Samsung Galaxy Tab 2 (7.0).Rp. 1.000.000
Ready Stock! Samsung Galaxy S III Mini.Rp.1.800.000.
Ready Stock! Samsung Galaxy Nexus I9250 - Titanium Si.Rp.1.500.000,-
Ready Stock! Samsung Galaxy Note N7100.Rp.2.500.000.
Ready Stock! Samsung Galaxy Note N7000 - Pink.Rp.1.700.000.
Ready Stock! Samsung Galaxy Y S5360 GSM - Pure White.Rp.500.000
04 December, 2013
Obat Kuat Pria Perkasa " AFRICA BLACK ANT "
Obat ini diramu dari bahan alami, untuk memberikan kekuatan, daya tahan yang luar biasa saat berhubungan sex (pasutri) dan memaksimalkan kinerja alat vital agar berfungsi dengan baik dan normal. Sehingga bisa kembali kuat di ranjang, serta bisa menyembuhkan gejala penyakit ejakulasi dini dan lemah syahwat.

VIMAX CANADA ORIGINAL
Vimax adalah obat herbal yang berkhasiat sangat bagus dan ampuh untuk membesarkan dan memperpanjang penis pria dengan cepat (100% GARANSI UANG KEMBALI).

OBAT PENINGGI BADAN
Grow up super usa, untuk merangsang pertumbuhan anda tambah tinggi hingga 175cm dalam jangka 7hr-1bln.


SEDIA PRODUK :
* Obat Kuat Perkasa Pria
* Obat Kesehatan Herbal
* Obat Perangsang Sex / Libido
* Aneka Macam Kondom Silikon
* Aneka Macam Ring silikon
* Aneka Macam Kosmetik Import
* Alat Bantu Sex / Sex toys P/W


:: KAMILAH SOLUSI TEPAT KEMBALIKAN KEHARMONISAN RUMAH TANGGA ANDA ::


- Jangan ragu atau sungkan berbelanja di toko kami.
- Hubungi customer service kami.
- Melayani pemesanan via paket jne _ tiki _ pos, keseluruh indonesia.
- Info Lebih Lengkap Segera Kunjungi Website Kami : http://hokimarket.com


:: TOKO ONLINE TERPERCAYA SEJAK 2009 ::
Nuha M Ahsan said :
17 December, 2013
thanks
23 January, 2014
TRIMA KASIH AGAN... SALAM SUKSES AJA BUAT AGAN BLOG YA.....

Susu Kambing Etawa - Susu Kambing Etawa
05 April, 2014
EXTENDER JILQ adalah cara memperbesar penis terbaik.
Kami sudah membuktikan dan melakukan survey kepada sangat banyak konsumen kami yang telah menggunakan produk lain dan berpindah menggunakan produk Extender jilq.
hasilnya sangat positif bahwa tidak ada yg lebih baik dari produk Extender jilq.

info lengkap segera kunjungi:
www.extenderjilq.com
05 May, 2014
============================

Keep sharing gan, kunjungi balik yaa..

Bwin368 Agen Judi Terpercaya
Bwin368 Agen Judi Online

Bwin368 Agen Bola Terpercaya
Bwin368 Agen Judi Terbesar

Dewa Bola Online
Dewa Bola

============================
29 May, 2014
komeng gan..
12 June, 2014
Mantab gan postingan nya..

Full Download Java Games
Eko Priyanto said :
05 July, 2014
salam kenal dan jangan lupa berkunjung ke situs kami juga yah gan yang membahas seputar obat sipilis herbal dengan obat herbal aman dan ampuh tanpa efek samping. Informasi cara menyembuhkan penyakit sipilis yang lengkap beserta obatnya yang tepat dan berlisensi DINKES RI.
Bara Herbal said :
05 July, 2014
informasi yang sangat bagus gan... terimakasih banyak.. jangan lupa berkunjung ke situs kami yah..!!!
obat sipilis pada pria
obat sipilis pada pria
obat sipilis pada pria
teguh lan said :
06 July, 2014
Salem kenal gan, artikelnya ok, semoga bermanfaat, jangan lupa juga kunjungi situs kami tentang obat sipilis pada wanita herbal. Yang membahas tentang ciri ciri sipilis pada wanita dan cara mengobati sipilis pada wanita lengkap dengan obat alternatifnya yang telah berlisensi BPOM dan DINKES RI
06 July, 2014
sebelumnya salam kenal gan .enaknya kalo malam malam gini ngopi gan.
sambil ngopi kunjungi situs ane ya gan di jamin tidak merugikan ? ? ?
obat sipilis
obat sipilis pada pria
obat sipilis pada wanita
obat sipilis herbal
obat spilis di apotik
Bara Herbal said :
07 July, 2014
Gan ane baca artikel agan mantaf ane kagum... maaf gan jangan lupa kunjungi situs kami ya gan... ~ nama obat sipilis pada pria ~ obat penyakit sipilis pada pria ~ obat sipilis pada pria
Bara Herbal said :
07 July, 2014
Trimakasih gan saya jadi faham tentang artikel agan...dan saya mohon maaf numpang lapak gan semoga ada yang berkenan untuk mengunjungi situs kami mengenai penyakit kelamin... ~ obat sipilis pada pria ~ obat-sipilis-pada-pria-yang-paten ~ obat penyakit sipilis pada pria
07 July, 2014
Artikelnya keren gan bermanfaat banget...obat sipilis di apotikobat penyakit sipilis di apotinama obat sipilis di apotik
08 July, 2014
Artikelnya keren gan bermanfaat banget...obat sipilis di apotikobat penyakit sipilis di apotinama obat sipilis di apotik
09 July, 2014
postinganya yang sangat bermamfaat baget gan trimakasih dan sebelumnya saya minta izin buka lapak di sini gan sapa tau ada yang minat... obat sipilis di apotik obat penyakit sipilis di apoti nama obat sipilis di apotik
09 July, 2014
selamat sore dan salm kenal gan post agan sangat bermamfaat banget trimakaish gan obat sipilis pada pria dan wanita di apotik lapak ane gan obat sipilis pada pria dan wanita mohon izininya gan obat sipilis di apotik
10 July, 2014
sudahkah anda membuat secangkir kopi di malam ini gan sambil ngopi baca baca biar enak obat sipilis di apotik gan sapa tau membatu obat sipilis ampuh sapa tau beminat obat sipilis herbal sapa tau bermamfaat
De Nature said :
10 July, 2014
senang bisa singgah di website nan indah ini.. salam kenal dari penjual obat kutil kelamin de nature indonesia yang terbukti aman dan ampuh untuk sembuhkan penyakit kutil kelamin tanpa efek samping ataupun ketergantungan obat. Simak semua ulasan seputar obat kutil kelamin herbal dan obat kutil kelamin ampuh untuk sembuhkan benjolan seperti kutil di kemaluan pria dan wanita.
13 July, 2014
Berhasil gan, lanjutkan postingan terbarunya..
16 July, 2014
timakasih dan salam kenal gan... artikelnya ok... dan jangan lupa kunjungi situs kami ya gan yang membahas mengenai penyakit kelamin... ~ tips obat sipilis pada pria ~ tips obat sipilis pada pria ~ tips obat sipilis pada pria ~ tips obat sipilis pada pria ~ tips obat sipilis pada pria ~ tips obat sipilis pada pria ~ tips obat sipilis pada pria ~ tips obat sipilis pada pria ~ tips obat sipilis pada pria
04 August, 2014
Gan artikelnya bagus ane seneng bacanya bermanfaat gan... maaf gan semoga berkenan untuk mengunjungi situs kami yang membahas tentang penyakit kelamin gan...obat alami penyakit sipilis pada pria ~ artikel obat sipilis pada pria ~ cara obat sipilis pada pria
04 August, 2014
Gan... Artikelnya bagus gan saya senang membacanya... salam kenal gan dan jangan lupa kunjungin situs kami yang membahas tentang penyakit kelamin...obat sipilis terbaik ~ obat sipilis tetracycline ~ obat sipilis tradisional
15 August, 2014
Gan Artikelnya bagus mantaf gan ane demen... salam kenal ya gan... dan jangan lupa juga kunjungi situs kami yang membahas tentang penyakit kelamin semoga berkenan gan... ~ cara obat sipilis pada pria ~ obat untuk penyakit sipilis pada pria ~ tips obat penyakit sipilis pada pria
19 August, 2014
Gam Artikelnya bagus dan keren abis... Salam kenal gan dan jangan lupa kunjungin juga situs kami yang membahas tentang penyakit kelamin... semoga berkenan gan tararengkiew... ~ obat sipilis manjur ~ obat sipilis paling manjur ~ Obat Sipilis yg ampuh ~ obat sipilis yang paling mujarab ~ obat sipilis yamh ,anjur
19 August, 2014
Gam Artikelnya bagus dan keren abis... Salam kenal gan dan jangan lupa kunjungin juga situs kami yang membahas tentang penyakit kelamin... semoga berkenan gan tararengkiew... ~ obat sipilis paling manjur ~ obat sipilis paling ampuh ~ obat sipilis paling mujarab ~ obat sipilis yang manjur ~ obat sipilis yang mujarab
teguh sans said :
25 August, 2014
Salam kenal gan...Artikelnya sangat bermamfaat..jangan lupa kunjungi situs kami juga yang membahas tentang herpes..tingkiyu gan... ~ Obat Herbal Herpes ~ Obat Herpes Herbal Kulit ~ Obat Herpes Herbal Ampuh
teguh sans said :
25 August, 2014
Artikelnya rapi dan Menarik gan...jangan lupa kunjungi juga situs kami yang membahas tentang Herpes ~ obat herpes 2014 ampuh ~ Obat herpes 2014 ampuh untuk wanita ~ Obat Herpes 2014 ampuh hilangkan herpes dalam 3 -5 hari ~ Obat Herpes 2014 ampuh dari bahan alami ~ Obat herpes 2014 ampuh cepat obati herpes
10 September, 2014
Setelah sebelumnya saya baca artikel cara buat menu horizontal dan yang ini menu vertical, nanti hasil di blonya gimana ?
13 September, 2014
makasih bro tutorialnya, saya coba dulu..
info unik said :
13 September, 2014
wah.. boleh di coba nih...
26 October, 2014
Thanx gan buat sharingnya...
Agus Rahman said :
18 November, 2014
semua yang telah dihadirkan oleh website poto cara ini sangat sempurna,baik tampilan dan artikelnya..penuh warna dan penuh makna..
28 November, 2014
This comment has been removed by the author.
obat wasir said :
02 December, 2014
mumeti
ERCEDI said :
06 January, 2015
Ijin numpang lapak link gan

DETEXSI

keren menunya..
29 January, 2015
ijin lapak gan.. thx ..
02 March, 2015
De Nature | Solusi Pengobatan Herbal Ampuh Untuk mengobati Sipilis, Kutil kelamin, kencing nanah, Gonore, Kanker serviks, keputihan, Herpes dan penyakit kelamin lainnya
bokep Jepang said :
14 March, 2015
mantap nih artikelnya.. suksess yaa..
14 March, 2015
mantap nih artikelnya.. keep posting admin.. suksess.. thx..

Post a Comment