Membuat Mega Dropdown Menu Pada Blog Dengan Css3

Diposting oleh Agung Selasa, 26 Januari 2016
Mega menu drop down adalah menu navigasi yang menggunakan perpaduan antara javascript dan jQuery sehingga menampilkan sebuah menu drop down yang mempunyai efek yang sangatlah mengagumkan.
Mega Menu Drop Down Menu For Blogger

(sorot pointer mouse ke menunya dan lihat efeknya)

Cara Memasang di Blog

  • Login ke Blogger » Template » Edit HTML » Proceed dan jangan lupa centang "Expand Template Widget"
  • Copy code di bawah ini dan pastekan tepat di atas kode ]]></b:skin>
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;
}
  • Lanjutkan dengan mencari tag <body> kemudian copy script & jQuery di bawah ini dan pastekan tepat di atas tag <body>
<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>
  • Langkah selanjutnya, cari kode seperti ini pada template :
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='(Header)' type='Header'/>
</b:section>
<b:section class='header' id='header2' maxwidgets='1' showaddelement='yes'/>
<div style='clear:both;'/>
</div><!-- end header-wrapper -->
  • Jika sudah ketemu, copy kode di bawah ini dan pastekan tepat di bawah kode di atas :
<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 & Beach</a></li>
   <li><a href="#">Adventure</a></li>
   <li><a href="#">Science & 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 & Boat Trips</a></li>
   <li><a href="#">Wild Animals & Safaris</a></li>
   <li><a href="#">Nature Pure</a></li>
   <li><a href="#">Helping others & 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 & Beach</a></li>
   <li><a href="#">Adventure</a></li>
   <li><a href="#">Science & 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 & Boat Trips</a></li>
   <li><a href="#">Wild Animals & Safaris</a></li>
   <li><a href="#">Nature Pure</a></li>
   <li><a href="#">Helping others & 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 & Beach</a></li>
   <li><a href="#">Adventure</a></li>
   <li><a href="#">Science & 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 & Boat Trips</a></li>
   <li><a href="#">Wild Animals & Safaris</a></li>
   <li><a href="#">Nature Pure</a></li>
   <li><a href="#">Helping others & For Hope</a></li>
   <li><a href="#">Diving</a></li>
  </ul>
  <a class="ldd_subfoot" href="#"> + New Deals</a>
 </div>
 </li>
</ul>
Keterangan :Tanda # (pagar) silahkan ganti dengan URL yang Anda inginkan
Tulisan yang saya tandai dengan warna Biru, silahkan ganti dengan kata-kata 
Anda
  • Sebelum mengklik save / simpan, baiknya pilih pratinjau dulu dan jika Anda merasa sudah pas, nah baru tekan save atau simpan.
Selengkapnya...
0 komentar

Cara menghilangkan Menu Navbar bawaan diblog

Diposting oleh Agung Rabu, 20 Januari 2016
Pada dasarnya sebuah blogspot memiliki navigasi menu default dari blogger.com bawaannya, namun tidak sedikit dari para blogger ada yang menghilangkan navbar tersebut. Bagaiman Cara untuk menghilangkannya? Blog Coretan UMUM kali ini akan menulis tentang cara menghilangkan menu navbar bawaan dari blogger.com, yang sifatnya dapat dikembalikan lagi kesemula. Jadi bukan untuk di hapus secara permanent. Semakin
manjunya tampilan dan templates dari masing-masing pengguna blogspot maka banyak juga para blogger yang menghilangkan navbar menu. Untuk lebih jelasnya lihat gambar dibawah.


Gambar diatas ialah salah satu contoh tampilan menu navigation (Navbar) pada blog yang memang terletak di bagian paling atas Tempelate sebuah blog. untuk itu supaya lebih mudah dimengerti bagaimana pejelasan menghilangkan menu navbar pada blog silahkan simak dibawah ini.

Langkah-langkah bagaimana cara menghilangkan navbar blog di blogspot, seperti dibawah ini :

Login terlebih dahulu di blogger.com
Masuk ke Rancangan --> Edit HTML Cari kode berikut ini ]]></b:skin> (Gunakan Ctrl+f) untuk mempermudah, Jika sudah ditemukan Pasang Kode dibawah ini Sebelum Kode ]]></b:skin>

#navbar-iframe {
display: none !important;
}
Atau pasang kode berwarna biru tepat diatas kode


/* Variable definitions


Kira-kira seperti ini tampilannya



-----------------------------------------------
Blogger Template Style
Name: Ethereal
Designer: Jason Morrow
URL: jasonmorrow.etsy.com
----------------------------------------------- */

#navbar-iframe {

display: none !important;

}

/* Variable definitions
====================
<Variable name="keycolor" description="Main Color" type="color" default="#000000" value="#adbbd5"/>
Email ThisBlogThis!Share to TwitterShare to Facebook
Selengkapnya...
0 komentar
Langganan: Komentar (Atom)

Lencana

 

manis manis cantik Copyright © 2008-2009 | Edited By : Copyright Tanpa Nama