Header

Kode Javascript Dan HTML Sederhana Buat Di Blog

Posted by : Admin On 23 February 2013 107 comments

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>


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>


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>


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>


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>


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>


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


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

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.


<script type="text/javascript">
//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;
}
}
</script>
<progress id="prog" value="0" max="100"></progress>
<br />
<input id="startBtn" onclick="startProgress()" type="button" value="start" />
<div id="numValue">
0%</div>


Standarnya progress bar ini kodenya cuma <progress value="0" max="100"></progress> 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



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

<textarea rows="4" cols="50">
Teks atau Kode Disini Gan
</textarea>


Seleksi Otomatis

<textarea rows="4" cols="50" onclick="this.focus();this.select()" readonly="readonly">
Teks atau Kode Disini Gan
</textarea>


Seleksi Dengan Tombol

<form name="selectall">
<textarea name="messageBody" rows="4" cols="50">Teks atau Kode Disini Gan</textarea>
<br />
<input type="button" value="Select Text" onClick="javascript:this.form.messageBody.focus();this.form.messageBody.select();">
</form>


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


Seleksi Otomatis


Seleksi Dengan Tombol



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 </head> atau bisa juga paste langsung di postingan dengan linknya gan.


<script language="javascript" type="text/javascript">
function scpopup(url) {
    newwindow=window.open(url,'name','height=200,width=150');
    if (window.focus) {newwindow.focus()}
    return false;
}
</script>


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


<a href="Target URL Pop up" onclick="return scpopup('Target URL Pop up')">Contoh Link Popup</a>


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.

» Loe suka postingan ini? Silahkan di link back dengan mengcopy kode dibawah gan.

URL :

HTML link kode :

» Luangin waktu 5 detik donk gan buat share postingan ini.

Mau Dapet Updates Gan!

Ikuti SEO Ciyus

107 comments:

  1. yang Nomor 6 itu masukin URL yg mau didownload caranya gimana ??

    ReplyDelete
    Replies
    1. Ehm,... :k

      Caranya nambahin kode onclick di tag input ( button ) gan.

      bisa pake kode window.location ( kebuka di tab yang sama ) atau window.open ( kebuka di tab laen )

      contoh :

      onclick="startProgress();window.open(href='URL Download disini');"

      atau

      onclick="startProgress();window.location.href='URL Download disini';"

      semoga membantu gan kalau masalah edit tampilan gw gak ngerti soalnya kode buatan orang laen ini. :r

      Delete
  2. bagus mas....
    pengen nyoba...
    makasih ya....
    minta izin ngeLink mas...

    ReplyDelete
  3. Ngeri juga pake javascript, blog saya dihapus google....

    ReplyDelete
    Replies
    1. kalo pake script emang harus hati2 gan,.

      gw juga pernah ngalamin dihapus gr2 script... :w

      Delete
  4. gan kalo scrip kayak di blog ini gmn ya http://baratos.us/
    jadi dia ga perlu klik dan loading, jadi tinggal klik dan langsung muncul, di post pertama itu gan, gmn ya scrip nya

    ReplyDelete
  5. kalau progress gk dibuat 100 % caranya gmn butuh bngt tolong sgr dijawab :q

    ReplyDelete
    Replies
    1. ane kurang paham gan soalnya bukan gw yg buat, coba ke link sumbernya tanyain disana gan,.

      Delete
  6. trus gmn caranya biar jalannya progressbar pas loading tanpa klik button

    ReplyDelete
    Replies
    1. kalau gk di klik mana mau jalan gan? :k

      buat otomatis gw gk bgtu ngrti kode JS gan sorry ya,. :l

      Delete
  7. aQ bookmark ya gan,, siapa tau nanti pingin pake :s

    ReplyDelete
  8. Cakep cakep cakep.... tutor agan mantab bnget. ane salut banget ama agan

    ReplyDelete
  9. Sip.. Thx Share ilmunya.. Top...

    ReplyDelete
    Replies
    1. @Sam B, Rosyid, Wong, Kdaiku : sama2 agan semua... :l

      Delete
  10. gan mau nanya,misal kita nulis di notepad,trus agar bisa di download di blog kita,caranya gimana gan,tlg balas n thanks gan

    ReplyDelete
    Replies
    1. nulis ap mksdnya bli? puisi atau kode? :r

      tinggal di upload aja ke file hosting gratisan misal Google code dan masih banyak yg lain gan, ntar tinggal di copy aja url downloadnya beres.

      semoga membantu gan,. :l

      Delete
  11. mas setelah saya coba beberapa trik dari mas,,kok malah timbul tulisan seperti ini bos"Sumber: http://seociyus.blogspot.com/2013/02/kode-javascript-dan-html-sederhana-buat-di-blog.html#ixzz2U2f04NqT Under Creative Commons License: Attribution Non-Commercial Follow us: @SEOCiyus on Twitter ..tolong kasih tau dong mas cara menghilangkanya,, cos blog saya jd terlihat kurang bagus bos kalo ada tulisan diatasny.. mohon jawabanya bos

    ReplyDelete
    Replies
    1. nah kenapa tu? :r

      gampang gan tinggal dihapus aja tulisan tsbt dari kodenya yg ente copas. itu script sengaja dipasang buat anti copas & analisa artikel yg dicopas gan hapus aja gak masalah. :l

      Delete
  12. wahh infonya menarik gan .ehh agan mau tanya dong gimana caranya membuat tulisan author untuk komentar admin blogger ya gan?
    Salam Blogger Indonesia kunjungi balik blogku ya kawan di http://ilmu-bermanfaat23.blogspot.com/

    ReplyDelete
    Replies
    1. nmbahin gmbar aj gan, pnjng kalo dhelasin soalnya ntar ngatur posisinya biar pas susah. klo mau yg kyk gni cek aj di blognya Paul almtnya spiceupyourblog[dot]com

      Delete
  13. waahhhh cuman saran aja nihh agan emmm kok templatenya agan ini banyak yang tidak valid ya gan?hehehe :y

    ReplyDelete
    Replies
    1. ya gan emang gk masalah kok yg penting artikelnya bener gk? :l

      Delete
  14. wahhhhh benerr gann 100 buat anda yang penting kita utamakan kualitas artikel kita karena kann semuanya demi pengunjung hehehe :s

    ReplyDelete
  15. Makasih kode2 scrip'ya gan..:m

    ReplyDelete
  16. yang script untuk download button udah saya coba Gan, n berhasil untuk download tapi kok prosentase progress bar nya nggak sesuai jumlah byte yang di download? gimana biar sesuai Gan?

    ReplyDelete
    Replies
    1. harus nambah script gan, kbetulan kodenya bukan gw yg buat. coba aja ke link sumbernya tanyain disana gan ok. :l

      Delete
  17. ggan, untuk pesan penutup kog ga muncul ya?
    pdahal pesan pembukanya muncul.

    apa salah ya kalo di paste pas di bawah pesan pembuka???

    matur suwun gan...

    ReplyDelete
  18. Thanks ilmunya gan...ntar ane coba di TKP..... :j

    ReplyDelete
  19. Info yg menarik buat tambah2 koleksi ilmu ane gan.... Ijin praktek di TKP :j

    ReplyDelete
  20. caranya itu gimana ?? udah coba berkali2 tapi tetep "kesalahan link" tolong dibantu...

    ReplyDelete
  21. makasih gan, postingan ini sangat membantu..
    kalo ada waktu mampir ke blog saya gan,..

    ReplyDelete
  22. Fantastic article ! You havemade some very astute statements and I appreciate the the effort you have put into your writing. Its clear that you know what you are writing about. I am excited to read more of your sites content.

    Latest jobs

    ReplyDelete
  23. yang Teks Berjalan kok g bisa ya gan ?? cuman muncul bacgroundnya doank. tulisannya g ada ??

    ReplyDelete
  24. Sangat bermanfaat gan...
    Thank's...

    Salam kenal ya...

    ReplyDelete
  25. keren, kalo ada waktu tolong mampir di blog baru saya ya gan ;)

    ReplyDelete
  26. Onmouseover Sound nya kagak bisa, itu copasnya msih di template kn???

    ReplyDelete
  27. makasih gan,,,ane pemula pengen belajar|

    ReplyDelete
  28. MAKASIH BANG INI SANGAT MEMBANTU BLOGGER GAPTEK SEPERTI SAYA

    ReplyDelete
  29. langsung tak praktekin detik ini juga.,demi blog bayi ane yang baru berumur 15 hari...,hehehehe

    ReplyDelete
  30. saya mengirim pesan ke teman fb saya gan,,saya beri link,,kenapa harus terbuka di tab yang baru gan,,saya minta pentunjuknya dong gan biar terbuka di tab yang sama,,alias ditimpa..thanks

    ReplyDelete
  31. Gan gmn cara downloadnya javascriptna..
    please #coment

    ReplyDelete
  32. mantap gan , ijin culik ilmu nya ya :D
    oh ia gan , mampir dong ke blog saya http://pemana007.blogspot.com/ ,sekalian ajari saya mendesain blog nya maaf masi nubie gan :(

    ReplyDelete
  33. Kode HTML agar blog tidak bisa diklik kanan menambah pengalaman blogging gue gan. thanks

    ReplyDelete
  34. gan, pesan penutupnya koq gx berfungsi ?
    kalo pesan pembukanya udah jalan

    ReplyDelete
  35. keren gan... thanks infonya gan...

    ReplyDelete
  36. Min itu yang show hide gimana maksud :f copas javascriptnya dimana ? :f

    ReplyDelete
  37. bang saya bru bang di dunia blog bang !! bisa bantu ksh masukan referensi atau bimbingan gitu gk bang

    ReplyDelete
  38. Wow, sangat membantu gan .. thanks Ilmu ny!!!

    ReplyDelete
  39. cara agar blog ada iklannya gimana? ya
    mohon di balas
    thanks

    ReplyDelete
  40. mampir di blog ane yah jryout4.blogspot.com

    ReplyDelete
  41. Izin Copas gan.. Makasih,

    Salam kenal.. :)

    ReplyDelete
  42. gan saya suka bgt sama template agan,agan download dimana???kasih tau donk

    ReplyDelete
  43. klo nambahin script-script itu, kira-kira ada effek negetif untk loading blog(lelet/gmn gitu). .?
    thanks untuk artikelnya. .
    salam
    Ashab - - Supplier Herbal Murah

    ReplyDelete
  44. Gan Kalau no.4 itu cara isi kontennya gimana?

    ReplyDelete
  45. Mantap Visit Balik
    http://blog-224.blgspot.com

    ReplyDelete
  46. kayaknya untuk script antik klik kanan boleh juga ya...untuk memperkecil ada peluang artikel kita di copas oleh orang lainn..hehee

    ReplyDelete
  47. http://www.narotama.ac.id

    terima kasih gan

    ReplyDelete
  48. thanks sob sudah berbagi :)
    http://vitterawater.com

    ReplyDelete
  49. mantap gan mampir juga http://kangmasucup.blogspot.com

    ReplyDelete
  50. terimakasih banyak sob buat tutorialnya...

    http://obattraditional.com/obat-tradisional-ambeien/

    ReplyDelete
  51. anti klik kanannya masih work gak gan

    ReplyDelete
  52. Wah! Mantap banget gan infonya.

    ReplyDelete
  53. postingannya mantap gan. lanjutkan gan.

    visit juga http://zeltzeist.blogspot.com/

    ReplyDelete
  54. mari saling support gan gan
    mari lihat situs saya di http://www.kyai.info/

    ReplyDelete
  55. konten tentang blog ini yang pernah di kunjungi. di share oleh www.pakarpulsamandiri.com

    terima kasih atas pencerahan nya.

    ReplyDelete
  56. cara memberi anti blog pada bagian tertentu gimana gan?
    mampir blog ane gan
    http://semarangcity20.blogspot.co.id/

    ReplyDelete
  57. terima kasih sangat bermanfaat sekali untu bloggku yang sederhana

    ReplyDelete
  58. sangat bermanfaat,....
    www.uchiha-uzuma.com

    ReplyDelete
  59. SANGAT BAGUS
    philippurwoko.blogspot.co.id

    Req update:
    cara tampilkan view di blog

    ReplyDelete

Yang komen spam dan komen asal ga punya otak bego

Terima Kasih

Admin SEO Ciyus

Berikutnya Sebelumnya