Tahun baru, resolusi baru.
Akhirnya niat untuk belajar Adobe XD muncul juga. Walaupun bisa dibilang telat banget sih.
Yah.. daripada tidak pernah belajar sama sekali.
#Day1 - Mempelajari Adobe XD
Panduan Membuat Form Kontak Menggunakan Formspree
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
Panduan Membuat Program Kos-Kosan dengan Bahasa C++
Program ini aku buat awalnya untuk tugas kuliah.
Karena tugasnya sudah selesai dan sudah dinilai, jadi lebih baik aku bagikan saja di blogku.
Aplikasi yang aku gunakan dalam pembuatan program ini adalah : Borland C++ versi 5.02.
Tolong sesuaikan dengan program yang akan kamu gunakan. Biasanya tiap program beda-beda sedikit dalam pengkodean-nya.
Membuat Search Box 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.
Panduan Membuat SESSION dengan PHP di Localhost Paling Mudah
Dulu aku pernah buat panduan 'Membuat Sistem Login sederhana dengan bahasa PHP di Localhost'.
Karena panduan tersebut baru bagian dasarnya, sekarang aku lanjutin ke bagian selanjutnya, yaitu SESSION.
Sederhananya, SESSION berfungsi untuk menyimpan data yang di masukkan/input oleh pengunjung disaat menggunakan sebuah website agar pengunjung tidak perlu lagi memasukkan data yang sama berulang-ulang.
Di panduan ini, SESSION akan berfungsi untuk menyimpan data username, password dan level.
Oke, langsung aja kita mulai panduannya.
Link-Link Pilihan Penulis Edisi #2
Berikut dibawah ini adalah link-link pilihan penulis edisi ke-2.
Di edisi kali ini, aku hanya menampilkan 4 link yang aku pikir bakal berguna untuk blogger lainnya.
NihLink Safelink Blogger Template
Beberapa hari kebelakang, aku sibuk banget ngotak-ngatik template safelink yang aku dapet dari timeline Facebook-ku.
Saking semangatnya, sampai lupa buat artikel untuk blog ini :(
Untung sekarang udah inget xD
By the way, Nama template-nya itu NihLink Safelink Blogger Template, diciptakan oleh AnasRAR.
Template Safelink ini ajaib, script-nya Simple, pakai Bootstrap, pakai CryptoJS (AES), terus fitur-nya menurutku lengkap untuk sebuah template safelink 'Gratisan'.
Ini daftar fitur dan kelebihan template ini:
Panduan Membuat Sistem Login dengan PHP di Localhost Paling Mudah
Beberapa minggu yang lalu aku janji bakal update panduan yang berkaitan dengan bahasa pemrograman PHP.
Karena itu panduan ini aku buat.
Sistem login seperti ini sudah aku pelajari sekitar 3 tahun yang lalu.
Sistem login akan aku ajarin ini simple, tanpa validasi, tanpa desian CSS, dan SESSION.
Jadi, bakal cocok banget buat kamu yang baru mulai belajar PHP.
Kamu bakal lebih gampang fokus ke kodingan PHPnya.
Oke, langsung aja kita mulai panduannya.
Membuat Quiz dengan jQuery di Blogger
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 :
- Tampilan bersih dan keren
- Jumlah pertanyaan yang bisa dibuat tidak terbatas
- Responsive di segala perangkat
- Mendukung pertanyaan bergambar
- Pertanyaan dan pilihan jawaban yang ditampilkan selalu diacak jika halaman di refresh
- Fitur skor
- Ada laporan hasil pengerjaan quiz oleh user, lengkap dengan jawaban yang benar jika salah menjawab
- UI yang mudah digunakan dan dimengerti oleh user
- 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.
Pengalaman Belajar Adobe Illustrator
Berawal dari kunjungan pertama-ku ke website PanduanIM, muncul keinginan di dalam hati untuk membuat desin karakter sendiri.
Aku pun mulai mikir, "Kayaknya buat karakter kayak gitu gamungkin pakai Photoshop deh, pasti AI!."
Dan setelah itu, aku langsung download Adobe Illustrator.
Nah, selesai dowload programnya, yang ada di pikiranku cuman 1.
"Aku mulai belajar dari mana ya..".
Memberi Tag P di Postingan Blogger secara Otomatis
Script ini berfungsi untuk memberi tag <p> pada sebuah paragraf dan menghapus semua tag <br> pada postingan yang kamu buat.
Normalnya, orang-orang kalau mau nambahin tag <p> di setiap paragraf di artikelnya, harus nambahin manual. Dan itu capek banget.
Untung aja ada script ini, jadi gaperlu capek-capek nambahin tag <p> 1 per 1 disetiap paragraf.
FYI, script ini aku dapetin dari blog DTE. Makasih banget buat Mas Taufik udah buat script kek gini.
Pure CSS Flying Rocket
Fungsi : Hiasan, Bisa buat belajar CSS animate juga.
Tingkat kesulitan : Mudah.
Bahasa Pemrograman : CSS, HTML
File Eksternal : -
Source code : Mirko
Daftar Tag Kondisional Halaman di Blogger
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.
Panduan Menginstall XAMPP di Komputer/PC Kamu
Hai semua, aku ada info sedikit sebelum panduannya dimulai.
Jadi, untuk kedepannya blog Moccatory akan membahas mengenai bahasa pemrograman PHP.
Tapi pembahasannya hanya sebatas di penggunaan pada localhost saja.
Soalnya, ilmu-ku mengenai PHP baru sebatas kayak: membuat CRUD, penggunaan SESSION, membuat shopping cart, ya.. baru itu-itu aja.
Tapi yah.. walau ilmu masih sedikit, asal aku punya niat berbagi, bagiku ga masalah.
Oke, cukup. Kita mulai aja panduannya.
Memasang Font RobotoDraft di 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.
Moccatory Sekarang Punya Fanspage di Facebook!
Akhirnya ada waktu luang juga untuk buat Fanspage di Facebook.
Mulai sekarang, kalau ada kepentingan denganku, bisa langsung hubungi aku lewat Fanspage di FB.
Gitu aja deh, untuk postingan berikutnya akan di publish dalam beberapa jam/hari. Stay tune~
Link Fanspage : Moccatory di FB.
P.S : Jangan lupa like fanspageku dan sebarin ke temen-temen kamu.
Membuat HTML Encoder & Decoder dengan Javascript
Fungsi : Men-encode / men-decode sebuah atau beberapa baris code.
Tingkat kesulitan : Mudah.
Penggunaan : Manual.
Bahasa Pemrograman : CSS, HTML, dan Javascript.
File Eksternal : -
Source Code : -
Menggunakan Plyr.js untuk Menampilkan Video di Blog
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 :
- Mudah di Costumize
- Responsive
- Picture-in-Picture
- HTML yang rapi
- Support banyak Subtitle/Caption
- Bisa bekerja dengan Bootstrap
- Embedded Video
- Dan yang lainnya..
Konsep Full Screen Button
Fungsi : Memperbesar ukuran layar browser menjadi 'Full Screen' atau penuh sebesar layar dekstop.
Tingkat Kesulitan : Mudah
Bahasa Pemrograman : CSS, HTML, Javascript, jQuery
File Eksternal : jQuery Library
Source Code : Putu Radith
Subscribe to:
Comments (Atom)