kode HTML cantik di BLOG --> Skip to main content

follow us

DATA COVID-19 INDONESIA

😷 Positif:

😊 Sembuh:

😭 Meninggal:

(Data: kawalcorona.com)
Home news tutorial blog kode HTML cantik di BLOG

kode HTML cantik di BLOG

Kumpulan beberapa kode HTML dan Javascript hasil blogwalking kemudian saya rangkum pada postingan artikel di MonosBit, yaaa barangkali ada tertarik buat digunakan di blog atau website sobat. Beberapa kode HTML dan Javascript sudah diberi keterangan untuk cara pemasangan serta contoh dari penggunaanya. Oke sob... tinggal copy-paste aja deh, jangan lupa komentarnya yaa.
Background Effect
  • Script Efek Daun Berguguran
    <script src="http://sites.google.com/site/monosbit/monosbit_daungugur.js"></script>
    Taruh script ini dibawah <body> pada kode HTML Template blog atau bisa juga dipasang di kotak postingan gadget sebagai widget blog.

    •
  • Script Efek Faling Love Heart
    <script src="http://sites.google.com/site/monosbit/monosbit_LoveHeart.js"></script>
    Taruh script ini dibawah <body> pada kode HTML Template blog atau bisa juga dipasang di kotak postingan gadget sebagai widget blog.

    •
  • Script Efek Color Star
    <script src="http://sites.google.com/site/monosbit/monosbit_ColoredStars.js"></script>
    Taruh script ini dibawah <body> pada kode HTML Template blog atau bisa juga dipasang di kotak postingan gadget sebagai widget blog.

    •
  • Script Efek Salju Kecil
    <script src="http://sites.google.com/site/monosbit/monosbit_snow.js"></script>
    Taruh script ini dibawah <body> pada kode HTML Template blog atau bisa juga dipasang di kotak postingan gadget sebagai widget blog.

    •
  • Script Efek Salju Besar
    <script src="http://sites.google.com/site/monosbit/monosbit_snowstorm.js"></script>
    Taruh script ini dibawah <body> pada kode HTML Template blog atau bisa juga dipasang di kotak postingan gadget sebagai widget blog.
Cursor Effect
  • Script Efek Bintang
    <script src="http://sites.google.com/site/monosbit/monosbit_bintang.js"></script>
    Script ini menampilkan efek bintang berjatuhan pada saat mouse digerakan di halaman blog atau website. Taruh script ini dibawah<body> pada kode HTML Template blog atau bisa juga dipasang di kotak postingan gadget sebagai widget blog.

    •
  • Script Efek Pelangi Pada Mouseover Teks Link
    <script src="http://sites.google.com/site/monosbit/monosbit_rainbow.js"></script>
    Contoh :
    [ Dekatkan Mouse Pada Teks Ini ]

     Cara Penggunaan Script :
    <a href="link.html" onmouseover="doRainbow(this);"onmouseout="stopRainbow();">Test Program</a>
    Perhatikan kode yang berwarna biru, taruh kode tersebut pada teks link yang ingin dibuat efek pelangi.

    Taruh script ini dibawah <body> pada kode HTML Template blog atau bisa juga dipasang di kotak postingan gadget sebagai widget blog.
Welcome Alert
  • Teks Alert Saat Masuk Blog
    <script>window.onload=alert('SELAMAT DATANG Jangan lupa isi Buku Tamu ya!!!');</script>
    Taruh script ini dibawah <body> pada kode HTML Template blog atau bisa juga dipasang di kotak postingan gadget sebagai widget blog.

    •
  • Text Alert Saat Mau keluar Blog
    onunload="alert('Kapan2 mampir Lagi ya');"
    Taruh script ini didalam tag <body> pada kode HTML Template blog.
    Contoh :
    <body onunload="alert('Kapan2 mampir Lagi ya');">

    •
  • Teks alert  onLoad dan onunLoad (Gabungan)
    onload="alert('Selamat datang diblognya saya, semoga bermanfaat');" onunload="alert('Kapan2 mampir Lagi ya');"
    Taruh script ini didalam tag <body> pada kode HTML Template blog.
    Contoh :
    <body onload="alert('Selamat datang diblognya saya, semoga bermanfaat');" onunload="alert('Kapan2 mampir Lagi ya');">

    •
  • Teks alert pada Link (saat link di-klik maka akan ada peringatan muncul)
    onclick="alert('Siapa...silahkan masuk'); return true"
    Taruh script ini didalam tag <a>Link</a> pada kode HTML atau pada tag HTML lain yang ingin diberi efek peringatan ketika akan di-klik.
    Contoh :
    <a href="http://monosbit.blogspot.com" onclick="alert('Siapa...silahkan masuk'); return true">JUDUL LINK</a>
Marquee Effect (Efek Teks Berjalan)
  • Teks jalan dari kanan ke kiri
    Kata2 anda disini
    <marquee bgcolor="red" direction="left"  scrolldelay="50">Kata2 anda disini</marquee>

    •
  • Teks jalan bolak balik
    Kata2 anda disini
    <marquee bgcolor="red" behavior="alternate"  scrolldelay="50">Kata2 anda disini</marquee>

    - direction :
    • direction="left"      (Arah dari Kanan ke Kiri)
    • direction="right"    (Arah dari Kiri ke Kanan)
    • direction="up"       (Arah dari Bawah ke Atas)
    • direction="down"  (Arah dari Atas ke Bawah)
    - bgcolor (Warna latar belakang teks)
    - scrolldelay (Kecepatan gerak teks)
    - behavior (Gerakan teks)
Copyrights Script
  • Script Anti Copy-Paste
    <script type="text/javascript">

     /***********************************************
    * Disable select-text script- © Dynamic Drive (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit http://www.dynamicdrive.com/ for full source code
    ***********************************************/

     //form tags to omit in NS6+:
    var omitformtags=["input", "textarea", "select"]

     omitformtags=omitformtags.join("|")

     function disableselect(e){
    if (omitformtags.indexOf(e.target.tagName.toLowerCase())==-1)
    return false
    }

     function reEnable(){
    return true
    }

     if (typeof document.onselectstart!="undefined")
    document.onselectstart=new Function ("return false")
    else{
    document.onmousedown=disableselect
    document.onmouseup=reEnable
    }

     </script>

    Taruh script ini diatas </Head>


    •
  • Me-Nonaktifkan Klik Kanan

  • <script language=JavaScript>
  • <!--
  • //Disable right mouse click Script
  • //By Maximus (maximus@nsimail.com) w/ mods by DynamicDrive
  • //For full source code, visit http://www.dynamicdrive.com

  • var message="Klik kanan sudah di nonaktifkan";

  • ///////////////////////////////////
  • function clickIE4(){
  • if (event.button==2){
  • alert(message);
  • return false;
  • }
  • }
  • function clickNS4(e){
  • if (document.layers||document.getElementById&&!document.all){
  • if (e.which==2||e.which==3){
  • alert(message);
  • return false;
  • }
  • }
  • }
  • if (document.layers){
  • document.captureEvents(Event.MOUSEDOWN);
  • document.onmousedown=clickNS4;
  • }
  • else if (document.all&&!document.getElementById){
  • document.onmousedown=clickIE4;
  • }
  • document.oncontextmenu=new Function("alert(message);return false")
  • // --> 
  • </script>
  • Taruh script ini diatas </Head>


Title Bar Effect
  • Efek Teks Berkelanjutan
  • <script language="JavaScript">
  • <!-- 
  • var space = " ";
  • var speed = "50";
  • var pos = 0;
  • var msg = "Monosbit Scrolling Titlebar Effect";
  • function Scroll()
  • {
  • document.title = msg.substring(pos, msg.length) + space + msg.substring(0,pos);
  • pos++;
  • if (pos > msg.length) pos = 0;
  • window.setTimeout("Scroll()", speed);
  • }
  • Scroll();
  • -->
  • </script>

  • Taruh script ini diatas </Head>


Link Hover
  • Script Link Bekerlip
  • <style>
  • a:hover {text-decoration:blink; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKTqasBJv57l3EAYol4f5014VRrF-emyzwmkcQHPDRf7pdK8a45-fCGWI4TDlKY5A_UmobSiy_J9F8KdqzRV8GRHJEe1MyUdLao9v801oP8xDdm0M93cupb9KLDan0X97X__VhK8UjPf0/s1600/blink.gif); }
  • </style>
  • Taruh script ini diatas </Head>

    Contoh : [ Dekatkan Mouse Pada Teks Ini ]

    Pilihan Gambar Blink :
    • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWhyfXAUIK6YxovlAjA5WZp5PD4IrXgPUh4ywH7TdM3gKFCmtBk6tnMWYfiNprZ8TgVxEaWBLzk1I35iGHUTbbqg5PRCNCw6PfiblxPlzR_W7azsuLYyv5JqbEKp7x9i4-YsHUtecJ4eU/s1600/BlinkStar.gif
    • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9NzrXCOGcJ-KoHAq_2mfiSZlAI6N5GSRTdSCbVVAzuk2yILsMWLuNDHFS8C3UZSFth3YQUinUfSMgjc8kwzdO33Itd_olMTUhY7iTydSMmVbTG55wHGG73tKk8Hvpl79SH5KCYxLJbws/s1600/str4.gif
  • Cara Penggunaan:
    Gunakan kode onclick="openwindow('URL Tujuan')" pada setiap elemen HTML link yang ingin dibuka dengan efek animasi ini. Ganti URL Tujuan dengan link URL yang ingin dituju.

    •
  • Script Mouse Hover Berganti Gambar
  • <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqxKUk0CFHTGIaMq4CUxAg051vQMgYjEL80v-zSSfvxbWTFev1eE9SQlqL14X3CCKTf4H3hsx8RyGtUrHALmB0x_c4JjPpKh_WAThctReLIHj7P0TlOmwLQHQQwMKAjnez2n9T5dB7c-5G/s1600/Minion-Hello-icon.png" onMouseOver="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiroWlz5pjfc6gEzsiACow8NDYviWFMhhQ-7nXo-HvfCGuP7yXfIsusdstaFxKL587hEgyjwkPV6XqwC5-OXQSkEDbTHqjlmoela_88yAHVHKiXXdzfBHQJq-l9qz22oFHg1IueYiC5xsy5/s1600/Minion-Kungfu-icon.png'" onMouseOut="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqxKUk0CFHTGIaMq4CUxAg051vQMgYjEL80v-zSSfvxbWTFev1eE9SQlqL14X3CCKTf4H3hsx8RyGtUrHALmB0x_c4JjPpKh_WAThctReLIHj7P0TlOmwLQHQQwMKAjnez2n9T5dB7c-5G/s1600/Minion-Hello-icon.png'"/>
  • Taruh script ini pada tag img
    Contoh :
    Dekatkan kursor pada gambar >> 

    Kode HTML :
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqxKUk0CFHTGIaMq4CUxAg051vQMgYjEL80v-zSSfvxbWTFev1eE9SQlqL14X3CCKTf4H3hsx8RyGtUrHALmB0x_c4JjPpKh_WAThctReLIHj7P0TlOmwLQHQQwMKAjnez2n9T5dB7c-5G/s1600/Minion-Hello-icon.png" onMouseOver="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiroWlz5pjfc6gEzsiACow8NDYviWFMhhQ-7nXo-HvfCGuP7yXfIsusdstaFxKL587hEgyjwkPV6XqwC5-OXQSkEDbTHqjlmoela_88yAHVHKiXXdzfBHQJq-l9qz22oFHg1IueYiC5xsy5/s1600/Minion-Kungfu-icon.png'" onMouseOut="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqxKUk0CFHTGIaMq4CUxAg051vQMgYjEL80v-zSSfvxbWTFev1eE9SQlqL14X3CCKTf4H3hsx8RyGtUrHALmB0x_c4JjPpKh_WAThctReLIHj7P0TlOmwLQHQQwMKAjnez2n9T5dB7c-5G/s1600/Minion-Hello-icon.png'"/>
.: Semoga Bermanfaat :.

You Might Also Like:

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar