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

English Japanese Brazilian Arabic Chinese German Netherland Korean Italian Russian Spain
SEO Reports for pengembarabiru.blogspot.com
pengembarabiru.blogspot.com value pengembarabiru.blogspot.com Real PR pengembarabiru.blogspot.com Trust pengembarabiru.blogspot.com Alexa/PageRank

RANDOM POST

Flash Labels by Way2Blogging





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