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

Sejarah PHP ( Personal Home Page Tools )

PHP adalah teknologi yang diperkenalkan tahun 1994 oleh Rasmus Lerdorf. Beberapa versi awal yang tidak dipublikasikan digunakan pada situs pribadinya untuk mencatat siapa saja yang mengakses daftar riwayat hidup onlinennya. Versi pertama digunakan oleh pihak lain pada awal tahun 1995 dan dikenal sebagai Personal Home Page Tools. Terkandung didalamnya sebuah parser engine (mesin pengurai) yang sangat disederhanakan, yang hanya mampu mengolah macro khusus dan beberapa utilitas yang sering digunakan pada pembuatan home page,seperti buku tamu, pencacah, dan hal semacamnya. Parser tersebut ditulis ulang pada pertengahan 1995 dan dinamakan PHP/FI Versiaon 2. FI(Form Interprenter) sendiri berasal dari kode lain yang ditulis juga oleh Rasmus, yang menterjemahkan HTML dari data. Ia menggabungkan script Personal Home Page Tools dengan Form Interprenter dan menambahkan dukungan terhadap server database yang menggunakan format mSQL sehingga lahirlah PHP/FI. PHP/FI tumbuh dengan pesat, dan oran...
Posting Komentar
Baca selengkapnya

110 Misteri Di GTA SAN

1. Ghost Car Ini adalah suatu mobil yang bisa berjalan sendiri. Dengan ciri - ciri rusak seperti sehabis tabrakan. Bila anda ingin menemukan ada di Back O'Beyond atau Shady's Creek. 2. The Leaterface Hati - hati bila ada orang yang membawa gergaji dan bertopeng kulit, itu adalah The Leaterface. Tempatnya adalah di hutan yaitu Shady's Creek. 3. Ghost Vortex Itu adalah Vortex yang bisa berjalan sendiri. Ini tidak seperti ghost car yang rusak, tetapi ini tidak rusak dan tidak ada penumpang. Ini berada di Bayside Marina tepatnya ada di pojok kiri atas. 4. Suicidal Pendestrian Orang ini kelihatannya gila. Karena dia mencoba bunuh diri. Ceritanya orang ini pertama memotret sebuah laut dan akhirnya dia berjalan menuju laut setelah memotret. Orang ini berada di Flint County. 5. Big Foot Ini Big Foot berwarna hitam yang berjalan seperti manusia dan besar. Sayangnya, Big Foot ini jarang di temukan. Tetapi bila ingin menemukan datang saja di Back O'Beyond. ...
Posting Komentar
Baca selengkapnya

Cerpen " CAHAYA CINTA PESANTREN "

CAHAYA CINTA PESANTREN Dalam perasaan gundahnya kipli berlutu kepada Allah, memohon agar ia mendapat nilai maksimal. Jadi dirinya bisa masuk SMA Watu Gede. Sekolah yang ia dambakan. Sekolah ini merupakan sekolah favorit di kotanya, sehingga bila dia bisa masuk sekolah ini dia akan lebih mudah mendapatkan universitas favorit juga. Kipli optimis bisa masuk sekolah ini. Karena dia sangat rajim berdo’a kepada Allah.             “ Ya allah, Kipli mohon kepadamu supaya kipli mendapat nilai maksimal. Supaya, Kipli bisa masuk SMA Watu Gede. Ya Allah jika kau memang maha kaya maka kabulkanlah do’a kipli Ya Allah.” Setiap hari kipli selalu melanturkan mantranya ini. Seakan dirinya sangkat memaksa allah mengabulkan keinginannya itu. Kipli semakin rajin menyenandungkan Dzikir yang menenangkan hatinya. Sebab orang tuanya akan mengambil laporan hasil belajar Kipli. “Bagaimana umi? Pasti nilai – nilai kipli bagus-baguskan. Kipli mau lih...
Posting Komentar
Baca selengkapnya