Silahkan Pilih Warna Latar Blog ini Sesuai Dengan kenyamanan Yang Anda Suka

Woensdag 03 April 2013

Cara Membuat dropdown menu blog dapat dilakukan dengan langkah-langkah sebagai berikut


    Sign in di Blog
    Klick Template
    Klick Lanjutkan
    Cari kode ]]></b:skin> dalam template blog. Untuk mudah menemukannya gunakan CTRL F lalu masuk masukan kode tersebut dalam teks box yang muncul
    Tempatkan kode dibawah ini pada di atas kode ]]></b:skin>
    Klick Simpan Template untuk menyimpan perubahan
    Klick Tutup untuk keluar dari halaman template blog

Ini kode yang ditempatkan di ata kode ]]></b:skin>


.menu{
border:none;
border:0px;
margin:0px;
padding:0px;
font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
}

.menu ul{
background:orange;
height:35px;
list-style:none;
margin:0;
padding:0;
}
.menu li{
float:left;
padding:0px;
}

.menu li{
float:left;
padding:0px;
}
.menu li a{
background:orange;
display:block;
font-weight:normal;
line-height:35px;
margin:0px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
.menu li a:hover, .menu ul li:hover a{
background: orange;
text-decoration:none;
}
.menu li ul{
background:orange;
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:225px;
z-index:1;
}
.menu li:hover ul{
display:block;
}
.menu li li {
background:orange;
display:block;
float:none;
margin:0px;
padding:0px;
width:225px;
}
.menu li:hover li a{
background:none;
}
.menu li ul a{
display:block;
height:35px;
font-size:12px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}
.menu li ul a:hover, .menu li ul li:hover a{
background:orange;
border:0px;
color:orange;
text-decoration:none;
}


Keterangan:
Background:orange adalah warna latar. Silahkan mengganti warna tersebut sesuai warna diinginkan

Setelah melakukan step yang dijelaskan diatas selanjutnya mendapatkan gadget HTML/JavaScript untuk membuat teks link menu dropdown blog. Langkah-langkahnya sebagai berikut:

    Klick Tata Letak
    Klick Add Gadget/Tambah gadget
    Klick HTML/JavaScript
    Copy teks link dibawah ini yang akan dijadikan sebagai menu dan Sub Menu
    Paste dalam gadget HTML/JavaScript yang ditambahkan tadi
    Klick Simpan untuk menyimpan perubahan

Penulisan teks link sebagai teks link dropdown menu media online internet blog


<div style="text/css">
<ul class="menu">
<li><a href="nama-judul-posting.html">HOME</a></li>
<li><a href="">Menu I</a>
<ul>
<li><a href="nama-judul-posting.html">SUb Menu I - 1</a></li>
<li><a href="nama-judul-posting.html">Sub Menu I - 2</a></li>
</ul>
</li>
<li><a href="">Menu II</a>
<ul>
<li><a href="nama-judul-posting.html">Menu II - 1</a></li>
<li><a href="nama-judul-posting.html">Menu II - 2</a></li>
</ul>
</li>
<li><a href="">Menu III</a>
<ul>
<li><a href="nama-judul-posting.html">Menu II - 1</a></li>
<li><a herf="nama-judul-posting.html">Menu II - 2</a></li>
</ul>
</li>
<li><a href="nama-judul-posting.html">Menu IV</a>
<li>
</li>
</ul>
</div>

Geen opmerkings nie:

Plaas 'n opmerking