-->

Sitebase Mega Drop Menu pada Blogger Template

Sitebase Mega Drop Menu pada Blogger Template ( Create Setting Mega Menu to Blogger )
menu dropsite
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. 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!
Live Demo or View
Untuk penerapan Sitebase Mega Drop Menu pada template blogger silahkan ikuti langkah berikut :

Langkah Pertama → Masukkan kode di bawah ini diatas kode </head> :
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
<script src='https://cdn.staticaly.com/gh/dregd/js/69365a18/dropmenu.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(&quot;#nav-one&quot;).dropmenu();
});
</script>

Selanjutnya masukkan kode CSS dibawah ini pada template blogger yang akan dipasang Sitebase Mega Drop Menu, dengan cara letakkan kode dibawah ini 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;
}

Kemudian tambahkan kode HTML (HyperText Markup Language) dibawah ini pada bagian <body> atau sesuai dengan kebutuhan dan penempatan yang diinginkan, biasa pada bagian Header Template :
<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>

Referensi : Drop Menu by Sitebase

Anda mungkin menyukai postingan ini

24 komentar

  1. Anonim
    Tutorial Cara membuat , cara mengedit, cara setting dan cara menerapkan Sitebase Mega Drop Menu pada Blogger Template ( Create Setting Mega Menu to Blogger ) keren tapi perlu secara diteail karena saya kurang paham
  2. Harapan Putra
    sudah saya praktekkan om.. n suksess..
  3. belajar seo blogspot
    Mas admin, salam kenal sebelumnya. Boleh tanya, dimana sich dapat template stylebloggertemplate ini? Apakah mas, bikin sendiri? Mohon dibalas ya, thanks
  4. Manuk Merak
    @ 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/
  5. belajar seo blogspot
    makssud saya yg utk blogger seperti ini, bukan yg wp mas
  6. Anonim
    @ 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/
  7. demibara
    Cara membuat Tab Tutorials di Drop Down Menu menjadi 5 kolom, gimana?
  8. Manuk Merak
  9. Anonim
    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
  10. Anonim
    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
  11. Anonim
    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
  12. Anonim
    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
  13. Anonim
    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
  14. Anonim
    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/
  15. Anonim
    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
  16. Anonim
    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
  17. Anonim
    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
  18. Anonim
    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
  19. Anonim
    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
  20. Anonim
    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
  21. Anonim
    Komentar ini telah dihapus oleh administrator blog.
  22. AppJetty
    Hello, Its nice informative post, Thanks for sharing
    woocommerce australia post shipping plugin
  23. Admin iddev.website/
    apa ini tidak memberatkan loading blog gan?
  24. Membuat Blog
    Terimakasih, Sob! saya jadi mengurungkan niat mengganti template blog.

    Bintan News
  1. Untuk menyisipkan sebuah kode gunakan <i rel="pre">code_here</i>
  2. Untuk menyisipkan sebuah quote gunakan <b rel="quote">your_qoute</b>
  3. Untuk menyisipkan gambar gunakan <i rel="image">url_image_here</i>