Posted by : Arie Adie Sunday, 21 April 2013

 
Kalau sahabat tertarik dan ingin Membuat Menu Vertikal Keren Dengan CSS, silahkan sahabat lakukan langkah langkah dibawah ini :
1. Login ke Blogger

2. Pilih Rancangan

3. Selanjutnya Edit HTML

4. Setelah itu cari kode ]]></b:skin> 

5. Copy kode dibawah ini dan letakan tepat diatas kode ]]></b:skin>

       #top-menu {

          position:absolute;
          top:0;
          background:#333;
          right:27.5%;
          z-index:10;
          width:128px;
          height:270px;
          color:#999;
          font:normal 11px Verdana,Arial,Sans-Serif;
          box-shadow:0 5px 7px rgba(0,0,0,0.7);
          border-radius:0 0 5px 5px;
          transition:right .15s linear;
          border-color:#444 #222 #222 #444;
          border-style:solid;
          border-width:1px;
          margin:0 auto;
          padding:10px;
        }
        
        #top-menu:after {
          content:"";
          display:block;
          position:absolute;
          top:100%;
          left:20px;
          border-color:#333 transparent transparent;
          border-style:solid;
          border-width:15px;
        }
        
        #top-menu .img-container {
        border:3px double #3c3c3c;
        background:transparent;
        box-shadow:inset 0 0 2px rgba(0,0,0,0.4);
        display:block;
        margin:10px 10px 10px 10px;
        padding:10px;
        }
        #top-menu .img-container img {
          display:block;
          background:#3c3c3c;
          padding:5px 0;
        }
        #top-menu ul#step {
          width:108px;
          display:block;
          margin:10px 10px 10px auto;
          padding:0;
        }
        
        #top-menu ul#step li {
          display:block;
          margin:0 0 2px;
          padding:0;
        }
        
        #top-menu ul#step li a {
          display:block;
          background:#3c3c3c;
          color:#ccc;
          text-transform:uppercase;
          text-decoration:none;
          font:normal 8px Arial,Sans-Serif;
          position:relative;
          transition:all .26s ease-out;
          margin:0;
          padding:6px 12px;
        }
        
        #top-menu ul#step li a:before {
          content:"";
          width:0;
          height:0;
          position:absolute;
          right:0;
          top:0;
          display:block;
          border-color:transparent #333 transparent transparent;
          border-style:solid;
          border-width:11px;
        }
        
        #top-menu ul#step li a:hover {
          transition:none;
          color:white;
          text-decoration:none;
          padding:6px 0 6px 15px;
        }
        
        #top-menu ul#step li.satu a:hover {
          background:#DC98FF;
        }
        
        #top-menu ul#step li.dua a:hover {
          background:#FF5DC2;
        }
        
        #top-menu ul#step li.tiga a:hover {
          background:#0186CB;
        }
        
        #top-menu ul#step li.empat a:hover {
          background:#0251C9;
        }
        #top-menu ul#step li.lima a:hover {
         background:lime;
        }
         #top-step ul#step li.current a {
          border-left:2px solid #39f;
        }
6. Setelah itu cari lagi kode <body> lalu copy kode dibawah ini dan pastekan tepat dibawah kode <body>
<div id="top-menu">
<div class="img-container">
<a href="http://shift-7.blogspot.com/" target="_blank"><img alt="colormap" src="http://i1198.photobucket.com/albums/aa452/Lutfi14/colormap.png" /></a></div>
<ul id="step">
<li class="satu"><a href="http://pengembarabiru.blogspot.com/">Judul-1</a></li>
<li class="dua"><a href="http://pengembarabiru.blogspot.com/">Judul-2</a></li>
<li class="tiga"><a href="http://pengembarabiru.blogspot.com/">Judul-3</a></li>
<li class="empat"><a href="http://pengembarabiru.blogspot.com/">Judul-4</a></li>
<li class="lima"><a href="http://pengembarabiru.blogspot.com/">Judul-5</a></li>
</ul>
</div>


7. Ganti http://pengembarabiru.blogspot.com/ dengan link milik sahabat. Ganti Judul dengan Judul menu yang akan ditampilkan

Leave a Reply

Subscribe to Posts | Subscribe to Comments

Welcome to My Blog

TRANSLATE

RANDOM POST

Flash Labels by Way2Blogging




- Copyright © PENGEMBARA BIRU -arieadie- Powered by music - Designed by sang pengembara 821 -