Membuat Slide In Menu

4/15/2011 Blog Tutorial Blogger CSS Tips dan Trik Tips Trik Blog Tutorial Blogger Widget
Slide In MenuSlide in menu merupakan sebuah menu yang bentuknya agak unik karena biasanya berada di bagian samping atau atas sebuah blog. Menu ini tidak tampak secara keseluruhan saat blog terbuka, setelah mouse diarahkan ke menu maka menu akan bergeser /terbuka sehingga menampakkan link-link atau sub menu yang ada di dalam slide menu.Selain menu navigasi horisontal, Menu Slide In bisa menjadi alternatif untuk menempatkan link-link yang akan sobat promosikan kepada pengunjung.

OK. Agar sobat lebih jelas dan pingin lihat seperti apa itu Slide in Menu klik disini atau disini untuk melihat demonya.

Jika sobat sudah lihat demonya dan pingin mencobanya. Berikut langkah-langkah untuk membuatnya :

  1. Sama seperti biasa Log in ke blogger sobat
  2. Dasbor --> Elemen Laman --> Rancangan --> Edit HTML
  3. Kemudian letakan kode berikut di atas kode ]]></b:skin>

    #sidemnu {
    background: transparent url(http://i964.photobucket.com/albums/ae124/gubhugreyot/background/CircleBlueKilatH77V82.png) right top no-repeat;
    padding: 0;
    position: absolute;
    left: 0;
    width: 480px;
    margin-left: -400px;
    margin-top: 150px;
    -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(400px);
    -moz-transform: translate(400px);
    -webkit-transform: translate(400px);
    }
    .GRmouseover {
    font: 19px Arial Narrrow;
    font-weight: bold;
    float: right;
    margin: 30px 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.5) rotate(720deg) translate(0px);
    -moz-transform: scale(1.5) rotate(720deg) translate(0px);
    -webkit-transform: scale(1.5) rotate(720deg) translate(0px);
    color: #0000FF;
    text-shadow: 1px 1px 2px #000;
    background: #d3020c; padding: 0 8px;
    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: #bbdce9;
    width: 380px;
    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: 355px;
    color: #000066;
    font: 12px Arial;
    padding: 20px 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: #914c03;
    text-shadow: 0 1px 1px #fff;
    border-bottom: 1px dotted #555;
    border-top: 1px dotted #555;
    background: #a0cbdc;
    text-align: center;
    }
    #sidemnu .boxdalam li {
    background: url(http://i964.photobucket.com/albums/ae124/gubhugreyot/Arrow/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: 12px Arial Narrow;
    color: #000;
    text-shadow: 0px 1px 1px #fff;
    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;
    }



  4. Kemudian masukkan kode berikut tepat di atas kode </head>

    <!--[if IE]>
    <style type="text/css">
    #sidemnu{filter: alpha(opacity=50);}
    #sidemnu:hover {filter: alpha(opacity=100);margin-left:0px;}
    </style>
    <![endif]-->



  5. Simpan Template


Langkah Selanjutnya :

  1. Klik Rancangan
  2. Klik Tambah Gadget
  3. Pilih HTML/ JavaScript
  4. Masukkan kode berikut ke dalamnya

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

    <h3>Tutorial Blogger</h3>

    <ul>
    <li><a href="Link-1" title="">Tuliskan Link Title di sini! Tuliskan Link Title di sini!</a></li>
    <li><a href="Link-2" title="">Tuliskan Link Title di sini! Tuliskan Link Title di sini! Tuliskan Link Title di sini!</a></li>
    <li><a href="Link-3" title="">Tuliskan Link Title di sini! Tuliskan Link Title di sini!</a></li>
    <li><a href="Link-4" title="">Tuliskan Link Title di sini! Tuliskan Link Title di sini!</a></li>
    <li><a href="Link-5" title="">Tuliskan Link Title di sini! Tuliskan Link Title di sini!</a></li>
    <li><a href="Link-6" title="">Tuliskan Link Title di sini! Tuliskan Link Title di sini!</a></li>
    <li><a href="Link-7" title="">Tuliskan Link Title di sini! Tuliskan Link Title di sini!</a></li>
    </ul>

    <h3>Tips - Trik Blogger</h3>

    <ul>
    <li><a href="Link-8" title="">Tuliskan Link Title di sini! Tuliskan Link Title di sini!</a></li>
    <li><a href="Link-1" title="">Tuliskan Link Title di sini! </a></li>
    <li><a href="Link-9" title="">Tuliskan Link Title di sini! Tuliskan Link Title di sini!</a></li>
    <li><a href="Link-10" title="">Tuliskan Link Title di sini! Tuliskan Link Title di sini!</a></li>
    <li><a href="Link-11" title="">Tuliskan Link Title di sini! Tuliskan Link Title di sini!</a></li>
    <li><a href="Link-12" title="">Tuliskan Link Title di sini! Tuliskan Link Title di sini!</a></li>
    <li><a href="Link-13" title="">Tuliskan Link Title di sini! Tuliskan Link Title di sini!</a></li>
    <li><a href="Link-14" title="">Tuliskan Link Title di sini! Tuliskan Link Title di sini!</a></li>
    </ul>

    <h3>Awas Bisa Merusak Mata...</h3>

    <img src=http://1.bp.blogspot.com/_d-GWpXJVO4Q/SV9LDTWq2NI/AAAAAAAAWLM/lQ8GRi90CNE/s400/1.JPG" style="margin:15px auto; width:300px;" />


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


  5. Kemudian klik tombols Simpan


OK. Untuk link-linknya silahkan para sobat atur sendiri OK.
selamat mencoba semoga dapat bermanfaat


KOMENTAR ANDA SANGAT BERMANFAAT BAGI PERKEMBANGAN BLOG INI

Artikel Terkait

Previous
Next Post »
Penulisan markup di komentar
  • Untuk menulis huruf bold silahkan gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic silahkan gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline silahkan gunakan <u></u>.
  • Untuk menulis huruf strikethrought silahkan gunakan <strike></strike>.
  • Untuk menulis kode HTML silahkan gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silahkan parse dulu kodenya pada kotak parser di bawah ini.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

20 comments

Hadir gan,,
saya berkunjung
bertamu juga ya ke link saya
www.andri-agustia.co.cc

Balas

hilang lagi chatterboxnya sob...selamat berakhir pekan sambil libur2...kuenya mana sob ama koka-kola...

Balas

knpa makin sepi sob....cuba pasang chatterboxnya kembali...ramai pengunjung lebih gemar meninggalkan pesan dichatbox.

Balas

@Seri Bahasa Saya pasang kok sob buku tamu apa gak muncul yaa??

Balas

ngak ada sob sejak seminggu yang lalu...mungkin ada kesilapan kode...

Balas

hebat kang..., bisa tambah wawasan neh tks ya gan info'a...

Balas

KANG,,
berkunjung jga ya kang ke blog saya,,
http://matabathin-dery.blogspot.com/
jangan lupa JOIN juga kang,, :))

Balas

it's work di blog saya kang...tengkyu ah jd kren nih blog saya...
visit blog saya yah kang..
www.alisaartshop.blogspot.com

Balas

Warna blog hijau sejuk, kang.... saya terinspirasi blog kang fatur yang oke banget and top laah..sSALAM KENAL DARI "BLOG GURU MADRASAH"

Balas

Bagaimana cara buat kotak komentar seperti blog kang fatur ini, ya? tolong dikasih cara persis warna punya kang fatur ini.! hatur nuhun

Balas

Info unik seputar blogging...
http://monozcore.blogspot.com

Balas