Posted by :
latif gokil
Setiap blogger baik pemula maupun yang udah ahli pasti bakal nemuin kode
Javascript dan HTML di dalam blognya bener gak gan. Karena kedua kode ini
merupakan elemen dasar dalam membuat dan memperkeren blog kita terutama di
Blogger.
Pada kesempatan kali ini gw pengen share beberapa kode Javascript dan HTML sederhana buat di blog. Mungkin kode-kode ini sederhana tapi bisa sangat berguna buat memperkeren blog gan. Jadi bisa di gunakan di blog kalian nantinya.
Silahkan langsung disimak kode-kode di bawah ini gan, siapa tau berguna buat kalian atau memang kalian lagi mencari kode-kode ini. Semoga kode-kodenya bemanfaat dan menambah pengetahuan kita tentang kode Javascript dan HTML.
Kode Javascript Dan HTML Sederhana Buat Di Blog
1. Anti Klik Kanan
Kode javascript ini buat menonaktifkan klik kanan di blog kalian gan, jadi pengunjung gak bisa klik kanan dan melihat source kode blog loe. Cari kode <body> di template blog kalian lalu ganti dengan kode dibawah ini gan.
<body
oncontextmenu="return false;">
2. Kotak Pesan Peringatan ( Alert Box )
Pesan Pembuka
Kode ini buat nampilin pesan saat pengunjung pertama kali membuka atau mengunjungi blog kalian gan. Cari kode </head> di template blog, lalu copy paste kode di bawah ini tepat di bawahnya gan. Tinggal di edit aja kalimat yang di highlight sesuai keinginan kalian gan.
<script
type="text/javascript">
alert("SELAMAT DATANG DI BLOG GAK JELAS INI");
</script>
alert("SELAMAT DATANG DI BLOG GAK JELAS INI");
</script>
Pesan Penutup
Kode ini muncul kalau pengunjung mau meninggalkan atau menutup tab blog kalian gan. Cara pasangnya sama dengan pesan pembuka, cari kode </head> lalu copy paste kode berikut di bawahnya gan. Tinggal di edit aja kalimat yang di highlight sesuai keinginan kalian gan.
<script
type="text/javascript">
window.onbeforeunload=function(){
return confirm("Yakin Ingin Meninggalkan Blog Ini?? Masih Banyak Yang Menarik Loh Untuk Di Baca!!");
}
</script>
window.onbeforeunload=function(){
return confirm("Yakin Ingin Meninggalkan Blog Ini?? Masih Banyak Yang Menarik Loh Untuk Di Baca!!");
}
</script>
3.Onmouseover Sound
Kode ini buat memberikan backsound musik kalau pengunjung mengarahkan atau mengklik mousenya ke text atau gambar gan. Caranya tinggal copy paste kode di bawah ini ke mode HTML edit post blog kalian.
<script
language="javascript" type="text/javascript">
function playSound(soundfile) {
document.getElementById("SCsound").innerHTML=
"<embed src=\""+soundfile+"\" hidden=\"true\" autostart=\"true\" loop=\"false\" />";
}
</script>
<span id="SCsound"></span>
function playSound(soundfile) {
document.getElementById("SCsound").innerHTML=
"<embed src=\""+soundfile+"\" hidden=\"true\" autostart=\"true\" loop=\"false\" />";
}
</script>
<span id="SCsound"></span>
Lalu copy dan paste kode di bawah ini buat ngemunculin musik/soundnya gan.
<a
href="#" onmouseover="playSound('URL-FILE-MUSIK/SOUND');">
Mouseover DISINI Buat Dengerin Musik</a>
Mouseover DISINI Buat Dengerin Musik</a>
Atau
<a
href="#" onclick="playSound('URL-FILE-MUSIK/SOUND');">Klik DISINI
Buat Dengerin Musik</a>
Tinggal dipilih aja mau yang onmouseover atau onclick gan. Lalu ganti URL-FILE-MUSIK/SOUND dengan Url file musik/sound kalian. Silahkan di edit sendiri kalimatnya atau bisa juga diganti sama gambar gan. Contoh kayak di bawah ini, silahkan di coba dan mungkin loadnya agak lama karena gw pake file mp3 gan.
Mouseover DISINI Buat Dengerin Musik
Klik DISINI Buat Dengerin Musik
4.Show Hide Konten / Spoiler
Kode untuk menampilkan atau menyembunyikan konten, mirip tombol spoiler yang ada di forum-forum gan. Cara pasangnya gampang, loe cari kode </head> lalu copy paste kode javascript di bawah ini di atasnya gan.
<script
language='javascript' type='text/javascript'>
function showHide() { var ele = document.getElementById("showHideDiv");
if(ele.style.display == "block") { ele.style.display = "none"; }
else { ele.style.display = "block"; } }
</script>
function showHide() { var ele = document.getElementById("showHideDiv");
if(ele.style.display == "block") { ele.style.display = "none"; }
else { ele.style.display = "block"; } }
</script>
Sekarang tinggal nambahin kode di konten yang pengen di isi tombol buka tutupnya gan. Copy paste kode di bawah ini dan letakan kontenya di tempat yang udah gw kasi tanda gan.
<form
action="" method="post">
<input onclick="return showHide();" type="button" value="Show-Hide" />
</form>
<div id="showHideDiv" style="display: none;">
---------> Konten Disini Gan <--------
</div>
<input onclick="return showHide();" type="button" value="Show-Hide" />
</form>
<div id="showHideDiv" style="display: none;">
---------> Konten Disini Gan <--------
</div>
Konten bisa apa aja bisa gambar,
teks atau apapun. Buat edit tulisan di tombolnya ganti aja Show-Hide sesuai keinginan loe. Contoh
seperti di bawah ini di klik aja gan.
5. Teks Berjalan / Marque
Kode ini bisa kalian gunakan untuk menampilkan teks berjalan gan. Kodenya sangat sederhana bisa juga untuk gambar atau link gan. Tinggal copy kode di bawah ini dan pastekan di manapun kalian suka.
<marquee
onmouseover="this.stop()" onmouseout="this.start()" behavior="scroll" direction="left"
bgcolor="#FF0000">Teks, Link Atau Gambar Kalian
Disini</marquee>
Buat ngerubah arahnya tinggal di ganti aja "left" sesuai keinginan kemana arah yang loe mau gan. Buat behavior bisa juga diganti pake alternate atau slide, untuk bgcolor silahkan ganti warnanya sesuka hati gan.
Tidak ada komentar:
Posting Komentar