Beberapa hari tidak ada tulisan baru, bukan karena
kehabisan bahan untuk menulis, tapi terlalu sibuk dengan kode-kode template.
Yups, akhirnya ada juga template yang sudah jadi walaupun sekilas masih
mirip dengan pendahulunya. Jika ada yang mau lihat templatenya seperti apa,
bisa sobat Klik
di sini !.
Tapi maaf nih, bagi sobat yang suka akan template ini belum bisa di
download sekarang karena datanya masih belum saya upload, jadi sabar deh
mungkin besok atau lusa sudah bisa di download.
Yo'i sobat tadi adalah hanya sekilas info saja, yang akan saya bahas
sekarang adalah menyoal tentang pernak-pernik blog, ada satu lagi nih yang
bisa sobat pasang. kali ini tentang cara pembuatan menu dropdown
dengan javascript dalam bentuk horizontal alias mendatar. Sekilas
tentang menu dropdown ini yaitu menu navigasi yang apabila di sorot
oleh mouse akan secara otomatis mengeluarakan sub menu yang terkandung di
dalamnya. Contoh gampang yaitu silahkan sobat sorot menu-menu yang ada pada
bagian atas blog ini, tentunya nanti akan keluar berupa sub-sub menu. Ingin
tahu cara membuatnya? silahkan baca tutorialnya sampai selesai !
Untuk membuat menu dropdown seperti di atas, bisa menggunakan
bantuan image ataupun cukup hanya warna background biasa. Untuk saat ini
saya mau menerangkan menu dropdown tanpa bantuan image, dan untuk yang
menggunakan latar belakang image, akan di bahas pada pembahasan
selanjutnya.
Script yang saya pakai kali ini adalah di ambil dari
http://www.dynamicdrive.com akan tetapi saya modifikasi pada bagian
css agar tampil lebih menarik. Ada beberapa tahapan yang harus di
persiapkan yaitu yang pertama adalah menentukan menu utama apakah yang
akan di tampilkan. Contoh pada blog saya adalah Home, Free
Blog Tamplate, Rubrik Elektronik, Obral lus, How to
make a Website, serta Contuct Us. Yang kedua adalah
mempersiapkan sub menu dari menu utama yang di tampilkan. Contoh blog
saya yaitu Link-link postingan yang ada pada blog tersebut, untuk
template unik dan rubrik elektronik yaitu menampilkan
judul-judul dari postingan semisal About Battery Electronic
shopping, Minima 3 column, dan lain sebagainya. Nah sudah
barang tentu dari judul-judul yang saya sebutkan tadi itu mempunyai
alamat URL masing-masing, langkah selanjutnya adalah mencatat alamat URL
setiap judul yang di pasang.
Setiap template tentunya akan berbeda kodenya, untuk memberi gambaran
saja maka yang saya terangkan adalah template minima dengan
pemasangan menu dropdown di bagian header
• Untuk template minima klasik
- Sig in di blogger
- Klik menu Template
- Klik menu Edit HTML
- Copy seluruh kode template yang ada lalu paste pada notepad
kemudian save. ini untuk backup data bila terjadi kesalahan editting
- Copy kode berikut lalu paste pada style sheet css sobat, atau
bila bingung simpan saja di atas kode </style>
#dropmenudiv{
position:absolute;
border:1px solid black;
border-bottom-width: 0;
font:normal 12px verdana;
line-height:18px;
z-index:100;
}
#dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid black;
padding: 1px 0;
text-decoration: none;
font-weight: bold;
color:#ffffff;
}
#dropmenudiv a:hover{ /*hover background color*/
background-color: #e7f4fd;
color:#000000;
}
/* menu dropdown
----------------------------------------------- */
#menu{
text-align: center;
background:#c4e1ff;
height:20px;
}
#menu a{
margin:0;
font-size:1em;
font-weight:normal;
padding-left:20px;
padding-right:20px;
letter-spacing:-1px;
color: #000000;
font-family:georgia,verdana,arial;
text-decoration:none;
}
#menu a:hover{
color: #ffffff;
background: #140E7E;
}
- Copy paste kode berikut di atas kode
</head>
<script type='text/javascript'>
//<![CDATA[
/***********************************************
* AnyLink Drop Down Menu- © Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/
//isi dari menu 1, silahkan ubah dengan link milik sobat
var menu1=new Array()
menu1[0]='<a
href="http://template-unik.blogspot.com/2007/07/white-minima-3-column.html">Minima
3 column (classic)</a>'
menu1[1]='<a
href="http://template-unik.blogspot.com/2007/07/white-minima-3-column-xml.html">Minima
3 column (beta)</a>'
menu1[2]='<a
href="http://template-unik.blogspot.com/2007/07/scribe-3-column-classic.html">Scribe
3 column (classic)</a>'
menu1[3]='<a
href="http://template-unik.blogspot.com/2007/07/scribe-3-column-xml.html">Scribe
3 column (new)</a>'
menu1[4]='<a
href="http://template-unik.blogspot.com/2007/07/1st-template-unik.html">1St
Template Unik (new)</a>'
menu1[5]='<a
href="http://template-unik.blogspot.com/2007/07/denim-3-column-xml.html">Denim
3 column (new)</a>'
menu1[6]='<a
href="http://template-unik.blogspot.com/2007/07/denim-3-column-xml.html">Blue
Lover (new)</a>'
//isi dari menu 2, silahkan ubah dengan link milik sobat
var menu2=new Array()
menu2[0]='<a
href="http://rubrik-elektronik.blogspot.com/2007/05/tips-maintenance-of-crt-television.html
">About Television</a>'
menu2[1]='<a
href="http://rubrik-elektronik.blogspot.com/2007/04/baterai.html">About
Battery</a>'
menu2[2]='<a
href="http://rubrik-elektronik.blogspot.com/2007/04/progressive.html">About
Progressive</a>'
menu2[3]='<a
href="http://rubrik-elektronik.blogspot.com/2007/04/electronic-shopping.html">Electronic
Shopping</a>'
menu2[4]='<a
href="http://rubrik-elektronik.blogspot.com/2007/04/cute-bean.html">
About Mp3 Player</a>'
menu2[5]='<a
href="http://rubrik-elektronik.blogspot.com/2007/04/tips-maintenance-of-camera.html">About
Handy Cam</a>'
//isi dari menu 3, silahkan ubah dengan link milik sobat
var menu3=new Array()
menu3[0]='<a href="http://www.obralplus.com/?id=rohman"
title="menjual berbagai software dengan harga sangat
murah">Obral Plus</a>'
//isi dari for menu 4, and so on
var menu4=new Array()
menu4[0]='<a href="http://www.resepbisnis.com/?id=rohman"
title="cocok bagi anda yang ingin belajar lebih jauh tentang
pembuatan website">Resep Bisnis.com</a>'
var menuwidth='200px' //default menu width
var menubgcolor='#4B4D52' //menu bgcolor
var disappeardelay=250 //menu disappear speed onMouseout (in
miliseconds)
var hidemenu_onclick="yes" //hide menu when user clicks within
menu?
/////No further editting needed
var ie4=document.all
var ns6=document.getElementById&&!document.all
if (ie4||ns6)
document.write('<div id="dropmenudiv"
style="visibility:hidden;width:'+menuwidth+';background-color:'+menubgcolor+'"
onMouseover="clearhidemenu()"
onMouseout="dynamichide(event)"></div>')
function getposOffset(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft :
what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")?
totaloffset+parentEl.offsetLeft :
totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}
function showhide(obj, e, visible, hidden, menuwidth){
if (ie4||ns6)
dropmenuobj.style.left=dropmenuobj.style.top="-500px"
if (menuwidth!=""){
dropmenuobj.widthobj=dropmenuobj.style
dropmenuobj.widthobj.width=menuwidth
}
if (e.type=="click" && obj.visibility==hidden ||
e.type=="mouseover")
obj.visibility=visible
else if (e.type=="click")
obj.visibility=hidden
}
function iecompattest(){
return (document.compatMode &&
document.compatMode!="BackCompat")? document.documentElement :
document.body
}
function clearbrowseredge(obj, whichedge){
var edgeoffset=0
if (whichedge=="rightedge"){
var windowedge=ie4 && !window.opera?
iecompattest().scrollLeft+iecompattest().clientWidth-15 :
window.pageXOffset+window.innerWidth-15
dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth
}
else{
var topedge=ie4 && !window.opera? iecompattest().scrollTop :
window.pageYOffset
var windowedge=ie4 && !window.opera?
iecompattest().scrollTop+iecompattest().clientHeight-15 :
window.pageYOffset+window.innerHeight-18
dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){
//move up?
edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight
if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no
good either?
edgeoffset=dropmenuobj.y+obj.offsetHeight-topedge
}
}
return edgeoffset
}
function populatemenu(what){
if (ie4||ns6)
dropmenuobj.innerHTML=what.join("")
}
function dropdownmenu(obj, e, menucontents, menuwidth){
if (window.event) event.cancelBubble=true
else if (e.stopPropagation) e.stopPropagation()
clearhidemenu()
dropmenuobj=document.getElementById?
document.getElementById("dropmenudiv") : dropmenudiv
populatemenu(menucontents)
if (ie4||ns6){
showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth)
dropmenuobj.x=getposOffset(obj, "left")
dropmenuobj.y=getposOffset(obj, "top")
dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj,
"rightedge")+"px"
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj,
"bottomedge")+obj.offsetHeight+"px"
}
return clickreturnvalue()
}
function clickreturnvalue(){
if (ie4||ns6) return false
else return true
}
function contains_ns6(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}
function dynamichide(e){
if (ie4&&!dropmenuobj.contains(e.toElement))
delayhidemenu()
else if (ns6&&e.currentTarget!= e.relatedTarget&&
!contains_ns6(e.currentTarget, e.relatedTarget))
delayhidemenu()
}
function hidemenu(e){
if (typeof dropmenuobj!="undefined"){
if (ie4||ns6)
dropmenuobj.style.visibility="hidden"
}
}
function delayhidemenu(){
if (ie4||ns6)
delayhide=setTimeout("hidemenu()",disappeardelay)
}
function clearhidemenu(){
if (typeof delayhide!="undefined")
clearTimeout(delayhide)
}
if (hidemenu_onclick=="yes")
document.onclick=hidemenu
//]]>
</script>
- Copy paste kode berikut persis di bawah kode :
</h1>
<p id="description"><$BlogDescription$></p>
<div id="menu">
<a href="http://kolom-tutorial.blogspot.com" title="back to
home">Home</a>
<a href="default.htm" onClick="return clickreturnvalue()"
onMouseover="dropdownmenu(this, event, menu1, '200px')"
onMouseout="delayhidemenu()" title="free download blogger
template">Free Template</a>
<a href="default.htm" onClick="return clickreturnvalue()"
onMouseover="dropdownmenu(this, event, menu2, '200px')"
onMouseout="delayhidemenu()">Rubrik Elektronik</a>
<a href="default.htm" onClick="return clickreturnvalue()"
onMouseover="dropdownmenu(this, event, menu3, '200px')"
onMouseout="delayhidemenu()" title="menjual berbagai software
dengan harga sangat murah">Obral Plus</a>
<a href="default.htm" onClick="return clickreturnvalue()"
onMouseover="dropdownmenu(this, event, menu4, '200px')"
onMouseout="delayhidemenu()" title="cocok bagi anda yang ingin
belajar lebih jauh tentang pembuatan website">Belajar
website</a>
</div>
- Klik tombol Simpan Perubahan Template
- Selesai.
Yang di atas tadi merupakan pemasangan untuk template minima klasik,
untuk template minima baru, silahkan ikuti langkah berikut !
• Untuk template minima baru
- Sigin di blogger
- Klik menu Layout
- Klik menu Edit HTML
- Klik tulisan Download Full Template, silahkan save dulu
untuk berjaga-jaga apabila terjadi kesalahan editting
- Copy paste kode berikut di antara kode
<b:skin><![CDATA[ dan kode
]]></b:skin> , atau jika bingung
simpan saja persis di atas kode
]]></b:skin>
#dropmenudiv{
position:absolute;
border:1px solid black;
border-bottom-width: 0;
font:normal 12px verdana;
line-height:18px;
z-index:100;
}
#dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid black;
padding: 1px 0;
text-decoration: none;
font-weight: bold;
color:#ffffff;
}
#dropmenudiv a:hover{ /*hover background color*/
background-color: #e7f4fd;
color:#000000;
}
/* menu dropdown
----------------------------------------------- */
#menu{
text-align: center;
background:#c4e1ff;
height:20px;
}
#menu a{
margin:0;
font-size:1em;
font-weight:normal;
padding-left:20px;
padding-right:20px;
letter-spacing:-1px;
color: #000000;
font-family:georgia,verdana,arial;
text-decoration:none;
}
#menu a:hover{
color: #ffffff;
background: #140E7E;
}
- Copy paste kode berikut di atas kode
</head>
<script type='text/javascript'>
//<![CDATA[
/***********************************************
* AnyLink Drop Down Menu- © Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/
//isi dari menu 1, silahkan ubah dengan link milik sobat
var menu1=new Array()
menu1[0]='<a
href="http://template-unik.blogspot.com/2007/07/white-minima-3-column.html">Minima
3 column (classic)</a>'
menu1[1]='<a
href="http://template-unik.blogspot.com/2007/07/white-minima-3-column-xml.html">Minima
3 column (beta)</a>'
menu1[2]='<a
href="http://template-unik.blogspot.com/2007/07/scribe-3-column-classic.html">Scribe
3 column (classic)</a>'
menu1[3]='<a
href="http://template-unik.blogspot.com/2007/07/scribe-3-column-xml.html">Scribe
3 column (new)</a>'
menu1[4]='<a
href="http://template-unik.blogspot.com/2007/07/1st-template-unik.html">1St
Template Unik (new)</a>'
menu1[5]='<a
href="http://template-unik.blogspot.com/2007/07/denim-3-column-xml.html">Denim
3 column (new)</a>'
menu1[6]='<a
href="http://template-unik.blogspot.com/2007/07/denim-3-column-xml.html">Blue
Lover (new)</a>'
//isi dari menu 2, silahkan ubah dengan link milik sobat
var menu2=new Array()
menu2[0]='<a
href="http://rubrik-elektronik.blogspot.com/2007/05/tips-maintenance-of-crt-television.html
">About Television</a>'
menu2[1]='<a
href="http://rubrik-elektronik.blogspot.com/2007/04/baterai.html">About
Battery</a>'
menu2[2]='<a
href="http://rubrik-elektronik.blogspot.com/2007/04/progressive.html">About
Progressive</a>'
menu2[3]='<a
href="http://rubrik-elektronik.blogspot.com/2007/04/electronic-shopping.html">Electronic
Shopping</a>'
menu2[4]='<a
href="http://rubrik-elektronik.blogspot.com/2007/04/cute-bean.html">
About Mp3 Player</a>'
menu2[5]='<a
href="http://rubrik-elektronik.blogspot.com/2007/04/tips-maintenance-of-camera.html">About
Handy Cam</a>'
//isi dari menu 3, silahkan ubah dengan link milik sobat
var menu3=new Array()
menu3[0]='<a href="http://www.obralplus.com/?id=rohman"
title="menjual berbagai software dengan harga sangat
murah">Obral Plus</a>'
//isi dari for menu 4, and so on
var menu4=new Array()
menu4[0]='<a href="http://www.resepbisnis.com/?id=rohman"
title="cocok bagi anda yang ingin belajar lebih jauh tentang
pembuatan website">Resep Bisnis.com</a>'
var menuwidth='200px' //default menu width
var menubgcolor='#4B4D52' //menu bgcolor
var disappeardelay=250 //menu disappear speed onMouseout (in
miliseconds)
var hidemenu_onclick="yes" //hide menu when user clicks within
menu?
/////No further editting needed
var ie4=document.all
var ns6=document.getElementById&&!document.all
if (ie4||ns6)
document.write('<div id="dropmenudiv"
style="visibility:hidden;width:'+menuwidth+';background-color:'+menubgcolor+'"
onMouseover="clearhidemenu()"
onMouseout="dynamichide(event)"></div>')
function getposOffset(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft :
what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")?
totaloffset+parentEl.offsetLeft :
totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}
function showhide(obj, e, visible, hidden, menuwidth){
if (ie4||ns6)
dropmenuobj.style.left=dropmenuobj.style.top="-500px"
if (menuwidth!=""){
dropmenuobj.widthobj=dropmenuobj.style
dropmenuobj.widthobj.width=menuwidth
}
if (e.type=="click" && obj.visibility==hidden ||
e.type=="mouseover")
obj.visibility=visible
else if (e.type=="click")
obj.visibility=hidden
}
function iecompattest(){
return (document.compatMode &&
document.compatMode!="BackCompat")? document.documentElement :
document.body
}
function clearbrowseredge(obj, whichedge){
var edgeoffset=0
if (whichedge=="rightedge"){
var windowedge=ie4 && !window.opera?
iecompattest().scrollLeft+iecompattest().clientWidth-15 :
window.pageXOffset+window.innerWidth-15
dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth
}
else{
var topedge=ie4 && !window.opera? iecompattest().scrollTop :
window.pageYOffset
var windowedge=ie4 && !window.opera?
iecompattest().scrollTop+iecompattest().clientHeight-15 :
window.pageYOffset+window.innerHeight-18
dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){
//move up?
edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight
if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no
good either?
edgeoffset=dropmenuobj.y+obj.offsetHeight-topedge
}
}
return edgeoffset
}
function populatemenu(what){
if (ie4||ns6)
dropmenuobj.innerHTML=what.join("")
}
function dropdownmenu(obj, e, menucontents, menuwidth){
if (window.event) event.cancelBubble=true
else if (e.stopPropagation) e.stopPropagation()
clearhidemenu()
dropmenuobj=document.getElementById?
document.getElementById("dropmenudiv") : dropmenudiv
populatemenu(menucontents)
if (ie4||ns6){
showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth)
dropmenuobj.x=getposOffset(obj, "left")
dropmenuobj.y=getposOffset(obj, "top")
dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj,
"rightedge")+"px"
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj,
"bottomedge")+obj.offsetHeight+"px"
}
return clickreturnvalue()
}
function clickreturnvalue(){
if (ie4||ns6) return false
else return true
}
function contains_ns6(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}
function dynamichide(e){
if (ie4&&!dropmenuobj.contains(e.toElement))
delayhidemenu()
else if (ns6&&e.currentTarget!= e.relatedTarget&&
!contains_ns6(e.currentTarget, e.relatedTarget))
delayhidemenu()
}
function hidemenu(e){
if (typeof dropmenuobj!="undefined"){
if (ie4||ns6)
dropmenuobj.style.visibility="hidden"
}
}
function delayhidemenu(){
if (ie4||ns6)
delayhide=setTimeout("hidemenu()",disappeardelay)
}
function clearhidemenu(){
if (typeof delayhide!="undefined")
clearTimeout(delayhide)
}
if (hidemenu_onclick=="yes")
document.onclick=hidemenu
//]]>
</script>
- Copy paste kode berikut persis di bawah kode :
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
</div>
</b:if>
</b:includable>
</b:widget>
</b:section>
<div id="menu">
<a href="http://kolom-tutorial.blogspot.com" title="back to
home">Home</a>
<a href="default.htm" onClick="return clickreturnvalue()"
onMouseover="dropdownmenu(this, event, menu1, '200px')"
onMouseout="delayhidemenu()" title="free download blogger
template">Free Template</a>
<a href="default.htm" onClick="return clickreturnvalue()"
onMouseover="dropdownmenu(this, event, menu2, '200px')"
onMouseout="delayhidemenu()">Rubrik Elektronik</a>
<a href="default.htm" onClick="return clickreturnvalue()"
onMouseover="dropdownmenu(this, event, menu3, '200px')"
onMouseout="delayhidemenu()" title="menjual berbagai software
dengan harga sangat murah">Obral Plus</a>
<a href="default.htm" onClick="return clickreturnvalue()"
onMouseover="dropdownmenu(this, event, menu4, '200px')"
onMouseout="delayhidemenu()" title="cocok bagi anda yang ingin
belajar lebih jauh tentang pembuatan website">Belajar
website</a>
</div>
- Klik tombol Simpan Template
- Selesai.
Untuk melihat seperti apa hasilnya kode-kode yang barusan di terangkan,
coba sobat klik di sini !,
silahkan sorot pada menu navigasi yang ada pada header.
Panjang banget yah, pasti cape deh baca nya, ya udah sekarang ketik P
spasi D jadi Cappe Dehhhh.....
Selamat mencoba !
Comments :
Posting Komentar
jangan lupa beri komentarnya sebagai tanda persahabatan
pilih url/name.jika tidak memiiki url boleh dikosongkan saja