Showing posts with label HTML. Show all posts
Showing posts with label HTML. Show all posts

Membuat Search Box Tingkat Lanjut dengan JSON di Halaman Statis Blogger

Sejak awal aku selalu ingin membuat halaman search khusus di blogku yang halamannya tidak berganti ketika fungsi search-nya berjalan.

Karena biasanya, para pengembang website dan blog menggunakan widget search yang menggunakan fungsi GET dan ditaruh di sidebar website mereka.

Aku ingin tampil berbeda dari mereka semua.

Karena itulah search page tersebut aku buat.

Oiya, pada awalnya aku kira search box model begini harus menggunakan AJAX agar bisa berfungsi.

Tapi ternyata tidak.

Search box ini bisa berjalan dengan mulus menggunakan bahasa JSON.

Aku berterima kasih kepada pemilik asli source code search box ini.

Kode yang dia berikan sangat mudah dimengerti dan di edit kembali.

Berbeda dengan search box yang dibagikan sumber aslinya.

Search box yang aku berikan di panduan ini sudah aku modif sedemikian ruap hingga tampilannya menjadi lebih bagus dan responsif di perangkat smartphone.

Cek aja demonya di halaman advanced search blog ini.

Gimana? sudah lihat demo nya? tertarik ingin membuatnya juga?

Kalau iya, ikutin panduan ini sampai selesai.

Biasanya form quiz ini digunakan pada artikel yang berisi latihan soal-soal pelajaran di sekolah.

Tapi bisa juga untuk hal yang lainnya.

Kelebihan Form Quiz ku :

  1. Tampilan bersih dan keren
  2. Jumlah pertanyaan yang bisa dibuat tidak terbatas
  3. Responsive di segala perangkat
  4. Mendukung pertanyaan bergambar
  5. Pertanyaan dan pilihan jawaban yang ditampilkan selalu diacak jika halaman di refresh
  6. Fitur skor
  7. Ada laporan hasil pengerjaan quiz oleh user, lengkap dengan jawaban yang benar jika salah menjawab
  8. UI yang mudah digunakan dan dimengerti oleh user
  9. Scriptnya mudah dipasang dan diatur oleh Developer

Aslinya, form quiz ini menggunakan Bahasa Inggris, tapi sudah aku ubah beberapa bagian menjadi Bahasa Indonesia agar pengguna lebih mudah dalam menggunakan form Quiz ini.

Daftar tag kondisional halaman Blogger terlengkap termasuk dengan kondisi-kondisi tertentu

Tag kondisional ini sudah diupdate Blogger sejak tahun 2017.

Terdapat perubahan yang besar antara tag kondisional halaman yang dulu dan yang sekarang.

Dan juga ada penambahan beberapa tag kondisi yang baru.

Jika kamu masih menggunakan tag kondisi yang lama, kamu bisa tenang sedikit..

Soalnya untuk sekarang, Blogger masih belum menghapus kodingan tersebut dari database mereka. Tapi gatau deh untuk kedepannya..

Saran aku sih, mending diganti aja dari sekarang kodingan tag kondisional kamu yang lama ke yang baru.

Oh iya satu lagi, tag konfisional yang baru ini bisa aku bilang lebih mudah dipahami dan digunakan daripada kodingan yang dulu. Lebih pendek juga kodingannya.

Menggunakan Plyr.js untuk Menampilkan Video

Biasanya disaat pemilik blog/website ingin menampilkan video di artikel mereka, mereka bakal menggunakan iFrame biasa yang designnya jelek dan nggak Responsive di layar.

Jangan jadi seperti mereka, gunakan Plyr.js.

Plyr.js adalah sebuah media player yang simple, ringan, mudah di costumize/edit, dan mendukung browser modern.

Plyr.js bisa digunakan untuk menampilkan HTML5 Audio, HTML5 Video, iFrame (Responsive), Youtube Video, dan Vimeo.

Beberapa fitur unggulannya :

  1. Mudah di Costumize
  2. Responsive
  3. Picture-in-Picture
  4. HTML yang rapi
  5. Support banyak Subtitle/Caption
  6. Bisa bekerja dengan Bootstrap
  7. Embedded Video
  8. Dan yang lainnya..