Kode Javascript Dan HTML Sederhana Buat Di Blog


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 di template blog kalian lalu ganti dengan kode dibawah ini gan.

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 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.

alert("SELAMAT DATANG DI BLOG GAK JELAS INI");

Pesan Penutup

Kode ini muncul kalau pengunjung mau meninggalkan atau menutup tab blog kalian gan. Cara pasangnya sama dengan pesan pembuka, cari kode lalu copy paste kode berikut di bawahnya gan. Tinggal di edit aja kalimat yang di highlight sesuai keinginan kalian gan.

window.onbeforeunload=function(){
return confirm("Yakin Ingin Meninggalkan Blog Ini?? Masih Banyak Yang Menarik Loh Untuk Di Baca!!");
}

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.

function playSound(soundfile) {
document.getElementById("SCsound").innerHTML=
"http://+soundfile+";
}

Lalu copy dan paste kode di bawah ini buat ngemunculin musik/soundnya gan.


Mouseover DISINI Buat Dengerin Musik

Atau

Klik DISINI Buat Dengerin Musik

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 lalu copy paste kode javascript di bawah ini di atasnya gan.

function showHide() { var ele = document.getElementById("showHideDiv");
if(ele.style.display == "block") { ele.style.display = "none"; }
else { ele.style.display = "block"; } }

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.

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.

Show-Hide

5. Teks Berjalan / Marquee

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.

Teks, Link Atau Gambar Kalian Disini

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.

Contoh :

"scrool" direction="left"

Contoh marquee atau teks berjalan

"alternate"

Contoh marquee atau teks berjalan

"scrool" direction="left" dengan gambar

badge

6. Downloading Progress Bar

Dengan kode ini kita bisa dengan mudah membuat bar proses download yang sederhana gan. Yang ini pake javascript kalau di klik progress barnya bergerak atau berubah otomatis gan. Tinggal copy dan paste kode di bawah ini dimana pun loe mau gan.

//current progress
var currProgress = 0;
//is the task complete
var done = false;
//total progress amount
var total = 100;

//function to update progress
function startProgress() {
//get the progress element
var prBar = document.getElementById("prog");
//get the start button
var startButt = document.getElementById("startBtn");
//get the textual element
var val = document.getElementById("numValue");
//disable the button while the task is unfolding
startButt.disabled=true;
//update the progress level
prBar.value = currProgress;
//update the textual indicator
val.innerHTML = Math.round((currProgress/total)*100)+"%";
//increment the progress level each time this function executes
currProgress++;
//check whether we are done yet
if(currProgress>100) done=true;
//if not done, call this function again after a timeout
if(!done)
setTimeout("startProgress()", 100);
//task done, enable the button and reset variables
else
{
document.getElementById("startBtn").disabled = false;
done = false;
currProgress = 0;
}
}

0%

Standarnya progress bar ini kodenya cuma gan. Contoh seperti yang dibawah ini, silahkan di coba gan.
Sumber : http://www.developerdrive.com/2012/07/displaying-the-progress-of-tasks-with-html5/

Progress Bar

start
0%

7. Textarea

Fungsi textarea ini bisa buat naruh kode di postingan gan sebagai pengganti blockquote. Cara pasangnya gampang gan tinggal copy paste kode di bawah ini dan ada tiga pilihan gan.

Biasa

Teks atau Kode Disini Gan

Seleksi Otomatis

Teks atau Kode Disini Gan

Seleksi Dengan Tombol

Teks atau Kode Disini Gan

Tinggal di edit aja gan rows buat tinggi dan cols buat lebar. Untuk yang pake tombol kalian bisa ganti tulisan Select Text sesuai keinginan gan. Contoh ada dibawah ini gan silahkan dicoba.

Biasa

Teks atau Kode Disini Gan

Seleksi Otomatis

Teks atau Kode Disini Gan

Seleksi Dengan Tombol

Teks atau Kode Disini Gan

Select Text

8.Link Dengan Pop Up

Yang terakhir gan, ini kode buat link kalau di klik bakal muncul pop up sesuai dengan target Urlnya. Misal digunakan untuk iklan atau link download gan. Copy paste kode javascript di bawah ini di atas kode atau bisa juga paste langsung di postingan dengan linknya gan.

function scpopup(url) {
newwindow=window.open(url,'name','height=200,width=150');
if (window.focus) {newwindow.focus()}
return false;
}

Buat kode linknya seperti di bawah ini silahkan di copy paste gan.

Contoh Link Popup

Tinggal diganti aja Target URL Pop up dengan link yang kalian inginkan gan. Buat contoh klik aja link di bawah ini gan.

Contoh Link Popup

Sekian dulu yang bisa gw share kali ini gan semoga kode javascript dan HTML sederhana ini bisa berguna buat di blog kalian. Kalau kalian juga punya kode-kode yang keren silahkan di share sama jangan lupa juga ninggalin komentar gan.

Sumber: http://www.seociyus.com/2013/02/kode-javascript-dan-html-sederhana-buat-di-blog.html#ixzz3nUJKxTSb
Under Creative Commons License: Attribution Non-Commercial
Follow us: @SEOCiyus on Twitter

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

Mari kita bersama meningkatkan kesadaran kita - Mulailah berpikir cerdas, Kita semua beragama !!! Agama bukan identitas...jadikanlah agama untuk keluar dari kebodohan

Tulisan di blog ini mungkin sangat ngawur tapi mungkin juga benar. Merdekakan pikiran anda, sentuh hati nurani anda. Yang ada tinggal KASUNYATAN SEJATI

Zoemalang's community at www. zoemalang.wordpress.com

ujung malang adalah Sebuah desa yang hilang terganti dengan ujung harapan

YoYo Games Blog Feed

Tulisan di blog ini mungkin sangat ngawur tapi mungkin juga benar. Merdekakan pikiran anda, sentuh hati nurani anda. Yang ada tinggal KASUNYATAN SEJATI

Dealer Termurah

Menjual Segala Jenis Motor Baru Di Indonesia Cash Maupun Kredit

%d blogger menyukai ini: