Wednesday, March 27, 2013

Cara Membuat Background Tetap Pada Dokumen HTML

8:22 AM    1 comment

Cara Membuat Background Tetap Pada Dokumen HTML

Pada posting sebelumnya saya share 'Cara Memasang Cursor Pada Dokumen HTML', sekarang saya lanjutkan dengan share 'Cara Membuat Background Tetap Pada Dokumen HTML'.

Background adalah sebuah latar belakang dari sebuah halaman. Jika dikaitkan dengan konteks HTML maka background merupakan latar dari sebuah halaman HTML. Tujuan dari pemasangan sebuah background tentu saja untuk mempercantik tampilan dari dokumen HTML yang kita buat. Lalu apa yang dimaksud dengan Background Tetap (Fixed Background)? Background Tetap yang dimaksud di sini adalah sebuah image background yang posisinya selalu tetap pada screen atau layar (tidak bergerak) meskipun halaman tersebut kita scroll kebawah maupun sebaliknya.

Baca juga: Cara Membuat Images Slideshow Pada Dokumen HTML

Baiklah berikut ini cara membuat Background Tetap pada sebuah dokumen HTML.


Langkah-langkah:

Cara Membuat Background Tetap Pada Dokumen HTML:

  1. Jalankan aplikasi text editor seperti 'notepad' untuk menulis sebuah dokumen HTML. Mungkin notepad bawaan windows kurang begitu menarik, solusinya Anda dapat menggunakan aplikasi notepad++ yang dapat Anda download di sini.

  2. Penting! simpan dokumen HTML dengan format 'Nama_File.html' tanpa tanda kutip, kemudian pada 'Save as type' Anda pilih 'All files' agar dokumen yang Anda simpan menjadi dokumen HTML bukan dokumen text biasa.

  3. Sekarang mari kita mulai untuk membuat Background Tetap pada dokumen HTML seperti pada kotak di bawah ini.

    4. Script Code:
    <!DOCTYPE html>

    <html>

    <head>
    <title> Cara Membuat Background Tetap Pada Dokumen HTML </title>

    <style type="text/css">
    body {
    background: url('images/background.jpg') no-repeat #2D5594;
    background-attachment: fixed;
    }
    </style>

    </head>

    <body>

    </body>
    </html>

    Keterangan

    1. Sisipkan sebuah style code untuk memasang cursor di atas tag </head> seperti pada contoh di atas, ganti 'images/background.jpg' dengan url tempat Anda menyimpan file images/gambar yang akan dijadikan sebagai background.
    2. Bagian terpenting agar background menjadi tetap pada tempatnya (fixed) yaitu pada script background-attachment: fixed;.
    3. Silahkan download contoh cara membuat background tetap (fixed) dalam bentuk file HTML pada Link Di bawah ini.

    Download Example Here


Nb. Silahkan beri feed back pada kotak komentar di bawah!

Read More

Tuesday, March 19, 2013

Cara Memasang Cursor Pada Dokumen HTML

8:45 PM    No comments

Cara Memasang Cursor Pada Dokumen HTML

Pada posting sebelumnya saya share 'Cara Memasang Favicon Pada Dokumen HTML', sekarang saya lanjutkan dengan share 'Cara Memasang Cursor Pada Dokumen HTML'.

Cursor adalah sebuah indicator yang digunakan untuk menunjukan posisi pada sebuah monitor/layar komputer. Diantara fungsi dari cursor yaitu untuk mengeksekusi sebuah content sebagai contoh sebuah tombol atau menu yang ditampilkan di dalam layar/monitor sebuah komputer. Cursor pada umumnya memiliki bentuk default sebuah panah kecil berwarna putih, yang mungkin terlihat kurang begitu menarik. Untuk membuatnya terlihat lebih cantik, kita dapat mengganti dengan icon cursor yang kita kehendaki.

Baiklah berikut ini cara memasang Cursor pada sebuah dokumen HTML.


Langkah-langkah:

Cara Memasang Cursor Pada Dokumen HTML:

  1. Jalankan aplikasi text editor seperti 'notepad' untuk menulis sebuah dokumen HTML. Mungkin notepad bawaan windows kurang begitu menarik, solusinya Anda dapat menggunakan aplikasi notepad++ yang dapat Anda download di sini.

  2. Penting! simpan dokumen HTML dengan format 'Nama_File.html' tanpa tanda kutip, kemudian pada 'Save as type' Anda pilih 'All files' agar dokumen yang Anda simpan menjadi dokumen HTML bukan dokumen text biasa.

  3. Sekarang mari kita mulai untuk memasang Cursor pada dokumen HTML seperti pada kotak di bawah ini.

    4. Script Code:
    <!DOCTYPE html>

    <html>

    <head>
    <title> Cara Memasang Cursor Pada Dokumen HTML </title>

    <style type="text/css">
    body {
    cursor: url('images/cur.cur'), default;
    }
    </style>

    </head>

    <body>

    </body>
    </html>

    Keterangan

    1. Sisipkan sebuah style code untuk memasang cursor di atas tag </head> seperti pada contoh di atas, ganti 'images/cur.cur' dengan url tempat Anda menyimpan file icon cursor yang akan dijadikan sebagai default cursor.
    2. Anda dapat mendownload icon cursor di sini.
    3. Silahkan download contoh cara memasang icon cursor dalam bentuk file HTML pada Link Di bawah ini.

    Download Example Here


Nb. Silahkan beri feed back pada kotak komentar di bawah!

Read More

Cara Memasang Favicon Pada Dokumen HTML

6:16 AM    2 comments

Cara Memasang Favicon Pada Dokumen HTML

Pada posting sebelumnya saya share 'Cara Membuat Running Title Pada Dokumen HTML', sekarang saya lanjutkan dengan share 'Cara Memasang Favicon Pada Dokumen HTML'.

Favicon adalah sebuah image atau gambar (icon) yang ditampilkan pada address bar dan tab sebuah browser internet yang biasanya merupakan logo dari sebuah website. Keberadaan sebuah Favicon ini sangat penting khususnya untuk membedakan sebuah website dengan website lainnya. Favicon biasanya menggunakan file image berekstensi 'ICO, GIF & PNG' namun lebih disarankan untuk menggunakan file '.ICO' karena lebih compatible dengan semua browser internet.

Baiklah berikut ini cara memasang Favicon pada sebuah dokumen HTML.


Langkah-langkah:

Cara Memasang Favicon Pada Dokumen HTML:

  1. Jalankan aplikasi text editor seperti 'notepad' untuk menulis sebuah dokumen HTML. Mungkin notepad bawaan windows kurang begitu menarik, solusinya Anda dapat menggunakan aplikasi notepad++ yang dapat Anda download di sini.

  2. Penting! simpan dokumen HTML dengan format 'Nama_File.html' tanpa tanda kutip, kemudian pada 'Save as type' Anda pilih 'All files' agar dokumen yang Anda simpan menjadi dokumen HTML bukan dokumen text biasa.

  3. Sekarang mari kita mulai untuk memasang Favicon pada dokumen HTML seperti pada kotak di bawah ini.

    4. Script Code:
    <!DOCTYPE html>

    <html>

    <head>
    <title> Cara Memasang Favicon Pada Dokumen HTML </title>

    <link href="favicon.ico" rel="shortcut icon" />

    </head>

    <body>

    </body>
    </html>

    Keterangan

    1. Sisipkan sebuah code untuk memasang favicon di atas tag </head> seperti pada contoh di atas, ganti 'favicon.ico' dengan url tempat Anda menyimpan file images yang akan dijadikan sebagai favicon.
    2. Disarankan ukuran file images (icon) yang akan dijadikan sebagai favicon 16x16px.
    3. Silahkan download contoh cara memasang favicon dalam bentuk file HTML pada Link Di bawah ini.

    Download Example Here


Nb. Silahkan beri feed back pada kotak komentar di bawah!

Read More

Monday, March 18, 2013

Cara Membuat Running Title Pada Dokumen HTML

10:41 PM    No comments

Cara Membuat Running Title Pada Dokumen HTML

Pada posting sebelumnya saya share 'Cara Membuat Link Pelangi Pada Dokumen HTML', sekarang saya lanjutkan dengan share 'Cara Membuat Running Title Pada Dokumen HTML'.

Running Title adalah sebuah title (judul) dari sebuah dokumen HTML yang dikombinasikan dengan penggunaan javascript sehingga dapat menampilkan sebuah title dengan efek scroll (title berjalan). Title dari dokumen HTML itu sendiri dapat kita lihat pada tab browser seperti Internet Explorer, Modzila Firefox, Google Chrome, dsb.

Baiklah berikut ini cara membuat Running Title pada sebuah dokumen HTML.


Langkah-langkah:

Cara Membuat Running Title Pada Dokumen HTML:

  1. Jalankan aplikasi text editor seperti 'notepad' untuk menulis sebuah dokumen HTML. Mungkin notepad bawaan windows kurang begitu menarik, solusinya Anda dapat menggunakan aplikasi notepad++ yang dapat Anda download di sini.

  2. Penting! simpan dokumen HTML dengan format 'Nama_File.html' tanpa tanda kutip, kemudian pada 'Save as type' Anda pilih 'All files' agar dokumen yang Anda simpan menjadi dokumen HTML bukan dokumen text biasa.

  3. Sekarang mari kita mulai untuk membuat Running Title pada dokumen HTML seperti pada kotak di bawah ini.

    4. Script Code:
    <!DOCTYPE html>

    <html>

    <head>
    <title> Cara Membuat Running Title Pada Dokumen HTML </title>

    <script language="JavaScript" type="text/javascript">
    var txt = " Welcome To Amirabella-Zone .::. ";
    var speed = 250;
    var refresh = null;
    function move() {
    document.title=txt;
    txt=txt.substring(1,txt.length)+txt.charAt(0);
    refresh=setTimeout("move()",speed);}
    move();
    </script>

    </head>

    <body>

    </body>
    </html>

    Keterangan

    1. Sisipkan JavaScript Running Title di atas tag </head> seperti pada code di atas, ganti 'Welcome To Amirabella-Zone' dengan Title yang Anda kehendaki.
    2. Ganti angka '250' dengan value yang Anda kehendaki (semakin kecil angkanya kecepatan efek scrollnya semakin cepat).
    3. Silahkan download contoh file HTML Running Title pada Link Di bawah ini.

    Download Example Here


Nb. Silahkan beri feed back pada kotak komentar di bawah!

Read More

Saturday, March 16, 2013

Cara Membuat Link Pelangi Pada Dokumen HTML

4:37 PM    No comments

Cara Membuat Link Pelangi Pada Dokumen HTML

Pada posting sebelumnya saya share 'Cara Membuat Text Pelangi Pada Dokumen HTML', sekarang saya lanjutkan dengan share 'Cara Membuat Link Pelangi Pada Dokumen HTML'.

Link Pelangi adalah sebuah link (hyperlink) yang di kombinasikan dengan penggunaan javascript sehingga dapat membuat sebuah link yang apabila di sorot akan menampilkan efek berkedip-kedip dan warna-warni atau yang di sebut dengan Link Pelangi. Sedangkan Link itu sendiri adalah sebuah acuan dalam dokumen hiperteks (hypertext) ke dokumen yang lain atau sumber lain.

Baiklah berikut ini cara membuat Link Pelangi pada sebuah dokumen HTML.


Langkah-langkah:

Cara Membuat Link Pelangi Pada Dokumen HTML:

  1. Jalankan aplikasi text editor seperti 'notepad' untuk menulis sebuah dokumen HTML. Mungkin notepad bawaan windows kurang begitu menarik, solusinya Anda dapat menggunakan aplikasi notepad++ yang dapat Anda download di sini.

  2. Penting! simpan dokumen HTML dengan format 'Nama_File.html' tanpa tanda kutip, kemudian pada 'Save as type' Anda pilih 'All files' agar dokumen yang Anda simpan menjadi dokumen HTML bukan dokumen text biasa.

  3. Sekarang mari kita mulai untuk membuat Link Pelangi pada dokumen HTML seperti pada kotak di bawah ini.

    4. Script Code:
    <!DOCTYPE html>

    <html>

    <head>
    <title> Cara Membuat Link Pelangi Pada Dokumen HTML </title>

    <script src='js/rainbow-link.js' type='text/javascript'></script>

    </head>

    <body>

    <!-- Start Link Pelangi Code -->

    <a href="www.amirabella-zone.blogspot.com">Nama Link</a>

    <!-- // End Link Pelangi Code -->

    </body>
    </html>

    Keterangan

    1. Sisipkan JavaScript Text Pelangi di atas tag </head> seperti pada code di atas, ganti 'js/rainbow-link.js' dengan url tempat Anda menyimpan JavaScript. (Sudah ada di dalam file example).
    2. Setelah Anda attach java script seperti pada point no. 1 di atas, maka setiap Anda membuat link akan menampilkan efek pelangi pada saat link itu di sorot.
    3. Pada contoh di atas ganti www.amirabella-zone.blogspot.com dengan url link Anda, kemudian ganti Nama Link dengan nama link yang Anda kehendaki.


Nb. Silahkan beri feed back pada kotak komentar di bawah!

Read More

Cara Membuat Text Pelangi Pada Dokumen HTML

2:40 AM    No comments

Cara Membuat Text Pelangi Pada Dokumen HTML

Pada posting sebelumnya saya share 'Cara Membuat PopUp Link Pada Dokumen HTML', sekarang saya lanjutkan dengan share 'Cara Membuat Text Pelangi Pada Dokumen HTML'.

Text Pelangi adalah sebuah text (teks) yang di beri style 'rainbow_text' yang sebenarnya bukanlah termasuk dalam styling normal yang ada di dalam HTML, melaikan sebuah penambahan style menggunakan javascript sehingga membuat dokumen HTML dapat menampilkan text dengan efek warna-warni atau yang di sebut dengan 'Text Pelangi'.

Baiklah berikut ini cara membuat Text Pelangi pada sebuah dokumen HTML.


Langkah-langkah:

Cara Membuat Text Pelangi Pada Dokumen HTML:

  1. Jalankan aplikasi text editor seperti 'notepad' untuk menulis sebuah dokumen HTML. Mungkin notepad bawaan windows kurang begitu menarik, solusinya Anda dapat menggunakan aplikasi notepad++ yang dapat Anda download di sini.

  2. Penting! simpan dokumen HTML dengan format 'Nama_File.html' tanpa tanda kutip, kemudian pada 'Save as type' Anda pilih 'All files' agar dokumen yang Anda simpan menjadi dokumen HTML bukan dokumen text biasa.

  3. Sekarang mari kita mulai untuk membuat Text Pelangi pada dokumen HTML seperti pada kotak di bawah ini.

    4. Script Code:
    <!DOCTYPE html>

    <html>

    <head>
    <title> Cara Membuat Text Pelangi Pada Dokumen HTML </title>

    <script src='js/rainbowtext.js' type='text/javascript'></script>

    </head>

    <body>

    <!-- Start Text Pelangi Code -->

    <span class="rainbow_text">Text Pelangi</span>

    <!-- // End Text Pelangi Code -->

    </body>
    </html>

    Keterangan

    1. Sisipkan JavaScript Text Pelangi di atas tag </head> seperti pada code di atas, ganti 'js/rainbowtext.js' dengan url tempat Anda menyimpan JavaScript. (Sudah ada di dalam file example).
    2. Setiap akan membuat text pelangi, Anda gunakan tag <span class="rainbow_text"> Kemudian jangan untuk menutup tag'nya dengan </span>.
    3. Pada contoh di atas ganti Text Pelangi dengan content text Anda.

    Ini Adalah Contoh Text Pelangi

    Download Example Here


Nb. Silahkan beri feed back pada kotak komentar di bawah!

Read More

Tuesday, March 12, 2013

Cara Membuat PopUp Link Pada Dokumen HTML

4:19 AM    No comments

Cara Membuat PopUp Link Pada Dokumen HTML

Pada posting sebelumnya saya share 'Cara Membuat Images Slideshow Pada Dokumen HTML', sekarang saya lanjutkan dengan share 'Cara Membuat PopUp Link Pada Dokumen HTML'.

PopUp Link adalah sebuah Link (hyperlink) yang mengarah kepada sebuah halaman web atau URL (Uniform Resource Locator) tertentu yang ditampilkan pada new windows yang ukuran dan option yang ditampilkan di dalam halaman browser windowsnya sesuai dengan yang telah ditentukan. Sedangkan Link (hyperlink) itu sendiri adalah sebuah acuan dalam dokumen hiperteks (hypertext) ke dokumen yang lain atau sumber lain.

Baiklah berikut ini cara membuat PopUp Link pada sebuah dokumen HTML.


Langkah-langkah:

Cara Membuat PopUp Link Pada Dokumen HTML:

  1. Jalankan aplikasi text editor seperti 'notepad' untuk menulis sebuah dokumen HTML. Mungkin notepad bawaan windows kurang begitu menarik, solusinya Anda dapat menggunakan aplikasi notepad++ yang dapat Anda download di sini.

  2. Penting! simpan dokumen HTML dengan format 'Nama_File.html' tanpa tanda kutip, kemudian pada 'Save as type' Anda pilih 'All files' agar dokumen yang Anda simpan menjadi dokumen HTML bukan dokumen text biasa.

  3. Sekarang mari kita mulai untuk membuat PopUp Link pada dokumen HTML seperti pada kotak di bawah ini.

    4. Script Code:
    <!DOCTYPE html>

    <html>

    <head>
    <title> Cara Membuat PopUp Link Pada Dokumen HTML </title>
    </head>

    <body>

    <!-- Start PopUp Link Code -->

    <a href="#" onClick="PopUp=window.open('http://www.amirabella-zone.blogspot.com', 'PopUp', 'toolbar=yes, location=yes, directories=yes, status=yes, menubar=yes, scrollbars=yes, resizable=yes, width=600, height=300'); return false;">Nama Link Anda</a>

    <!-- // End PopUp Link Code -->

    </body>
    </html>

    Keterangan

    1. Ganti http://www.amirabella-zone.blogspot.com dengan url link Anda.
    2. Pada attribute width 600 ganti value atau angkanya sesuai dengan lebar windows yang Anda inginkan.
    3. Pada attribute height 300 ganti value atau angkanya sesuai dengan tinggi windows yang Anda inginkan.
    4. Ganti Nama Link Anda sesuai dengan nama yang Anda kehendaki.


Nb. Silahkan beri feed back pada kotak komentar di bawah!

Read More

Sunday, March 10, 2013

Cara Membuat Images Slideshow Pada Dokumen HTML

6:38 AM    No comments

Cara Membuat Images Slideshow Pada Dokumen HTML

Pada posting sebelumnya saya share 'Cara Membuat Link Gambar Berjalan Pada Dokumen HTML', sekarang saya lanjutkan dengan share 'Cara Membuat Images Slideshow Pada Dokumen HTML'.

Images Slideshow adalah sekumpulan images (file gambar) yang terdiri dari dua file gambar atau lebih yang dikombinasikan dengan penggunaan Javascript serta CSS (cascading style sheet) sehingga membentuk sebuah tampilan gambar yang dapat berganti-ganti (slideshow) yang waktu pergantian dari gambar satu ke gambar berikutnya (timing) sesuai dengan yang telah di atur dalam script'nya.

Artikel terkait: Cara Membuat Images Slider Tanpa Jquery

Baiklah berikut ini cara membuat Images Slideshow pada sebuah dokumen HTML.


Langkah-langkah:

Cara Membuat Images Slideshow Pada Dokumen HTML:

  1. Jalankan aplikasi text editor seperti 'notepad' untuk menulis sebuah dokumen HTML. Mungkin notepad bawaan windows kurang begitu menarik, solusinya Anda dapat menggunakan aplikasi notepad++ yang dapat Anda download di sini.

  2. Penting! simpan dokumen HTML dengan format 'Nama_File.html' tanpa tanda kutip, kemudian pada 'Save as type' Anda pilih 'All files' agar dokumen yang Anda simpan menjadi dokumen HTML bukan dokumen text biasa.

  3. Sekarang mari kita mulai untuk membuat Images Slideshow pada dokumen HTML seperti pada kotak di bawah ini.

    4. Script Code:
    <!DOCTYPE html>

    <html>

    <head>
    <title> Cara Membuat Images Slideshow Pada Dokumen HTML </title>

    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <script src="js/jquery-min.js" type="text/javascript"></script>
    <script src="js/s3slider.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(document).ready(function() {
    $('#slider').s3Slider({
    timeOut: 3000
    });
    });
    </script>

    </head>

    <body>

    <!-- start images slideshow -->

    <div id="slider">
    <ul id="sliderContent">
    <li class="sliderImage">
    <a href="http://www.amirabella-zone.blogspot.com" target="_blank" style="outline:none;"><img src="images/1.jpg" alt="1" style="border:0;"/></a>
    <span class="top"><strong>Title text 1</strong><br />Content text...</span>
    </li>
    <li class="sliderImage">
    <a href="http://www.amirabella-zone.blogspot.com" target="_blank" style="outline:none;"><img src="images/2.jpg" alt="2" style="border:0;" /></a>
    <span class="top"><strong>Title text 2</strong><br />Content text...</span>
    </li>
    <li class="sliderImage">
    <a href="http://www.amirabella-zone.blogspot.com" target="_blank" style="outline:none;"><img src="images/3.jpg" alt="3" style="border:0;" /></a>
    <span class="bottom"><strong>Title text 3</strong><br />Content text...</span>
    </li>
    <li class="sliderImage">
    <a href="http://www.amirabella-zone.blogspot.com" target="_blank" style="outline:none;"><img src="images/4.jpg" alt="4" style="border:0;" /></a>
    <span class="bottom"><strong>Title text 4</strong><br />Content text...</span>
    </li>
    <li class="sliderImage">
    <a href="http://www.amirabella-zone.blogspot.com" target="_blank" style="outline:none;"><img src="images/5.jpg" alt="5" style="border:0;" /></a>
    <span class="top"><strong>Title text 5</strong><br />Content text...</span>
    </li>
    <div class="clear sliderImage"></div>
    </ul>
    </div>

    <!-- // end images slideshow -->

    </body>
    </html>

    Keterangan

    1. Ganti css/style.css dengan url tempat Anda menyimpan file css images slideshow (sudah ada di dalam file example).
    2. Ganti js/jquery-min.js dengan url tempat Anda menyimpan file jquery-min.js (sudah ada di dalam file example).
    3. Ganti js/s3slider.js dengan url tempat Anda menyimpan file s3slider.js (sudah ada di dalam file example).
    4. Ganti http://www.amirabella-zone.blogspot.com dengan url link Anda.
    5. Pada attribute target _blank artinya target link akan ditampilkan pada tab baru apabila Anda menginginkan targetnya pada halaman yang sama maka ganti valuenya dengan _self, atau dapat jg dengan menghapus attribute target="_blank".
    6. Ganti images/1.jpg, images/2.jpg, images/3.jpg, images/4.jpg, images/5.jpg dengan url file images (gambar) Anda.
    7. Ganti Title text 1, Title text 2, Title text 3, Title text 4, Title text 5 dengan Title yang Anda inginkan.
    8. Ganti Content text..., dengan content text Anda.

     

    Baca juga: Cara Memasukkan Playlist Lagu Pada Dokumen HTML

    Screenshot Images Slideshow

    Download Example Here


Nb. Silahkan beri feed back pada kotak komentar di bawah!

Read More

Wednesday, March 6, 2013

Cara Membuat Link Gambar Berjalan Pada Dokumen HTML

10:57 PM    2 comments

Cara Membuat Link Gambar Berjalan Pada Dokumen HTML

Pada posting sebelumnya saya share 'Adobe Creative Suite CS2 Full Serial', sekarang saya lanjutkan dengan share 'Cara Membuat Link Gambar Berjalan Pada Dokumen HTML'.

Link Gambar Berjalan adalah sebuah link dalam bentuk gambar yang dikombinasikan dengan 'tag marquee' sehingga membentuk sebuah link yang berupa gambar berjalan (Images Link with Marquee). Fungsi dari Link Gambar Berjalan ini yaitu untuk membuat atau menyusun beberapa link agar tampak lebih menarik. Tujuannya adalah untuk mendapatkan perhatian orang yang melihatnya sekaligus mempercantik tampilan (layout) dokumen HTML yang kita buat.

Baiklah berikut ini cara membuat Link Gambar Berjalan pada sebuah dokumen HTML.


Langkah-langkah:

Cara Membuat Link Gambar Berjalan Pada Dokumen HTML:

  1. Jalankan aplikasi text editor seperti 'notepad' untuk menulis sebuah dokumen HTML. Mungkin notepad bawaan windows kurang begitu menarik, solusinya Anda dapat menggunakan aplikasi notepad++ yang dapat Anda download di sini.

  2. Penting! simpan dokumen HTML dengan format 'Nama_File.html' tanpa tanda kutip, kemudian pada 'Save as type' Anda pilih 'All files' agar dokumen yang Anda simpan menjadi dokumen HTML bukan dokumen text biasa.

  3. Sekarang mari kita mulai untuk membuat Link Gambar Berjalan pada dokumen HTML seperti pada kotak di bawah ini.

    4. Script Code:
    <!DOCTYPE html>

    <html>

    <head>
    <title> Cara Membuat Link Gambar Berjalan Pada Dokumen HTML </title>
    </head>

    <body>

    <!-- Di bawah ini adalah script link gambar berjalan -->
    <marquee behavior="alternate" direction="left" scrollamount="3" onmouseover="stop();" onmouseout="start();">
    <span style="padding: 0px;">
    <a href="Link_1" target="_blank" style="text-decoration:none;outline:none;" title="Title_1">
    <img src="Gambar_1" border="0">
    </a>
    </span>
    <span style="padding: 0px;">
    <a href="Link_2" target="_blank" style="text-decoration:none;outline:none;" title="Title_2">
    <img src="Gambar_2" border="0">
    </a>
    </span>
    <span style="padding: 0px;">
    <a href="Link_3" target="_blank" style="text-decoration:none;outline:none;" title="Title_3">
    <img src="Gambar_3" border="0">
    </a>
    </span>
    </marquee>
    <!-- // Akhir dari script link gambar berjalan -->

    </body>
    </html>

    Keterangan

    1. Ganti Link_1, Link_2, dan Link_3 dengan 'link' Anda.
    2. Ganti Title_1, Title_2, dan Title_3 dengan 'Title' Anda.
    3. Ganti Gambar_1, Gambar_2, dan Gambar_3 dengan 'File Gambar' Anda.
    4. Pada attribute behavior, Anda dapat merubahnya dengan 'scroll atau slide'.
    5. Pada attribute direction, Anda dapat merubahnya dengan 'right, down', atau up'.
    6. Pada attribute scrollamount, Anda dapat merubah value'nya dengan angka yang Anda inginkan.

    Contoh Link Gambar Berjalan

    Download Example Here


Nb. Silahkan beri feed back pada kotak komentar di bawah!

Read More
Subscribe to: Posts (Atom)