Media informasi Entertainment, Tutorial Blogger, Blogger Template, Fakta Unik, Teknologi, And More

Search This Blog

Cara Membuat Mega Drop Down di Blogger

Mega Drop Down
Cara Membuat Mega Drop Down di Blogger - Kali ini kita akan membuat Mega Drop Down atau Menu Mega DropDown di Blogger, Saat ini sudah banyak website yang menggunakan Mega Drop Down ini seperti Website-website di Indonesia layaknya Kapanlagi.com, Okezone.com, DLL,

Lebih baik kita lihat Demo nya terlebih dahulu :


Cara Menerapkan Mega Drop Down di Blogger


Caranya tidak terlalu sulit, silahkan sobat mengikuti langkah-langkah dibawah ini :

1. Nah, untuk tahap 1. ini bisa sobat gunakan Add Gadget > Text/Javascript, atau bisa juga masukan dalam template, sobat hanya tinggal pilih dimana peletakannya bisa dibawah Header, diatas Header, atau dimana saja, semua terserah sobat, tapi ditutorial ini saya akan memberitahukan untuk meletakan di bawah Header.

2. Masuk ke Template > Edit HTML, Cari kode seperti yang dibawah ini :

<div id='header-wrapper'>

bla..bla..blaa...

</div>

"Pasang kode disini"


3. Lalu letakan kode dibawah ini, tepat dibawah kode diatas tadi .

<style> ul.ldd_menu {
margin: 0px;
padding: 0;
display: block;
height: 50px;
background-color: #D04528;
list-style: none;
font-family: "Trebuchet MS", sans-serif;
border-top: 1px solid #EF593B;
border-bottom: 1px solid #EF593B;
border-left: 10px solid #D04528;
-moz-box-shadow: 0px 3px 4px #591E12;
-webkit-box-shadow: 0px 3px 4px #591E12;
-box-shadow: 0px 3px 4px #591E12;
}

ul.ldd_menu a {
text-decoration: none;
}

ul.ldd_menu > li {
float: left;
position: relative;
}

ul.ldd_menu > li > span {
float: left;
color: #fff;
background-color: #D04528;
height: 50px;
line-height: 50px;
cursor: default;
padding: 0px 20px;
text-shadow: 0px 0px 1px #fff;
border-right: 1px solid #DF7B61;
border-left: 1px solid #C44D37;
}

ul.ldd_menu .ldd_submenu {
position: absolute;
top: 50px;
width: 550px;
display: none;
opacity: 0.95;
left: 0px;
font-size: 10px;
background: #C34328;
border-top: 1px solid #EF593B;
-moz-box-shadow: 0px 3px 4px #591E12 inset;
-webkit-box-shadow: 0px 3px 4px #591E12 inset;
-box-shadow: 0px 3px 4px #591E12 inset;
}

a.ldd_subfoot {
background-color: #f0f0f0;
color: #444;
display: block;
clear: both;
padding: 15px 20px;
text-transform: uppercase;
font-family: Arial, serif;
font-size: 12px;
text-shadow: 0px 0px 1px #fff;
-moz-box-shadow: 0px 0px 2px #777 inset;
-webkit-box-shadow: 0px 0px 2px #777 inset;
-box-shadow: 0px 0px 2px #777 inset;
}

ul.ldd_menu ul {
list-style: none;
float: left;
border-left: 1px solid #DF7B61;
margin: 20px 0px 10px 30px;
padding: 10px;
}

li.ldd_heading {
font-family: Georgia, serif;
font-size: 13px;
font-style: italic;
color: #FFB39F;
text-shadow: 0px 0px 1px #B03E23;
padding: 0px 0px 10px 0px;
}

ul.ldd_menu ul li a {
font-family: Arial, serif;
font-size: 10px;
line-height: 20px;
color: #fff;
padding: 1px 3px;
}

ul.ldd_menu ul li a:hover {
-moz-box-shadow: 0px 0px 2px #333;
-webkit-box-shadow: 0px 0px 2px #333;
box-shadow: 0px 0px 2px #333;
background: #AF412B;
} </style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
/**
* the menu
*/
var $menu = $('#ldd_menu');

/**
* for each list element,
* we show the submenu when hovering and
* expand the span element (title) to 510px
*/
$menu.children('li').each(function () {
var $this = $(this);
var $span = $this.children('span');
$span.data('width', $span.width());

$this.bind('mouseenter', function () {
$menu.find('.ldd_submenu').stop(true, true).hide();
$span.stop().animate({
'width': '510px'
}, 300, function () {
$this.find('.ldd_submenu').slideDown(300);
});
}).bind('mouseleave', function () {
$this.find('.ldd_submenu').stop(true, true).hide();
$span.stop().animate({
'width': $span.data('width') + 'px'
}, 300);
});
});
});
</script>

<ul id="ldd_menu" class="ldd_menu">
<li>
<span>Vacations</span>
<!-- Increases to 510px in width-->
<div class="ldd_submenu">
<ul>
<li class="ldd_heading">By Location</li>
<li><a href="#">South America</a></li>
<li><a href="#">Antartica</a></li>
<li><a href="#">Africa</a></li>
<li><a href="#">Asia and Australia</a></li>
<li><a href="#">Europe</a></li>
</ul>
<ul>
<li class="ldd_heading">By Category</li>
<li><a href="#">Sun &amp; Beach</a></li>
<li><a href="#">Adventure</a></li>
<li><a href="#">Science &amp; Education</a></li>
<li><a href="#">Extreme Sports</a></li>
<li><a href="#">Relaxing</a></li>
<li><a href="#">Spa and Wellness</a></li>
</ul>
<ul>
<li class="ldd_heading">By Theme</li>
<li><a href="#">Paradise Islands</a></li>
<li><a href="#">Cruises &amp; Boat Trips</a></li>
<li><a href="#">Wild Animals &amp; Safaris</a></li>
<li><a href="#">Nature Pure</a></li>
<li><a href="#">Helping others &amp; For Hope</a></li>
<li><a href="#">Diving</a></li>
</ul>
<a class="ldd_subfoot" href="#"> + New Deals</a>
</div>
</li>
<li>
<span>Equipment</span>
<div class="ldd_submenu">
<ul>
<li class="ldd_heading">By Location</li>
<li><a href="#">South America</a></li>
<li><a href="#">Antartica</a></li>
<li><a href="#">Africa</a></li>
<li><a href="#">Asia and Australia</a></li>
<li><a href="#">Europe</a></li>
</ul>
<ul>
<li class="ldd_heading">By Category</li>
<li><a href="#">Sun &amp; Beach</a></li>
<li><a href="#">Adventure</a></li>
<li><a href="#">Science &amp; Education</a></li>
<li><a href="#">Extreme Sports</a></li>
<li><a href="#">Relaxing</a></li>
<li><a href="#">Spa and Wellness</a></li>
</ul>
<ul>
<li class="ldd_heading">By Theme</li>
<li><a href="#">Paradise Islands</a></li>
<li><a href="#">Cruises &amp; Boat Trips</a></li>
<li><a href="#">Wild Animals &amp; Safaris</a></li>
<li><a href="#">Nature Pure</a></li>
<li><a href="#">Helping others &amp; For Hope</a></li>
<li><a href="#">Diving</a></li>
</ul>
<a class="ldd_subfoot" href="#"> + New Deals</a>
</div>
</li>
<li>
<span>Locations</span>
<div class="ldd_submenu">
<ul>
<li class="ldd_heading">By Location</li>
<li><a href="#">South America</a></li>
<li><a href="#">Antartica</a></li>
<li><a href="#">Africa</a></li>
<li><a href="#">Asia and Australia</a></li>
<li><a href="#">Europe</a></li>
</ul>
<ul>
<li class="ldd_heading">By Category</li>
<li><a href="#">Sun &amp; Beach</a></li>
<li><a href="#">Adventure</a></li>
<li><a href="#">Science &amp; Education</a></li>
<li><a href="#">Extreme Sports</a></li>
<li><a href="#">Relaxing</a></li>
<li><a href="#">Spa and Wellness</a></li>
</ul>
<ul>
<li class="ldd_heading">By Theme</li>
<li><a href="#">Paradise Islands</a></li>
<li><a href="#">Cruises &amp; Boat Trips</a></li>
<li><a href="#">Wild Animals &amp; Safaris</a></li>
<li><a href="#">Nature Pure</a></li>
<li><a href="#">Helping others &amp; For Hope</a></li>
<li><a href="#">Diving</a></li>
</ul>
<a class="ldd_subfoot" href="#"> + New Deals</a>
</div>
</li>
</ul>

4. Lalu Simpan Template.

Mudah bukan sobat, itu saja tutorial saya hari ini, jika ada kesalahan tolong berikan komen dibawah ini, atas segala kekurangan saya ucapkan Maaf, Wassalam.
Ditulis oleh: Pada :
Label : Tutorial Blogger

Post a Comment