Home disini
widget by sy@ms

Latest Posts

Membuat Menu Slide Di Samping





Mau buat menu seperti pada gambar diatas atau pada menu disamping kiri pada blog ini. Gampang sobat hanay ikutis step-stepnya, ok langsung tancap gan....

  1. Login dulu ke blog sobat

  2. Pilir Rancangan, Edit Html

  3. Cari kode </head>

  4. Masukan kode dibawah ini sebelum kode no.3


    <style type='text/css'>
    #sidemnu {
    background: transparent url() right top no-repeat;
    padding: 0;
    position: fixed;
    left: 0;
    width: 355px;
    margin-left: -325px;
    margin-top: 75px;
    -o-transition: all 3s ease-in;
    -moz-transition: all 3s ease-in;
    -webkit-transition: all 3s ease-in;
    opacity: 0.4;
    }
    #sidemnu:hover {
    opacity: 1.0;
    -o-transform: translate(325px);
    -moz-transform: translate(325px);
    -webkit-transform: translate(325px);
    }
    .GRmouseover {
    font: 20px Arial Narrrow;
    font-weight: bold;
    float: right;
    margin: 10px 10px 0 0;
    color: #FF0000;
    text-shadow: 0.01em 0.01em 0.2em #fff;
    -o-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    }
    .GRmouseover:hover {
    -o-transform: scale(1.0) rotate(720deg) translate(0px);
    -moz-transform: scale(1.0) rotate(720deg) translate(0px);
    -webkit-transform: scale(1.0) rotate(720deg) translate(0px);
    color: #ffffff;
    text-shadow: 1px 1px 2px #000;
    background: #bfbfbf; padding: 0 8px; opacity(0.5)
    border-radius: 8px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border: 1px solid #777;
    }
    #sidemnu .boxdalam {
    padding:10px 5px;
    border: 1px solid #333;
    background: #39393E;
    width: 300px;
    border-radius: 12px;
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px;
    box-shadow: 1px 1px 15px #000;
    -moz-box-shadow: 1px 1px 15px #000;
    -webkit-box-shadow: 1px 1px 15px #000;
    }
    #sidemnu .boxdalam2 {
    width: 275px;
    color: #000066;
    font: 12px Arial;
    padding: 5px 10px;
    }
    #sidemnu .boxdalam ul, #sidemnu .boxdalam li{list-style: none;margin: 0;padding: 0;}
    #sidemnu .boxdalam h3 {
    font: 18px Droid Serif;
    font-weight: bold;
    color: #2AFF00;
    text-shadow: 0 1px 1px #fff;
    border-bottom: 1px dotted #555;
    border-top: 1px dotted #555;
    background: #15181B;
    text-align: center;
    }
    #sidemnu .boxdalam li {
    background: url(http://lh3.ggpht.com/_yGG-MhUR9yI/TQzlsVMtTFI/AAAAAAAAA1U/DmXfMsB-3ZQ/s128/RedArrowH12V10.png) top left no-repeat;
    background-position: 0px 3px;
    border-bottom: 1px dotted #666;
    }
    #sidemnu .boxdalam li:hover {
    background: none;
    }
    #sidemnu .boxdalam li a{
    padding-left: 20px;
    font: 11px calibri;
    color: #00FFFC;
    text-shadow: 0px 1px 1px #000000;
    text-decoration: none;
    }
    #sidemnu .boxdalam li a:hover{
    color: #eee;
    background: #222;
    padding: 5px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    text-shadow: 0px 0px 1px red;
    line-height: 20px;
    margin:0 10px;
    }
    #sidemnu .boxdalam img {
    padding: 2px;
    border: 6px solid #000;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -o-transition: all 3s ease;
    -moz-transition: all 3s ease;
    -webkit-transition: all 3s ease;
    opacity: 0.5;
    }
    #sidemnu .boxdalam img:hover {
    opacity: 1.0;
    }
    </style>


  5. Setelah itu cari kode <body>, letakan kode dibawah ini dimana saja yang penting masih di dalam tag <body>


    <div id='sidemnu'>
    <div class='GRmouseover'>MENU</div>
    <div class='boxdalam'>
    <div class='boxdalam2' style='height:300px;overflow-y:auto;'>

    <h3>Judul 1</h3>
    <ul>
    <li><a href='url tujuan sobat'>Terserah sobat</a></li>
    <li><a href='url tujuan sobat'>Terserah sobat</a></li>
    <li><a href='url tujuan sobat'>Terserah sobat</a></li>
    <li><a href='url tujuan sobat'>Terserah sobat</a></li>
    <li><a href='url tujuan sobat'>Terserah sobat</a></li>
    <li><a href='url tujuan sobat'>Terserah sobat</a></li>
    </ul>
    <h3>Judul 2</h3>
    <ul>
    <li><a href='url tujuan sobat'>Terserah sobat</a></li>
    <li><a href='url tujuan sobat'>Terserah sobat</a></li>
    <li><a href='url tujuan sobat'>Terserah sobat</a></li>
    <li><a href='url tujuan sobat'>Terserah sobat</a></li>
    <li><a href='url tujuan sobat'>Terserah sobat</a></li>
    <li><a href='url tujuan sobat'>Terserah sobat</a></li>
    </ul>
    <h3>Judul 3</h3>
    <ul>
    <li><a href='url tujuan sobat'>Terserah sobat</a></li>
    <li><a href='url tujuan sobat'>Terserah sobat</a></li>
    <li><a href='url tujuan sobat'>Terserah sobat</a></li>
    <li><a href='url tujuan sobat'>Terserah sobat</a></li>
    <li><a href='url tujuan sobat'>Terserah sobat</a></li>
    <li><a href='url tujuan sobat'>Terserah sobat</a></li>
    </ul>

    </div>
    </div>
    </div>


  6. Setelah itu klik simpan, dan lihat hasilnya.....


Gimana, menarik bukan......
Sobat bisa mengganti warna atau menambah backgroun pada script CSS, untuk url tujuan dan linknya silahkan sobat ganti sesuai dengan keperluan sobat.
Ok selamat berkreasi....
Tetaplah semangat untuk tersenyum, Salam senyum dariku....




Salam senyum dariku untuk semuanya, tetaplah untuk bersemangat. Jangan lupa Comment atau isi buku tamu ya sob. Sedikit pemberitahuan untuk sobat yang ingin mengambil [Copy-Paste], Owner tidak melarang sobat untuk memperbanyak artikel namun Owner berharap sobat berlaku dengan bijak agar mencantumkan link active maupun yang tidak. Owner berharap partisipasinya ya sob.



0 komentar:

Jam Sekarang
Tanggal
Salam Sapa :
Status Blogging :

*ket. status : Terjadwal : Berarti yang punya blog tidak bisa berinternet [ More... ]





sy@ms
skyNET program


Join the conversation for skyNET program

 
 free web counter Counter Powered by  RedCounter

© 2011 || Copyright by sy@ms || Thanks for skyNET program All Reserved

Technology Blogs TopOfBlogs Top Blogs Internet Internet Blogs Phil Backlink Display Pagerank
Yahoo bot last visit powered by MyPagerank.Net
USA Backlinks Free Backlinks Service at USABacklinks.com! Auto Backlink Gratis Indonesia : Top Link Indo My Ping in TotalPing.com ping fast  my blog, website, or RSS feed for Free