Membuat Menu Drop Down Dengan CSS Pada Blogspot

Pujangga Blogs

19 June 2009

Membuat Menu Drop Down Dengan CSS Pada Blogspot

Di postingan sebelumnya kita telah mempelajari bagaimana membuat menu drop down dengan menggunakan CSS. Nah, sekarang kita akan mempraktekkan bagaimana memasang menu drop down dengan CSS pada blog, dan kali ini tentu masih pada blogspot. Kebetulan saya webwalking (istilah apaan tuh?) tadi malam dan menemukan sebuah situs yang meyediakan struktur menu drop down CSS yang sangat bagus menurut saya. Oleh karena itu, saya akan memberikan tips bagaimana memasang menu tersebut pada blog pembaca. Jika pembaca ingin melihat struktur lain, silahkan kunjungi situsnya langsung di www.cssmenumaker.com. Untuk membuat menu drop down tersebut pada blogspot caranya sama dengan yang sebelum-sebelumnya. Berikut langkah-langkahnya:
  1. Silahkan login terlebih dahulu pada akun Blogspot pembaca.
  2. Klik link Tata Letak kemudian pilih sub tab menu Edit HTML
  3. Silahkan backup terlebih dahulu template pembaca agar jika terjadi kesalahan bisa mengembalikannya kembali. Untuk melakukannya silahkan klik link Download Template Lengkap pada bagian Backup/Restore Template
  4. Beri centang pada kotak kecil disamping tulisan Expand Template Widget
  5. Cari struktur ]]></b:skin> pada kotak Edit Template tersebut
  6. Jika sudah ketemu, copy paste struktur CSS berikut ini tepat diatas struktur ]></b:skin>.
    @charset "utf-8";
    /* CSS Document */
    /*^'^ Navigation Structure ^'^*/

    .nav-container-outer{
    background: #990000;
    padding: 0px;
    height: 74px;
    background: url(http://nestoriko.googlepages.com/nav-bg.jpg);
    }
    .float-left{ float: left;
    }
    .float-right{ float: right;
    }
    .nav-container .divider{
    display:block;
    font-size:1px;
    border-width:0px;
    border-style:solid;
    }
    .nav-container .divider-vert{
    float:left;
    width:0px;
    display: none;
    }
    .nav-container .item-secondary-title{
    display:block;
    cursor:default;
    white-space:nowrap;
    }
    .clear{
    font-size:1px;
    height:0px;
    width:0px;
    clear:left;
    line-height:0px;
    display:block;
    float:none;
    }
    .nav-container{
    position:relative;
    zoom:1;
    margin: 0 auto;
    }
    .nav-container a, .nav-container li{
    float:left;
    display:block;
    white-space:nowrap;
    }
    .nav-container div a, .nav-container ul a, .nav-container ul li{
    float:none;
    }
    .nav-container ul{
    left:-10000px;
    position:absolute;
    }
    .nav-container, .nav-container ul{
    list-style:none;
    padding:0px;
    margin:0px;
    }
    .nav-container li a{
    float:none
    }
    .nav-container li{
    position:relative;
    }
    .nav-container ul{
    z-index:10;
    }
    .nav-container ul ul{
    z-index:20;
    }
    .nav-container ul ul ul{
    z-index:30;
    }
    .nav-container ul ul ul ul{
    z-index:40;
    }
    .nav-container ul ul ul ul ul{
    z-index:50;
    }
    li:hover>ul{
    left:auto;
    }
    #nav-container ul {
    top:100%;
    }
    #nav-container ul li:hover>ul{
    top:0px;
    left:100%;
    }
    /*^'^ Primary Items ^'^*/
    #nav-container a{
    padding:7px 17px 7px 18px;
    margin: 10px 0px 0px 0px;
    color: #FFFFFF;
    font-family: Trebuchet MS, Arial, sans-serif, Helvetica;
    font-size:14px;
    text-decoration:none;
    font-weight: bold;
    background: url(http://nestoriko.googlepages.com/item-primary-bg.gif);
    background-repeat: no-repeat;
    background-position: top;
    }
    #nav-container a:hover{
    color: #6C3600;
    background: url(http://nestoriko.googlepages.com/item-primary-bg.gif);
    background-repeat: no-repeat;
    background-position: center;
    }
    /*^'^ Secondary Items Container ^'^*/
    #nav-container div, #nav-container ul{
    padding:10px 4px 10px 4px;
    margin:0px 0px 0px 0px;
    background: url(http://nestoriko.googlepages.com/item-secondary-container-bg.jpg);
    background-repeat: repeat-x;
    background-color: #FF9900;
    border-bottom: 1px solid #CA6500;
    }
    /*^'^ Secondary Items ^'^*/
    #nav-container div a, #nav-container ul a{
    padding:3px 10px 3px 6px;
    background-color: #FFFFFF;
    background: url(http://nestoriko.googlepages.com/item-secondary-bg.jpg);
    background-repeat: no-repeat;
    background-position: 0px 22px;
    font-size:11px;
    border-width:0px;
    border-style:none;
    margin: 0px 0px 0px 0px;
    width: 149px;
    }
    /*^'^ Secondary Items Hover State ^'^*/
    #nav-container div a:hover, #nav-container ul a:hover{
    background-color: #FFFFFF;
    background: url(http://nestoriko.googlepages.com/item-secondary-bg.jpg);
    background-repeat: no-repeat;
    color:#CC0000;
    }
    /*^'^ Secondary Item Titles ^'^*/
    #nav-container .item-secondary-title{
    cursor:default;
    padding:4px 0px 3px 7px;
    color: #6C3600;
    font-family: Arial, Trebuchet MS, Arial, sans-serif, Helvetica;
    font-size:11px;
    /* background: url(http://nestoriko.googlepages.com/item-secondary-title-bg.jpg); */
    background-repeat: no-repeat;
    font-weight:bold;
    }
    /*^'^ Horizontal Dividers ^'^*/
    #nav-container .divider-horiz{
    border-top-width:1px;
    margin:5px 5px;
    border-color: #C16100;
    }
    /*^'^ Vertical Dividers ^'^*/
    #nav-container .divider-vert{
    border-left-width:1px;
    height:15px;
    margin:4px 2px 0px 2px;
    border-color:#AAAAAA;
    }

  7. Temukan struktur berikut pada template pembaca:
    <b:includable id='description'>
    <div class='descriptionwrapper'>
    <p class='description'><span><data:description/></span></p>
    </div> </b:includable> </b:widget> </b:section> </div>

  8. Copy paste struktur menu berikut ini tepat dibawah struktur yang Anda temukan pada langkah 7:
    <div class="nav-container-outer">
    <img src="http://nestoriko.googlepages.com/nav-bg-l.jpg" alt="" class="float-left" />
    <img src="http://nestoriko.googlepages.com/nav-bg-r.jpg" alt="" class="float-right" />
    <ul id="nav-container" class="nav-container">
    <li><a class="item-primary" href="#" target="_self">MENU1</a>
    <ul style="width:150px;">
    <li><a href="URL" title="sample" target="_self" >Sub Menu1</a></li>
    <li><a href="URL" title="sample" target="_self" >Sub Menu2</a></li>
    <li><a href="URL" title="sample" target="_self" >Sub Menu3</a></li>
    </ul>
    </li>
    <li><span class="divider divider-vert" ></span></li>
    <li><a class="item-primary" href="#" target="_self">MENU2</a>
    <ul style="width:150px;">
    <li><a href="URL" title="sample" target="_self" >Sub Menu1</a></li>
    <li><a href="URL" title="sample" target="_self" >Sub Menu2</a></li>
    <li><a href="URL" title="sample" target="_self" >Sub Menu3</a></li>
    </ul>
    </li>
    <li><span class="divider divider-vert" ></span></li>
    <li class="clear"> </li>
    </ul>
    </div>

  9. Perhatikan bagian yang diberi warna merah. Bagian tersebut merupakan struktur untuk 1 buah menu beserta sub menu-seb menu di dalamnya. Jika pembaca ingin menambah menu baru, silahkan buat lagi struktur seperti yang berwarna merah tersebut dan letakkan setelah struktur menu yang lain, misalnya setelah struktur "MENU2", dan seterusnya. Kemudian ganti "URL" dengan alamat halaman yang akan dituju jika sub menu diklik.
  10. Setelah itu klik tombol SIMPAN TEMPLATE

Untuk melihat hasilnya, silahkan buka disini.

26 comments:

AaGen Blog on June 19, 2009 at 6:31 AM said...

:23

dicoba ya triknya,aku suka banget sama blognya cuz unik aja...

Anonymous said...

jahaha...ga da warna mrah...kliatan bgt copas duang...LOL

kwangkxz on November 19, 2009 at 11:57 PM said...

Bagus sekali artikelnya sobat, memberikan inspirasi bagiku.

Terimakasih

Anonymous said...

Anonim tgl 25 september jahahaha keliatan kalau gak baca selengkapnya

merawat dan memperbaiki komputer on January 18, 2010 at 6:57 AM said...

buat belajar dan diterapkan pada blogspotku
makasih sodara

classick instrumental on January 18, 2010 at 6:59 AM said...

siap dipelajari bos,buat mempercantik tampilan blog...

Pujangga on January 24, 2010 at 3:05 AM said...

@merawat dan memperbaiki komputer
@classick instrumental:

Yups...sukses yaaa. ^_^

Tips and Trick on April 18, 2010 at 4:29 PM said...

good tutor bozzzzz ijin coba ya

raccoon on June 18, 2010 at 3:04 AM said...

nice info mas...
mas mau nanya nih,tuh kan kalau kita letakan kursor di menu 1 dan menu 2 keluar pilihan--> sub menu 1,2 dan3,nah saya mau nanya gimana cara ngisi sub menu 1,2 dan 3 nya.,.tolong di jawab ya mas saya lagi ngerjain tugas dan ini udah deadline..thanx mas :15

Pujangga on June 18, 2010 at 1:48 PM said...

@raccoon : boleh liat blog nya ? biar saya bantu :11

mee's_blog on July 9, 2010 at 9:11 PM said...

Warna teksnya gag bisa diganti tu mas??
:29

mee's_blog on July 9, 2010 at 9:12 PM said...

maxudnya warna tabnya
:42

GERBANG PERTANIAN on July 11, 2010 at 4:17 AM said...

lansung coba ah, trims infonya

Sodiyc & acun on July 16, 2010 at 8:44 AM said...

makasih infonya......

Tips Dan Trik on July 18, 2010 at 1:00 AM said...

Jos,,,Gandosss...

Rahmat Basuki on January 6, 2011 at 6:44 PM said...

Terima kasih sob

agus noviana on January 27, 2011 at 9:21 AM said...

thx sob, menyebar ilmu adalah amal jariyah, teruskan berkarya,

Anonymous said...

Tengkyu bro

Toko Novy on March 21, 2011 at 5:17 PM said...

makasi ya bozzz, berguna banget!!!tp msh belajar, gmn cara rubah warnanya biar matching sm template blog!!!
kalo sempet main2 ke blog q jg ya!!! www.tokonovy.blogspot.com


thx

notcupz on March 26, 2011 at 5:40 PM said...

mkssiiiii
bnr2 mmbantu saiiaaaa :35

mampir www.notcupz.blogspot.com:11

Pujangga on March 26, 2011 at 6:05 PM said...

@ notcupz :
Terimakasih kembali :36

notcupz on March 26, 2011 at 7:48 PM said...

mksii dh mampir k blog saya ;)

grosir pulsa on May 7, 2011 at 11:19 AM said...

aterkelnya bagus udah ane coba di blog ane.....

WWw.jupecell.co.cc

Pujangga on May 7, 2011 at 11:29 AM said...

@grosir pulsa :
ahamdulillah berguna untuk mas :20

nC on June 15, 2011 at 3:35 PM said...

nC :36

sherlina halim on September 15, 2015 at 8:26 PM said...

Pengen yang lebih seru ...
Ayo kunjungi www.asianbet77.com
Buktikan sendiri ..

Real Play = Real Money

- Bonus Promo Red Card pertandingan manapun .
- Bonus Mixparlay .
- Bonus Tangkasnet setiap hari .
- New Produk Sabung Ayam ( minimal bet sangat ringan ) .
- Referal 5 + 1 % ( seumur hidup ) .
- Cash Back up to 10 % .
- Bonus Royalty Rewards setiap bulan .

Untuk Informasi lebih jelasnya silahkan hubungi CS kami :
- YM : op1_asianbet77@yahoo.com
- EMAIL : melasian77cs@gmail.com
- WHATSAPP : +63 905 213 7234
- WECHAT : asianbet_77
- SMS CENTER : +63 905 209 8162
- PIN BB : 2B4BB06A / 28339A41

Salam Admin ,
asianbet77.com

Download Disini


Post a Comment

:11
smiley
:12
smiley
:13 smiley :14
smiley
:15
smiley
:16
smiley
:17
smiley
:18
smiley
:19
smiley
:20
smiley
:21
smiley
:22 smiley :23 smiley :24
smiley
:25
smiley
:26
smiley
:27
smiley
:28
smiley
:29
smiley
:30
smiley
:31
smiley
:32
smiley
:33 smiley :34
smiley
:35
smiley
:36
smiley
:34
smiley
:38
smiley
:39
smiley
:40
input code is in the right smile icon image

Silahkan tinggalkan komentar anda dan harap tidak melakukan Spam..!!

Pujangga Blogs

administratorSeandainya segala sesuatu yang telah saya berikan ini bermanfaat bagi rekan-rekan semua.Sungguh saya ucapkan banyak Doa dan terimakasih kepada Mu Allah.SWT yang telah memberikan nikmat Berbagi sesama manusia dengan niat kebaikan dan kemajuan Negeriku ini..

the existence of this blog aims to broaden the information about web design by studying the parts of the structure of the html code for the beginner. Here also you can get the latest info about the entertainment media, affiliate programs etc.

Recent post


Download Free Movie


Pujangga Blogs Head News

Mengubah ILM ads google Untuk mengganti tampilan adsense google yang menampilkan Iklan Layanan Masyarakat tersebut dengan adsense lokal. Anda harus mengupload script adsense lokal dengan extensi html kelayanan webhosting anda.
Recent comment dengan efek overlay menu Following cursorBagi anda yang mempunyai keterbatasan ruang untuk meletakan widget Recent Comments, Saya akan mencoba membantu anda untuk membuat "Widget Recent comments" dengan efek overlay.
Membuat Guestbook Overlay fading headerEfek yang akan saya bahas kali ini adalah membuat tampilan Guestbook dan status twitter melayang dan berada ditengah - tengah halaman blog. Kita akan menyediakan menu guestbook pada sisi kiri halaman.
Membuat Headline Post widget tooltipsHeadline akan menggulung ke atas dengan sentuhan fade out ,seakan konten tersebut hilang dengan perlahan dan konten yang berada di bawahnya akan naik ke atas mengganti konten sebelumnya.
Membuat Number Page Navigation jQueryUmumnya Navigasi halaman dengan angka ini sering kita jumpai pada blog berplatform Wordpress. Namun bagi anda yang menggunakan platform Blogspot tak perlu berkecil hati, karena blogspot pun bisa mengadopsi tampilan NEXT dan PREV dengan widget Page Navigation Number.
Kode adsense didalam post menu navigasiUntuk meletakan Adsense didalam postingan, anda harus meletakan kode Script ads tersebut langsung ke template HTML blogspot. Sebagai langkah awal, silahkan anda login ke blogger.com » Dasboard »Design » Edit HTML » Beri tanda ceklist pada kolom .
1 2 3 4 5 6

Enter your email address:




review www.pujangga-adhitya.blogspot.com on alexa.com

free counters
 

Followers

Live Blog Stats

Recent Comment