Wednesday, August 11, 2010

Gadget Menu Horizontal Drop-Down



Ada pertanyaan dari sobat Sigit Super... " oia gimana caranya buat biar menu di navbar bisa ada dua atau tiga menu.maksudnya dropdown menu plis ya bung ?" 

Menu Horizontal Drop Down seperti gambar dibawah ini, tampilannya minimalis.




Langkah-langkahnya sbb :


1. Login ke blogger > Rancangan > Edit HTML > Edit Template ( centang saja expand template widget ).

2. Copy-Paste dahulu seluruh kode HTML template widget blog ke dalam Notepad dan simpan, untuk jaga-jaga (Backup)

3. Cari dengan CTRL+F kode "  ]]></b:skin> " lalu copy script dibawah ini dan paste diatasnya.



Contohnya seperti dibawah ini.
 /*  MHD2  */


          #bg_nav {

              background: #FCF526;   /* kuning_warna background dasar  */

              width: 760px;          /* Panjang dari kotak menu dasar */

              height: 29px;

              font-size: 11px;

              font-family: Arial, Tahoma, Verdana;

              color: #000000;

              font-weight: 28px;

              margin: 0px auto 0px;

              padding: 0px;

              overflow: hidden;

              -moz-border-radius:0px;

              }

       

#bg_nav a, #bg_nav a:visited { /* bagian script yang ini dibiarkan saja ya */

              color: #ffffff;

              font-size: 11px;

              text-decoration: none;

              text-transform: uppercase;

              padding: 0px 0px 0px 0px;

              }

          #bg_nav a:hover { /* bagian script yang ini dibiarkan saja ya */

              color: #ffffff;

              text-decoration: underline;

              padding: 0px 0px 0px 0px;

              }


          #navleft {

              width: 760px;

              color: #FFFFFF;

              float: left;

              margin: 0px;

              padding: 0px;

              }

       

          #nav {

              margin: 0px;

              padding: 0px;

              list-style: none;

              }

          #nav ul {

              margin: 0px;

              padding: 0px;

              list-style: none;

              }


          #nav a, #nav a:visited {  /* Menu Utama */

              background: #FCF526;  /*Kuning_warna latar menu utama  */

              color: #053EFA;           /*BIRU_warna teks menu utama */

              text-shadow: 4px 4px 4px #aaa;    /* Memberi efek bayangan di teks */

              display: block;

              height: auto;
            
              width: auto;

              font-weight: bold;

              margin: 0px auto 0px;

              -moz-border-radius:0px;

              padding: 8px 15px 8px 15px;

              opacity: 0.7;filter:alpha(opacity=70);zoom:1;

              }

          #nav a:hover {

              background: #F7F68F; /*Kuning cerah_warna hover di Menu Utama*/

              color: #3854F2;    /* Biru_warna teks di menu drop-down n teks hover MU*/

              margin: 0px auto 0px;

              font-weight: bold;

              padding: 8px 15px 8px 15px;

              text-decoration: none;

              -moz-border-radius:0px;

              opacity: 0.7;filter:alpha(opacity=70);zoom:1;

              }


          #nav li {

              float: left;

              margin: 0px;

              padding: 0px;

              }

          #nav li li {

              float: left;

              margin: 0px;

              padding: 0px;

              width: 300px;

              }

          #nav li li a, #nav li li a:link, #nav li li a:visited {

              background: #F7F68F;  /*kuning cerah_warna latar menu drop-down*/

              width: 200px;

              float: none;

              margin: 0px;

              padding: 7px 30px 7px 10px;000000;

              }

          #nav li li a:hover, #nav li li a:active {

              background: #F8FABB; /*kuning cerah2_warna hover menu drop-down*/

              padding: 7px 30px 7px 10px;


              }

       

          #nav li ul {

              position: absolute;

              width: 10em;

              left: -999em;

              }


          #nav li:hover ul {

              left: auto;

              display: block;

              }

          #nav li:hover ul, #nav li.sfhover ul {

              left: auto;

              }

    #nav li ul a {


        width: 100px;


        }


        #nav li ul ul {


        position: absolute;


        margin: -30% 0 0 95%;


        }


        #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {


        left:-999em;


        }


        #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {


        left:auto;


        }


        #nav li li li.sfhover ul {


        left:auto;


        }


        #nav li:hover, #nav li.sfhover {


        position:static;


        }

/* eleman dibawah header */
#under_header{
margin:-20px 0 25px 0px;
padding:1%;
height;0px;
width:98%;
}

]]></b:skin>


Hitam, yang ada di bagian bg_nav dan navleft, ini untuk mengatur panjang  menu horizontal, silahkan diatur sesuaikan.

Hijau, warna latar menu.

Pink, warna hover menu ketika di mouseover.

Orange, warna teks menu utama.

Biru, warna hover ketika teks di mouseover.


4. Cari dengan CTRL+F kode "  <div id='header-wrapper'> " lalu copy script dibawah ini setelah kode " </div>  ".

atau ( Jika tidak ada kode header-wrapper ), cari kode " <body> " lalu copy script dibawah ini setelahnya.



Paste persis seperti contoh dibawah ini.
<div id='under_header'>
<b:section class='header' id='underheader' preferred='yes'/>
<div id='bg_nav'>

          <div id='navleft'>
               <div id='nav'>

   <ul>

        <li><a href='http://ecaknyo.blogspot.com/'> Home</a></li>

        <li><a href='####' target='_blank'> Blogging</a>

        <ul>

        <li><a href='http://www.blogger.com' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> Login ke blogger</a></li>

        <li><a href='http://www.blogger.com/profile/07038241031299325975' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> blogger profil</a></li>

<li><a href='http://www5.shoutmix.com/?pumitabusan' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> Blog Walking</a></li>

        </ul></li>

        <li><a href='#' target='_blank'> Demo</a>

        <ul>

        <li><a href='http://eksperimen284.blogspot.com' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> blog eksperimen284</a></li>

        </ul></li>

        <li><a href='URL tujuan utk menu 2'> ALAT</a>

        <ul>

        <li><a href='http://www.colorpicker.com/' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> color picker</a></li>

        <li><a href='http://centricle.com/tools/html-entities/' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> Encode/Decode HTML Entities</a></li>

<li><a href='http://www.iconfinder.com/' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> Icon Finder</a></li>

<li><a href='http://translate.google.co.id/#' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> Google Translator</a></li>

        <li><a href='http://myspace.laymark.com/' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> Smiley Emotion</a></li>

<li><a href='http://sites.google.com/' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> Google Site</a></li>
      
        </ul></li>

      
           
        <li><a href='#' target='_blank'> Download/Upload</a>

        <ul>

        <li><a href='http://www.filehippo.com' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> FileHippo</a></li>

        <li><a href='http://www.ziddu.com' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> ziddu</a></li>

       </ul></li>

        <li><a href='#' target='_blank'> <blink>MAU DUIT</blink></a>

        <ul>

        <li><a href='http://www.neobux.com/?r=wong284' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> Neobux</a></li>

        <li><a href='http://www.idr-clickit.com/register.php/wong284.html' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> idr-clickit</a></li>

        <li><a href='http://www.donkeymails.com/pages/index.php?refid=wong284' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> DonkeyMails</a></li>

<li><a href='https://www.vipclix.com/?ref=wong284' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> vipclix</a></li>

       </ul></li>
       <li><a href='http://ecaknyo.blogspot.com/2010/08/cara-membuat-menu-horizontal-drop-down.html' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow003.gif'/> Buat Menu drop-down seperti ini</a></li>
      
  </ul>

        </div>

        </div>
 </div>

</div>


Hitam, gantilah nama menu-menu nya.
Biru, ganti alamat URL-nya, sesuaikan.


5. Simpan & reload blog untuk melihat hasilnya.



Selamat Mencoba.

166 comments:

  1. keren2..
    thanks berat yah atas ilmu bloggernya..
    ^_^

    ReplyDelete
  2. masih belajar nih mas,dibantu laagi ya?/

    ReplyDelete
  3. sob kalo div id='header-wrapper' ga ada gimana ya ? ~x

    ReplyDelete
  4. Serba Serbi > sama2 gan.. silahkan dimodifikasi lagi

    iplock > oke... akan dibantu.. mudah2an sy bisa membantu dg baik.. ;)

    BUNTU > silahkan dicoba2.. :)

    ReplyDelete
  5. Fhidi >... Gk ad "div id=header-wrapper" ?? aah masak sob.. aneh..template blogmu yg tipe apaan ya?... mungkin berbeda sedikit aj kali namanya..

    Saya kasih clue ya :

    ..Kalo pake CTRL+F gk ketemu coba kamu cari manual... letaknya ada di bagian bawah template blog kamu..persisnya dibawah kode " <body> " cari yg mirip2 "header-wrapper" atau cari div id='content-wrapper' ...

    Kalau ada div id='content-wrapper' ....kamu pastekan kode scrip isi MHD2-nya tepat diatasnya..

    ReplyDelete
  6. Bang Andi,,, Islam tidak secara spesifik menggambarkan bahwa tattoo itu haram (kecuali pndapat pemuka agama). Kutipan ayat dan hadits utk menbgharamkan tattoo pun belum relevan. Belum lagi klo yang dilihat dari asas manfaat/ kebutuhan org bertattoo. Tentunya tattoo punya nilai etis tersendiri jika kegunaannya dalam konteks yg baik. Salah satu contoh bagi tattoo yang ditempatkan bagi mereka yg disimbolkan sebagai figur2 teladan (sewperti org dayak yg sy contohkan di atas).

    Taattoo dianggap pelaku kriminal, lagi2 karena orde baru mengkonstruksinya demikian. Siapa yang melakukan kejahatan, maka akan di tattoo. Akhirnya, kitapun menganggap tatto itu=Kriminal.

    ReplyDelete
  7. informasinya sangat bermanfaat sob, kebetulan saya mau memakai cara ini...^_^ terima kasih

    ReplyDelete
  8. wah... perlu dicoba nih...
    kayaknya baguss.....

    ReplyDelete
  9. buntu > saya hanya merunut dari hadis2 shahih & kisah para sahabat gan.. seingat sy ada sahabat yg bertanya mengenai tatto di badan kpd rasulullah tpi jawaban Nabi tegas tidak membolehkannya..haram gan.. mudah2an betul ingatan sy ini.. subhanallah.. :)

    AZ COMSOFT > kalo begitu cobalah gan.. :)

    Ka Damar > iya banyak... ini atas permintaan sobat sigit super.. makanya kalo sy bisa saya usahakan jawab dg contoh jadinya.. :)

    ridho blog > thx gan.. cobalah ;)

    akhyar.info > memang bagus gan.. wa aj mau pasang di blog ecaknyo ini.. :D

    ReplyDelete
  10. wah keren ,thanks infonya
    met puasa cak :)

    ReplyDelete
  11. Nabi mengharamkan tatto pasti ada hal yg negatifnya sob bisa saja kalau tatto bisa menyebabkan kanker kulit , tatto gagal kan jadi jelek sob ga bisa di hapus lg :-t ..

    @Andi Wong : ngga ada sob ~x( y udh gpp deh..

    sob kalo mau post code gimana yah ? misalnya kayak diatas .. b-(

    ReplyDelete
  12. ini yg saya cari coba ah....hehhehe...
    thx ya kawand,,,..
    verry Nice good post...
    :D

    SALAM BERKAWAND

    ReplyDelete
  13. Tukar banner broooo


    <a href=" http://www.gratizs.co.cc/ " title="UANG GRATIS"><img src="http://lh3.ggpht.com/_TSfalsMYJyA/TGRtECzSXAI/AAAAAAAAAHI/FShT3IfdoDI/60x60.gif" border="0" /></a>

    ReplyDelete
  14. trims ats jawabanny teman, ntar ak cb pelajari dl,...success 4 u...!Amin.

    ReplyDelete
  15. septian > :) ..met puasa jg sob..

    Rizky Fhidi > lebih baik menghindari hal-hal yg dilarang rasulullah ..ow..post code..oke ntar wa jelasin ya.. ;)

    anggar berkawand > silahkan dicoba gan :D

    Uang Gratis > waah.. kalo tuker banner gk bisa diblogku sob (bikin berat loading).. tpi link banner lo sdh nongkrong tuh di blogroll ku...

    tiwi > silahkan dipelajari tiwi.. :)

    ReplyDelete
  16. Link ku dikasi nama apa brooo??

    ReplyDelete
  17. wah demonya kren ya sob, lumayan buat nambahin wawasan jika ada kesempatan saya akan praktekan sobat
    Sukses Slalu!

    ReplyDelete
  18. hallo kawand....

    mampir jalan2 lg ah smbil ngabuburit ketmpt sahabat..

    SALAM BERKAWAND ,,,,..

    ReplyDelete
  19. iya sob tadi abis nyari di google eh ketemu thanks sob sebelumnya , tukeran link yuk link mu sudah ada di blog ku sob.. ^^

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

    ReplyDelete
  21. @Uang Gratis

    ada tuh di blogroll abjad G gan.. :)

    ReplyDelete
  22. Patut di coba nih.. Makasih bwt tutorialnya gan! :)

    ReplyDelete
  23. wahhh bagus nihhh sobbb tutorialnya,,
    lanjutkan kawan...

    ReplyDelete
  24. @mas kholiq

    iya sama2 gan.. mhon maaf lahir & batin yaa.. oke sung ke TKP :)

    ReplyDelete
  25. @Bunglon Blog Indonesia

    tapi ada loh yg lebih keren lagi..tpi pake jquery.. namun kayaknya berpengaruh trhdp loding blog kalo pake jquery script.. :)

    ReplyDelete
  26. @anggar berkawand

    ..halo anggar.. mo menu buka apa disini gan.. ? ntar tk siapin BLoger asam manis plus jus blogging... hehe.. :D

    salam berkawan..

    ReplyDelete
  27. @Fhidi

    ..iya gw liat kamu udah bisa..tuh buktinya dah kamu post cara convert code html-nya..

    btw OKE.. Link mu sdh terpasang di blogroll abjad F gan.. thx ya :)

    ReplyDelete
  28. Wah bisa mempercantik penampilan blog nich, tapi jika ku pasang kira-kira berpengaruh pada loading blog ga kawan? makasih atas infonya

    ReplyDelete
  29. @Ikhsan^funztoo


    silahkan dibaca2 dulu gan.. ntar baru kapan2 kmu praktekan.. :D

    ReplyDelete
  30. wahhh tutorial yang bagus sobat,,
    salam kenal dari ikomputer.co.cc..

    ReplyDelete
  31. @Gieterror

    thx gan... tpi MHD2 ini masih menu drop-down yg sederhana..stidaknya tdk membuat loding blog lama.. hehe :D

    ReplyDelete
  32. @PIK Remaja Al-Hikmah

    betul..akan mempercantik tampilan blog.. tenang sj gk akan memperberat loding blog MHD2 ini.. :) buktikan sj dg klik DEMO-nya..

    ReplyDelete
  33. Wikh..mantab sob
    Bisa mempercantik blog,saya coba yakh

    ReplyDelete
  34. @ikomputer.co.cc

    thx gan.. tuh kamu jg sudah menerapkan MHD2 ini .. :) manteb

    ReplyDelete
  35. WAH, tar ane plajari dulu deh...
    ruwet jg kyknya...
    hmmm..

    ReplyDelete
  36. ijin disave dulu ya kode htmlnya... bwt ane riset dulu...
    hehe..
    mksh share nya.. slm knl

    ReplyDelete
  37. JIakkakaka bisa aja lu brooo, pantes aja aku pantau di blog u tapi gak ada siapa-siapa. gimana have funnya??? asyik tentunya donk??

    ReplyDelete
  38. Nice share gan!. Tutorial yang sangat bagus skl, sistematis dan sangat mudah bwt dipelajari! gw kasih bintang 100 dari 10 :D . Great job! & Keep posting gan! :)

    ReplyDelete
  39. @Science Box

    silahkan di save & di riset dulu sob.. :D

    ReplyDelete
  40. @Uang Gratis

    yg pasti senang sob.. bisa weekend sama keluarga... memang hri sbtu-mingu blogging gw liburkan.. ;)

    ReplyDelete
  41. @Glan@Flixnn

    thx gan... kekekek... baguslah kalo emg tutor ini mudah utk dipelajari.. :D

    ReplyDelete
  42. Wahh menarik sekali masnn.. Tx tutornya

    ReplyDelete
  43. coba pake efek jQuery deh gan, lebih kinclong nanti blognya :)

    ReplyDelete
  44. lha mhd itu apaan mas.ntar tak coba ah
    markasih banget mas atas tutornya

    ReplyDelete
  45. tulisan kaya ininya gak ada gan ]]>
    oia mas aku dah download dreamweaver tapi cara pakenya gak tau.ajarin donk

    ReplyDelete
  46. @Muhammad Taqi

    ..betul itu.. tetapi saya pilih yg tanpa jquery gan.. :)

    ReplyDelete
  47. @sigit

    MHD2 itu singkatan dari Menu Horizontal Drop-Down gan...

    Dreamweaver itu bagusnya utk kita yg punya website di hosting..kalo blogger sih gk perlu pake ini program..kn sudah otomatis smua..

    ..sy udah gk pakai Dreamweaver lagi semenjak gk lagi fokus ke CMS(Drupal/mambo/joomla).. tutorial dreamweaver byk kok di internet gan.. cara pakenya mudah kok..kamu run dreamweaver lalu open file yg ber-extensi.html atupun file javascript.. tapi pengunaan dreamweaver ini mesti didampingi oleh Adobe Photoshop biar desainnya langsung bisa diterapkan di website..

    ReplyDelete
  48. wah sob terimaksih tutorialnya
    MERDEKA!!! MERDEKA!!!

    ReplyDelete
  49. wah sob terimaksih tutorialnya
    MERDEKA!!! MERDEKA!!!

    ReplyDelete
  50. nice tutorial....masih banyak bnyak ya.....tapi terlalu panjang...:D ..wkkkwwkwkwk

    ReplyDelete
  51. komen balik dong :)

    knp gak pake jQuery bukannya lebih cadas :)

    ReplyDelete
  52. @Bang Roy:

    tergantung bahasannya roy...kalo agak rumit..ya otomatis jd lebih panjang tutornya..biar mudah dipahami.. :)

    ReplyDelete
  53. @Muhammad Taqi:

    udah gw komen balik gan..tapi kok belum masuk daftar komentarmu ya.. ? masuk ke spam kali ya ?...

    emg lebih bagus kalo MHD2 ini pake jquery tpi itupun perlu memanggil file.js ..ini yg akan menambah berat loding blog...krn sebagian sobat blogger sdh byk yg widgetnya pake jquery + file.js ..jd kalo ditambah dg MHD2 jquery jg dikhawatirkan akan byk keluhan..hehehe.. :D

    ..tapi nanti akan sy postingkan MHD2 JQUERY.. :)

    ReplyDelete
  54. saya cobain nih,, kebetulan nav blog saya belum pakai dropdown. tapi masih kesulitan mengatur warna dan lebarnya biar pas.
    btw thanks ilmunya gan,, selamat menjalankan puasa..

    ReplyDelete
  55. makasih banyak mas andi...
    berguna bgd nie...

    ReplyDelete
  56. @Dwi:

    Silahkan dipelajari gan... sy jg ucapkan met menunaikan ibadah puasa jg.. :)

    ReplyDelete
  57. @Ubhay Sthrezh:

    :) ..baguslah kalo emg berguna bwt kamu sob..

    ReplyDelete
  58. maaf nih OOT, saya mau tanya gimana caranya menampilakn widget follower berada di halaman postingan, saya dah coba g berhasil, kl widged yg lain berhasil tinggal followersnya aja yg belum berhasil

    ReplyDelete
  59. terima kasih mas,,post'na menarik dan sgt brgna...

    ReplyDelete
  60. wah keren nih jcuma tampil judul postingannya doang

    ReplyDelete
  61. @Rizky2009:

    menampilkan widget follower google pd hal.postingan ?... heuum.. ntar wa utak-atik dulu riz.. :) ..mo bikin tampilan blogspot-mu kayak blogazine (freestyler blog).. :D siip

    ReplyDelete
  62. @Make You Smile:

    makasih gan.. syukurlah kalo emg berguna.. ;)

    ReplyDelete
  63. @Manchester United Tech:

    ya silahkan saja kalo mo dicoba MHD2 yg simple ini .. :)

    ReplyDelete
  64. @KANG uchiha:

    kan emg ada DEMO-nya sob.. lu klik aj tuh link demo yg ada dibawah gambar MHD2.. :)

    ReplyDelete
  65. ntar kl ada kesulitan ak konsul lg ya.., tp kayaknya ribet nih..he3..btw, tnx dah mampir mas, anakku dh baikan kok skrg lg recovery kmren skt DB n Typhus..tq....success 4 u..!

    ReplyDelete
  66. wah mantap nih blog ane blom ada drop down

    ReplyDelete
  67. mas di template saya kok g ada ya code <div id='header-wrapper'? nya?

    ReplyDelete
  68. @Fauzan:

    gak "header wrapper" ya..

    itu letaknya di bagian bawah template blog.. (coba centang expand template-nya).. lalu cari pake CTRL+F... kalo masih gk ad berarti harus ditambah dulu elemen header tambahan sob.. :)

    ReplyDelete
  69. aku uda nyoba tapi kug hasilnya gag kayak contohnya gan?? gmn niy solusinya??

    ReplyDelete
  70. OK SOB link udah d pasang balik. follow balik jg. thank

    ReplyDelete
  71. @yan_zhen:

    ..ow.. mw yg sma persis kayak punyaku ya.. :)

    oke... silahkan donlod script CSS-nya di sini.. >>
    http://www.ziddu.com/download/11451462/MHD2ECAKNYO.txt.html

    ReplyDelete
  72. @Dhiyas Music Centre:

    ..yups.. sm2 gan.. thx krn udah berkomentar.. :)

    ReplyDelete
  73. makasih gan..
    jaya terus!!
    salam blogger

    ReplyDelete
  74. @yan_zhen:

    ..senang bisa membantu.. salam blogger.. ;)

    ReplyDelete
  75. Mantap Bener dah....
    Bener2 Hebat Gan....
    Sneng bsa tau blog ini.... :)

    ReplyDelete
  76. @dhe_romantiic:

    Makasih.. sering2 singgah ksini sobat.. :)

    ReplyDelete
  77. Ini blog emang paling yahud dah... Informasinya sangat membantu. Di follow aah... :D

    ReplyDelete
  78. Bro, bole tanya? di html saya g ada
    div id='header-wrapper.

    itu buat nampilin apa ya mas di web ny?

    ReplyDelete
  79. kok malah vertikal mas jadinya? apa gag cocok dengan tempalte saya ya?

    ReplyDelete
  80. @CrazyPolar:

    itu header wrapper buat nampilin header image (background gambar / warna) secara wide sesuai template blognya..

    kalo gk ada header wrapper ya bisa diakalin..ditambahkan sendiri ..atau ..ikuti saja cara2 berikut ini.. :)

    1. Copy kode dibawah ini dan Paste- letakan di atas kode ]]&gt;&lt;/b:skin&gt;

    /* eleman dibawah header */
    #under_header{
    margin:-20px 0 25px 0px;
    padding:1%;
    height;0px;
    width:98%;
    }


    2. lalu Copy kode dibawah ini lagi dan Paste -letakan sesudah kode <body> (kalo emg gk ad div id header wrapper)..

    kode-nya kamu donlod dulu ya..ringan kok..ini linknya >> https://sites.google.com/site/ecaknyo/blog/backup-script-widget-ecaknyo/KODEMHD2MENU?attredirects=0&d=1

    soalnya gw paste disini gk bisa krna over kuota..

    3. SElesai..Simpan template Blog..

    ..Smoga bisa membantu..

    ReplyDelete
  81. @BoxOfficeIndo:

    jadinya vertikal ?.. bisa jadi bentrok dg kode header blogmu gan.. tapi kalo mw di akal2in masih bisa kok.. ikuti cara di bawah ini..

    1. Copy kode dibawah ini dan Paste- letakan di atas kode ]]&gt;&lt;/b:skin&gt;

    /* eleman dibawah header */
    #under_header{
    margin:-20px 0 25px 0px;
    padding:1%;
    height;0px;
    width:98%;
    }


    2. lalu Copy kode dibawah ini lagi dan Paste -letakan sesudah kode <body> (kalo emg gk ad div id header wrapper)..

    kode-nya kamu donlod dulu ya..ringan kok..ini linknya >> https://sites.google.com/site/ecaknyo/blog/backup-script-widget-ecaknyo/KODEMHD2MENU?attredirects=0&d=1

    soalnya gw paste disini gk bisa krna over kuota..

    3. SElesai..Simpan template Blog..

    ..Smoga bisa membantu..

    ReplyDelete
  82. @Andi Wong:

    wah makasi mas, ntar saya coba.

    Wah, maap mas, widget follow nya lupa dipasang. tuh dah saya pasang di blog saya.

    ReplyDelete
  83. @CrazyPolar:

    silahkan dicoba gan.. :) ..oke i will follow u... ke TKP skrg ;)

    ReplyDelete
  84. Ok Makasih Mas,.. Saya coba dulu.. maklum blogger baru. Bisa Link Exchange?? Saya ada 2 blog... http://www.rudycyber.co.cc
    http://boxofficeindo.blogspot.com Banner anda sudah saya taruh di blog ane.. trims..

    ReplyDelete
  85. @BoxOfficeIndo:

    Oke.. Link Exchange...skrg sung sy pasang di blogrollku..silahkan check di abjad B dan R gan.. ;)

    ReplyDelete
  86. Gan saya kok jadi g ngudeng ea...udah tak coba 2 kali gagal trus.....itu kode di atas setelah di COPAS perlu di edit lagi ea tata letaknya...mohon bantuan
    http://warisansylva.blogspot.com/

    ReplyDelete
  87. gan ni yg saya coba kok mleset dr perkiraan ea,,kira2 salahna dmn ea ???
    http://img219.imageshack.us/img219/69/14345762.jpg
    http://img257.imageshack.us/img257/1659/62765147.jpg

    ReplyDelete
  88. bagus banget mas... bantu saya yang lagi belajar ya......

    ReplyDelete
  89. @Warisan:

    ..oke nanti saya bantu... tungu sbentar ya..:)

    ReplyDelete
  90. Terima kasih info bloggernya .. cara menjelaskannya cukup detail dan mudah dipahami.

    ReplyDelete
  91. Langkah kedua nya kok tidak ada kode script di edit html aku yah..??



    tolong saya gan.;)

    ReplyDelete
  92. salam, ana buat pake css menu generator (www.mycssmenu.com) dgn script html d laman elemen (cm klo d laman edit html lupa apa pake script jg/tdk), tp ketika kursor diarahkan k menu, bagian bawahnya sprti postingan &widget malah turun, apanya yang salah, ya? mohon dilihat

    ReplyDelete
  93. Anak'nya komeng keren Blogging'nya....

    ReplyDelete
  94. @Ahmad:

    baguslah kalo mudah dipahami.. :)

    ReplyDelete
  95. @vj Not-i:

    pasti ada...kn cuma kode body script.. coba dicentang dulu expand template widget blognya..

    ReplyDelete
  96. @derdekind:

    oww.. ehm.. kayaknya kamu masukin script menunya ke bagian posting.. bukan di header... coba di check lagi gan..cari bagian header menu... atau bisa jg setingan CSS-nya ada yang salah.. kayaknya widht sm high = brp gituu..

    ReplyDelete
  97. nice tutorial ni..
    gan uda saya follow balik tu..
    tukarin link yu..?

    ReplyDelete
  98. @arsitektur blogger:

    beres gan.. udh sy FOLLOW n LINKmu sdh trpasang.. :)

    ReplyDelete
  99. wah aq jd malu nich,kan aq ru buat blog tuch,belum ada postingan,cuma lagi ngedit tampilannya doank
    hehhehe

    ReplyDelete
  100. @rickyMJ:

    gkppa..riz.. tdk ada bedanya blogger pemula dg blogger senior.. kebetulan kami saja yang duluan blogging..otomatis ilmu bloggernya jadi tahu duluan.. :)

    ReplyDelete
  101. Kren gan Postingan y',,, V' msih bnyak yang mw d pljari,,, tlong bmbingannya ya,,,,

    please visit my blog
    www.syahrulhadi.blogspot.com

    ReplyDelete
  102. msh perlu bnyk belajar neh ane bro,,, ckckckkk
    keren2,,,, :-)

    ReplyDelete
  103. @Cysers:

    mari sma2 saling sharing knowledge ttng blogspot..

    ReplyDelete
  104. Wah keren banget artikelnya, sayang di pasang di blogku gak bisa.

    ReplyDelete
  105. @budi2610:

    gk bisa ya.. emg sih ada bbrp template blog yg kdg gk bisa dipasang widget tertentu...

    ReplyDelete
  106. kk masa galat sih....
    namanya sama aja boong dunk
    kk ecaknyo
    numpang lapak ye...
    http://agocheateryph.blogspot.com

    ReplyDelete
  107. bagaimana cara memberi link adf.ly di blog
    ?

    ReplyDelete
  108. gan kok di tpt saya ga ada header wraper ato bodynya ya?mohon bantuannya

    ReplyDelete
  109. ma kasih..keren menu nya..tapi nyoba lom berhasil..hehe

    ReplyDelete
  110. Waaahhhhh.. T.O.P.B.G.T mas....
    saluutt sallutt buat bang ecaknyo.... :D

    ijin copas bang.... :)

    salam kenal dari kingkong... ;)

    ReplyDelete
  111. dah aku fooloow gan, infonya berguna banget buat alu yg masi pemula.
    thanks gan.
    jangan lupa followbck yah.
    gb

    ReplyDelete
  112. ruwet banget =))

    ReplyDelete
  113. Gan ko saya drop down nya di bawah terus gi mna cara naruh drop downnya ke atas gan...
    hahah maaf masih newbie

    ReplyDelete
  114. wah rumit juga nih caranya ya, kalo mau nyoba harus save template dulu biar aman. btw thanks tipsnya sob.

    ReplyDelete
  115. gan nga ketemu kode < body > nya

    ReplyDelete
  116. mas saya menemukan kode yang salah mas...karena saya cobak error... kode "]]>" ada dua... jadinya error... jadi saya hapus saja yang satunya... alhamdulillah sukses gan.... makasih gan...

    ReplyDelete
  117. kok we malah di bawah menunya gimana gan please check dulu ya :D :D

    ReplyDelete
  118. wah bagus oom...
    mampir dan do follow yah...

    ReplyDelete
  119. gan,,,napa kok menu list.na ada di bawah?kok g di atas kayak punya blog ini?,,,,,,trus g drop down lgi
    jdi.na kayak gini

    -blablabla
    -bhsbcbdshc
    -ghbfffhgf
    -gfgvfvf
    -vfdvfvbf
    -vfcb cbv

    dan seterus.na

    coba liat di the-blogger-is-arif.blogspot.com

    ReplyDelete
  120. thanks gan,
    ane udah coba dan udah berhasil,
    cuma yang saya mau tanyakan,
    gimana caranya pengen menu di dalem menu barnya itu aga ketengah, yang saya masih ada dipinggir??
    mohon penjelasannya ..

    ReplyDelete
  121. gan di blog saya ini :
    div id='header-wrapper'>
    ga ada

    ne juga ga da :
    ]]></b:skin>

    mohon bimbingan nya :)

    thankz :) :D

    ReplyDelete
  122. sangat bagus tapi q blum paham gan,..........=))

    ReplyDelete
  123. gan sudah saya follow,, follow back yaww http://ade-nophiette.blogspot.com

    ReplyDelete
  124. mantap sob.....
    kunjung balik http://majasari31.blogspot.com

    ReplyDelete
  125. coba dulu sob,,,,
    mampir ya di mari :
    Tips KOmputer. Download lagu. Info Terbaru. thanks!

    ReplyDelete
  126. informasi menarik dropdown. terima kasih

    ReplyDelete
  127. ane nga bisa hannn...
    tapi nice share..

    kunjungi blog kami yaaaa...
    http://kmkosipil.blogspot.com

    ReplyDelete
  128. makasih bos..
    saya langsung ke TKP nih

    ReplyDelete
N.B.
1. Berkomentarlah dengan sopan.
2. Dilarang membuat spam, terutama yang mengandung SARA/ Pornografi/ Judi dan Iklan.