CSS3 Menu Bar Smooth Slide Out untuk Blogger

Tweet

CSS3 Menu Bar Smooth Slide Out untuk Blogger - D-Copy Blog | Seperti pada menu-menu bar yang telah kami publikasi sebelummnya, yaitu : CSS Menu Dropdown keren, elegan, menu bar keren, dropdown melayang, dropdown versi 2, menu bar simpel dan keren, menu bar dengan ikon, snipping dan jquery, kali ini kita akan membahas bagaimana cara membuat CSS3 menu bar smooth slide out untuk blogger.

Langkah Membuat CSS3 Menu Bar Smooth Slide Out untuk Blogger :

1. Buka akun Blogger Anda
2. Masuk ke menu edit HTML, jangan lupa centang expand template widget
3. Cari kode dibawah ini :

]]></b:skin>

     4.  Pastekan kode dibawah ini, diatas pada kode diatas :

ul.nav8{list-style:none;height:120px;margin:0;padding:0}
ul.nav8 table{border-collapse:collapse;width:0;height:0;margin:-1px 0 -5px -1px}
ul.nav8 > li{float:right;height:120px;width:40px;position:relative;overflow:hidden;-webkit-transition-duration:.5s;-moz-transition-duration:.5s;-o-transition-duration:.5s}
* html ul.nav8 > li{width:auto}
ul.nav8 > li a.ie6{float:left;height:120px;width:39px;position:relative;overflow:hidden}
ul.sub{list-style:none;height:120px;width:600px;background:url(http://www.script-tutorials.com/demos/107/images/panel.png) no-repeat right top;position:absolute;left:0;top:0;margin:0;padding:0}
ul.sub li{float:left}
ul.sub li:first-child{margin-left:45px}
ul.sub li a{display:block;width:110px;height:120px;float:left;overflow:hidden;position:relative;text-decoration:none;color:#000}
ul.sub li a b{font-size:14px;display:block;padding:15px 15px 5px}
ul.sub li a b:hover{font-size:16px;color:red;display:block;padding:15px 15px 5px}
ul.sub li a p{font-size:12px;display:block;margin:0;padding:0 10px}
ul.sub li a p:hover{font-size:13px;display:block;margin:0;padding:0 10px}
ul.nav8 > li:hover{width:600px}
ul.nav8 > li a.ie6:hover{direction:ltr;width:600px}
ul.sub li a:hover i{opacity:1.0}

CSS diatas sudah saya compress, sehinngan membuat blog Anda tidak berat loading akan menu ini.
Mengompresskan seluruh CSS adalah salah satu cara terbaik untuk mempercepat loading blog Anda. Masuk ke CSS Compressor untuk mengompres CSS Anda.

     5.  Pastekan kode dibawah ini, dimana yang Anda inginan.

<ul class="nav8">
        <li>
        <!--[if lte IE 6]><a class="ie6" href="#url"><table><tr><td><![endif]-->
            <ul class="sub">
                <li><a href="http://d-copy.blogspot.com/"><b>Home</b><p>custom description here</p><i></i></a></li>
                <li><a href="http://d-copy.blogspot.com/search/label/CSS"><b>Tutorials</b><p>custom description here</p><i></i></a></li>
                <li><a href="http://d-copy.blogspot.com/search/label/CSS"><b>Support</b><p>custom description here</p><i></i></a></li>
                <li><a href="http://d-copy.blogspot.com/search/label/CSS"><b>About</b><p>custom description here</p><i></i></a></li>
                <li><a href="http://d-copy.blogspot.com/search/label/CSS"><b>Back</b><p>custom description here</p><i></i></a></li>
            </ul>
        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>
    </ul>

Keterangan :

• Kode merah adalah URL yang harus Anda ganti
• Orange adalah text display pertama
• dan, Biru adalah text display kedua, seperti pada gambar diatas.

     6. Save template Anda.

Terima kasih semoga bermanfaat.
Sumber kode dan gambar : http://www.bloggertrix.com/2013/01/css3-smooth-slideout-menu-bar-for.html