Membuat menu Dropdown

Pertama buatlah struktur HTML dari menu yang ingin di gunakan:

<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Artikel</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Profile</a></li>
</ul>
</nav>

Diatas adalah menu utama dan sekarang coba buat submenu, misalkan:

<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Artikel</a>
<ul>
<li><a href="#">WordPress</a></li>
<li><a href="#">Photoshop</a></li>
<li><a href="#">Web Design</a>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Contact</a></li>
<li><a href="#">Profile</a></li>
</ul>
</nav>
 

Setelah anda membuat submenu, silahkan anda cek menu yang anda buat tadi. Memang terlihat kurang menarik dan biasa saja karena kita belum menambahkan style pada menu tersebut. Berikut code css yang membuat dropdown anda berjalan dengan baik: 

nav ul ul {
display: none;
}

nav ul li:hover > ul {
display: block;
}
nav ul {
background: #efefef;
padding: 0;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: ""; clear: both; display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background: #4b545f;
}
nav ul li:hover a {
color: #fff;
}

nav ul li a {
display: block; padding: 25px 40px;
color: #757575; text-decoration: none;
}
nav ul ul {
background: #5f6975; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}
nav ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
nav ul ul li a {
padding: 15px 40px;
color: #fff;
}
nav ul ul li a:hover {
background: #4b545f;
}

nav ul ul ul {
position: absolute; left: 100%; top:0;
}

Berikut penjelasan dari code css:

nav ul ul {
display: none;
}

nav ul li:hover > ul {
display: block;
} 

Code ini mengartikan, bahwa elemen yang memiliki submenu, tidak akan di tampilkan. Dan akan tampil ketika terjadi hover pada li yang mempunyai submenu.

nav ul ul {
background: #5f6975; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}
nav ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
} 

***

Readmore → Membuat menu Dropdown

Memasang Slideshow di Blog

Slideshow sebenarnya sudah tidak asing lagi didengar. Slideshow adalah tampilan objek berupa foto, video dan objek lainnya yang saling bergantian dalam waktu tertentu secara terus menerus. Biasanya bagi para blogger, slideshow ini dibuat untuk mempercantik tampilan blog sehingga tampak begitu elegan dimata pengunjung.
Untuk memasang slideshow di blog sebenarnya sangat mudah, Anda hanya perlu sedikit sentuhan dan merubahnya agar tampak lebih mantap. Bagi para blogger khususnya pemula seperti saya, saya akan coba membagikan caranya. Yang sudah saya coba adalah di blogspot.com, untuk di wordpress.com pasti tidak jauh beda. Simak langkah-langkahnya sebagai berikut :
1. Login ke blogger
2. Pada Dashboard blog, pilih Tata Letak > tambahkan gadget > Pilih HTML/Java Script

3. Copy kode HTML berikut dan paste ke dalam kotak konten HTML tersebut

<script src='http://yourjavascript.com/53816065231/Database5.js' type='text/javascript'></script>

<script type="text/javascript" src="http://yourjavascript.com/65160840132/cycle.js"></script>

<script type="text/javascript">

$(document).ready(function() {

$('#content-slider').cycle({

fx: 'fade'

});

});

</script>

<style type="text/css">

#content-slider {

   position: relative;

   width: 100%;

   height: 250px;

   overflow: hidden;

   margin:0 auto;

}

#content-slider img {

   display: block;

   width: 100%;

   height: 230px;

}

</style>

<div id="content-slider">

<img src="URL Foto Anda"/>"

<img src="URL Foto Anda"/>"

<img src="URL Foto Anda"/>"

<img src="URL Foto Anda"/>"

</div>

4. Ganti tulisan “URL Foto Anda” dengan link gambar milik Anda

5. Anda bisa menambahkan beberapa gambar lagi dengan cara menambah kode HTML berikut, dan seterusnya

<img src=URL Foto Anda"/>

6. Simpan dan lihat hasilnya. Jika belum berhasil, ulangi lagi sampai benar-benar berhasil

***

Readmore → Memasang Slideshow di Blog

Membuat ProgressBar Berjalan | Visual Basic 6.0

 Membuat ProgressBar Berjalan | Visual Basic 6.0

> Visual Basic 6.0
> Jalankan VB.6.0[Visual Basic]
> Jika terlihat Jendela anda Harus meng-Klik Standar EXE.
> jika Sudah , Klik kanan pada ToolBox, pilih Componnents
> Pilih Microsoft Windows Common Controls 6.0[SP6]

> Pada ToolBox, Pilih Icon Progress Bar[Jika Tidak tahu cukup melihat Tool Tip]



> Kemudian Tambahkan PROGRESS BAR ke Form Project

> Tambahkan Timer ke Form Project,Interval = 100

Copy Code dibawah ini ke dalam Form :

  ProgressBar1.Value = ProgressBar1.Value + 2
     If ProgressBar1.Value = ProgressBar1.Max Then
       Timer1.Enabled = False
       Unload Me
     End If

Copy And Paste ke dalam Form

> Jika sudah Silahkan Jalankan Project Visual basic
> jika sudah silahkan Save or Make Project.exe

***

Readmore → Membuat ProgressBar Berjalan | Visual Basic 6.0