Home » » Cara Membuat Menu Seperti Slide Menu

Cara Membuat Menu Seperti Slide Menu

Halo blogger,,,Kembali saya akan berbagi Tips Blogger,Mungkin agak aneh teman - teman Membaca judul dari posting ini saya sendiri  bingung mau memberi judul apa pada postingan kali ini,Karena postingan ini merupakan pesanan atau permintaan dari seseorang teman blogger yang ingin memasang tampilan menu seperti sebelah kanan blog saya,
Sebelumnya saya pernah berbagi Tips tentang Cara Memasang Buku tamu tersembunyi,nah mungkin postingan ini merupakan lanjutan dari  Cara Memasang Buku tamu tersembunyi, apabila teman - teman sudah pernah  mencoba tips sebelumnya pada postingan ini tidak berbeda jauh...


Berikut Ini langkah - Langkah nya :
1. Masuk ke account Blogger kamu, pilih Layout: kemudian Page Elements.
2. Klik "Add a Gadget" yang mana saja, kemudian pilih "HTML/JavaScript",
3. Copy-paste kode di bawah ini:



<style type="text/css">
#hitsukeFX{
position:fixed;
top:150px;
z-index:+1000;
}
.hitsukeFXtab{
 height:100px;
 width:30px; float:left;
 cursor:pointer;
 background:url('http://lh3.ggpht.com/_KdeVdQg2Vsw/Swj9uvNEeVI/AAAAAAAAAGs/N5XIUu3ymzY/tabs.png') no-repeat;
 }

.hitsukeFXcontent{ float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:10px;
}

</style> <script type="text/javascript">
function showHidehitsukeFX(){
var hitsukeFX = document.getElementById("hitsukeFX");
 var w = hitsukeFX.offsetWidth;
 hitsukeFX.opened ? movehitsukeFX(0, 30-w) : movehitsukeFX(20-w, 0);
 hitsukeFX.opened = !hitsukeFX.opened;
 }

function movehitsukeFX(x0, xf){ var hitsukeFX = document.getElementById("hitsukeFX"); var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; hitsukeFX.style.right = x.toString() + "px"; if(x0!=xf){setTimeout("movehitsukeFX("+x+", "+xf+")", 10);} }


</script>
<div id="hitsukeFX"> <div class="hitsukeFXtab" onclick="showHidehitsukeFX()"> </div>
 <div class="hitsukeFXcontent">

 <!-- Taruh Kode  Kamu disini -->

 <div style="text-align:right">
 <a href="javascript:showHidehitsukeFX()"> [close] </a>
 </div>
 </div>
 </div>

 <script type="text/javascript"> var hitsukeFX = document.getElementById("hitsukeFX"); hitsukeFX.style.right = (40-hitsukeFX.offsetWidth).toString() + "px"; </script>

4.SIMPAN.


Tunggu belum Selesai,,,selanjutnya kita tambah gadget lagi, kan tips ini menampilkan 2 menu tersembunyi,,berikut ini selanjutnya :
1. Klik "Add a Gadget" yang mana saja, kemudian pilih "HTML/JavaScript",
2. Copy-paste kode di bawah ini:

<style type="text/css">
#hitsukeFX{
position:fixed;
top:150px;
z-index:+1000;
}
.hitsukeFXtab{
 height:100px;
 width:30px; float:left;
 cursor:pointer;
 background:url('http://lh4.ggpht.com/_KdeVdQg2Vsw/Swj_PjBhSQI/AAAAAAAAAGw/3vmbzeov-kk/tabs2.png') no-repeat;
 }

.hitsukeFXcontent{ float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:10px;
}

</style> <script type="text/javascript">
function showHidehitsukeFX(){
var hitsukeFX = document.getElementById("hitsukeFX");
 var w = hitsukeFX.offsetWidth;
 hitsukeFX.opened ? movehitsukeFX(0, 30-w) : movehitsukeFX(20-w, 0);
 hitsukeFX.opened = !hitsukeFX.opened;
 }

function movehitsukeFX(x0, xf){ var hitsukeFX = document.getElementById("hitsukeFX"); var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; hitsukeFX.style.right = x.toString() + "px"; if(x0!=xf){setTimeout("movehitsukeFX("+x+", "+xf+")", 10);} }


</script>
<div id="hitsukeFX"> <div class="hitsukeFXtab" onclick="showHidehitsukeFX()"> </div>
 <div class="hitsukeFXcontent">

 <!-- Taruh Kode Shoutmix Kamu disini -->


 <div style="text-align:right">
 <a href="javascript:showHidehitsukeFX()"> [close] </a>
 </div>
 </div>
 </div>

 <script type="text/javascript"> var hitsukeFX = document.getElementById("hitsukeFX"); hitsukeFX.style.right = (40-hitsukeFX.offsetWidth).toString() + "px"; </script>

3. Simpan ....

Catatan : Tulisan yang berwarna Merah isi dengan script yang ingin anda tampilkan
Selamat Mencoba.....!!!  Apabila Suka dengan posting ini, berilah komentarnya....




Artikel Terkait:

44 komentar:

  1. Thanx ya maz udah mau posting!! ini sangat berguna bagi saya....

    BalasHapus
  2. bang kalo di taronya di sebelah kiri gimana bang ?
    tolong pencerahannya ehheheh
    thanks

    BalasHapus
  3. Lumayan untuk nambah2 informasi....

    BalasHapus
  4. mantab bro.. tanya neh bro.. cara bikin menu scrol seperti di menu Statistik km gmn ya ?

    share jg dunk bro ?? Thanks...

    BalasHapus
  5. Sob klo bikin kaya sob yang dipinggir yang bernama oktri itu gimana sob mohon pencerahannya . . .

    BalasHapus
  6. @all terima kasih sudah berkomntr....
    @dany tinggal diruh tuilsan right menjadi left....heheh
    @indra mksh
    @Rizky Pratama mksh
    @ zaenal semoga dah q follow back thu
    @vivan di page source az halaman blog saya nanati pasti ad....lom sempet share nie boss,nanti klo sempet q share dech

    @mov4n thu ad tutorailnya ko diblog q ni Cara Membuat Vertical Sliding Info Panel With jQuery

    BalasHapus
  7. om klo mau ubah ke sebelah kiri gimana caranya di script mana yang harus diubah ....

    BalasHapus
  8. mo nanyak.
    yang taruh kode itu kode apaan??

    BalasHapus
  9. mas Oktri..

    crash niee.. yang klwar di monitor cuma ada tlisan Guest Book sama close..
    mohon pencerahannya,

    BalasHapus
  10. makasih bgt utk infony .
    trimakasih skaliii :))

    BalasHapus
  11. Gan namain Tab menu nya gmn??? pencerahan nya gan ^_^

    BalasHapus
  12. dari kemaren nyari yang bisa nampilin 2.
    akhirnya dpt jg.
    tp terlanjur disisi kiri and kanan.
    ngerombak lagi dech.
    hehehe...
    thank infonya gan.

    BalasHapus
  13. sory moderatornya sibuk maen game,hehehhehe

    @Pangeran Tikus mungkin om jg dah tao skrg jd dah ga sah dijelasin gi,hehehhe,,,,telat ya om q ol nya,heheh

    @Devi's BlOgGg nah mksd dari thu ,dmn kita melatakan kode yang mau di taruh seprti kode buku tamu atau lainnya....smga membantu

    @Fatih. coba dicek ulang ,hehhehe
    @Abdul Rohim ty lam knl too
    @Gayatri Perdanaga Halinsetya semoga bermanfaat

    @Gugum Rizzalsyahundi mksdnya tab apa mas,heheh
    @deni sip dech,,,,,mksh dah mampir

    BalasHapus
  14. kalo buat kayak ya ad tulisan oktri melayang dan isinya bgaimana?????

    BalasHapus
  15. kalo mau taro about me-nya itu kodenya apa? hehe

    BalasHapus
  16. makasih ya dah bikin kegampangan bgi para blogger

    BalasHapus
  17. keren. Izin nerapin 'n Kunjungan baliknya yy kak

    http://yugo21.blogspot.com

    BalasHapus
  18. keren. Izin nerapin 'n Kunjungan baliknya yy kak

    http://yugo21.blogspot.com

    BalasHapus
  19. UNTUK BACAAN OKTRI GIMANA TUH BOS ....
    MINTA LINK TUTOR NYA DONK BOZ ...
    OIA SATU LAGI BACAAN ABOUT ME NYA BISA DIGANTI GA ..??? GANTINYA GMN???

    BalasHapus
  20. bagus banget,.thanks berat

    BalasHapus
  21. salam kenal mas saya udach coba tapi kenapa menu nya tulisan nya about me semua enggak bisa di ganti yah ??? maaf mas bales ke buku tamu saya yah ...

    BalasHapus
  22. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  23. maaf om klu ini di anggap spam, klu di anngap spam juga di hapus aja. tadi saya lupa cantumin alamat blog saya biar bisa di liat hasil nya. ke TKP nya aja langsung
    www.s45kurnia.co.cc

    BalasHapus
  24. Om maaf kalau tulisan saya di anggap spam, klu di anggap spam hapus aja om.
    om biar jelas kasus saya ini saya kasih link blog saya.
    www.s45kurnia.co.cc
    mahon pencerahan nya om.

    BalasHapus
  25. mantaaap,.mohon kritik n saran di blog saya ya mas,.. http://artismp3.blogspot.com/
    thankz..

    BalasHapus
  26. oi...

    mau tanya ni!
    kode scriptnya cntohnya gmana?
    makasaih

    www.daniyalbachdim12.co.cc

    BalasHapus
  27. k oktri Cara Slide menu d sebelah kiri G Mna...

    BalasHapus
  28. Foll Back ya Sob...
    thanks Infonya,

    BalasHapus
  29. Mas, gimana dunk menu slidenya tulisan about me terus gx bisa diganti yah?? jelasin dunk :)

    BalasHapus
  30. @all thank for comment my blog...

    cek http://www.oktri.co.cc/2010/04/cara-membuat-vertical-sliding-info.html

    cara membuat oktri slide..!!!

    BalasHapus
  31. ko yang satu ga bisa jalan om??????????????

    BalasHapus
  32. ass.hei kang apa kabar, mf nie mengganggu. sy sbelumnya udah membuat suatu blog di www.evirindi.blospot.com nah setelah lima bulan eh ternyata blog itu jd Hilang nah kenapa n bs g di adakan lagi ? kemudian sy minta tip buat judul posting seperti oketrik bila kursor didekatkan maka judul itu nambah bayang2 ? terus cara membuat membuat shoutbox seperti disamping kanan oketrik ini. duapria@gmail.com Hendi cahyadi 085222965092/95861622/73907798
    eh satu lagi. dibelakang pos komentar ada huruf ada lampunya giman cara buatnya?

    BalasHapus
  33. BLOG yg mantap
    saya suka sekali sama kk

    sperti contoh
    1 JIWA bisa merubah 1000 jiwa lainya
    lanjutkan kk..

    tetablah saling berbagi
    salam hangat ^_^

    BalasHapus
  34. makasih banget infonya gan, izin copas...:D

    BalasHapus

Fivers

Selamat Datang Di OKTRI BLOG

Selamat datang di Blog saya, semoga saja kalian bisa mendapatkan apa yang kalian butuhkan diblog saya ini. Terima kasih Telah Berkunjung Di Blog saya,apabila berkenan silahkan berkomentar dan follow blog saya,mari kita saling berbagi ilmu tentang apa saja...Selengkapnya tentang Tutorial Ini

Sekilas tentang penulis

Nama saya Oktri darmadi,saya seorang Mahasiswa S1 Teknik Informatika Di IBI DARMAJAYA Bandar Lampung.

Social Stuff

  • RSS
  • Twitter
  • Facebook
  • HOME
Oktri