Membuat Gambar Berjalan di Blog

Membuat Gambar Berjalan di Blog - Memperindah halaman blog merupakan salah satu tekhnik sederhana untuk menarik minat pengunjung untuk berlama-lama membaca artikel di blog. Untuk membuat halaman blog anda supaya lebih cantik dan lucu, salah satu tekhniknya adalah dengan memasang sebuah gambar animasi yang seakan-akan sedang berjalan di footer atau header halaman blog atau web.
Gambar yang akan kita gunakan adalah gambar animasi berjalan ditempat dengan ekstensi gif dan diberi effect dengan kode HTML  Marquee, sehingga membuatnya tampak seperti berjalan keluar masuk blog dari kanan ke kiri.

Apa itu Marquee?
Marquee adalah suatu perintah dalam suatu program HTML untuk membuat teks atau tulisan bahkan gambar seperti yang akan dibahas didalam artikel kali ini, bisa bergerak atau berjalan. Marquee ini banyak diminati oleh para blogger untuk dipakai pada blog karena sifatnya yang dinamis serta menarik.
Dalam tag Marquee ini mempunyai beberapa attribute seperti dibawah ini :

• bgcolor : untuk mengatur warna background dari text marquee
• direction : untuk mengatur arah gerakan text (up,down,left,right)
• scrollamount : untuk mengatur kecepatan gerakan text
• behaviour : untuk mengatur effect dari gerakan
• width : untuk mengatur lebar area gerakan
• height : untuk mengatur tinggi area gerakan
• align : untuk mengatur posisi
• onmouseover : untuk menghentikan effect ketika mouse mendekat ke teks
• onmouseout : untuk menjalankan effect ketika mouse menjauh dari teks

Untuk demonya anda bisa lihat di blog kalian sendiri setelah memasangnya. Buat anda cewek-cewek yang suka gambar lucu dan imut, saya yakin anda pasti suka.

Berikut langkah-langkah detail pemasangannya.

2 Cara Memasang Gambar Berjalan di Blog

Via Edit HTML
1. Pertama login ke akun blogger anda dan langsung menuju dashboard atau menu blogger.
2. Pilih menu Tema/Template >> lalu kli Edit HTML.
3. Temukan kode </body>, gunakan Ctrl+F untuk mempermudah pencarian.
4. Setelah ketemu copy paste kode di bawah ini tepat diatas kode </body>.

<div id="harmansh"
      style="bottom: 0px;
                left: 0px;
                position: fixed;
                right: 0px;">
  <marquee behavior="right" direction="left" scrollamount="5">
    <a href="http://harmansh.blogspot.com/" target="_blank">
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgt8J_QIHWmqitUzrV8iqPyZp8j-KkkLdJmwQeICKgg3cKwe0ky11PoDTebRFXo5MG_Pwr8DkfhcN0vET1dIIQ6g9DHje8mvNx95oEYaCoyBHwYg0_GGFD5y5Bh5hNlEqYB_QJQMdihtVU/w200-h173-rw/"
                style="cursor: pointer;" />
    </a>
    meonggg..  </marquee>
</div>

Catatan :
- Pada ketikan bottom bisa anda ganti dengan top untuk merubah posisi gambar animasi ke atas anda dan 0px untuk mengatur jarak antara gambar dengan sisi layar.
- Pada ketikan right dan left bisa bisa anda ganti, sesuai dengan gambar animasi sedang berjalan ke arah mana. Kode diatas kucing berjalan dari kanan ke kiri blog.
- Pada ketikan angka 5 adalah kecepatan marquee, makin besar angkanya maka akan semakin cepat pula jalannya begitu pun sebaliknya.
- Ketikan https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgt8J_QIHWmqitUzrV8iqPyZp8j-KkkLdJmwQeICKgg3cKwe0ky11PoDTebRFXo5MG_Pwr8DkfhcN0vET1dIIQ6g9DHje8mvNx95oEYaCoyBHwYg0_GGFD5y5Bh5hNlEqYB_QJQMdihtVU/w200-h173-rw/ adalah URL atau alamat gambar, anda bisa menggantinya dengan URL gambar pavorit anda.
- Pada ketikan meongggg... ini hanya text tambahan. Anda bisa menghapusnya.
- Anda bisa menambahkan atribut lain ke script diatas, sesuai dengan selera anda. Silahkan berkreasi dengan imajinasi anda.

5. Jika semua sudah sesuai, silahkan anda klik Save atau Simpan Template.

Via Add Gadget pada menu Tata Letak
1. Pertama silahkan login ke akun blogger anda.
2. Pada dashboard atau menu blogger, silahkan anda pilih menu Tata Letak >> klik Add gadget atau Tambahkan Gadget.
3. Pilih HTML/JavaScript, kosongkan judul kemudian copy paste kode di diatas tadi ke dalam kotak konten.
4. Terakhir klik Simpan atau Save.

Dengan membuat dan memasang animasi unik yakni gambar berjalan di blog, maka blog anda akan semakin terlihat unik dan  keren.
Demikian tutorial sederhana tentang bagaimana cara memasang gambar berjalan di blog dengan menggunakan kode HTML marquee. Semoga bermanfaat and " Happy Blogging "

Related Posts :

Silahkan klik disini untuk berlangganan Artikel Gratis via email, Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di HARMANSYAH BLOG