Mencoba Iseng, Menjawab 1 pertanyaan dari seorang peserta seminar blogging, Tentang Dropdown dan Marquee..

Seminar Go Technology With Blogging yang diselenggarakan di Politeknik Negeri Lhokseumawe hari ini, (26/1) muncul pertanyaan dari peserta seminar kepada pemateri Jonru Ginting tentang bagaimana membuat menu dropdown dan membuat text tulisan marquee. Tapi, jawaban dari pemateri (menurut saya) bukanlah jawaban tepat dari pertanyaan tersebut untuk sebuah event seminar. Jawaban dari pemateri adalah "search aja di google ....bla..bla..bla...".
Maaf nech sebelumnya kepada Pak Jonru, ini seminar pak, audience datang untuk mendapatkan ilmu dari Bapak. Tapi bapak kemudian menyuruh mereka untuk mencari sendiri.
Tapi,,, seperti sebuah pribahasa, Yang lalu biarlah berlalu, He,,,he,,,he...! Biar saya yang jawab... ha...hay,,, (sok tau Mode:ON)
Sebelumnya, Anda login dulu ke account blogger anda, kemudian cari menu template/rancangan kemudian temukan tombol edit HTML, terus :

Sebelum meenjalankan langkah-langkah dibawah ini, back-up dulu template aslinya dengan mengklik tombol/link Download Template Lengkap (atau apalah dalam bahasa inggrisnya) agar apabila langkah dibawah ini gagal, anda bisa mengunggah kembali template awal sebelum pengeditan.

Cari Code :
]]>

Copy paste code di bawah ini tepat di atasnya

/* Navigasi Dropdown Menu */
      #navdropdownmenu{
      background:black; /*Warna Latar Belakang */
      width:100%;
      height:auto;
      margin:0;
      padding:0;
      }
      #navdropdownmenu ul{
      float:left;
      list-style:none;
      margin:0;
      padding:0;
      }
      #navdropdownmenu li{
      list-style:none;
      float:left;
      }
      #navdropdownmenu li a, #navdropdownmenu li a:link, #navdropdownmenu li a:visited{
      color:yellow; /* Warna Teks */
      display:block;
      padding:9px 10px 9px 10px;
      font-size: 12px; /* Ukuran Teks */
      font-family: verdana; /* Jenis font */
      text-decoration:none;
      }
      #navdropdownmenu li a:hover{
      background:yellow; /* Warna latar saat kursor mouse berada di atasnya (hover) */
      color:black; /* Warna teks saat kursor mouse berada di atasnya */
      padding:9px 10px 9px 10px;
      }
      #navdropdownmenu li ul{
      z-index:10;
      position:absolute;
      height:auto;
      width:200px; /* Lebar submenu */
      border-width:1px 0 0 0; /* Tebal garis pinggir submenu */
      border-style:solid;
      border-color:#ffff66; /* Warna garis pinggir submenu */
      }
      #navdropdownmenu li ul li a, #navdropdownmenu li ul li a:link, #navdropdownmenu li ul li a:visited{
      float:none;
      background:black; /* Warna latar belakang submenu */
      width:200px; /* Lebar submenu. Isi dengan nilai yang sama */
      border-width:0 1px 1px 1px; /* Tebal garis pinggir submenu */
      border-style:solid;
      border-color:#ffff66; /* Warna garis pinggir submenu */
      }
      #navdropdownmenu li ul li a:hover{
      background:yellow; /* Latar belakang submenu ketika kursor mouse berada di atasnya */
      color:black; /* Warna teks submenu ketika kursor mouse berada di atasnya */
      }
      #navdropdownmenu li:hover ul, #navdropdownmenu li a:hover ul#submenu, #navdropdownmenu li:hover a:hover ul#submenu{
      z-index:10;
      position:absolute;
      height:auto;
      width:200px; /* Lebar submenu */
      left:auto;
      }
      .ngumpet{
      display:none;
      }
      .muncul{
      display:block;
      }

# Cari kode berikut </head> # Ketikkan code berikut diatasnya <script> var auahgelap = ''; function petakumpet(id) { var menu = document.getElementById(id); var sangmantan = menu.className; if (sangmantan == 'ngumpet') { if (auahgelap != '') { var terlalu = document.getElementById(auahgelap); terlalu.className = 'ngumpet'; } menu.className = 'muncul'; auahgelap = id; } else { menu.className = 'ngumpet'; } } function umpetpetak(id) { var menu = document.getElementById(id); var sangmantan = menu.className; if (sangmantan != 'ngumpet') { if (auahgelap == '') { var terlalu = document.getElementById(auahgelap); terlalu.className = 'muncul'; } menu.className = 'ngumpet'; auahgelap = id; } else { menu.className = 'muncul'; } } </script> # Cari kode yang mirip kode berikut. <div id='header-wrapper'> <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='(Judul Blog Anda) (Header)' type='Header'/> </b:section> </div> # Dibawahnya, ketikkan kode berikut: <div id='navdropdownmenu'> <ul id='navdropdownmenu'> <li><a href='#'>Home</a></li> <li onmouseout='petakumpet("submenu1")' onmouseover='umpetpetak("submenu1")'><a href='#'>Software PC</a> <div class='ngumpet' id='submenu1'> <ul> <li><a href='#'>Application</a></li> <li><a href='#'>Anti Virus</a></li> <li><a href='#'>Internet Browser</a></li> <li><a href='#'>Utility</a></li> <li><a href='#'>Themes</a></li> <li><a href='#'>Desktop</a></li> <li><a href='#'>Games</a></li> <li><a href='#'>Hack Tools</a></li> </ul> </div> </li> <li onmouseout='petakumpet("submenu2")' onmouseover='umpetpetak("submenu2")'><a href='#'>Mobile Software</a> <div class='ngumpet' id='submenu2'> <ul> <li><a href='#'>Application</a></li> <li><a href='#'>Games</a></li> <li><a href='#'>Themes</a></li> <li><a href='#'>Anti Virus</a></li> </ul> </div> </li> <li onmouseout='petakumpet("submenu3")' onmouseover='umpetpetak("submenu3")'><a href='#'>Tips And Tricks</a> <div class='ngumpet' id='submenu3'> <ul> <li><a href='#'>Blogger</a></li> <li><a href='#'>Tutorials</a></li> <li><a href='#'>Computers</a></li> </ul> </div> </li> <li onmouseout='petakumpet("submenu4")' onmouseover='umpetpetak("submenu4")'><a href='#'>Music</a> <div class='ngumpet' id='submenu4'> <ul> <li><a href='#'>Indo Hits</a></li> <li><a href='#'>Rock</a></li> </ul> </div> </li> <li><a href='#'>News Update</a></li> </ul> </div> Keterangan: * Tanda # pada kode <a href='#'> adalah link. Ganti dengan URL yang diinginkan * Anda bisa menambah atau mengurangi menu diatas. # Lalu klik >> Simpan Template (Di anjurkan untuk mempratinjau dulu sebelum menyimpan!)

 Selanjutnya untuk membuat text MARQUEE

menggunakan tag

Contoh Nech :

Contoh Marquee

Jika mau lebih kreatif lagi tampilannya, silahkan kreasikan dengan attribut ini :

• bgcolor >> berfungsi untuk mengatur warna background (latar belakang) teks.
• direction >> untuk mengatur arah gerakan teks, bisa left, right, up atau down.
• behavior >> gunanya untuk mengatur perilaku gerakan, bisa scroll, slide atau alternate.
• scroll >> menunjukkan teks bergerak berputar.
• slide >> menunjukkan teks bergerak sekali lalu berhenti.
• alternate >> menunjukkan teks bergerak dari kiri ke kanan lalu balik lagi.
• title >> yaitu pesan akan muncul saat mouse berada di atas teks.
• scrollamount >> yaitu untuk mengatur kecepatan gerakan dalam piksel, semakin besar angka semakin cepat gerakannya.
• scrolldelay >> berfungsi untuk mengatur waktu tunda gerakan dalam mili detik
• width >> untuk mengatur lebar blok teks dalam pixel atau persen.
• height >> untuk mengatur tinggi area marquee

Posted in: