mas template

Membuat Menu Scroll di Blogspot

Pada kesempatan kali ini saya akan sedikit berbagi tips bagaimana cara membuat dan memasang menu scrool di blog. Adapun fungsi dan kegunaan menu ini adalah agar daftar list artikel yang kita posting tidak memakan tempat karena lebar dan panjang menu bisa kita sesuaikan dengan lebar space halaman blog. Bagi blogger pemula seperti saya, membuat menu dengan fungsi scroll ini awalnya saya pikir susah, padahal jika kita mengerti bahasa pemrograman, membuat menu seperti ini sangatlah mudah. Untuk penghematan tempat jika anda mempunyai daftar menu yang sangat panjang, menu dengan fungsi scroll ini bisa menjadi solusi yang tepat selain menggunakan marquee atau text berjalan. Dan pembuatan menu ini tidak menggunakan kode HTML yang banyak dan ribet, hanya sedikit kode HTML, anda sudah bisa membuat menunya. Menu ini bisa juga anda menfaatkan dalam menempatkan blogroll yang panjang atau daftar menu postingan yang anda miliki.

Untuk membuat menunya anda hanya membutuhkan kode HTML seperti ini :
<div style="overflow:auto;width:320px;height:250px;padding:10px;border:1px solid #eee"> 

ISI MENU 

</div>
Keterangan :
  • width --> lebar menu
  • height --> tinggi menu
  • padding --> jarak antar tulisan dengan garis pinggir
  • border --> ketebalan garis pinggir
Tinggal temen-temen kreasikan sendiri sesuai dengan blog anda.

Contoh kode HTML untuk menu yang saya punya :
<div style="overflow:auto;width:310px;height:200px;padding:10px;border:1px solid #eee">

1. <a href="http://creatingwebsite-maskolis.blogspot.com/2011/02/membuat-multi-level-drop-down-dengan.html">Membuat Multi Level Drop Down dengan jQuery</a>

2. <a href="http://creatingwebsite-maskolis.blogspot.com/2011/02/membuat-menu-dtree-di-blogger.html">Membuat Menu dTree di Blogger</a>

3. <a href="http://creatingwebsite-maskolis.blogspot.com/2011/02/membuat-menu-horizontal-animasi-di-blog.html">Membuat Menu Horizontal Animasi di Blog</a>

4. <a href="http://creatingwebsite-maskolis.blogspot.com/2011/02/membuat-menu-navigasi-horizontal-glossy.html">Membuat Menu Navigasi Horizontal Glossy di Blog</a>

5. <a href="http://creatingwebsite-maskolis.blogspot.com/2011/02/membuat-effect-jquery-link-nudging-di.html">Membuat Effect JQuery Link Nudging di Blog</a>

6. <a href="http://creatingwebsite-maskolis.blogspot.com/2011/02/membuat-info-panel-slide-vertikal.html">Membuat Info Panel Slide Vertikal dengan jQuery</a>

7. <a href="http://creatingwebsite-maskolis.blogspot.com/2011/02/membuat-chatbox-slide-vertikal-dengan.html">Membuat Chatbox Slide Vertikal Dengan jQuery di Blog</a>

8. <a href="http://creatingwebsite-maskolis.blogspot.com/2011/02/membuat-daftar-isi-dengan-jquery.html">Membuat Daftar Isi Dengan jQuery Accordion</a>

9. <a href="http://creatingwebsite-maskolis.blogspot.com/2011/01/memasang-slider-gambar-ala-drakon.html">Memasang Slider Gambar ala Drakon Template</a>

10.<a href="http://creatingwebsite-maskolis.blogspot.com/2011/01/memasang-gambar-slide-ala-zinmag-primus.html">Memasang Gambar Slide Ala Zinmag Primus</a>

11.<a href="http://creatingwebsite-maskolis.blogspot.com/2011/01/memasang-translate-gambar-bendera-di.html">Memasang Translate Gambar Bendera di Blog</a>

12.<a href="http://creatingwebsite-maskolis.blogspot.com/2011/01/membuat-menu-navigasi-horisontal-dan.html">Membuat Menu Navigasi Horisontal dan Kotak Pencari di Blog</a>

13.<a href="http://creatingwebsite-maskolis.blogspot.com/2011/01/memasang-artikel-berlangganan-di-blog.html">Memasang Artikel Berlangganan di Blog</a>

</div> 
Hasilnya :

Sedikit keterangan tentang elemen diatas :
  • overflow:auto adalah kode untuk penggulung halaman apabila isi dari halaman tersebut sudah melampaui batas tinggi atau lebar yang telah di tentukan.
  • width:310px adalah lebar bidang yang di inginkan, dalam hal ini adalah sebesar 310 pixel, nilai ini tentunya di sesuaikan dengan keinginan atau di sesuaikan dengan lebar sidebar yang ada. namun, agar selalu sesuai dengan sidebar maka sebaiknya memakai nilai 100% (width:100%).
  • height:200px adalah tinggi bidang yang di inginkan, nilai ini bisa di ubah sesuai keinginan, misal jadi 300px.
  • padding:10px adalah jarak agar tulisan yang ada dalam halaman tersebut tidak menabrak dinding halaman, nilai ini tentu saja bisa di ubah sesuai keinginan. misal : padding:5px.
  • border:1px solid #eee adalah garis pada pembatas setiap sisinya, #eee untuk kode warna abu-abu.
Yah.... diatas tadi adalah langkah-langkah membuat menu scroll di blog kita. Jika anda ada masalah atau kesulitan dalam menerapkan kode-kode diatas anda bisa isi kotak komentar yang ada di bawah.


Selamat Mencoba !!
Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Creating Website

46 comments:

  1. gan cara pasang atau cara instalasinyagmana yah.mohon bantuannya atau bimbingnnya, saya mau scrol menu artikel. www.blogonline2012.blogspot.com

    ReplyDelete
  2. Hello Sir, Can you checkout www.chiprang.com ... The tab menu is not working... can you please guide me. Thanks

    ReplyDelete
  3. Gan Saya posting yang ada code scrip kaya di atas gimana caranya ...?
    contohnya saya mau posting player tapi waktu masukin code csriptnya terus saya preview eh malah langsung ngebentuk player ..! nah saya mau tau cara seperti agan di atas script nya tetep ada di kotak frame .
    please gan kasih tau caranya Thanks.

    ReplyDelete
  4. OKE ini yang saya cari-cari . . . oke banget infonya
    main ya ke blog saya yabika.blogspot.com

    ReplyDelete
  5. Joss banget ilmunya , Jangan lupa follow balik gan
    www.rizal-cyber4rt.blogspot.com

    ReplyDelete
  6. makasih mas infonya langsung di pasang... baru neh di blog... di tunggu bantunnya untuk kunjungan baliknya

    http://seobloggerpemula.blogspot.com

    ReplyDelete
  7. info yang bermanfaat mas,saya mau nanya,gimana cara buat menu navigasi yang kalo diklik keluar sub menunya mas..terima kasih..salam kenal...

    ReplyDelete
  8. thanks ya dah berbagi..follback ya..

    ReplyDelete
  9. Nice Posts Gan Ditunggu Kunjungan baliknya http://panca-hero.blogspot.com

    ReplyDelete
  10. Selamat malam gan, maksih dah share tentang cara atau tutorial di atas, langsung bisa ane praktekin di blog ane gan, www.rangga-atmajaya.com dan ternyata berhasil. makasih banyak, Jika sobat berkenan bisa juga tukar link gan, gimana?? makasih sekali lagi. Salam Blogger Indonesia.

    ReplyDelete
  11. saudara, klau mau buat yang macam ni, ada 3 kolom menu di atas scrollbox , + auto label post list mcmana? http://2.bp.blogspot.com/_jeu1dUw9AK4/TTEf2TKJ23I/AAAAAAAAAS4/wSIJWZlys6Q/s1600/New+Picture.jpg

    ReplyDelete
  12. Aduuuh..,makasih sich sebenernye dpt info ini, tp sy keder, naronya di mana yach? biasanya da keterangannya. misalnya naro di bawah ato di atas kode ini"..", nyang ini mah kaga, sy br sminggu nich blajar blog. tolong konfirmnya, tks banyak..

    ReplyDelete
  13. nyimak aja mass,,,lanjuttttt

    http://myblog-bplk.blogspot.com/

    ReplyDelete
  14. Kalau pake scroll gitu jadi lebih simple ya penampakan nya! Mantab mas.. :)

    ReplyDelete
  15. mas kok malah nyambung link satu ama link yg kedua,,, (yg seharusnya ke bawah / enter)..

    ReplyDelete
  16. mas kalo buat persis kaya punya mas gimana ya........

    http://jongsublog.blogspot.com/

    ReplyDelete
  17. Terima kasi gan, kunjungi balik ya ?
    farukparkerla.blogspot.com

    ReplyDelete
  18. makasih Gan infonya.......mampior juga ya di http://nrosyidi78blogspot.com

    ReplyDelete
  19. maskolis klo yg sma kya punya ente gmna ya? tolong kirim ke email ane acahyaputra@gmail.com nice info thank's bngt mas

    ReplyDelete
  20. bagaimana cara pasang nya ? ke Widget ?

    ReplyDelete
  21. terima kasih maskolis tutorialnya sangat membantu sudah saya coba di blogsaya

    http://wanitadidunia.blogspot.com/

    saya baru bisa juga kalo memasangnya di dalam widget taruhnya di bawah div class =' widget content '

    ReplyDelete
  22. terima kasih ku kepada creating website, situs utama menjadi panduanku membangun webblog ayam bangkok aduan bogor laga super http://ayam-bangkok-com.blogspot.com

    ReplyDelete
  23. Great gan..
    suka tutorialnya..
    visit balik ya http://anacarlya.blogspot.com
    Thank U :)

    ReplyDelete
  24. thanks berat master! sangat membantu untuk mepersingkat daftar link saya....

    ReplyDelete
  25. thanks skg blog saya sudah ada menu scroll nya nih ... MANTAP dah (^_^)

    ReplyDelete
  26. This comment has been removed by the author.

    ReplyDelete
  27. makasih mas, jadi tambah keren nih blog :D

    ReplyDelete
  28. keren gan... tapi cara buat tab nya itu gimana ya...??? kok jadinya cuma satu tab aja...
    kunjungan balik ya.. blognya pakar ilmu

    ReplyDelete
  29. kalau cara bikin laman yang di scroll gimana mas. seperti laman yang selalu ada diatas gitu, walaupun pengunjung scroll kebawah

    ReplyDelete
  30. horeeee berhasilll :D terima kasi mas hehehe

    ReplyDelete
  31. mantap info nya gan....mampir dong di http://arimediacom.blogspot.com makasih gan

    ReplyDelete
  32. Sangat bermanfaat gan, makasih banget infonya, jangan lupa kunjungi blog saya ya gan :) http::/www.vickyfadilla.blogspot.com

    ReplyDelete
  33. very nice...
    mungkin perlu ditambahkan unordered list gan
    jadi ga perlu pake nomer
    tapi, sangat bermanfaat

    visit my blog www.8crafdrobe.blogspot.com

    THX

    ReplyDelete


  34. thanx ya gan atas info nya semoga sukses selalu blog nya gan :)
    dan sukses selalu gan info nya :)

    PROMOSI
    HOT PROMO DARI RAJAPOKER88 di

    http://www.rajapoker88.com/?ref=577053


    Untuk member setia rajapoker88 dapatkan bonus referal dari kami sebesar 10% dari kemenangan teman Referal anda dan dapatkan juga 10 POINT setiap turn over 1 juta rupiah point ini akan di undi setiap 1 minggu sekali

    peringatan: untuk bonus selalu di bagikan setiap hari senin
    dan untuk batas mengklaim bonus setiap hari minggu selama 7 hari
    jika batas mengklaim bonus lewat dari seminggu maka bonus dinyatakan hangus!!

    keterangan lebih lanjut untuk mengklaim bonus silakan hubungi :
    YM: afb88_cs1@yahoo.com
    YM: idr.afb88@yahoo.com
    pin bb : 2257e32b

    segera bergabung dengan kami dan kumpulkan pointnya.
    Terima Kasih.

    Permainan yang kami sediakan yaitu :
    * Poker
    * Tangkas
    * Domino99

    Untuk anda kami suport dengan 5 bank Lokal : BANK BCA, BANK BNI, BANK BRI, BANK MANDIRI, DAN BANK DANAMON.

    Untuk keterangan lebih lanjut, silahkan Hubungi kami di :
    * WWW.RAJAPOKER88.COM (pingbox)
    * TWITTER : @RAJAPOKER88
    * YM : RAJAPOKER88.indo
    * PIN BB : 75CB33AF
    * PHONE NUM : (+84) 169 859 6613
    * SKYPE : RajaPoker88

    Terima Kasih,
    Salam Rajapoker88.com

    ReplyDelete
  35. tq gan atas infonya & sukses selalu gan :)


    PROMOSI

    hello semua para coment gan gan :)
    ayo bergabung bersama kami di website www.senang77.com
    cara mendapatkan uang dengan mudah gabunglah bersama kami..
    kami juga menyediakan bonus turn over 0.3% dan akan di bagikan dalam

    1 minggu dan balance akan masuk kedalam secara otomatisnya


    WWW.senang77.COM
    PENDAFTARAN
    http://senang77.com/Register000.aspx

    Kami juga menyediakan kode referral :)

    http://www.senangpoker.com/?ref=859522

    kami bisa dihunbungi melalui :

    YM : cs.senangpoker@yahoo.com
    FACEBOOK : cs.senangpoker@yahoo.com
    BBM : 764a99d1
    Twitter : senangpoker
    SKYPE : senang.poker


    Untuk anda kami suport dengan 5 bank Lokal : BANK BCA, BANK BNI, BANK

    BRI, BANK MANDIRI, DAN BANK DANAMON.


    TERIMA KASIH
    salam manis :) senang77.com / senang77.net / senang77.info :)

    ReplyDelete
  36. Teman - teman kesulitan untuk Belajar Komputer karena kesibukan? kini kami memfasilitasi kursus komputer jarak jauh via online, silahkan kunjungi website kami di asianbrilliant.com, Kursus Online

    Ayah, Bunda..butuh guru untuk mengajar anak-anak dirumah ? kami memfasilitasi 1000 guru untuk anak-anak ayah dan bunda datang kerumah, silahkan kunjungi website kami di smartsuksesprivate.com,Bimbingan Belajar,Les Private

    ReplyDelete
  37. makasih atas infonya
    http://art-fairy.blogspot.com

    ReplyDelete
  38. makasih gan ijin copy sctipnya buat toko online saya ya [url=http://www.edydava.net] jam tangan murah [/url]

    ReplyDelete
  39. terimakasih gan atas tutor nya jangan lupa ya untuk berkunjung di http://anggaariwibowo.blogspot.com

    ReplyDelete

No comment moderation in this page
Do not put the link in this comment, I'll make it disappear forever
I hate when people play cheat to increase their blog, meanwhile everyone else do it politely and honestly

 
CREATING WEBSITE © 2012 the other blog Mas Template | Look at this Johny Template | Powered by Blogger