Showing posts with label CSS. Show all posts
Showing posts with label CSS. Show all posts

Akhirnya aku punya waktu luang juga...

Di panduan kali ini, aku akan menjelaskan bagaimana cara memasang Formspree sebagai form kontak di blog/website kamu.

Btw, aku sendiri juga pakai Formspree sejak 3 atau 4 tahun yang lalu sebagai form kontak di sebagian besar blog ku.

Aku engga pakai form kontak bawaan Blogger karena aku merasa fitur-fitur nya masih kurang jika dibandingkan dengan Formspree.

Salah satu fitur yang aku suka adalah, fitur anti-spam dengan ReCaptcha yang tidak dimiliki oleh Form bawaan blogger.

Fitur yang lainnya adalah, Formspree sangat mudah dikostumisasi tampilannya.

Oke, sekarang kita masuk ke bagian panduan

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.

Font RobotoDraft Cocok digunakan di semua jenis blog

Kalau kemarin aku udah share cara pakai font Google Sans di blog, sekarang aku buat panduan yang sama lagi.

Tapi font-nya jelas beda.

Font yang aku bahas kali ini adalah RobotoDraft.

Font ini bagus banget bentuknya. Gak kalah keren sama Google Sans.

Font ini juga di pakai sama blog Zkreations, salah satu blog yang aku anggap terkenal dan aku jadikan teladan dalam hal desain web dan blog.

Oke, langsung aja kita ke bagian instalasi fontnya :

Panduan Membedakan Margin dan Padding

Panduan kali ini tentang perbedaan margin dan padding di bahasa CSS.

Dulu waktu awal-awal aku mulai ngoding website, aku sering salah saat menggunakan margin dan padding. Kadang malah tertukar.

Yang harusnya pakai margin, aku malah pakai padding dan sebaliknya.

Maka dari itu, biar kamu nggak kayak aku (yang dulu), baca panduan ini sampai selesai.

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..