Senin, 05 April 2021

Selipkan Animasi pada Tampilan Blog

Belajar HTML itu bikin penasaran, sungguh! Sudah berkali-kali saya pelajari dengan cara copy/paste dan berhasil. Memeng saya belum belajar secara mendalam arti per-kode yang tertulis pada setiap kode yang saya copy/paste. Namun paling tidak ada perasaan senang jika berhasil kode HTML ke dalam blog pribadi. 

Kali ini saya ingin menyisipkan animasi pada tampilan blog. ide ini muncul sudah cukup lama, setelah saya beberapa kali melihat tampilan blog teman literasi. Pada blognya ada gambar burung terbang yang selalu menarik perhatian saya ketika berkunjung ke blog beliau. Blog Ibu Suyati bisa dikunjungi pada https://suyatibinyo.blogspot.com/.

Ibu Suyati juga pernah menuliskan tutorialnya, namun baru kali ini saya praktekkan. Artikelnya saat itu berjudul Memasang Animasi di Blog. Penjelasan yang simple membuat tutorial tersebut mudah dipahami untuk dipraktekkan. 

Nah kali ini saya akan mencoba memasang animasi pada blog jarimisterindra. Saya akan tuliskan juga tutorialnya untuk pemirsa semua.

Begini langkah-langkahnya.

  1. Cari kode HTML untuk Animasi di Blogger pada google.


  2. Pilih animasi yang ingin diselipkan menjadi animasi pada blog pribadi kita. Ambil kode HTMLnya disini.
  3. Copy kode HTML dari animasi yang kita pilih. Saya disini memilih kode HTML animasi laki-laki berjalan.
                                                           
    <div style="position: fixed; top: 0px; left: 10px;width:225px;height:160px;"><a href="http://christiantatelu.blogspot.com" target="_blank"><img alt="animasi blog" src="http://i1242.photobucket.com/albums/gg532/faizkr8/jln.gif" title="Click to get more." /></a></div>

Sampai disini kita sudah berhasil memilih animasi yang akan kita masukkan ke dalam blog pribadi. Selanjutnya kita harus mengikuti langkah di bawah ini. Check it out!!
  1. Masuk ke halaman dasboard blog pribadi.
  2. Masuk ke menu layout
  3. Pilih Add a Gadget
  4. Pilih menu HTML/Javascript
  5. Pastekan kode HTML yang tadi kita copy dari sini
  6. Edit kode HTML yang saya beri tanda warna merah, hal itu dilakukan untuk meletakkan gambar animasi pada posisi yang kita inginkan
    Contoh :
    top : Atas, bottom : bawah, center : tengah, left : kiri, right : kanan
     
  7. Setelah dirasa cukup, klik save untuk mengakhiri proses edit 
Proses akhir dari semua rangkaian yang sudah terlewati adalah melihat hasilnya. Silahkan pergi ke halaman utama blog pribadi kita, kemudian lihat animasi yang sudah menanti Anda nikmati. Selamat mencoba dan pasti berhasil.

Salam Kenal
Salam Literasi
Salam Indrakeren

0 Comments:

Posting Komentar