Langsung ke konten utama

Cara Membuat Menu Dropdown Versi 1

Cara Membuat Menu Dropdown - Menu dropdown memang sangat diperlukan sebagai media informasi sebagaimana halnya widget, yang dalam fungsinya jika blog terdapat menu pilihan maka, pengunjung dapat memilih apa yang akan pengunjung inginkan. sedangkan dropdown pada menu digunakan untuk menghemat tempat sekaligus mengkategorikan menu yang masih berhubungan. Untuk memasang menu dropdown tersebut silahkan ikuti langkah-langkah membuat menu dropdown berikut ini :
·         Silahkan masuk ke dasbor blog anda.
·         Klik panah kebawah seperti pada gambar yang diberi kotak merah
·         Kemudian Pilih >> Template
·         Dilanjutkan dengan klik >> Edit HTML >> Proceed / lanjutkan
·         Setelah masuk ke jendela Edit Html kemudian silahkan cari kode ]]></b:skin> dengan cara klik  Ctrl + F pada keyboard Komputer anda kemudian masukkan kode tersebut.
·         Setelah ketemu silahkan pasang kode berikut ini tepat diatas kode ]]></b:skin>
 ul.dropmenu{
 position: relative;
 margin: 0px;
 padding: 1px 0px 0px 0px;
 background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9w5zUG7Gc_7ruENI5A1g3roqsa2L0aJqhUVMRHjqYIaCPzPknIMAfM8Lw6jb_Oo3TUVhcJxRht264YHu05nZbpVTFhiNEcTw7-0uZp5CgILD07paZJ_zz1ClFxVkrzHwOPvMyO4s47CQ/s1600/navigation.png) repeat-x scroll 0 0;
 display:block;
 height: 35px;
 font-family:Verdana,Arial,Helvetica,sans-serif;
 font-size: 12px;
}
.dropmenu li{
 position: relative;
 list-style: none;
 float: left;
 margin: 0px;
 padding: 0px;
}
.dropmenu li a{
 height: 22px;
 padding: 9px 30px 0px 15px;
 display: block;
 cursor: point;
 border-right: solid 1px #4a779d;
 color: #FFFFFF;
 text-transform: uppercase;
 text-decoration: none;
}
.dropmenu li span{
 display: block;
 float: right;
 height: 10px;
 width: 10px;
 background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1ct3_4pFr-MBYLB6YMWXgzd-8nm5W96PX5Mi78leB7ptu6U6PX6-xhUFjsWkBfEIYvjE3s_rD1LUVoXGbHn9kV_O69n8IEBr1wZShpaLZNmmIfDrzulWxG4VXx78HryPAUz_ECh9pBoo/s1600/arrow_up.png) repeat-x scroll 0 0;
 position: absolute;
 top: 12px;
 right: 10px;
}
.dropmenu li  a:hover span{
 background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlvN_dRiEPheWi9gJn5Tp3WfOYWuSQoFL17__53AH6mZVShsNu9AS6PM07S02w5-546fcFnE4bbbQFMk2QpoFDklFInRDxJFNvzLNPuCds4BPrQa1j8NB5px4qpnKHdm1yvV-0O8Qx6ro/s1600/arrow_hover.png) repeat-x scroll 0 0;
}
.dropmenu li:hover ul, .dropmenu li:hover div{
 display: block;
}
.dropmenu ul{
 position: absolute;
 display: none;
 width: 140px;
 padding: 0px;
 margin: 0px;
 border-bottom: 1px solid #ccc;
 background: #FFFFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDkANREGt_Ll7diRwwbCWOHxVeOhUeJRVj9UstA_KSeR9gW1aNIjNOCs4y0UtlpUZaP3QxHWeJF-Gmci9-wfRcXQBt8hju6dAq9dhGtc523byWaJRiVbzkiSr4MP5aCjYVgx7WOpznSx4/s1600/gradient.png) repeat-x scroll 0 0;
}
.dropmenu ul li{
 border: 0;
 float: none;
}
.dropmenu ul a {
  border: 1px solid #ccc;
  border-bottom: 0;
  white-space: nowrap;
  display:block;
  color: #0657AD;
  text-decoration: underline;
  text-transform: none;
}
a.selected, a:hover{
 color: #0657AD !important;
 background: #FFFFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDkANREGt_Ll7diRwwbCWOHxVeOhUeJRVj9UstA_KSeR9gW1aNIjNOCs4y0UtlpUZaP3QxHWeJF-Gmci9-wfRcXQBt8hju6dAq9dhGtc523byWaJRiVbzkiSr4MP5aCjYVgx7WOpznSx4/s1600/gradient.png) repeat-x scroll 0 0;
}
a.selected span{
 background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlvN_dRiEPheWi9gJn5Tp3WfOYWuSQoFL17__53AH6mZVShsNu9AS6PM07S02w5-546fcFnE4bbbQFMk2QpoFDklFInRDxJFNvzLNPuCds4BPrQa1j8NB5px4qpnKHdm1yvV-0O8Qx6ro/s1600/arrow_hover.png) repeat-x scroll 0 0;
}
.dropmenu ul a:hover {
 color:#F67A00 !important;
 text-decoration: none;
 background-color: #F0F0F0;
 background-image: none;
}
.dropmenu div ul{
 position: relative;
 display: block;
}
.dropmenu li div{
 background: #FFFFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDkANREGt_Ll7diRwwbCWOHxVeOhUeJRVj9UstA_KSeR9gW1aNIjNOCs4y0UtlpUZaP3QxHWeJF-Gmci9-wfRcXQBt8hju6dAq9dhGtc523byWaJRiVbzkiSr4MP5aCjYVgx7WOpznSx4/s1600/gradient.png) repeat-x scroll 0 0;
 border: 1px solid #ccc;
 padding: 5px;
 display: none;
 position: absolute;
}
.dropmenu li div ul{
 border: none;
 background: none;
 position: relative !important;
}
.dropmenu li div a{
 border: none;
 border-bottom: 1px solid #ccc;
}
.dropmenu li div div{
 display: block;
 position: relative;
 background: none;
 border: none;
}
.dropmenu li div div a{
 display: inline;
 border: none;
 color: #666;
 text-decoration: underline;
 padding: 0px;
 margin: 0px;
 text-transform: none;
}
.dropmenu li div div a:hover{
 color: #000;
 text-decoration: none;
}
ul.left{
 float: left;
 width: 145px;
}
ul.right{
 float: right;
 width: 145px;
}
.small{
 color: #666;
 font-size: 10px;
 padding: 10px 5px 8px 5px !important;
 display: block;
 clear: both;
}
.products{
 width: 300px;
 padding: 15px !important;
}
.products ul{
 width: 100%;
}
.products ul li{
 border-bottom: 1px solid #ccc;
 height: 40px;
 padding: 10px 0px;
}
.products h2{
 font-size: 16px;
 padding: 2px 0px 3px 0px;
 margin: 0px;
}
.products p{
 color: #666;
 font-size: 10px;
 padding: 0px;
 margin: 0px;
}
.products img{
 float: left;
 padding-right: 10px;
}
.products  ul li a{
 display: inline;
 border: none;
 color: #666;
 text-decoration: underline;
 padding: 0px;
 margin: 0px;
 text-transform: none;
}
.products  ul li  a:hover{
 color: #000 !important;
 text-decoration: none;
 background: none !important;
}
.tutorials{
 width: 300px;
}

input{
 border:1px solid #4A779D;
 padding: 3px 8px;
 margin-bottom: 8px;
 width: 164px;
}
label{
 padding: 0px 0px 4px 0px;
 display:block;
}
button{
 background: #4A779D url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9w5zUG7Gc_7ruENI5A1g3roqsa2L0aJqhUVMRHjqYIaCPzPknIMAfM8Lw6jb_Oo3TUVhcJxRht264YHu05nZbpVTFhiNEcTw7-0uZp5CgILD07paZJ_zz1ClFxVkrzHwOPvMyO4s47CQ/s1600/navigation.png) repeat-x scroll 0 0;
 color: #FFF;
 border:1px solid #4A779D;
 padding: 4px 10px;
 width: 180px;
}
.emailupdatesform{margin: 10px 0 5px 5px; width: 180px; float: left;}
.emailupdatesform input.emailupdatesinput{background: #fff !important; float: left; border: 1px solid #d2d2d2; padding: 0px 8px 0px 8px; color: #a19999; font-size: 12px; height: 25px; width: 160px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;}
.emailupdatesform input.joinemailupdates{background:-moz-linear-gradient(top,#57ABFE 0%,#0080ff 100%); background:-webkit-gradient(linear,left top,left bottom,from(#57ABFE),to(#0080ff)); border: 1px solid #0080ff; text-transform: none; font:bold 12px arial; color: #fff; height: 25px; padding: 0 12px 0 12px; margin: 0 0 0 5px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; cursor:pointer;}
Setelah terpasang silahkan di save dulu
Kemudian cari kembali kode </head> dengan menggunakan Ctrl + F seperti diatas.
Setelah ketemu dilahkan pasang kode berikut ini tepat diatas kode </head> :
<script type="text/javascript" src="http://mybloggerlab.com/Scripts/jquery.js"></script>
<script type="text/javascript" src="http://mybloggerlab.com/Scripts/dropdown.js"></script>
<script>
$(document).ready(function(){
 $("#nav-one").dropmenu();
});
</script>
Kemudian cari kode  <div id='header-wrapper'> dengan menggunakan Ctrl + F
Pasang kode berikut tepat tiatas kode <div id='header-wrapper'> :
<ul id="nav-one" class="dropmenu">
<li>
    <a href="#">Home</a> </li><li>
    <a href="#">Forum</a><ul>
        <li><a href="#">Support</a></li>
 <li><a href="#">Help</a></li>
 <li><a href="#">Examples</a></li>
 <li><a href="#">Your work</a></li>
</ul>
</li>
<li>
    <a href="#item3">Downloads</a><ul>
       <li><a href="#">Tools</a></li>
       <li><a href="#">Office</a></li>
       <li><a href="#">Custom projects</a></li>
</ul>
</li>
<li>
 <a href="#">Products</a>
 <div class="products">
<ul>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOwuc-539Axb1rvN1ms8Vwtn7W3TfaeeVhPlesO7NTemWZWz47peHoTzeALyb4HzHTaUhesdArtPAcNXrVL2hfhYFcksfcZdCmBCwyodEsVpt6T-3TQ6yl_0XHx6MkC3RpaR76vhkV6QI/s1600/1.jpg" width="40" height="40" alt="Thumb" border="0" /><h2>Featured Box</h2><p><a href="#">More information about this product</a></p></li>

<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUqYOUoDarpqoyjp4hXQsrch8AkunI72Y9uSmHwIXYUVgJ4iOjxOAFmp-N2r3U2nDkmUpjP26NNh8ZDZdIrTMT2krK6sU13XhmgYJmyPNVBSLR2hDFtHQXKJOjeop3wJvskkacbHRdu_o/s1600/2.jpg" width="40" height="40" alt="Thumb" border="0" /><h2>Mod Rewriter</h2><p><a href="#">More information about this product</a></p></li>

<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA5e2wwPCRW2iMm1kzx10-d-cMhXXcYWm4RLDdl-pt3RavuY2_AsJmmfMX4tyIZR4NxHhhv4c_bE3iDTCP5JMA1Lcjo6y3qv2U1ms8jURMz9sy2q1igub8jomuBPxtXwz5KntYS2N9nMc/s1600/3.jpg" width="40" height="40" alt="Thumb" border="0" /><h2>Byte Scrambler</h2><p><a href="#">More information about this product</a></p></li>

<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA5e2wwPCRW2iMm1kzx10-d-cMhXXcYWm4RLDdl-pt3RavuY2_AsJmmfMX4tyIZR4NxHhhv4c_bE3iDTCP5JMA1Lcjo6y3qv2U1ms8jURMz9sy2q1igub8jomuBPxtXwz5KntYS2N9nMc/s1600/3.jpg" width="40" height="40" alt="Thumb" border="0" /><h2>Image Processor</h2><p><a href="#">More information about this product</a></p></li>

<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUkl-p8LFcr_G00TeaDxSysyyCf6m9vQIdMD4NPoInH3cNXaymBHheCIP1qFTduDjWd93VvQDnHERMZfNFwVjjUQBSCdrpgBrBbkcOGofnw3UwsAgk677SqYvt56zWIDnj4huxT0S81kU/s1600/5.jpg" width="40" height="40" alt="Thumb" border="0" /><h2>Registry Class</h2><p><a href="#">More information about this product</a></p></li>

<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw8J0vXi1o9D-nDpiNYQm5F00_-w6Eo-B1c8ZDEemj6D0jlU9PZQHBNpF40sx4YNcXTS_aoPss96RTPsZVMQQd5cGL-4WaacVWkNBE5RZkJ3bp6lwuIwSJPaJjDjTP8vfieW2BjsUK8Dc/s1600/6.jpg" width="40" height="40" alt="Thumb" border="0" /><h2>Data Validation</h2><p><a href="#">More information about this product</a></p></li>

<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0MT13dPyl1CD0B5IlKkoZV5qmcXrRi30QiK3JnwBBSdvJy_7izyR7TksP_XP9COGLQZvsN0E1MQHLpp1-_0zPAmPYdT-9L9PU84RqQhP6RoeTM4PhMPTOUfSODni4mEJ-n3V9PCZGERc/s1600/7.jpg" width="40" height="40" alt="Thumb" border="0" /><h2>Ajax Tables</h2><p><a href="#">More information about this product</a></p></li>
</ul>
<div class="small">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident.</div>
</div>
</li>
<li>
 <a href="#">Tutorials</a>
 <div class="tutorials">
 <ul class="left">
    <li><a href="#">Javascript</a></li>
    <li><a href="#">Python</a></li>
    <li><a href="#">PHP</a></li>
</ul>
 <ul class="right">
    <li><a href="#">HTML/CSS</a></li>
    <li><a href="#">ASP.NET</a></li>
    <li><a href="#">Actionscript</a></li>
</ul>
   
 <div class="small">View <a href="#">all categories</a> or a <a href="#">list of the best tutorials</a>.</div>
</div>
</li>
<li>
 <a href="#">Links</a> <ul>
    <li><a href="#">Programming</a></li>
    <li><a href="#">Inspiration</a></li>
    <li><a href="#">My websites</a></li>
    <li><a href="#">Clients</a></li>
    <li><a href="#">Cool stuff</a></li>
    <li><a href="#">Sitebase</a></li>
    <li><a href="#">Other</a></li>
</ul>
</li>
<li>
 <a href="#">Subscribe Now</a>
 <div class="emailsub">
        <div class="emailupdatesform">
        <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=NAMABLOGANDA', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="emailupdatesinput" name="email" value="Enter your email here..." onblur="if (this.value == &#39;&#39;) {this.value = &#39;Enter your email here...&#39;;}" onfocus="if (this.value == &#39;Enter your email here...&#39;) {this.value = &#39;&#39;;}" type="text" /><input value="tntbystc" name="uri" type="hidden" /><input value="Submit" class="joinemailupdates" type="submit" /></form></div></div>
</li>  
</ul> 
·         Setelah langkah diatas selesai, anda bisa mengubah link dan nama menu pada kode berwarna merah diatas.
·         Kemudian silahkan di save semua pengaturan anda.
 Demikianlah penjelasan saya tentang cara membuat menu dropdown versi ke-1


Komentar

Posting Komentar

Postingan populer dari blog ini

Software Pendukung Web Dinamis

Software Pendukung Web Dinamis : 1.       Web server                              : apache, IIS 2.       Database server                       : Mysql, Postgre, Sql Server 3.       Web editor                              : notepad, Dreamweaver 4.       Image Editor                           : Corel, Photoshop 5.       Animate Editor...
1 komentar
Baca selengkapnya

install driver GPU

Detail langkah mulai dari step 4 dalam clean install driver GPU : 4.b. Detail dari step 4 pada uninstall driver GPU dibedakan antara AMD dan Nvidia : AMD Catalyst : Buka control panel –> pilih program and features –> pilih AMD/ATI Catalyst Install Manager –> pilih change klik next seperti pada gambar dibawah ini select express uninstall all ATI software ikuti prosesnya sampai selesai User account control akan meminta gamers untuk allow dari perintah eksekusi dari uninstall driver, maka proses uninstall akan dilakukan . Setelah proses selesai maka akan muncul tampilan seperti dibawah ini, gamers akan diminta restart, silahkan lakukan restart dan lanjutkan ke step 5. Nvidia Forceware : Buka control panel –> pilih program and features –> Nvidia Force (version) –> pilih Uninstall akan muncul gambar seperti dibawah ini Setelah  pemmZHolics pilih uninstall maka proses nya akan berjalan lalu akan diminta Restart Proses Unin...
Posting Komentar
Baca selengkapnya

Aktivasi Corel Draw X4 dengan Crack

Aktivasi Corel Draw X4 dengan Crack Bagi teman yang punya Applikasi Corel Draw, dan tidak bisa dibuka karena teman tidak punya Serial number.. silahkan Baca ya di Blog saya :D .. Banyak sekali orang yang membicarakan tentang hal ini.. (Crack Corel Draw mana sih? gimana?) begitu mereka mengetahuinya, mereka langsung sedot dari Internet dan Menerapkannya di Komputer / Laptop Sendiri :D.. Baiklah, sekarang saya ingin memberi tahu akan cara menggunakan Crack pada Corel Draw X4  :) Disabled Alat dan Bahan : Crack PSIKey_2.dll Cara Kerja: 1. Install Corel Draw X4 2. Usahakan jangan mengisi lisensi kode / kode apapun 3. Ketika anda telah Menyelesaikan proses Installasi, pergi ke direktori berikut: <Drive_Patch>\Program Files\Corel\CorelDRAW Graphics Suite X4\Programs 4. Pindahkan File Crack kedalam Direktori diatas dan pilih "Replace". 5. Jalankan Program Corel Draw X4 6. Enjoy B) jika corel draw tersebut tidak dapat Save,Export,Import,Cut,Copy,...
2 komentar
Baca selengkapnya