Sunday 22 August 2010

Trik HTML - Membuat Kotak (1)

Diluar udaranya agak sedikit mendung dan atiku lagi mendung juga pokoknya gak semangat dech hari ini. Ne tutorial harusnya dah kelar kemaren sore tapi gara-gara gak sesuai ama yang aku arepin makanya baru aku edit lagi siang ini.

Sebelumnya aku ada sedikit masalah dalam mempostingkan Trik HTML Membuat Kotak (1) kali ini, awalnya dipostingan pengen aku munculin hasilnya sekalian dg kode-kode yang sama. Tapi entah kenapa hasilnya amburadul dan gak sreg aku jadinya, yadah dari pada banyak mikir lagi aku prinscreen aja trus hasilnya seperti yang dibawah ntu, ya lumayanlah kalo cuma buat gambaran aja.

1. Membuat Kotak Dengan Scroll



Kode Disini >>



<div style="overflow:auto; padding:3px; margin:0px 0px 0px 0px; width:200px; height:200px; background- border:2px solid #FF0000;">

LETAKKAN TULISAN,KODE ATO GAMBAR DISINI

</div>

Kegunaan :
  • Bisa buat posting Kode-Kode HTML/JavaScrip
  • Bisa Diberi tulisan/gambar

2. Membuat Kotak Tanpa Scroll


Kode Disini >>



<div style="padding:3px; margin:0px 0px 0px 0px; width:200px; height:200px; background- border:2px solid #FF0000;">

LETAKKAN TULISAN,KODE ATO GAMBAR DISINI

</div>

Kegunaan :
  • Bisa diberi gambar kaya ntu/tulisan

3. Membuat Menu Scrolling


Kode Disini >>




<style>
.list {
background: url("http://lh5.ggpht.com/_ILzML2joCeU/TMkYJpr1gUI/AAAAAAAAAIs/00I2Ll7bdI4/1008954qqr71dvokd.gif") no-repeat left center;border-bottom:1px dotted #ddd;line-height:1.2em;padding:3px 0px 0px 20px;
}
</style>

<div style="overflow:auto; padding:3px; margin:0px 0px 0px 0px; width:270px; height:130px; background- border:2px solid #FF0000;">

<div class="list">
<a href=" #"> 1. Coming Soon </a></div>
<div class="list">
<a href=" #"> 2. Coming Soon </a></div>
<div class="list">
<a href=" #"> 3. Coming Soon </a></div>
<div class="list">
<a href=" #"> 4. Coming Soon </a></div>
<div class="list">
<a href=" #"> 5. Coming Soon </a></div>
<div class="list">
<a href=" #"> 6. Coming Soon </a></div>
<div class="list">
<a href=" #"> 7. Coming Soon </a></div>
<div class="list">
<a href=" #"> 8. Coming Soon </a></div>
<div class="list">
<a href=" #"> 9. Coming Soon </a></div>
<div class="list">
<a href=" #"> 10. Coming Soon </a></div>

</div>


Ket :
  • Kode yg berwarna hijau (icon image) bisa diganti yang icon laen atau klik SHOW dibawah ini:

Icon Disini >>



http://lh6.ggpht.com/_ILzML2joCeU/TL1MyINEudI/AAAAAAAAAA8/oSeFG21QISc/6eyd97d6.gif
http://lh6.ggpht.com/_ILzML2joCeU/TL1MyCy8syI/AAAAAAAAABA/cj3-CAajcmM/e84ml170.gif
http://lh6.ggpht.com/_ILzML2joCeU/TMKjosExrkI/AAAAAAAAADk/N3Kj1AFrsWk/dj2ydyxl.gif
http://lh5.ggpht.com/_ILzML2joCeU/TMkYJpr1gUI/AAAAAAAAAIs/00I2Ll7bdI4/1008954qqr71dvokd.gif
http://lh6.ggpht.com/_ILzML2joCeU/TMkYI5ItkmI/AAAAAAAAAIk/hZMg6bGR1ng/644195ea6e65f5i0.gif
http://lh4.ggpht.com/_ILzML2joCeU/TMkX1Vj1aBI/AAAAAAAAAIc/lbBeQoDpTWI/s15/442960qk4wjtzztt.gif
http://lh4.ggpht.com/_ILzML2joCeU/TMkX1f-NXCI/AAAAAAAAAIU/JCJMEXAiTHQ/437716tvik3339uq.gif
http://lh4.ggpht.com/_ILzML2joCeU/TMZKb0R-aBI/AAAAAAAAAHU/MHs6WUvWC1k/2enalj0s.gif
http://lh6.ggpht.com/_ILzML2joCeU/TMkX1CtwMSI/AAAAAAAAAIQ/O_FxbYcoFCU/365653mpvh1aa95w.gif
http://lh6.ggpht.com/_ILzML2joCeU/TMKjomV1upI/AAAAAAAAADg/fQz_HMp4bhM/ch7fh9p0.gif

  • Kode yg berwarna kuning ntu diganti URL link kamu
  • Tulisan "Comming Soon" ntu sa diganti Ussernya

Gimana ada yang berminat gak??
SELAMAT MENCOBA YA n HAPPY BLOGGING YA





Tutorial Diatas Di-Ilhami
Dari
http://kangtiar.blogspot.com/





Read More : Trik HTML - Membuat Kotak (1)

Tuesday 17 August 2010

Membuat Animasi Terbang Diblog

Hahahaha, pengen ketawa mulu ne liat hasil kejailanku. Blog percobaanku jadi rame dengan penampakan hantu-hantu gaul yang pada mampang ckickcikcikcki. Kalian juga bisa kok, orang Cuma gampang bgt karena Javascripnya udah ada trus imagenya tinggal diganti dg gambar-gambar unik kamu, foto kamu juga boleh xixixixi. Biar terkenal

Beberapa bulan yang lalu dan sampek seminggu kemaren di blogku Peace In Heart ma Always For You emang udah ada yang semacam ntu tepatnya kupu-kupu ama kelelawar. Tapi mendadak ilang n gatau kenapa bisa ilang, kata temenku (Naufal-Forantum) “Hostingnya abis”. Wew gaswat ne, aku kena dampaknya.

Trus aku gak tinggal diem dunk, aku download aja ntu Scrip-nya tapi malangnya aku scrip yang aku download gak respon (hmm what happen ya). Dan baru aku tau hari ini kalo ternyata masalah utamanya ada di scripnya (udah aku duga sejak kemaren) cuman kurang
buka (<script type='text/javascript'> //<![CDATA[)
Tutup (//]]></script>) scripnya doang. Hazz pokoknya kode-kode itulah yg kurang.

Btw langsung aja kali ya, gak usah banyak omong lagi. Langkah:

1. Masih seperti biasa Log-In dulu dengan ID masing-masing

2. Lalu masuk ke “Rancangan/Tata Letak” Trus “Elemen Laman”

3. Kemudian “Tambah Gadget” dan pilih “HTML/JavaScrip”

4. Kalo sudah masukkan kode dibawah ini :

<script type='text/javascript'>
//<![CDATA[
var Ymax=8; //MAX # OF PIXEL STEPS IN THE "X" DIRECTION
var Xmax=8; //MAX # OF PIXEL STEPS IN THE "Y" DIRECTION
var Tmax=10000; //MAX # OF MILLISECONDS BETWEEN PARAMETER CHANGES

//FLOATING IMAGE UNTUK SETIAP URL GAMBAR. ADD OR DELETE ENTRIES. KEEP ELEMENT NUMERICAL ORDER STARTING WITH "0" !!

var floatimages=new Array();
floatimages[0]='http://i982.photobucket.com/albums/ae301/ratna91/Flying/66030.gif';
floatimages[1]='http://i982.photobucket.com/albums/ae301/ratna91/Flying/74238.gif';
floatimages[2]='http://i982.photobucket.com/albums/ae301/ratna91/Flying/74238.gif';
floatimages[3]='http://i982.photobucket.com/albums/ae301/ratna91/Flying/74238.gif';
floatimages[4]='http://i982.photobucket.com/albums/ae301/ratna91/Flying/74238.gif';


//*********JANGAN EDIT KODE DIBAWAH INI***********
var NS4 = (navigator.appName.indexOf("Netscape")>=0 && parseFloat(navigator.appVersion) >= 4 && parseFloat(navigator.appVersion) < 5)? true : false;
var IE4 = (document.all)? true : false;
var NS6 = (parseFloat(navigator.appVersion) >= 5 && navigator.appName.indexOf("Netscape")>=0 )? true: false;
var wind_w, wind_h, t='', IDs=new Array();
for(i=0; i<floatimages.length; i++){
t+=(NS4)?'<layer name="pic'+i+'" visibility="hide" width="10" height="10"><a href="javascript:hidebutterfly()">' : '<div id="pic'+i+'" style="position:absolute; visibility:hidden;width:10px; height:10px"><a href="javascript:hidebutterfly()">';
t+='<img src="'+floatimages[i]+'" name="p'+i+'" border="0">';
t+=(NS4)? '</a></layer>':'</a></div>';
}
document.write(t);

function moveimage(num){
if(getidleft(num)+IDs[num].W+IDs[num].Xstep >= wind_w+getscrollx())IDs[num].Xdir=false;
if(getidleft(num)-IDs[num].Xstep<=getscrollx())IDs[num].Xdir=true;
if(getidtop(num)+IDs[num].H+IDs[num].Ystep >= wind_h+getscrolly())IDs[num].Ydir=false;
if(getidtop(num)-IDs[num].Ystep<=getscrolly())IDs[num].Ydir=true;
moveidby(num, (IDs[num].Xdir)? IDs[num].Xstep : -IDs[num].Xstep , (IDs[num].Ydir)? IDs[num].Ystep: -IDs[num].Ystep);
}

function getnewprops(num){
IDs[num].Ydir=Math.floor(Math.random()*2)>0;
IDs[num].Xdir=Math.floor(Math.random()*2)>0;
IDs[num].Ystep=Math.ceil(Math.random()*Ymax);
IDs[num].Xstep=Math.ceil(Math.random()*Xmax)
setTimeout('getnewprops('+num+')', Math.floor(Math.random()*Tmax));
}

function getscrollx(){
if(NS4 || NS6)return window.pageXOffset;
if(IE4)return document.body.scrollLeft;
}

function getscrolly(){
if(NS4 || NS6)return window.pageYOffset;
if(IE4)return document.body.scrollTop;
}

function getid(name){
if(NS4)return document.layers[name];
if(IE4)return document.all[name];
if(NS6)return document.getElementById(name);
}

function moveidto(num,x,y){
if(NS4)IDs[num].moveTo(x,y);
if(IE4 || NS6){
IDs[num].style.left=x+'px';
IDs[num].style.top=y+'px';
}}

function getidleft(num){
if(NS4)return IDs[num].left;
if(IE4 || NS6)return parseInt(IDs[num].style.left);
}

function getidtop(num){
if(NS4)return IDs[num].top;
if(IE4 || NS6)return parseInt(IDs[num].style.top);
}

function moveidby(num,dx,dy){
if(NS4)IDs[num].moveBy(dx, dy);
if(IE4 || NS6){
IDs[num].style.left=(getidleft(num)+dx)+'px';
IDs[num].style.top=(getidtop(num)+dy)+'px';
}}

function getwindowwidth(){
if(NS4 || NS6)return window.innerWidth;
if(IE4)return document.body.clientWidth;
}

function getwindowheight(){
if(NS4 || NS6)return window.innerHeight;
if(IE4)return document.body.clientHeight;
}

function init(){
wind_w=getwindowwidth();
wind_h=getwindowheight();
for(i=0; i<floatimages.length; i++){
IDs[i]=getid('pic'+i);
if(NS4){
IDs[i].W=IDs[i].document.images["p"+i].width;
IDs[i].H=IDs[i].document.images["p"+i].height;
}
if(NS6 || IE4){
IDs[i].W=document.images["p"+i].width;
IDs[i].H=document.images["p"+i].height;
}
getnewprops(i);
moveidto(i , Math.floor(Math.random()*(wind_w-IDs[i].W)), Math.floor(Math.random()*(wind_h-IDs[i].H)));
if(NS4)IDs[i].visibility = "show";
if(IE4 || NS6)IDs[i].style.visibility = "visible";
startfly=setInterval('moveimage('+i+')',Math.floor(Math.random()*100)+100);
}}

function hidebutterfly(){
for(i=0; i<floatimages.length; i++){
if (IE4)
eval("document.all.pic"+i+".style.visibility='hidden'")
else if (NS6)
document.getElementById("pic"+i).style.visibility='hidden'
else if (NS4)
eval("document.pic"+i+".visibility='hide'")
clearInterval(startfly)
}
}

if (NS4||NS6||IE4){
window.onload=init;
window.onresize=function(){ wind_w=getwindowwidth(); wind_h=getwindowheight(); }
}

//]]>
</script>



Ket:
  1. floatimage : Untuk menempatkan URL Image-nya, kalian bisa nambah atau mengurang.
  2. Penetapan diawali dengan angka “0” sampai seterusnya
  3. Kode yang warna merah ntu bisa kalian ganti dengan “URL IMAGE KALIAN” atau klik SHOW untuk menampilkan:

Kode Disini >>



http://lh4.ggpht.com/_ILzML2joCeU/TMKkuGGpiBI/AAAAAAAAAD0/yV-ieFQT2GU/15034.gif

http://lh3.ggpht.com/_ILzML2joCeU/TMKkuG4EARI/AAAAAAAAAD4/Cw2r04R3k4g/15184.gif

http://lh4.ggpht.com/_ILzML2joCeU/TMKkudvIxSI/AAAAAAAAAD8/cnhwcH_F5bQ/19912.gif

http://lh6.ggpht.com/_ILzML2joCeU/TMKkujmd3qI/AAAAAAAAAEA/uuulpYAQl8c/27865.gif

http://lh5.ggpht.com/_ILzML2joCeU/TMKku6VDs_I/AAAAAAAAAEE/TLfVA3s4he0/73904.gif

http://lh6.ggpht.com/_ILzML2joCeU/TMKlVEj7tZI/AAAAAAAAAEI/U3n63CBEvh8/11047.gif

http://lh6.ggpht.com/_ILzML2joCeU/TMKlVQquNOI/AAAAAAAAAEM/UPNbo8zomYo/uuuuuuu.gif

http://lh6.ggpht.com/_ILzML2joCeU/TMKlVb_q-CI/AAAAAAAAAEQ/2hyLOvH9r6g/474167l68h9nknqq.gif

http://lh6.ggpht.com/_ILzML2joCeU/TMKlVj7Jg5I/AAAAAAAAAEU/uP-SyoHgXn4/bird_ann.gif

http://lh3.ggpht.com/_ILzML2joCeU/TMKlVy5BajI/AAAAAAAAAEY/oXlVYQ3zXoo/kampret.gif

http://lh4.ggpht.com/_ILzML2joCeU/TMKlskTzatI/AAAAAAAAAEc/G7aJqizQ6fo/74238.gif

http://lh4.ggpht.com/_ILzML2joCeU/TMKlshMrefI/AAAAAAAAAEg/Iaq4H2J2o1I/74253.gif

http://lh3.ggpht.com/_ILzML2joCeU/TMKls9K92fI/AAAAAAAAAEk/nJXA0uaMn8U/74283.gif

http://lh4.ggpht.com/_ILzML2joCeU/TMKmKFn1sRI/AAAAAAAAAEo/DZaqEHVtEHU/74276.gif

http://lh4.ggpht.com/_ILzML2joCeU/TMKmKJ3xfbI/AAAAAAAAAEs/sY548lVnUqg/butterfly.gif


5. Kemudian “Simpan” dan silahkan lihat hasilnya.


Nb. Sekali lagi aku kasih tau ma kalian, kode-kode scrip ne bisa ja gak bisa direspon alias gagal karena ada kode-kode yang hampir sama seperti “Membuat Kursor Bertabur Bintang” dan “Membuat Animasi Terbang Diblog”. Saranku kalian kudu milih salah satu, tapi kalo semuanya bisa tampil/berhasil ya Alhamdulillah dech.


HAPPY BLOGGING YA n SELAMAT BERPUASA




Tutorial Diatas Di-Ilhami Dari
http://forantum.blogspot.com/
Dan
http://www.myniceprofile.com/





Read More : Membuat Animasi Terbang Diblog

Monday 16 August 2010

Membuat Kursor Bertabur Bintang

Sore semua, gimana puasa kalian?? Hayo pada puasa gak??
Hadew aku lagi pusing berat ne, mungkin gara-gara pagi tadi gak sahur kaliya?? Abisnya bangun dah adzan subuh. Payah dech

Sesuai judul diatas aku mau kasih panduan / tutorialnya, emang sih ne tutorial dari blog sebelah. Awalnya aku emang minat buat desain blog yang ini tapi gara-gara scripnya di save di file hosting ma yg punya ya jadi aku agak kesulitan, coz jujur aja ya aku pengen tau kode aslinya.

Sedikit cerita ne ya. Kemaren aku download 2 scrip tapi setelah aku liat-liat kok kodenya sama persis yang beda hanya kode warnanya saja. Yadah, ide gilaku muncul buat ngedit ntu scrip jadi Cuma dg 1 scrip saja kita bisa mengubah warna bintangnya sesuai keinginan kita.

Ne ntar jadinya seperti dibawah ini ato kalian bisa liat sendiri di blogku ini :


1. Yang pertama kalian kudu Log-in dengan akun kalian masing-masing

2. Lalu masuk ke “Rancangan/Tata Letak” Trus “Elemen Laman”

3. Kemudian “Tambah Gadget” dan pilih “HTML/JavaScrip”

4. Kalo sudah masukkan kode dibawah ini :



<script type='text/javascript'>
// <![CDATA[
var colour="#0000FF";
var sparkles=65;

var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var tiny=new Array();
var star=new Array();
var starv=new Array();
var starx=new Array();
var stary=new Array();
var tinyx=new Array();
var tinyy=new Array();
var tinyv=new Array();
window.onload=function() { if (document.getElementById) {
var i, rats, rlef, rdow;
for (var i=0; i<sparkles; i++) {
var rats=createDiv(3, 3);
rats.style.visibility="hidden";
document.body.appendChild(tiny[i]=rats);
starv[i]=0;
tinyv[i]=0;
var rats=createDiv(5, 5);
rats.style.backgroundColor="transparent";
rats.style.visibility="hidden";
var rlef=createDiv(1, 5);
var rdow=createDiv(5, 1);
rats.appendChild(rlef);
rats.appendChild(rdow);
rlef.style.top="2px";
rlef.style.left="0px";
rdow.style.top="0px";
rdow.style.left="2px";
document.body.appendChild(star[i]=rats);
}
set_width();
sparkle();
}}
function sparkle() {
var c;
if (x!=ox || y!=oy) {
ox=x;
oy=y;
for (c=0; c<sparkles; c++) if (!starv[c]) {
star[c].style.left=(starx[c]=x)+"px";
star[c].style.top=(stary[c]=y)+"px";
star[c].style.clip="rect(0px, 5px, 5px, 0px)";
star[c].style.visibility="visible";
starv[c]=50;
break;
}
}
for (c=0; c<sparkles; c++) {
if (starv[c]) update_star(c);
if (tinyv[c]) update_tiny(c);
}
setTimeout("sparkle()", 40);
}
function update_star(i) {
if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
if (starv[i]) {
stary[i]+=1+Math.random()*3;
if (stary[i]<shigh+sdown) {
star[i].style.top=stary[i]+"px";
starx[i]+=(i%5-2)/5;
star[i].style.left=starx[i]+"px";
}
else {
star[i].style.visibility="hidden";
starv[i]=0;
return;
}
}
else {
tinyv[i]=50;
tiny[i].style.top=(tinyy[i]=stary[i])+"px";
tiny[i].style.left=(tinyx[i]=starx[i])+"px";
tiny[i].style.width="2px";
tiny[i].style.height="2px";
star[i].style.visibility="hidden";
tiny[i].style.visibility="visible"
}
}
function update_tiny(i) {
if (--tinyv[i]==25) {
tiny[i].style.width="1px";
tiny[i].style.height="1px";
}
if (tinyv[i]) {
tinyy[i]+=1+Math.random()*3;
if (tinyy[i]<shigh+sdown) {
tiny[i].style.top=tinyy[i]+"px";
tinyx[i]+=(i%5-2)/5;
tiny[i].style.left=tinyx[i]+"px";
}
else {
tiny[i].style.visibility="hidden";
tinyv[i]=0;
return;
}
}
else tiny[i].style.visibility="hidden";
}
document.onmousemove=mouse;
function mouse(e) {
set_scroll();
y=(e)?e.pageY:event.y+sdown;
x=(e)?e.pageX:event.x+sleft;
}
function set_scroll() {
if (typeof(self.pageYOffset)=="number") {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
}
window.onresize=set_width;
function set_width() {
if (typeof(self.innerWidth)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
}
function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height+"px";
div.style.width=width+"px";
div.style.overflow="hidden";
div.style.backgroundColor=colour;
return (div);
}
// ]]></script>



Nb. Nah ini sob bagian terpentingnya kode yang aku beri warna merah ntu kalian bisa ganti dengan warna yang kamu inginkan:
  • Misalnya dengan kode warna HTML kunjungi Wikipedia.org
  • Atau dengan “blue,black,green, dll

5. Kemudian “Simpan” dan silahkan lihat hasilnya

“Good Luck buat kalian semuanya ya”





Tutorial Diatas Di-Ilhami
Dari
http://amatullah83.blogspot.com/



.
Read More : Membuat Kursor Bertabur Bintang

Saturday 14 August 2010

Memberi Icon Di Address Bar

Ratna Jail, Ratna iseng, Ratna cewe usil… wkwkwkwk. Emang aku kadang kaya githu (aku ngaku aja dech)

Lagi lagi lagi dan lagi aku punya sedikit ilmu yang bisa aku share ke temen-temen semua. Kalo menurut aku ne, ilmu akan lebih bermanfaat jika kita turunkan ke orang lain (tul gak?)

Berawal dari aplikasi FB Cool Status yang biasanya Cuma buat memperindah status kita, semula emang gak kepikiran sama sekali tapi setelah aku liat-liat ternyata image-image imut ne bisa dijaiin icon di Addres Bar. Soalnya sampai sekarang aku blm juga berhasil merubah image menjadi icon-icon mini kaya githu. Udah nyoba tapi gagal maning gagal maning, mungkin lain kali boleh belajar lagi.

Langsung aja aku save as ke PC trus upload dech ke photobucket. Nah sekarang yang aku pengen share ke kalian semua adalah gimana cara Memberi Icon Di Address Bar. Gasak banyak cingcong lage langsung aja ke masalah utama.

Nanti Bakalan seperti ini/kalian bisa bayangin sendirilah :


1. Yang pertama kalian kudu Log-in dengan Id kalian masing-masing.

2. Lalu “Rancangan/Tataletak” kemudian “Edit HTML”

3. Setelah itu “Download Template Lengkap”
  • Namanya juga manusia kadang bisa aja keliru, wlw hal sepele kadang bisa menjadi masalah besar.
4. Centang (V) “Expand Template Widget”

5. Kemudian cari kode </head>
  • Untuk lebih mudahnya tekan CTRL + f
6. Dan copy paste kode dibawah ini tepat diatas </head>


<link href='http://lh4.ggpht.com/_ILzML2joCeU/TL1MyTY1pFI/AAAAAAAAABE/IRw4JO5reME/emoji_crab.gif' rel='SHORTCUT ICON'/>


  • Nb. Kalian bisa mengganti kode yang berwarna merah ntu dengan kode-kode Icon Mini Icon Koleksiku (silahkan pakai semaumu)
7. Lalu “Simpan Template” dan liat hasilnya


Happy Blogging ya semua






Tutorial Diatas Di-Ilhami
Dari

http://trik-tips.blogspot.com/





Read More : Memberi Icon Di Address Bar

Saturday 7 August 2010

Membuat Show Hide GuestBook

Alhamdulillah, satu demi satu ku tulis ulang ilmu yang aku peroleh dari senior-senior sebelah. Dan tutorial kali ini aku tujukan buat kawanku Toni, semoga bermanfaat ya.

Disini aku hanya ingin mengedit beberapa saja yang aku anggap mudah karena sekali lagi aku masih juga begitu awam masalah kode-kode javascrip. Tpi tutorial kali ini lebih mudah coz cuma nambah widget aja.

1. Seperti biasanya kalian kudu Log-In dulu dengan ID masing-masing

2. Selanjutnya “Rancangan” lalu “Elemen Laman”

3. Trus “Tambahkan Gadget”

4. Pilih “HTML/JavaScrip”

5. Lalu tambahkan kode dibawah ini :


Kode Disini >>



<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:130px;
width:50px;
margin-right:-3px;
float:left;
cursor:pointer;
background:url('http://lh3.ggpht.com/_ILzML2joCeU/TL1YyUv0f6I/AAAAAAAAACA/u6SvrxLTFis/gust%20book%20red.png') no-repeat;
}
.gbcontent{
float:left;
border-top: 10px solid #aa4545;
border-bottom: 10px solid #aa4545;
border-left: 10px solid #fc5050;
border-right: 10px solid #fc5050;
background:#cc0000;
padding:10px;
margin-right:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 50-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">

COPY PASTE SCRIP GUEST BOOK DISINI

<br />

<div style="text-align:right">
<a href="javascript:showHideGB()">
[close]
</a>
</div>
</div>

<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div>


Kode Disini >>



<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://lh5.ggpht.com/_ILzML2joCeU/TL1YyKEPxeI/AAAAAAAAAB4/EGABQy51Ddg/guestgreen.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">

COPY PASTE SCRIP GUEST BOOK DISINI

<br />

<div style="text-align:right">
<a href="javascript:showHideGB()">
[close]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>


Kode Disini >>



<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:200px;
width:30px;
float:left;
cursor:pointer;
background:url('http://lh3.ggpht.com/_ILzML2joCeU/TL1YyML9q_I/AAAAAAAAAB8/AEV2Kh1m2D0/GuestPink.gif') no-repeat;
}
.gbcontent{
float:left;
border:5px solid #BF00FF;
background:#FF00FF;
padding:5px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">

COPY PASTE SCRIP GUEST BOOK DISINI

<br />

<div style="text-align:right">
<a href="javascript:showHideGB()">
[close]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>


Kode Disini >>



<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:200px;
width:30px;
float:left;
cursor:pointer;
background:url('http://lh5.ggpht.com/_ILzML2joCeU/TL1YyIRfmXI/AAAAAAAAAB0/6HJo2okT8CA/GuestBLACK.gif') no-repeat;
}
.gbcontent{
float:left;
border:5px solid #000000;
background:#FFFFFF;
padding:5px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">


COPY PASTE SCRIP GUEST BOOK DISINI


<br />

<div style="text-align:right">
<a href="javascript:showHideGB()">
[close]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>


Kode Disini >>



<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:200px;
width:45px;
float:left;
cursor:pointer;
background:url('http://lh3.ggpht.com/_ILzML2joCeU/TL1YyUv0f6I/AAAAAAAAACA/u6SvrxLTFis/gust%20book%20red.png') no-repeat;
}
.gbcontent{
float:left;
border:10px solid #8B0000;
background:#FF0000;
padding:5px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">


COPY PASTE SCRIP GUEST BOOK DISINI


<br />

<div style="text-align:right">
<a href="javascript:showHideGB()">
[close]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>


Kode Disini >>



<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://lh5.ggpht.com/_ILzML2joCeU/TL1YyKEPxeI/AAAAAAAAAB4/EGABQy51Ddg/guestgreen.png') no-repeat;
}
.gbcontent{
float:left;
border:5px solid #6B8E23;
background:#00FF00;
padding:5px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">


COPY PASTE SCRIP GUEST BOOK DISINI



<br />

<div style="text-align:right">
<a href="javascript:showHideGB()">
[close]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>


6. Klik "Simpan"





Tutorial Diatas Di-Ilhami Dari
http://www.ordenaro.co.cc/
http://www.lapar-makan.co.cc/
Dan
http://blog-tips-and-trick.blogspot.com/



Read More : Membuat Show Hide GuestBook

Thursday 5 August 2010

Membuat Menu Tab View

Aku lagi dilanda ketagihan ne, tapi bukan lagi katagihan drug lho melainkan ketagihan nge-blog khususnya nge-postingin tutorial. Emang sih tutorialku hamper mirip or sama malahan dengan punya blog sebelah. Sedikit cerita ne, aku suka bgt ntu yang namanya ngutak-atik HTML, wlw gak jarang suka pusing juga gara-gara ntu kode-kode gak jelas.

Aku juga blogger baru kok, n blas gak ada ilmu ttg HTML , makanya setiap hal yang aku lakuin buat blogku pengen aku abadiin, hmm… itung-itung buat pengingat lah.

Awalnya aku pengen punya ntu yang namanya menu tab view (hayah paan ntu?) tapi lirik-lirik sana sini gak ada yang sreg, sekalinya sreg HTML-nya gak bisa respon (gagal maning gagal maning). Makanya isengku kambuh, ku gabungin ntu 2 tutorial ya Alhamdulillah berhasil juga.

Ntar jadinya seperti ini


1. Seperti biasanya Gan, kalian kudu Log-in dulu dengan ID masing-masing.

2. Langkah selanjutnya masuk ke “Rancangan/Tata Letak” kemudian “Edit HTML”

Seperti gambar dibawah ini ya


3. Yang sll aku tekanin kalian kudu “Download Template Lengkap” takutnya jika terjadi kekeliruan gan. Trus ne centang (V) Expand Template Widget.

4. Cari kode ]]></b:skin>
  • Untuk lebih mudahnya tekan CTRL + f
5. Copy paste kode dibawah ini tepat diatas kode ]]></b:skin>


div.TabView div.Tabs
{
height: 30px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 65px; /* Lebar Menu Utama Atas */

text-align: center;
height: 25px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #8F00FF; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Verdana", Serif; /* Font Menu Utama Atas */
font-weight: bold;
color: #000; /* Warna Font Menu Utama Atas */
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #8F00FF; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #8F00FF; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #000000; /* Warna background Kotak Utama */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}


6. Kemudian copy paste kode dibawah ini tepat di atas kode </head>


<script type='text/javascript'>
//<![CDATA[
function tabview_aux(TabViewId, id)
{
var TabView = document.getElementById(TabViewId);
// ----- Tabs -----
var Tabs = TabView.firstChild;
while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;
var Tab = Tabs.firstChild;
var i = 0;
do
{
if (Tab.tagName == "A")
{
i++;
Tab.href = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
Tab.className = (i == id) ? "Active" : "";
Tab.blur();
}
}
while (Tab = Tab.nextSibling);
// ----- Pages -----
var Pages = TabView.firstChild;
while (Pages.className != 'Pages') Pages = Pages.nextSibling;
var Page = Pages.firstChild;
var i = 0;
do
{
if (Page.className == 'Page')
{
i++;
if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
Page.style.overflow = "auto";
Page.style.display = (i == id) ? 'block' : 'none';
}
}
while (Page = Page.nextSibling);
}
// ----- Functions -------------------------------------------------------------
function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
//]]>
</script>


7. Kemudian klik “Simpan Template”

8. Kemudian langkah selanjutnya Klik “Rancangan/Tata Letak”

9. Lalu Masuk Ke “Elemen Laman” lalu “Tambahkan Gadget”

10. Kemudian pilih “HTML/JavaScrip” dan masukkan kode dibawah ini


<form action="tabview.html" method="get">

<div id="TabView" class="TabView">

<div style="width: 277px;" class="Tabs">

<a class="Active" href="javascript:tabview_switch('TabView',%201);">Materi</a>

<a class="" href="javascript:tabview_switch('TabView',%202);">Deskripsi</a>

<a class="" href="javascript:tabview_switch('TabView',%203);">Tips</a>

<a class="" href="javascript:tabview_switch('TabView',%204);">Edukasi</a>
</div>

<div style="width: 277px; height: 180px;" class="Pages">

<div style="overflow: auto; height: 200px; display: block;" class="Page">

<div class="Pad">
<li><a href=" #"><img src="http://sites.google.com/site/cumaisenggroup/Home/Purplearrow.gif" /> 1. Materi</a></li>
<li><a href=" #"><img src="http://sites.google.com/site/cumaisenggroup/Home/Purplearrow.gif" /> 2. Materi </a></li>
<li><a href=" # "><img src="http://sites.google.com/site/cumaisenggroup/Home/Purplearrow.gif" /> 3. Materi</a></li>
<li><a href=" # "><img src="http://sites.google.com/site/cumaisenggroup/Home/Purplearrow.gif" /> 4. Materi </a></li>
<li><a href=" # "><img src="http://sites.google.com/site/cumaisenggroup/Home/Purplearrow.gif" /> 5. Materi </a></li>
<li><a href="# "><img src="http://sites.google.com/site/cumaisenggroup/Home/Purplearrow.gif" /> 6. Materi </a></li>
<li><a href=" # "><img src="http://sites.google.com/site/cumaisenggroup/Home/Purplearrow.gif" /> 7. Materi </a></li>
<li><a href=" # "><img src="http://sites.google.com/site/cumaisenggroup/Home/Purplearrow.gif" /> 8. Materi </a></li>
<li><a href=" #"><img src="http://sites.google.com/site/cumaisenggroup/Home/Purplearrow.gif" /> 9. Materi </a></li>
<li><a href=" # "><img src="http://sites.google.com/site/cumaisenggroup/Home/Purplearrow.gif" /> 10. Materi</a></li>

</div>

</div>

<div style="overflow: auto; height: 200px; display: none;" class="Page">

<div class="Pad">

<li><a href=" #"><img src="http://sites.google.com/site/cumaisenggroup/Home/Purplearrow.gif" /> 1. Deskripsi</a></li>
<li><a href=" #"><img src="http://sites.google.com/site/cumaisenggroup/Home/Purplearrow.gif" /> 2. Deskripsi </a></li>
<li><a href=" # "><img src="http://sites.google.com/site/cumaisenggroup/Home/Purplearrow.gif" /> 3. Deskripsi</a></li>
<li><a href=" # "><img src="http://sites.google.com/site/cumaisenggroup/Home/Purplearrow.gif" /> 4.Deskripsi </a></li>
<li><a href=" # "><img src="http://sites.google.com/site/cumaisenggroup/Home/Purplearrow.gif" /> 5. Deskripsi </a></li>
<li><a href="# "><img src="http://sites.google.com/site/cumaisenggroup/Home/Purplearrow.gif" /> 6. Deskripsi </a></li>
<li><a href=" # "><img src="http://sites.google.com/site/cumaisenggroup/Home/Purplearrow.gif" /> 7. Deskripsi </a></li>
<li><a href=" # "><img src="http://sites.google.com/site/cumaisenggroup/Home/Purplearrow.gif" /> 8. Deskripsi </a></li>
<li><a href=" #"><img src="http://sites.google.com/site/cumaisenggroup/Home/Purplearrow.gif" /> 9. Deskripsi </a></li>
<li><a href=" # "><img src="http://sites.google.com/site/cumaisenggroup/Home/Purplearrow.gif" /> 10. Deskripsi</a></li>

</div>

</div>

<div style="overflow: auto; height: 200px; display: none;" class="Page">

<div class="Pad">

<li><a href=" #"><img src="http://sites.google.com/site/cumaisenggroup/Home/Purplearrow.gif" /> 1. Tips</a></li>
<li><a href=" #"><img src="http://sites.google.com/site/cumaisenggroup/Home/Purplearrow.gif" /> 2. Tips </a></li>
<li><a href=" # "><img src="http://sites.google.com/site/cumaisenggroup/Home/Purplearrow.gif" /> 3. Tips</a></li>
<li><a href=" # "><img src="http://sites.google.com/site/cumaisenggroup/Home/Purplearrow.gif" /> 4. Tips </a></li>
<li><a href=" # "><img src="http://sites.google.com/site/cumaisenggroup/Home/Purplearrow.gif" /> 5. Tips </a></li>
<li><a href="# "><img src="http://sites.google.com/site/cumaisenggroup/Home/Purplearrow.gif" /> 6. Tips </a></li>
<li><a href=" # "><img src="http://sites.google.com/site/cumaisenggroup/Home/Purplearrow.gif" /> 7. Tips </a></li>
<li><a href=" # "><img src="http://sites.google.com/site/cumaisenggroup/Home/Purplearrow.gif" /> 8. Tips </a></li>
<li><a href=" #"><img src="http://sites.google.com/site/cumaisenggroup/Home/Purplearrow.gif" /> 9. Tips </a></li>
<li><a href=" # "><img src="http://sites.google.com/site/cumaisenggroup/Home/Purplearrow.gif" /> 10. Materi</a></li>

</div>

</div>
<div style="overflow: auto; height: 200px; display: none;" class="Page">

<div class="Pad">

<li><a href=" #"><img src="http://sites.google.com/site/cumaisenggroup/Home/Purplearrow.gif" /> 1. Edukasi</a></li>
<li><a href=" #"><img src="http://sites.google.com/site/cumaisenggroup/Home/Purplearrow.gif" /> 2. Edukasi </a></li>
<li><a href=" # "><img src="http://sites.google.com/site/cumaisenggroup/Home/Purplearrow.gif" /> 3. Edukasi</a></li>
<li><a href=" # "><img src="http://sites.google.com/site/cumaisenggroup/Home/Purplearrow.gif" /> 4. Edukasi </a></li>
<li><a href=" # "><img src="http://sites.google.com/site/cumaisenggroup/Home/Purplearrow.gif" /> 5. Edukasi </a></li>
<li><a href="# "><img src="http://sites.google.com/site/cumaisenggroup/Home/Purplearrow.gif" /> 6. Edukasi </a></li>
<li><a href=" # "><img src="http://sites.google.com/site/cumaisenggroup/Home/Purplearrow.gif" /> 7. Edukasi </a></li>
<li><a href=" # "><img src="http://sites.google.com/site/cumaisenggroup/Home/Purplearrow.gif" /> 8. Edukasi </a></li>
<li><a href=" #"><img src="http://sites.google.com/site/cumaisenggroup/Home/Purplearrow.gif" /> 9. Edukasi </a></li>
<li><a href=" # "><img src="http://sites.google.com/site/cumaisenggroup/Home/Purplearrow.gif" /> 10. Edukasi </a></li>
</div>

</div>

</div>

</div></form>

<script type="text/javascript"><br/>
<br/>tabview_initialize('TabView');<br/><br/></script>


11. Lalu “Simpan”





Tutorial Diatas di-Ilhami Dari
http://miscah.blogspot.com/
Dan
http://blog-tips-and-trick.blogspot.com/








Read More : Membuat Menu Tab View

Tuesday 3 August 2010

Membuat Drop Down Menu

Beberapa bulan yang lalu aku sudah berhasil membuat Drop Down Menu untuk blog ku berkat tutorial dari senior-senior yang baik hati dan Alhamdulillah berhasil,

Tapi setelah aku pengen buat untuk blog yang lainnya eh…tiba-tiba malah blank dan lupa, ditambah lagi dulu aku menggabungkan dua turorial. Makanya tutorial kali ini aku tujukan untuk diriku sendiri.

Tampilan nantinya seperti dibawah ini,


Kalo begitu langsung aja ke TKP


1. Pertama kalian kudu Log-in di blogger.com dengan ID anda

2. Masuk ke “Rancangan/Tata Letak” kemudian “Edit HTML”


3. Kemudian jangan lupa Klik “Download Template Lengkap” buat jaga-jaga aja jika terjadi kesalahan. N jangan lupa centang (V) Expand Template Widget.

4. Lalu cari kode ]]></b:skin>
  • Untuk lebih mudahnya tekan CTRL + f
5. Dan copy paste kode dibawah ini tepat diatas kode ]]></b:skin>


.NavbarMenu {
background:#191B1D url(http://bp1.blogger.com/_pt7i0nbIOCY/R-ZM3Y0g2gI/AAAAAAAAABY/wqPGB3cXR5Q/s400/button1.gif) repeat-x top left;
width: 100%;
height: 37px;
color: #FFFFFF;
margin: 0 auto;
padding: 0;
font: bold 8px Arial, Tahoma, Verdana;
clear:both;
border-left:1px solid #333;
border-right:1px solid #333
}
.NavbarMenuleft {
width: 75%;
float:left;
margin:0;
padding:0;
}
.nav {
margin:0;
padding:0;
}
.nav ul {
float: left;
list-style:none;
margin:0;
padding:0;
}
.nav li {
list-style:none;
margin:0;
padding:0;
}
.nav li a, .nav li a:link, .nav li a:visited {
color:#fff;
display:block;
text-transform:capitalize;
margin:0;
padding:11px 10px 8px;
font:normal 12px Georgia, Times New Roman;
text-decoration: none;
}
.nav li a:hover, .nav li a:active {
background:#102427 url(http://lh5.ggpht.com/_pt7i0nbIOCY/SyYZwDCCgGI/AAAAAAAACc0/TPCaXfkieYA/button2_thumb%5B3%5D.gif) repeat-x top left;
;
color:#FFF;
margin: 0;
text-decoration: none;
}
.nav li li a, .nav li li a:link, .nav li li a:visited {
background:#2C5F24 url(http://bp1.blogger.com/_pt7i0nbIOCY/R-ZM3Y0g2gI/AAAAAAAAABY/wqPGB3cXR5Q/s400/button1.gif) repeat-x top left;
width:200px;
color:#fff;
text-transform:capitalize;
float:none;
margin:0;
padding:7px 10px;
border-bottom:1px solid #0d2601;
border-left:1px solid #0d2601;
border-right:1px solid #0d2601;
font: normal 14px Georgia, Times New Roman;
}
.nav li li a:hover, .nav li li a:active {
background:#102427 url(http://lh5.ggpht.com/_pt7i0nbIOCY/SyYZwDCCgGI/AAAAAAAACc0/TPCaXfkieYA/button2_thumb%5B3%5D.gif) repeat-x top left;
color:#fff;
}
.nav li {
float:left;
padding:0;
}
.nav li a.enclose, .nav li a.enclose:visited {
border-top:1px solid #000;
}
.nav li ul {
z-index: 9999;
position:absolute;
left:-999em;
height:auto;
width:170px;
margin:0;
padding:0;
}
.nav li ul a {
width: 140px;
}
.nav li ul ul {
margin: -1px 0 0 220px;
}
.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:hover, .nav li.sfhover {
position:static;
}
#search {
width: 25%;
font-size: 11px;
float: right;
margin: 0;
padding:0;
}
#searchform {
margin:0;
padding:0;
overflow:hidden;
display:inline;
}
#searchbox {
background:#ddd;
padding:0;
margin:0;
}
#search input {
background:transparent;
color:#fff;
float:left;
font-size:12px;
margin: 7px 0 0 10px;
width: 110px;
padding:3px 7px;
border: 1px solid #fff;
font: normal 10px arial, verdana, Times New Roman;
}
#search .btn {
margin:7px 0 0;
padding:0;
width:auto;
border:0;
}



6. Kemudian copy paste kode dibawah ini tepat di atas kode </head>



<script type="text/javascript" src="http://uvumitools.googlecode.com/files/mootools-for-dropdown.js"> </script>
<script type="text/javascript" src="http://uvumitools.googlecode.com/files/UvumiDropdown-compressed.js"> </script>
<script type="text/javascript">
var myMenu = new UvumiDropdown("dropdown-menu");
</script>



7. Lalu cari kode <div id='header-wrapper'>

Sebelumnya
  • Jika anda ingin drop down menu berada di atas header, letakkan kode tepat diatas kode <div id='header-wrapper'>
  • Tetapi jika anda ingin drop down menu di bawah header, letakkan kode di bawah kode end tag header-wrapper.</div><!-- end header-wrapper -->
Dan Ini kodenya


<div class='NavbarMenu'>
<div class='NavbarMenuleft'>
<ul class='nav' id='dropdown-menu'>
<li><a href='http://rtn-alwaysforyou.blogspot.com/' rel='nofollow'>Home</a>
</li>
<li><a href='#' rel='nofollow'>Perkantoran</a>
<ul>
<li><a href='#' rel='nofollow'>Coming Soon&#160;&#160;&#187;</a>
<ul><li><a href='#'>Coming Soon</a></li>
<li><a href='#' rel='nofollow'>Coming Soon</a></li>
<li><a href='#' rel='nofollow'>Coming Soon</a></li>
<li><a href='#' rel='nofollow'>Coming Soon</a></li>
<li><a href='#' rel='nofollow'>Coming Soon</a></li>
</ul></li>
<li><a href='#' rel='nofollow'>Coming Soon&#160;&#160;&#187;</a>
<ul><li><a href='#'>Coming Soon</a></li>
<li><a href='#'>Coming Soon</a></li>
<li><a href='#'>Coming Soon</a></li>
<li><a href='#'>Coming Soon</a></li>
<li><a href='#'>Coming Soon</a></li>
</ul></li>
</ul>
</li>
<li><a href='#' rel='nofollow'>Materi </a>
<ul>
<li><a href='#' rel='nofollow'>Coming Soon&#160;&#160;&#187;</a>
<ul><li><a href='#'>Coming Soon</a></li>
<li><a href='#' rel='nofollow'>Coming Soon</a></li>
<li><a href='#' rel='nofollow'>Coming Soon</a></li>
<li><a href='#' rel='nofollow'>Coming Soon</a></li>
<li><a href='#' rel='nofollow'>Coming Soon</a></li>
</ul></li>
<li><a href='#' rel='nofollow'>Coming Soon&#160;&#160;&#187;</a>
<ul><li><a href='#'>Coming Soon</a></li>
<li><a href='#'>Coming Soon</a></li>
<li><a href='#'>Coming Soon</a></li>
<li><a href='#'>Coming Soon</a></li>
<li><a href='#'>Coming Soon</a></li>
</ul></li>
</ul>
</li>
<li><a href='#' rel='nofollow'>Soal - Soal</a>
<ul>
<li><a href='#' rel='nofollow'>Coming Soon&#160;&#160;&#187;</a>
<ul><li><a href='#'>Coming Soon</a></li>
<li><a href='#' rel='nofollow'>Coming Soon</a></li>
<li><a href='#' rel='nofollow'>Coming Soon</a></li>
<li><a href='#' rel='nofollow'>Coming Soon</a></li>
<li><a href='#' rel='nofollow'>Coming Soon</a></li>
</ul></li>
<li><a href='#' rel='nofollow'>Coming Soon&#160;&#160;&#187;</a>
<ul><li><a href='#'>Coming Soon</a></li>
<li><a href='#'>Coming Soon</a></li>
<li><a href='#'>Coming Soon</a></li>
<li><a href='#'>Coming Soon</a></li>
<li><a href='# '>Coming Soon</a></li>
</ul></li>
</ul>
</li>
<li><a href='#' rel='nofollow'>Education</a>
<ul>
<li><a href='#' rel='nofollow'>Coming Soon&#160;&#160;&#187;</a>
<ul><li><a href='#'>Coming Soon</a></li>
<li><a href='#' rel='nofollow'>Coming Soon</a></li>
<li><a href='#' rel='nofollow'>Coming Soon</a></li>
<li><a href='#' rel='nofollow'>Coming Soon</a></li>
<li><a href='#' rel='nofollow'>Coming Soon</a></li>
</ul></li>
<li><a href='#' rel='nofollow'>Coming Soon&#160;&#160;&#187;</a>
<ul><li><a href='#'>Coming Soon</a></li>
<li><a href='#'>Coming Soon</a></li>
<li><a href='#'>Coming Soon</a></li>
<li><a href='#'>Coming Soon</a></li>
<li><a href='#'>Coming Soon</a></li>
</ul></li>
</ul>
</li>
<li><a href='#' rel='nofollow'>Download</a>
<ul>
<li><a href='#' rel='nofollow'>Coming Soon&#160;&#160;&#187;</a>
<ul><li><a href='#'>Coming Soon</a></li>
<li><a href='#' rel='nofollow'>Coming Soon</a></li>
<li><a href='#' rel='nofollow'>Coming Soon</a></li>
<li><a href='#' rel='nofollow'>Coming Soon</a></li>
<li><a href='#' rel='nofollow'>Coming Soon</a></li>
</ul></li>
<li><a href='#' rel='nofollow'>Coming Soon&#160;&#160;&#187;</a>
<ul><li><a href='#'>Coming Soon</a></li>
<li><a href='#'>Coming Soon</a></li>
<li><a href='#'>Coming Soon</a></li>
<li><a href='#'>Coming Soon</a></li>
<li><a href='#'>Coming Soon</a></li>
</ul></li>
</ul>
</li>
<li><a href='#' rel='nofollow'>Gudang Lagu</a>
<ul>
<li><a href='#' rel='nofollow'>Coming Soon&#160;&#160;&#187;</a>
<ul><li><a href='#'>Coming Soon</a></li>
<li><a href='#' rel='nofollow'>Coming Soon</a></li>
<li><a href='#' rel='nofollow'>Coming Soon</a></li>
<li><a href='#' rel='nofollow'>Coming Soon</a></li>
<li><a href='#' rel='nofollow'>Coming Soon</a></li>
</ul></li>
<li><a href='#' rel='nofollow'>Coming Soon&#160;&#160;&#187;</a>
<ul><li><a href='#'>Coming Soon</a></li>
<li><a href='#'>Coming Soon</a></li>
<li><a href='#'>Coming Soon</a></li>
<li><a href='#'>Coming Soon</a></li>
<li><a href='#'>Coming Soon</a></li>
</ul></li>
</ul>
</li>
<li><a href='#' rel='nofollow'>Artikel</a>
<ul>
<li><a href='#' rel='nofollow'>Coming Soon&#160;&#160;&#187;</a>
<ul><li><a href='#'>Coming Soon</a></li>
<li><a href='#' rel='nofollow'>Coming Soon</a></li>
<li><a href='#' rel='nofollow'>Coming Soon</a></li>
<li><a href='#' rel='nofollow'>Coming Soon</a></li>
<li><a href='#' rel='nofollow'>Coming Soon</a></li>
</ul></li>
<li><a href='#' rel='nofollow'>Coming Soon&#160;&#160;&#187;</a>
<ul><li><a href='#'>Coming Soon</a></li>
<li><a href='#'>Coming Soon</a></li>
<li><a href='#'>Coming Soon</a></li>
<li><a href='#'>Coming Soon</a></li>
<li><a href='#'>Coming Soon</a></li>
</ul></li>
</ul>
</li>
</ul></div>
<div id='search'>
<form action='/search/' id='searchform' method='get' style='display:inline;'>
<input id='searchbox' maxlength='160' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Search...&quot;;}' onfocus='if (this.value == &quot;Search...&quot;) {this.value = &quot;&quot;}' type='text' value='Search...'/>
<input class='btn' name='' src='http://lh4.ggpht.com/_pt7i0nbIOCY/ScdxoASk9rI/AAAAAAAABoM/3qt9F1KUH_s/views-24_thumb%5B1%5D.png?imgmax=800' type='image' value='Go'/>
</form>
</div></div>



8. Lalu klik “Simpan Template”

9. Untuk tahab ini memang telah selesai, dan untuk tahab selanjutnya adalah mengganti link-link beserta keywoardnya.





Tutorial Diatas di-Ilhami Dari
http://kolom-tutorial.blogspot.com/
Dan
http://masdazine.blogspot.com/




Read More : Membuat Drop Down Menu

  © Ratna-Always For You The Transformers by Blog Tips And Trick 2009