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

Cara mengubah kursor Animasi

Sudah lama tidak membuat tutorial tentang HTML. Siang ini akhirnya memutuskan untuk mempelajari lagi HTML. Kali ini kita belajar merubah kursor pada blog menjadi lebih animasi.

Kursor seperti yang kita ketahui merupakan benda berbentuk panah yang selalu berseliweran pada layar laptop/PC/HP kita. Sebenarnya tidak ada keharusan untuk merubah kursor menjadi animasi, namun agar menarik perhatian serta ada yang berbeda pada blog kita, hal ini boleh dicoba.

Hal yang perlu dilakukan untuk merubah kursor menjadi animasi ikuti langkah-langkah di bawah ini yaa!!

1. Pertama kita berkunjung ke https://www.cursors-4u.com/
   
   
   
   
   
2. Pilih kategori kursor yang diinginkan
   
   
   
   
   
3. Pada kesempatan kali ini saya mencontohkan kategori mouse sport, saya memilih premier league, kemudian saya memilih logo Arsenal sebagai kursor terbaru saya
   
   
   
   
   
4. Setelah kita memilih kursor yang disukai, langkah selanjutnya adalah mengcopy kode HTML yang ada pada tampilan website
   
   
   

Sampai langkah ini, kita sudah berhasil mengubah kursor yang kita miliki. Langkah selanjutnya kode HTML yang kita sudah copy tadi harus di paste pada widget javascript yang ada pada blogger kita.

Langkah-langkahnya sebagai berikut :

1. Masuk ke halaman blogger yang kita miliki
   
   
   
   
   
2. Kemudian langkah selanjunya kita pilih Layout
3. Setelah itu lanjutkan menambahkan widget dengan cara klik Add a Gadget
4. Pada kotak dialog Add a Gadget pilih HTLM/Javascript
   
   
   
   
   
5. pada kotal dialog HTML/Javascript, paste kode HTML yang kita dapatkan dari https://www.cursors-4u.com/
   
   
   
   
   
6. Klik save untuk menyimpan perubahan.

Sekarang silahkan menuju ke blog pribadi kita dan lihat kursor sudah berubah menjadi lebih animasi. Selamat mencoba dan selamat Anda akan berhasil.

Salam Kenal
Salam Literasi
Salam Indrakeren

Media Social, tinggal klik dari Blog

Masih tentang HTML. Saya awali tulisan ini dengan kalimat "Gara-gara Pak Agung Tazka". heheheheh. Berkat beliau yang memberikan materi merubah tampilan blog pada acara sabtu berbagi bersama Lagerunal, saya jadi makin penasaran tentang mempercantik blog. 

Kali ini saya ingin menuliskan tentang Media Social. Ada apa dengan Media Social? Apakah Media Social bertemu Rangga.... heheheh.

Para pengunjung blog sederhana jarimisterindra, pasti memiliki Media Social. Pasti punya donk, paling tidak satu dari beberapa Media Social yang sudah ada di dunia maya saat ini.  Misalnya Facebook, Twiter, Instagram, Youtube atau yang lainnya.

Nah pada Media Social tersebut bisa kita masukkan ke dalam blog. Tujuannya tentunya agar para pengunjung bisa langsung menekan/mengklik/memijit icon logo media social tersebut dan langsung menuju ke media social kita. Kerenkan!!!!

Bagaimana caranya? santaiii, pegangan! kita akan pelajari secara perlahan.

Hal pertama yang perlu kita siapkan untuk memasukkan Media Social ke dalam blog adalah kode HTML. Apa tuh HTML? ssstttt... kalo mau tahu cari di google aja yaa... heheheheh.

Ini Kode nya :

<div style="text-align: center;">

<a href="URL Facebook (akun fanspage atau pribadi)" target="_blank" title="Like/Follow"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgszz9vuAmTI6pbi3iIu37VsJLpj9jLTsJXt8XMEAFzM7Qkkuvb1hjxbxlxoJ1qESGQI67R4AF8hBmw-grlNqaJqpinSFH8kD6q0Bwls1ifCGKv7I6B2DIfOo50kNGJGWQbgv1BghHP4oU/s1600/facebook.png" style="border: medium none; position: relative;" / /></a>

<a href="URL Twitter" target="_blank" title="Follow Me"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlY6h2XTN3f2Ln1hchx5ge7_i0fcRO9u2Bf7uAAe8eJDnsRfF_mET21i0ts3qsqKv6bgdRRkulSgVzXeFEjI062XlWLz3ClffWhbGltAlbAIKz649XWM5rTg3ahVOYXfqjCbMXWnquP_8/s1600/twitter.png" style="border: medium none; position: relative;" / /></a>

<a href="URL Google +" target="_blank" title="Follow Me"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhL2B8kIB2jf7NEajWzM2MYtpKW7kjO-olNVMI3_jHi7QL57OKr2av3EMEpwThGMQ8sWY-FTERZGYdKUrt1NmYPIj6O4-KDVYmENer-LB1x7s02d4cfAEC3vXjqPCnSgcKp8dxu_HG8I4Q/s1600/google-plus.png" style="border: medium none; position: relative;" / /></a>

<a href="URL Instagram" target="_blank" title="Follow Me"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaXmJvFsPOeo1PlpmH_p72W3ranlAMmjAYoImDA6FnakP0KO9xPqn2dDmyRzPBBoQkg7fzy8ZpSfSVRpxCNPW5oHbsZnbutPVDu00qLRDRcXQ3iNmFU_xn_Y6gaaaw5MwtGx2nDWb7Ftg/s1600/instagram.png" style="border: medium none; position: relative;" / /></a>

<a href="URL Youtube" target="_blank" title="Subscribe"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIynPXy3bSggp0uQPeXP5W3RRbB5_S8URIulFQxi17CAeotcdmkxyMS-tljmrNrdHlBJqt9UqbxD3WSt1QY0h8FhiUmJddPQWM_467w7ZJnntWRlgiUr2Lnt2XGAdu3GjZeIZeQ0FK_-k/s1600/youtube.png" style="border: medium none; position: relative;" / /></a></div>

Kode tersebut saya dapat ketika saya berkunjung di www.rahayuasda.com. Ada berbagai macam widget pada blog tersebut, namun saya hanya baru mempelajari dan mempraktekkan widget media social ini.

Ok... setelah kita sudah memiliki kode HTML. Sekarang kita harus menuju ke halaman layout pada dasboard blog.

Piilh Add a Gadget

Pilih HTML

Tulis judul dan kemudian copy pastekan kode HTML

Selamat teman-teman, setelah mengikuti petunjuk sederhana yang saya buat, maka saat ini seharusnya teman-teman sudah memiliki link Media Social  seperti ini :

Sebagai catatan, link media social di atas belum menuju ke alamat media social teman-teman. Agar bisa menuju ke alamat media social teman-teman, maka harus dilakukan pengeditan sederhana pada kode HTML tersebut. Pengeditannya cukup mudah karena, teman-teman hanya perlu merubah teks berwarna merah menjadi alamat url media social teman-teman. 

Selamat praktek, Salam Ngoprek Blog

Salam Kenal
Salam Literasi
Salam Indrakeren

UPDATE COVID ada di Blog!

Hasil dari saya Ngoprek Blog membawa keberkahan. Benar kata orang, siapa yang mau belajar pasti akan mendapatkan hasilnya. "siapa yang menanam benih, pasti akan memanen buahnya" heheheh... 

Hampir satu minggu saya mencari tahu tentang Ngoprek Blog. Merubah template, belajar "mencari sendiri" tentang HTML, siap kecewa, siap error, siap marah, namun saya juga siap berhasil. 

Perlahan namun pasti bahasa HTML bisa dipahami alurnya. Sampai saya melihat widget di website YPTD tentang UPDATE COVID. Widget yang memberikan info terkini tentang jumlah pasien terdampak Coviid di Indonesia. Hal tersebut membuat saya ingin punya juga di blog saya.

Saya coba dekati dengan kursor, kemudian saya klik, pada akhirnya saya dibawa menuju sebuah blog yang memberikan saya ilm atau indormasi tentang widget tersebut. Blog tersebut bisa pengunjung setia jarimisterindra temui di kopi.dev

Bagi yang ingin mengetahui kode HTMLnya, bisa dicopy kode HTML di bawah ini :

<div id="kopi-covid"></div>
<script>
  var f = document.createElement("iframe");
  f.src = "https://kopi.dev/widget-covid-19/";
  f.width = "100%";
  f.height = 380;
  f.scrolling = "no";
  f.frameBorder = 0;
  var rootEl = document.getElementById("kopi-covid");
  console.log(rootEl);
  rootEl.appendChild(f);
</script>

Setelah kita memiliki kode HTMLnya, sekarang yang harus kita lakukan adalah menuju halaman layout pada dasbord blog.

Ikuti langkah sederhana yang saya buat ini :

Pertama pilih Add a Gadget

Kemudian, pilih HTML

Isi judul dan copy pastekan script HTML di atas

Ikuti langkah seperti panduan di atas, saya bisa pastikan setelah teman-teman mengklik save pada tampilan configure HTML, teman-teman sudah memiliki widget Update Covid di blog. Selamat praktek, salam Ngoprek Blog.

Salam Kenal
Salam Literasi
Salam Indrakeren