Cara Membuat Menu Dropdown + Jam Digital

Nah... Pada kali ini Rips Way melakukan aksi lagi, setelah kemaren belajar cara membuat Power Saving dengan kalimat kita sendiri... Sekarang akan berbagi Cara Membuat Menu Dropdown + Jam Digital ala sporty magazine, buat yang belum tau template sport magazine, silahkan langsung lihat pada demo ini di http://sportymagazine2.blogspot.com , bagaimana? Cantik kah?...

Yah... Memang cantik, apakah anda berminat untuk menerapkanya pada blog anda? Silahkan anda bisa mendownloadnya ditempat sumbernya...

Gimana dengan saya??? Yah saya juga tertarik, tapi saya lebih tertarik dengan Tab Menu Dropdownya, plus jam digital yang ada diatas menu tersebut, ini saya lakukan karena saya ingin mengurangi beban blog, yang saya rasa terlalu lama loading saat akan menampilkan jam analog ataupun digital yang kita pasang dari situs lain, yah... Cukup lama saat kita memanggil widget itu, apalagi saat server penyedia lagi sibuk, jam digital inilah solusinya... Walau agak ribet pemasanganya, tapi ringan saat kita membukanya...

Oke langsung saja kita ke pokok bahasan, gimana Cara Membuat Menu Dropdown + Jam Digital ala sport magazine? Gimana, apakah ingin membahas cara mencuri script blog orang lain, atau langsung menerapkan
script Cara Membuat Menu Dropdown + Jam Digital? Kalo mau ambil script, gampang, anda tinggal buka blog/website orang lain, lalu tekan CONTROL+U, ambilah mana2 yang perlu anda ambil, gimana? Pening ya? apa yang mau diambil? Iya... Saya juga pening... Tapi ini bisa juga koq buat obat... Hehe...

Langsung aja sob... Kembali ke topik, Cara Membuat Menu Dropdown + Jam Digital,
1. Masuk ke halaman Dasbor blog anda.
2. Klik Template.
3. Klik Edit HTML
4. Cari ]]></b:skin> dan letakan kode CSS ini tepat diatasnya,
Kode :

#navbar-iframe{height:0px;visibility:hidden;display:none} #menuwrapperpic{ background:#F7D528 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjr7-2ROVR8eNeHmm5BVwV5udJYysl1wYXl8LKmKyHENHIHHQFyMDJZiE5tMe9GW0HiUK20DMa4outgqMQy43qpaFH_jamLSx-QxzNQzZlA1-toimIankTHBRd1SpYQ_Bp9BEXuVL9mhuM/s1600/bg+menu.gif) no-repeat center left; width:840px; margin:0 auto; padding:0 auto } #menuwrapper{ width:850px; margin:0 auto; height:32px } .clearit{ clear:both; height:0; line-height:0.0; font-size:0 } #menubar{width:100% } #menubar, #menubar ul{ padding:0; margin:0; list-style:none; font-family:'Arial',serif } #menubar a{ display:block; text-decoration:none; padding:9px 10px 8px 10px; font-size:12px; font-weight:normal; text-transform:none; color:#edfdfd; border-right:1px solid #F7D528 } #menubar a.trigger{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvwqK9CmeZwz0DAw6dhaM8YMJAI96w3ZeCm0_NeE0zUWMs8XME2tBz7xRXn2TsKKx3xTGcvUh4Dmp-WqesEfGEccnuWUBHRmUC7HcAsDPnpOfgOwFhfgnpedoMHLpMpr-FOt7NEruA_fE/s1600/arrow_white.gif); background-repeat:no-repeat; padding:9px 20px 8px 10px; background-position:right center } #menubar li{ float:left;position:relative } #menubar li{ position:static;width:auto } #menubar li ul, #menubar ul li{width:130px } #menubar ul li a{ text-align:left; color:#fff; padding:5px 10px; font-size:11px; font-weight:normal; text-transform:none; font-family:Arial; border:none } #menubar li ul{ z-index:100; position:absolute; display:none; background:#222; padding-bottom:5px} #menubar li ul{ -moz-border-radius-bottomleft:5px; -moz-border-radius-bottomright:5px; -webkit-border-bottom-left-radius:5px; -webkit-border-bottom-right-radius:5px; border-bottom-left-radius:5px; border-bottom-right-radius:5px } #menubar li ul{ -moz-box-shadow:0 2px 2px rgba(0,0,0,0.6); -webkit-box-shadow:0 2px 2px rgba(0,0,0,0.6) } #menubar li:hover a, #menubar a:active,#menubar a:focus, #menubar li.hvr a{ background-color:#222; color:#fff; text-decoration:underline } #menubar li:hover ul, #menubar li.hvr ul{ display:block } #menubar li:hover ul a, #menubar li.hvr ul a{ color:#edfdfd; background-color:transparent; text-decoration:none } #menubar li ul li.hr{ border-bottom:1px solid #444; border-top:1px solid #000; display:block; font-size:1px;height:0px; line-height:0px; margin:4px 0 } #menubar ul a:hover{ background-color:#555!important; color:#fff !important; text-decoration:none } #menubar li.selected a, #menubar li.selected a:visited{ border-right:1px solid #222 } #menubar li.selected a:hover{ background:none; color:#F7D528 } .topmenupic{ background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJUG0TKm2_qBP15FUGU0k_7ERlbQfMzGQYsnCysXzihjmkij5PAicdirlsBM_yetgqiUSO631YuMQFzII1rqY64x6H9X7WYQOUCQmhZGfmy59AGqYVoO1YLHTpPqDzLseDTc5JGk2QuMs/s1600/bg_header.jpg) no-repeat top center; width:840px; margin:0 auto;padding:0 auto; height:24px } .topmenu{ width:840px; margin:0 auto; padding:0 auto; line-height:1em; text-align:left; font-family:Arial; font-size:11px; color:#DDD; overflow:hidden; clear:both } .topmenu a:link, .topmenu a:visited{ color:#DF7401; text-decoration:none } .topmenu a:hover{ color:#dfdfdf; text-decoration:underline }

5. Cari kode <head> dan letakan kode script ini tepat di bawahnya
Kode :

<script src='http://menu-sc3q4i6-1.googlecode.com/files/anticontrolu.js' type='text/javascript'/><script type='text/javascript'>//<![CDATA[ var dayarray=new Array("Minggu","Senin","Selasa","Rabu","Kamis","Jumat","Sabtu");var montharray=new Array("Januari","Februari","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","November","Desember");function getthedate(){var a=new Date();var g=a.getYear();if(g<1000){g+=1900}var h=a.getDay();var e=a.getMonth();var b=a.getDate();if(b<10){b="0"+b}var i=a.getHours();var c=a.getMinutes();var j=a.getSeconds();var d="AM";if(i>=12){d="PM"}if(i>12){i=i-12}if(i==0){i=12}if(c<=9){c="0"+c}if(j<=9){j="0"+j}var f="<font color='DDDDDD' face='Arial'>"+dayarray[h]+", "+montharray[e]+" "+b+", "+g+" "+i+":"+c+":"+j+" "+d+"</font>";if(document.all){document.all.clock.innerHTML=f}else{if(document.getElementById){document.getElementById("clock").innerHTML=f}else{document.write(f)}}}if(!document.all&&!document.getElementById){getthedate()}function goforit(){if(document.all||document.getElementById){setInterval("getthedate()",1000)}}; //]]></script>

6. Cari kode

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

  <b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>

<b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'/>

</b:section>

lalu hapus dan ganti dengan kode HTML berikut,

<body onLoad='goforit();Menubar()'><div class='topmenupic'><div class='topmenu'><div style='float:right;padding:7px 0;'><span id='clock'/></div></div></div><div id='menuwrapperpic'><div id='menuwrapper'><ul id='menubar'><li class='selected'><a href='/'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHEalOkLNfGe4ItZ8etb8lF8VHSmmAluSI2yZmrurXBMPHJ8wjEcov6cDdwSzSOp9n0WAKsirtfJrWFfdBgzghmStpKjJ_3jvMDjq3PtZlcRnChR_24lHGdSa3CvR4lyNFWLVEBxXgBAw/s1600/home_white.png' style='padding:0px;'/></a></li><li class='selected'><a href='#'>About Us</a></li><li><a class='trigger' href='#'>Contact Us</a><ul><li><a href='http://ripsway.com/'>Link Friend</a></li><li class='hr'/><li><a href='http://facebook.com/'>Contact on Facebook</a></li><li><a href='#'>Contact on Twitter</a></li><li class='hr'/><li><a href='#'>Free Template Design</a></li></ul></li><li><a href='#'>Moto GP</a></li><li><a href='#'>Football</a></li><li><a href='#'>Formula 1</a></li><li><a href='#'>Web Design</a></li><li><a href='#'>Free Template</a></li><li><a href='#'>Video</a></li><li><a href='#'>Foto</a></li><li><a href='#'>Download</a></li><li><a class='trigger' href='#'>Lainnya</a><ul><li><a href='#'>Editorial</a></li><li class='hr'/><li><a href='#'>Off Topic</a></li></ul></li></ul><br class='clearit'/></div><div style='clear:both;'/></div>

7. Simpan template.

Note : untuk menyesuaikan dengan lebar template anda, silahkan lakukan perubahan pada kode CSS.

Simpan Artikel Cara Membuat Menu Dropdown + Jam Digital Dengan Link : https://neoblogku.blogspot.com/2012/11/cara-membuat-menu-dropdown-jam-digital.html

Judul : Cara Membuat Menu Dropdown + Jam Digital.
Kategori : Artikel / Blogging / Koleksi Tab Menu / Membuat Menu blog / Menu Vertikal / Tab menu / Tutorial / Tutorial Dasar Blogger
Ditulis oleh : Unknown Pada Tuesday, November 20
Bagikan Ke : Facebook / Twitter