Cara membuat , cara mengedit, cara setting dan cara menerapkan Sitebase Mega Drop Menu pada Blogger Template ( Create Setting Mega Menu to Blogger )

With this script you can make nice and interactive drop down menus. The advantage of this script is that it not only gives you the ability to make list drop down menu. You can also use a div as drop down element. This way you can create big drop down menus like under the buttons products and tutorials in the live preview. Or you can create a login panel in your drop down like I did in the live preview.

With this script you can make nice and interactive drop down menus. The advantage of this script is that it not only gives you the ability to make list drop down menu. You can also use a div as drop down element. This way you can create big drop down menus like under the buttons products and tutorials in the preview or you can create a login panel in your drop down!

Translate :

Dengan script ini Anda dapat membuat drop bagus dan interaktif down menu. Keuntungan dari script ini adalah bahwa ia tidak hanya memberikan Anda kemampuan untuk membuat drop down menu. Anda juga dapat menggunakan div sebagai drop-down elemen. Dengan cara ini Anda dapat membuat drop down menu besar seperti di bawah produk tombol dan tutorial di live preview. Atau Anda dapat membuat sebuah panel login di drop ke bawah seperti yang saya lakukan dalam pratayang langsung.

Dengan script ini Anda dapat membuat drop bagus dan interaktif down menu. Keuntungan dari script ini adalah bahwa ia tidak hanya memberikan Anda kemampuan untuk membuat drop down menu. Anda juga dapat menggunakan div sebagai drop-down elemen. This way you can create big drop down menus like under the buttons products and tutorials in the preview or you can create a login panel in your drop down! Dengan cara ini Anda dapat membuat drop down menu besar seperti di bawah produk tombol dan tutorial di preview atau Anda dapat membuat sebuah panel Anda login di drop down!

Features

• Create dropdown menus
• Horizontal and vertical menus
• Supports div dropdown
• 3 examples dropdown menus included
• 3 dropdown animations
• use different anim for open and close
• Graceful degradation
• Customizable through css
• Works in all browsers
• Custom animations
• Show on top of flash content

Demo Sitebase Mega Drop Menu to Blogger Template

Untuk menerapkan Sitebase Mega Drop Menu to Blogger Template silahkan ikuti langkah sebagai berikut :

1. Langkah 1 : Login Blogger -> Rancangan -> Rancangan -> Back Up template Anda.



2. Langkah 2 : Masukkan kode di bawah tepat di atas <b:skin> :
   
   <!-- Live Menu by Fianhar -->
<script src='http://reog.googlecode.com/files/jquery.js' type='text/javascript'/>
<script src='http://reog.googlecode.com/files/dropmenu.js' type='text/javascript'/>
<script>
$(document).ready(function(){
$(&quot;#nav-one&quot;).dropmenu();
});
</script>


3. Langkah 3 : Copy kode di bawah ini di atas kode ]]></b:skin>
   
   

/* Menu Live
----------------------------------------------- */
#Live ul, li{
padding: 0px;
margin: 0px;
}
#Live ul.dropmenu{
position: relative;
margin: 0px;
padding: 1px 0px 0px 0px;
background:transparent url(http://s3.envato.com/files/1075971/images/navigation.png) repeat-x scroll 0 0;
display:block;
height: 35px;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size: 12px;
}
#Live .dropmenu li{
position: relative;
list-style: none;
float: left;
margin: 0px;
padding: 0px;
}
#Live .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;
}
#Live .dropmenu li span{
display: block;
float: right;
height: 10px;
width: 10px;
background:transparent url(http://s3.envato.com/files/1075971/images/arrow_up.png) repeat-x scroll 0 0;
position: absolute;
top: 12px;
right: 10px;
}

#Live .dropmenu li a:hover span{
background:transparent url(http://s3.envato.com/files/1075971/images/arrow_hover.png) repeat-x scroll 0 0;
}
#Live .dropmenu li:hover ul, .dropmenu li:hover div{
display: block;
}
#Live .dropmenu ul{
position: absolute;
display: none;
width: 140px;
padding: 0px;
margin: 0px;
border-bottom: 1px solid #ccc;
background: #FFFFFF url(http://s3.envato.com/files/1075971/images/gradient.png) repeat-x scroll 0 0;
}
#Live .dropmenu ul li{
border: 0;
float: none;
}
#Live .dropmenu ul a {
border: 1px solid #ccc;
border-bottom: 0;
white-space: nowrap;
display:block;
color: #0657AD;
text-transform: none;
}

.dropmenu a.selected, .dropmenu a:hover{
color: #0657AD !important;
background: #FFFFFF url(http://s3.envato.com/files/1075971/images/gradient.png) repeat-x scroll 0 0;
}

#Live a.selected span{
background:transparent url(http://s3.envato.com/files/1075971/images/arrow_hover.png) repeat-x scroll 0 0;
}

#Live .dropmenu ul a:hover {
color:#F67A00 !important;
text-decoration: none;
background-color: #F0F0F0;
background-image: none;
}
#Live .dropmenu div ul{
position: relative;
display: block;
}

#Live .dropmenu li div{

background: #FFFFFF url(http://s3.envato.com/files/1075971/images/gradient.png) repeat-x scroll 0 0;

border: 1px solid #ccc;

padding: 5px;

display: none;

position: absolute;

}

#Live .dropmenu li div ul{

border: none;

background: none;

position: relative !important;

}

#Live .dropmenu li div a{

border: none;

border-bottom: 1px solid #ccc;

}



#Live .dropmenu li div div{

display: block;

position: relative;

background: none;

border: none;

}



#Live .dropmenu li div div a{

display: inline;

border: none;

color: #0657AD;

padding: 0px;

margin: 0px;

text-transform: none; /*

text-decoration: underline; */

}

#Live .dropmenu li div div a:hover{

color: #F67A00;

text-decoration: none;

border-bottom: 1px dashed #000;

}



#Live ul.left{

float: left;

width: 145px;

}

#Live ul.right{

float: right;

width: 145px;

}

#Live .small{

color: #666;

font-size: 11px;

padding: 10px 5px 8px 5px !important;

display: block;

clear: both;

}

#Live .products{

width: 300px;

padding: 15px !important;

}

#Live .products ul{

width: 100%;

}

#Live .products ul li{

border-bottom: 1px solid #ccc;

height: 40px;

padding: 10px 0px;

}

#Live .products h2{

font-size: 16px;

padding: 2px 0px 3px 0px;

margin: 0px;

}

#Live .products p{

color: #666;

font-size: 10px;

padding: 0px;

margin: 0px;

}

#Live .products img{

float: left;

padding-right: 10px;

}

#Live .products ul li a{

display: inline;

border: none;

color: #666;

padding: 0px;

margin: 0px;

text-transform: none; /*

text-decoration: underline; */

}

#Live .products ul li a:hover{

color: #000 !important;

text-decoration: none;

background: none !important;

border-bottom: 1px dashed #000;

}



#Live .tutorials{

width: 300px;

}



#Live .profile{

width: 300px;

padding: 15px !important;

}



#Live .profile ul{

width: 100%;

}

#Live .profile ul li{

border-bottom: 1px solid #ccc;

height: 40px;

padding: 10px 0px;

}

#Live .profile h2{

font-size: 16px;

padding: 2px 0px 3px 0px;

margin: 0px;

}

#Live .profile p{

color: #666;

font-size: 10px;

padding: 0px;

margin-left: 120px;

}

#Live .profile img{

float: left;

padding-right: 10px;

border: 1px solid rgb(226, 226, 226);

width: 100px;

height: 100px;

padding: 5px;

margin-top: 17px;

margin-right: 10px;

}



#Live .profile a:hover {

background:none;

}

#Live .login{

padding: 15px !important;

width: 180px;

}

#Live input{

border:1px solid #4A779D;

padding: 3px 8px;

margin-bottom: 8px;

width: 164px;

}

#Live label{

padding: 0px 0px 4px 0px;

display:block;

}

#Live button{

background: #4A779D url(http://s3.envato.com/files/1075971/images/navigation.png) repeat-x scroll 0 0;

color: #FFF;

border:1px solid #4A779D;

padding: 4px 10px;

width: 180px;

}


4. Langkah 4 : Tambahkan kode dibawah ini pada bagian Header Blog atau pada bagian <body> atau jika template masih setandar letakkan pada bagian <div id='outer-wrapper'> :<div id='Live'>

<ul class='dropmenu' id='nav-one'>

<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='#'>Services</a>

<div class='products'>



<ul>

<li><img alt='Thumb' border='0' height='40' src='https://lh3.googleusercontent.com/_HR8egC6j8tg/TaO0_4J88II/AAAAAAAAAWQ/jXzJP5JiRr4/design.png' width='40'/><h2>Design Template</h2><p><a href='#'>Desig Template Blogger</a></p></li>

<li><img alt='Thumb' border='0' height='40' src='https://lh4.googleusercontent.com/_HR8egC6j8tg/TaO1GgOaqvI/AAAAAAAAAWU/9Gy6ImALKXk/gallery.png' width='40'/><h2>Gallery Blogger</h2><p><a href='#'>View and Download Template</a></p></li>

<li><img alt='Thumb' border='0' height='40' src='https://lh6.googleusercontent.com/_HR8egC6j8tg/TaO1MROxsBI/AAAAAAAAAWY/d6UthoqsB0I/help.png' width='40'/><h2>Blogger Help</h2><p><a href='#'>Can Help Blog Problem</a></p></li>

<li><img alt='Thumb' border='0' height='40' src='https://lh4.googleusercontent.com/_HR8egC6j8tg/TaO1T5uh_VI/AAAAAAAAAWc/SrFLXC-dwPM/safety.png' width='40'/><h2>Blogger Safety</h2><p><a href='#'>Safety Blogger Template</a></p></li>

</ul>



<div class='small'>Style Blogger Template hanya sebuah catatan kecil dari seorang Blogger Indonesia, blog ini berisi tentang Tip Trik Blogger Template, Kumpulan Artikel Blogger, Gallery Style Template Blogger, CSS, HTML, New Template Blogger, New Article Blogger, Free Blogger Template, Elegant Style Blogger Template, dan Blogger Indonesia.</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='#'>Profile</a>

<div class='profile'>





<div class='small'>

<a href='http://www.facebook.com/fianhar' target='_blank'><img src='https://lh3.googleusercontent.com/_HR8egC6j8tg/TYIGkw5J-2I/AAAAAAAAAVw/XrtCnnTwQQk/aha.jpg'/></a>



<p style='text-align: justify;'>Saya adalah <a href='http://fianhar.blogspot.com' target='_blank'>Fianhar</a>, berasal dan dibesarkan di <a href='http://id.wikipedia.org/wiki/Kabupaten_Ponorogo' target='_blank'>Kota Reog Ponorogo</a> Indonesia. Sekarang tinggal di <a href='http://id.wikipedia.org/wiki/Jakarta' target='_blank'>Kota Jakarta</a> dan bekerja di Institusi Penegak Hukum. Photografi dan Web Design hanya sebuah hobby.</p>



<p style='text-align: justify'>Hukum, Web design, dan fotografi adalah merupakan suatu seni yang menghasilkan keindahan jika berjalan seimbang.

</p>

</div>

</div>

</li>



<li>

<a href='#'>Login</a>

<div class='login'>

<label for='txtuser'>Username: </label>

<input id='txtuser' name='txtuser' type='text'/>

<label for='txtuser'>Password: </label>

<input id='txtpass' name='txtpass' type='password'/>

<button>Login</button>



</div>

</li>

</ul>

</div>

Keterangan :

Kode yang terdapat pada langkah ke-4 masukkan pada HTML Blogger Template Anda, tetapi lebih baik penempatan Mega Drop Down Menus pada Header Template.

Referensi Artikel :

• Drop Menu by Sitebase.

  Link : http://codecanyon.net/item/drop-menu/81289?ref=1stwebdesigner

• 38 jQuery And CSS Drop Down Multi Level Menu Solutions.

  Link : http://www.1stwebdesigner.com/css/38-jquery-and-css-drop-down-multi-level-menu-solutions/