21 Juni 2012
Home » All » Blogger » Membuat Menu Top Level Keren CSS
Kamis, Juni 21, 2012
0 komentar

Membuat Menu Top Level Keren CSS















Membuat Menu Top Level Keren CSS, Setelah kemarin-kemarin sempat posting tentang Satu Link Bisa Membuka Puluhan bahkan Ribuan Halam... ,dan Alhamdulillah kali saya masih diberi kesempatan untuk membuat postingan, tutorial Membuat Menu Top Level Keren CSS ini lumayan bagi sobat untuk sekedar menambah realistik penampilan blog. Dinamakan Menu Top Level karena memang menu terlihat bertingkat dan berposisi absolute, tidak hanya itu saja namun juga menggunakan CSS sesuai judulnya, karena CSS jauh lebih atau tidak akan memberatkan template jika dibandingkan javascript dan sejenisnya. Oke, langsung saja sobat lihat tutorialnya dibawah:
(Menggunakan tampilan blogger antar muka lawas)
  1. Login ke account blogger
  2. Pada dasbor, klik rancangan
  3. Pilih Edit HTML
  4. Centang Expand Widget Template, jika tidak tak apa-apa... Alangkah lebih baik jika sobat juga mengetahui bagaimana untuk memback up template terlebih dahulu. Klik disini.>>
  5. Cari kode ]]></b:skin>
    6. kemudian copykan kode-kode CSS berikut diatasnya 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;
        }
    Jika Sudah kemudian cari kode <body> , lalu taruh berikut diatas atau dibawahnya kode tersebut:

    <div id="top-menu">
    <div class="img-container">
    <a href="http://ramonboyzz.blogspot.com/" target="_blank"><img alt="colormap" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdvHRVvC3oBXgCg9VfTizdjZRDYcSzCui4egrMWLZAnMA60-WIVyFzDfBDfM4V901G4EHMmPZiI2P5WH_xxUBw1H7BYohZlU4CnMHUgn5Bs9YEeE-hhmfiURJNYnmyTRlAKWTG3EAltOw/s1600/ramonboyzz.gif" /></a></div>
    <ul id="step">
    <li class="satu"><a href="http://ramonboyzz.blogspot.com/">Menu-1</a></li>
    <li class="dua"><a href="http://ramonboyzz.blogspot.com/">Menu-2</a></li>
    <li class="tiga"><a href="http://ramonboyzz.blogspot.com/">Menu-3</a></li>
    <li class="empat"><a href="http://ramonboyzz.blogspot.com/">Menu-4</a></li>
    <li class="lima"><a href="http://ramonboyzz.blogspot.com/">Menu-5</a></li>
    </ul>
    </div>

    NB: link yang bewarna merah, sobat ganti dengan link sobat sendiri.
    Jika ingin tampil atau dibuat pada postingan tertentu, tinggal pada kode CSS diatas taruh  kode <style> diatasnya dan penutupnya </style> dan kode html diatas tinggal ditaruh dibawahnya.... Itulah tutorial singkat mengenai Membuat Menu Top Level Keren CSS, semoga apa telah ditulis ini bisa bermanfaat.


    di Kamis, Juni 21, 2012
    Label: ,
    Share:

    0 komentar:

    Posting Komentar

    Dalam berkomentar, harap memperhatikan hal-hal berikut :
    1. Komentar tidak mengandung unsur SARA
    2. Tidak memprovokasi pihak lain
    3. Tidak mengadu domba
    4. Tidak menimbulkan perselisihan
    5. Tidak saling menjatuhkan
    6. Komentar Link atau Sponsor langsung saya hapus!

    Bila anda tidak mnaati peraturan diatas, maka penulis berhak untuk menghapus komentar anda.

    Langganan: Posting Komentar (Atom)