Home » » CSS3 Menu Bar Smooth Slide Out untuk Blogger

CSS3 Menu Bar Smooth Slide Out untuk Blogger

CSS3 Menu Bar Smooth Slide Out untuk Blogger - Anggirocker | 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.



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://anggirocker.blogspot.com/"><b>Home</b><p>custom description here</p><i></i></a></li>
                <li><a href="http://anggirocker.blogspot.com/search/label/CSS"><b>Tutorials</b><p>custom description here</p><i></i></a></li>
                <li><a href="http://anggirocker.blogspot.com/search/label/CSS"><b>Support</b><p>custom description here</p><i></i></a></li>
                <li><a href="http://anggirocker.blogspot.com/search/label/CSS"><b>About</b><p>custom description here</p><i></i></a></li>
                <li><a href="http://anggirocker.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 : D-Copy
Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Anggi Rocker

2 komentar:

  1. waww cantik tuh menunya mas, tankyu yah udah berbagi tutorial keren

    ReplyDelete
    Replies
    1. sama-sama gan, sering2 berkunjung untuk mengetahui info terkininya

      Delete

Terima kasih telah berkunjung ^_^ ! Silahkan tinggalkan komentar untuk respon/pertanyaan.
[-] jangan berkomentar SPAM (promosi, dll,)
[-] jangan komentar yang berisi link hidup,
[-] jangan berkomentar yang tidak relevan dan berkualitas rendah ,karena akan saya abaikan dan tidak akan saya Approve. Maaf apabila ada komentar yang belum saya tanggapi karena saya tidak online 24 Jam. Terima kasih.
SERING-SERING BERKUNJUNG SOBAT

 
Support : Google Impact | Google.com
Copyright © 2013. 1# | Knowledge and inspiration - All Rights Reserved
Template Modify by Anggirocker
Proudly powered by Blogger