Update Ilmu Pengetahuan: blogger

Showing posts with label blogger. Show all posts

Tutorial Cara Menu Horizontal Dropdown Dengan CSS

Pada Kesempatan Kali Ini 
Saya Akan Membahas Artikel Tentang Cara Membuat
 Menu Horizontal Dropdown Dengan CSS. 
 <img alt="Cara Membuat Menu Horizontal
 Dropdown " src="http://4.bp.blogspot.com/_zTIC4wiqbSs/TB67ks9F7_I/AAAAAAAAAgA/pXE5TWToXrg/s1600/menu+drop+H.JPG" /> 
 
 
Membuat menu horizontal sebenarnya ada banyak alternatif, untuk 
kali ini kita akan mencoba membuat jenis menu horizontal type 
professional dropdown, sebagaimana namanya tentunya ini akan membuat 
blog/site kita menjadi lebih tampak professional. 
 
Kita langsung ke TKP saja biar jelas dan untuk liat demo nya lihat pada 
menu Blog
 Ini 
<a href="http://kibagus-homedesign.blogspot.com/" target="_blank"></a> 
<a href="http://kibagus-homedesign.blogspot.com/" target="_blank"></a> 
<a href="http://kibagus-homedesign.blogspot.com/" target="_blank"></a> 
<a href="http://kibagus-homedesign.blogspot.com/" target="_blank"></a><a href="http://www.blogger.com/post-edit.g?blogID=6244449783811491844&postID=2961258610184801494" name="more"></a> 
 
 
<ul>
<li>Langkah Pertama</li>
<li>Login ke akun Blogger kamu.</li>
<li>Dari halaman dashboard, pilih Edit HTML.</li>
<li>Pada halaman Edit HTML, centang "Expand Template Widget", cari kode 
]]></b:skin>  pada script template blog kamu. Tekan Control F 
atau F3 untuk mencarinya agar lebih mudah</li>
<li>Lalu Copy Script dibawah ini diatas 
kode ]]></b:skin> tersebut.</li>
</ul>
 
<div style="-moz-border-radius: 5px 5px 5px 5px; background-color: black; border: 1px solid rgb(204, 204, 204); height: 150px; margin: 10px 0px; overflow: auto; padding: 10px; text-align: left; width: auto;">
/* 
================================================================ 
This copyright notice must be kept untouched in the stylesheet at 
all times. 
 
The original version of this stylesheet and the associated (x)html 
is available at http://www.stunicholls.com/menu/pro_dropdown_3.html 
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved. 
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements. 
=================================================================== */ 
 
.preload1 {background: 
url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/three_0a.gif);} 
.preload2 {background: 
url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/three_1a.gif);} 
 
#nav {padding:0; margin:0; list-style:none; height:38px; 
background:transparent 
url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/three_0.gif)
 repeat-x; position:relative; z-index:500; font-family:arial, verdana, 
sans-serif;} 
#nav li.top {display:block; float:left;} 
#nav li a.top_link {display:block; float:left; height:35px; 
line-height:33px; color:#FFD700; text-decoration:none; font-size:11px; 
font-weight:bold; padding:0 0 0 12px; cursor:pointer;background: 
url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/three_0.gif);} 
#nav li a.top_link span {float:left; display:block; padding:0 24px 0 
12px; height:35px; background: 
url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/three_0.gif)
 right top no-repeat;} 
#nav li a.top_link span.down {float:left; display:block; padding:0 24px 0
 12px; height:35px; background: 
url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/three_0a.gif)
 no-repeat right top;} 
 
#nav li:hover a.top_link {color:#fff; background: 
url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/three_1.gif)
 no-repeat;} 
#nav li:hover a.top_link span 
{background:url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/three_1.gif)
 no-repeat right top;} 
#nav li:hover a.top_link span.down 
{background:url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/three_1a.gif)
 no-repeat right top; padding-bottom:3px;} 
 
/* Default list styling */ 
 
#nav li:hover {position:relative; z-index:200;} 
 
#nav li:hover ul.sub 
{left:1px; top:38px; background: #50b5d0; padding:3px; border:1px solid 
#0b4d97; white-space:nowrap; width:90px; height:auto; z-index:300;} 
#nav li:hover ul.sub li 
{display:block; height:20px; position:relative; float:left; width:90px; 
font-weight:normal;} 
#nav li:hover ul.sub li a 
{display:block; font-size:11px; height:18px; width:88px; 
line-height:18px; text-indent:5px; color:#000; 
text-decoration:none;border:1px solid #50b5d0;} 
#nav li ul.sub li a.fly 
{background:#50b5d0 
url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/arrow.gif)
 80px 6px no-repeat;} 
#nav li:hover ul.sub li a:hover 
{background:#3f96a9; color:#fff; border-color:#fff;} 
#nav li:hover ul.sub li a.fly:hover 
{background:#3f96a9 
url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/arrow_over.gif)
 80px 6px no-repeat; color:#fff;} 
 
#nav li b {display:block; font-size:11px; height:18px; width:88px; 
line-height:18px; margin-bottom:3px; text-indent:6px; color:#ff6; 
border-bottom:1px solid #ff6; cursor:default;} 
 
#nav li:hover li:hover ul, 
#nav li:hover li:hover li:hover ul, 
#nav li:hover li:hover li:hover li:hover ul, 
#nav li:hover li:hover li:hover li:hover li:hover ul 
{left:90px; top:-4px; background: #50b5d0; padding:3px; border:1px solid
 #0b4d97; white-space:nowrap; width:90px; z-index:400; height:auto;} 
 
#nav ul, 
#nav li:hover ul ul, 
#nav li:hover li:hover ul ul, 
#nav li:hover li:hover li:hover ul ul, 
#nav li:hover li:hover li:hover li:hover ul ul 
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; 
margin:0; padding:0; list-style:none;} 
 
#nav li:hover li:hover a.fly, 
#nav li:hover li:hover li:hover a.fly, 
#nav li:hover li:hover li:hover li:hover a.fly, 
#nav li:hover li:hover li:hover li:hover li:hover a.fly 
{background:#3f96a9 
url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/arrow_over.gif)
 80px 6px no-repeat; color:#fff; border-color:#fff;} 
 
#nav li:hover li:hover li a.fly, 
#nav li:hover li:hover li:hover li a.fly, 
#nav li:hover li:hover li:hover li:hover li a.fly 
{background:#50b5d0 
url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/arrow.gif)
 80px 6px no-repeat; color:#000; border-color:#50b5d0;} 
 
setting: {startline:100, scrollto: 0, scrollduration:1000, 
fadeduration:[500, 100]}, 
controlHTML: '<img 
src="http://lh6.ggpht.com/_wC8_9aR_6uE/S6uJI38TreI/AAAAAAAACbY/QIXMKHei1g0/up.png"
 style="width:24px; height:24px" />', //HTML for control, which is 
auto wrapped in DIV w/ ID="topcontrol" 
controlattrs: {offsetx:15, offsety:15}, //offset of control relative to 
right/ bottom of window corner 
anchorkeyword: '#top', //Enter href value of HTML anchors on the page 
that should also act as "Scroll Up" links</div>
 
<ul>
<li>Lalu Simpan Template.</li>
<li>Kemudian Tambah Gadget HTML Javascript klik button tambah lalu</li>
<li>Copy dan paste Script dibawah ini</li>
</ul>
<div style="-moz-border-radius: 5px 5px 5px 5px; background-color: black; border: 1px solid rgb(204, 204, 204); height: 150px; margin: 10px 0px; overflow: auto; padding: 10px; text-align: left; width: auto;">
 
 
 
 
<ul id="nav"> 
<li class="top"><a href="#" 
class="top_link">Home</a></li> 
<li class="top"><a href="#" id="Menu" 
class="top_link">Menu</a> 
<ul class="sub"> 
 
<li>Judul1</li> 
<li><a href="#" class="fly">Subjudul1</a> 
<ul> 
<li><a href="#" 
target="_blank">subitem1.1</a></li> 
<li><a href="#" 
target="_blank">subitem2.1</a></li> 
<li><a href="#" 
target="_blank">subitem3.1</a></li> 
</ul> 
</li> 
<li><a href="#" class="fly">Subjudul2</a> 
<ul> 
<li><a href="#" 
target="_blank">subitem1.2</a></li> 
<li><a href="#" 
target="_blank">subitem2.2</a></li> 
<li><a href="#" 
target="_blank">subitem3.2</a></li> 
</ul> 
</li> 
<li><a href="#" class="fly">Subjudul3</a> 
<ul> 
<li><a href="#" 
target="_blank">subitem1.3</a></li> 
<li><a href="#" 
target="_blank">subitem2.3</a></li> 
<li><a href="#" 
target="_blank">subitem3.3</a></li> 
 
<li>Subjudul3.1</li> 
<li><a href="#">item1.3.1</a></li> 
<li><a href="#">item2.3.1</a></li> 
<li><a href="#">item3.3.1</a></li> 
 
<li>Subjudul3.2</li> 
<li><a href="#">item1.3.2</a></li> 
<li><a href="#">item2.3.2</a></li> 
<li><a href="#">item3.3.2</a></li> 
</ul> 
</li> 
 
 
<li>Judul2</li> 
<li><a href="#" 
target="_blank">subitem1.2</a></li> 
<li><a href="#" 
target="_blank">subitem2.2</a></li> 
<li><a href="#" 
target="_blank">subitem3.2</a></li> 
</ul> 
 
 
</li> 
<li class="top"><a href="#" id="services" 
class="top_link">menu2</a> 
<ul class="sub"> 
<li><a href="#" 
target="_blank">submenu1.2</a></li> 
<li><a href="#" 
target="_blank">submenu2.2</a></li> 
<li><a href="#" 
target="_blank">submenu3.2</a></li> 
</ul> 
</li> 
 
</li> 
<li class="top"><a href="#" id="services" 
class="top_link">menu3</a> 
<ul class="sub"> 
<li><a href="#" 
target="_blank">submenu1.3</a></li> 
<li><a href="#" 
target="_blank">submenu2.3</a></li> 
<li><a href="#" 
target="_blank">submenu3.3</a></li> 
</ul> 
</li> 
 
</li> 
<li class="top"><a href="#" id="services" 
class="top_link">menu4</a> 
<ul class="sub"> 
<li><a href="#" 
target="_blank">submenu1.4</a></li> 
<li><a href="#" 
target="_blank">submenu2.4</a></li> 
<li><a href="#" 
target="_blank">submenu3.4</a></li> 
</ul> 
</li> 
 
<li class="top"><a href="#" id="profil" 
class="top_link">menu5</a></li></li></li></ul> 
 </div>
Lalu Simpan Dan Lihat Hasilnya... 
 
Keterangan: 
<ul>
<li>Tanda # untuk Tempat Url yang anda inginkan</li>
<li>Lalu Tulisan Pada Sub Menu Item yaitu Nama Nama Menu Sesuai Dengan 
Kebutuhan</li>
</ul>

Tutorial Cara Menu Horizontal Dropdown Dengan CSS

Pada Kesempatan Kali Ini Saya Akan Membahas Artikel Tentang Cara Membuat Menu Horizontal Dropdown Dengan CSS. Membuat menu horiz...