Flashing Border Script

Seperti lampu Natal yang berkelap-kelip, yang dimaksud dengan flashing border di sini juga mampu berkedip seperti halnya lampu natal. Dua warna ternyata sudah mampu memberikan penampilan berbeda dan bisa membuat pengunjung penasaran. Menampilkan border dengan 2 warna berbeda yang terlihat secara bergantian dilakukan dengan menempatkan sebuah javascript di dalam template.

D E M O

Cara Membuat Flashing Border

1. Login ke Blogger.
2. Setelah login, beberapa saat kemudian halaman dasbor akan terlihat.
   Klik "Rancangan (Design)".
3. Halaman baru kembali terbuka. Klik "Edit HTML".
4. Lakukan "Backup Template" Terlebih dahulu.
5. Cari kode </body>, kemudian letakkan javascript di atasnya.
6. Klik "Simpan Template (Save Template)".

Javascript :

<script type="text/javascript">
/* animated border */ //<![CDATA[
var speed = 2000;
function byarpet() {
    var kelapkelip = document.getElementById ? document.getElementById("GRbyarpet") : document.all ? document.all.GRbyarpet: "";
    if (kelapkelip) {
        if (kelapkelip.style.borderColor.indexOf("red") != -1) {
            kelapkelip.style.borderColor = "blue"
        } else {
            kelapkelip.style.borderColor = "red"
        }
    }
}
setInterval("byarpet()", speed);
//]]>
</script>

Keterangan :

1. Untuk mengganti warna border ganti kode yang berwarna merah dan biru.
2. Panduan tentang cara Backup Template, cara mencari kode html dan berbagai cara menyimpan kode css, javascript dan xHTML dapat dibuka di Special Tutorials pada deret menu sebelah kiri.
3. Agar flashing border berfungsi, gunakan xHTML seperti dibawah ini, baik di halaman posting atau bagian yang lain.
4. Gunakan id="GRbyarpet" pada tag yang menggunakan flashing border.
5. Beberpa tag yang dapat digunakan misalnya "div", "span", "p", "a" dan "img".

xHTML Flashing Border :

<img id="GRbyarpet" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbZiQNBv4_0xVHLcfOKrQBJVaOvF_SXRc7dZugvUdp6x3TIw4hbexOnG7TMP09wefIlLUlKzRStLdlhG-7Qzuq94JZI6qUEetm70M60xbgZETwYHa_hD4kP_Q4VGCH_rK0ZTHs7QA85K0/s128/th_gubhugreyot-kuda-laut.jpg" style="float:left;width:200px;height:150px;border:5px double;padding:5px;border-radius:6px;background:#999;margin:5px 12px 5px 0;box-shadow:0 0 5px #666;" />

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

Update » Jemuah    WAGE, Maret, 16, 2012

» Happy Blogging - gubhugreyot «