Posts

Showing posts with the label Menu-Menu

Membuat Menu Vertikal (Vertical)

Image
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: absolut...

Cara Membuat Menu Tab View

Image
Karena sering ditanya tentang bagaimana caranya membuat Tab VIew (Biasanya nanyanya gini: "Mas cara membuat menu yg kayak punya mas gmn? yg ada "Tips & Trik", "Lain-lain", "Terbaru", "Komentar" itu lho). Ya kan? hayo ngaku... Tabview itu sangat berguna sekali, karena dengan ukuran kotak yang relatif kecil tapi bisa memuat isi yang buanyak. Sebenarnya dah dari dulu pingin posting tentang itu, tp karena yg dulu cara pasanganya sulit jadi belum bisa aku jelaskan. Trus akhirnya aku menemukan metode baru dalam pembuatannya. Cara yang ini mungkin mirip dengan punyanya o-om, tp scriptnya agak beda. Dan aku dapet script ini juga bukan dari o-om lho :D Tab view itu contohnya seperti ini : Beginilah cara untuk membuat menu tab view tersebut 1. Login ke blogger trus pilih menu "Layout --> Edit HTML" 2. Kemudian cari kode ini ]]></b:skin> 3. Kemudian masukkan kode berikut ini sebelum kode ]]></b:skin> atau kedalam ta...

Cara Membuat Dropdown Menu

Apa sih dropdown menu itu? Dropdown menu yang seperti ini itu lho : Arsip Blog Cara Membuat Menu Horizontal Cara membuat Search Engine Nha udah tahu kan? Dengan dropdown menu kita bisa mnghemat space/ruang di blog kita, karena dengan ukuran yang kecil seperti itu bisa menyimpan link dan text yang banyak. Itu bisa diisi dengan arsip, blogroll dll. Gimana? Mau mencobanya? Gini nih caranya : Login ke blogger, trus masuk ke menu "Page Element" trus pilih Add page elements --> HTML/JavaScript . Kemudian masukkan script berikut ini di kocat "Content" <select onChange="document.location.href=this.options[this.selectedIndex].value;"> <option value="0" selected> Arsip Blog </option> <option value=" Links 1 "> Text 1 </option> <option value=" Links 2 "> Text 2 </option> </select> Text yang berwarna merah adalah link. ganti text2 tersebut dengan link2 kamu. Text yang berwarna biru...

Cara Membuat Menu DTree

Image
Apa itu menu Dtree (D-Tree) ? itu lho menu yang memiliki struktur seperti pohon, yang punya cabang-cabang itu lho, Seperti kalo kita membuka Windows Explorer. Menu yang seperti gambar dibawah ini atau seperti contoh ini . Menu Dtree ini sangat berguna jika kamu memiliki postingan yang buanyak, karena dengan menggunakan menu Dtree maka akan bisa menghemat space/ruang yang ada di blogmu. Nah kamu pingin tahu cara membuatnya? Beginilah cara membuatnya : 1. Login to Blogger, trus pilih "Layout --> Edit HTML" 2. Taruh kode berikut ini diatas kode <head> <link rel="StyleSheet" href="http://www.geocities.com/uddin_81/dtree.css" type="text/css" /> <script type="text/javascript" src="http://www.geocities.com/uddin_81/dtree.js"></script> 3. Trus Klik Tombol "Save 4. Setelah itu copy kode berikut ini dan pasang di sidebar kamu, udah tahu tho cara pasangnya? itu lho di menu "Page Element" trus ...

Membuat Menu Horizontal

Image
Ada yang pingin buat menu horizontal tapi nggak tahu caranya? Gini nih caranya, eh tapi tunggu dulu, apasih menu horizontal itu? Menu horizontal adalah menu-menu yang disusun secara horizontal (menyamping). Kayak gini ini lho: Contohnya bisa kamu lihat disini .Nha pingin nggak? kalo pingin ikuti cara berikut ini: pertama-tama kamu harus punya gambar kayak gini nih: dan kalo nggak punya gimana? kalo nggak punya pake gambar yang aku sediain ini aja deh. blackleft.gif blackright.gif greenleft.gif greenright.gif redleft.gif redright.gif unguleft.gif unguright.gif yellowleft.gif yellowright.gif blueleft.gif blueright.gif Ok, bahan-bahannya sudha ada, mari kita mulai maraciknya: 1. Login ke blogger terus pilih Layout --> Edit HTML , trus beri tanda centang pada kotak " Expand Widget Templates ". jangan lupa template di backup dulu. 2. Cari script seperti ini ]]></b:skin> , kalo udah ketemu copy script dibawah ini dan taruh diatasnya /*credits : http://trik-tips.blogs...