Sitebase Mega Drop Menu pada Blogger Template ( Create Setting Mega Menu to Blogger )

Menu DownDengan 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!

Featur :

  • 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
Untuk melihat penerapan pada Blogger Template silahkan lihat Live Demo Sitebase Mega Drop Menu to Blogger Template sedangkan untuk cara penerapan Sitebase Mega Drop Menu pada template blogger silahkan Login Blogger → Template Blogger → Simpan Template → edit HTML kemudian ikuti langkah sebagai berikut :
01
Masukkan kode di bawah ini diatas kode <b:skin> atau diatas </head>
<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 type='text/javascript'>
$(document).ready(function(){
$(&quot;#nav-one&quot;).dropmenu();
});
</script>
02
Masukkan kode CSS dibawah ini pada template blogger yang akan dipasang Sitebase Mega Drop Menu, yang letaknya diatas <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; 
}
#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; 
}
#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;
}
03
Tambahkan kode HTML dibawah ini pada bagian <body> atau sesuai dengan kebutuhan dan penempatan yang diinginkan.
<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>
Keterangan : Kode HTML yang terdapat pada langkah Nomor 3 masukkan Template Blogger sesuai yang dikehendaki tetapi lebih baik penempatan Mega Drop Down Menus pada Header Template.
Referensi Artikel :

Terdapat 21 komentar pada " Sitebase Mega Drop Menu pada Blogger Template ( Create Setting Mega Menu to Blogger ) ".

  1. sudah saya praktekkan om.. n suksess..

    BalasHapus
  2. Mas admin, salam kenal sebelumnya. Boleh tanya, dimana sich dapat template stylebloggertemplate ini? Apakah mas, bikin sendiri? Mohon dibalas ya, thanks

    BalasHapus
  3. @ Anonim : Maaf kiranya kurang jelas,.
    @ Harapan Putra : Terimakasih sudah berkunjung di blog saya, salam hormat saya,.
    @ Belajar SEO : Saya menggunakan template Wordpress jika berkenan silahkan kunjungi blog worpressnya di http://opf.presswordthemes.com/

    BalasHapus
  4. makssud saya yg utk blogger seperti ini, bukan yg wp mas

    BalasHapus
  5. @ belajar seo blogspot : Maksudnya bahwa Admin Style Blogger Template merubah Wordpress menjadi template blogger, dan jika berkenan dipersilahkan kunjungi blog worpress aslinya di http://opf.presswordthemes.com/

    BalasHapus
  6. Cara membuat Tab Tutorials di Drop Down Menu menjadi 5 kolom, gimana?

    BalasHapus
  7. aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

    BalasHapus
  8. Hello there, You have done a fantastic job. I will definitely digg it and personally suggest to my friends.

    I'm confident they'll be benefited from this site.


    Also visit my blog post: how to get your ex back fast

    BalasHapus
  9. Hello, i read your blog from time to time and i own a similar one
    and i was just curious if you get a lot of
    spam comments? If so how do you protect against it, any plugin or anything you can recommend?
    I get so much lately it's driving me crazy so any support is very much appreciated.

    my web page how to get your ex girlfriend back

    BalasHapus
  10. I loved as much as you'll receive carried out right here. The sketch is tasteful, your authored material stylish. nonetheless, you command get bought an impatience over that you wish be delivering the following. unwell unquestionably come more formerly again since exactly the same nearly a lot often inside case you shield this hike.

    My web-site: agoda reviews

    BalasHapus
  11. Magnificent beat ! I would like to apprentice while you amend your website, how could i subscribe for a blog web site?
    The account helped me a acceptable deal. I had been tiny bit acquainted of
    this your broadcast offered bright clear idea

    Feel free to visit my webpage microvoice.hopto.org

    BalasHapus
  12. I believe everything posted made a ton of sense. But, think about this, what if you were to create a killer title?
    I am not saying your content isn't solid., but suppose you added a title to maybe grab a person's attention?
    I mean "Cara membuat , cara mengedit, cara setting dan cara menerapkan Sitebase Mega Drop Menu pada Blogger Template ( Create Setting Mega Menu to Blogger )" is kinda plain.
    You could look at Yahoo's front page and see how they create news headlines to get viewers to open the links. You might add a related video or a related picture or two to grab readers excited about what you've written.
    Just my opinion, it might make your blog a little bit more interesting.


    Look into my page; http://www.uss-trinity.de/

    BalasHapus
  13. I'm gone to tell my little brother, that he should also visit this website on regular basis to obtain updated from latest gossip.

    My blog post; ozcos.com

    BalasHapus
  14. What's up it's me, I am also visiting this website on a regular basis,
    this website is actually nice and the viewers are genuinely
    sharing nice thoughts.

    Also visit my website; how to get guys to like you

    BalasHapus
  15. I all the time used to read paragraph in news papers but
    now as I am a user of web so from now I am using net
    for articles or reviews, thanks to web.

    my website :: how to make a guy fall in love with you

    BalasHapus
  16. Aw, this was an exceptionally good post. Spending some time and actual effort to produce a really good article… but what
    can I say… I procrastinate a lot and don't seem to get nearly anything done.

    My web page - airbnb taxes

    BalasHapus
  17. Unquestionably imagine that that you said.

    Your favorite justification appeared to be at the web the simplest
    thing to remember of. I say to you, I definitely get annoyed whilst other people think about
    worries that they just do not recognise about.
    You controlled to hit the nail upon the top and outlined out the entire thing without
    having side effect , folks could take a signal. Will probably
    be back to get more. Thank you

    Also visit my weblog ... www.attorneynrg.com

    BalasHapus
  18. What's up it's me, I am also visiting this web page daily, this web page
    is actually good and the people are truly sharing fastidious thoughts.



    Feel free to surf to my blog; anti cellulite

    BalasHapus
  19. Komentar ini telah dihapus oleh administrator blog.

    BalasHapus

Silahkan tulis komentar.

Comments

Sahabat Blogger

Google Plus

Copyright © 2010 Style Blogger Template. All Rights Reserved.
Download Remove