JQuery Masonry untuk Layouting Semisal Pinterest

Buat catatan pribadi. Udah pernah dicatat -di twitter! 😀 -, dipraktek sedikit. Pas ketemu pekerjaan semisal lupa, pake script apa ya kemarin namanya hehe.

Pinterest itu kan layoutnya semacam float: left berkelanjutan atau mungkin display: inline ( gak lihat sourcenya), tapi kalo cuma diterapin secara CSS ngefloat gitu, gak mungkin hasilnya bisa bertumpuk rapi, padahal heightnya beda-beda. Pada umumnya kolom berjejer float left gini bakal dibikin height rata atau semacam itu.

Nah, kuncinya di jQuery Masonry ini.

Dari diskusi yang ada di sini, ada yang ngasih saran bisa juga sebenarnya pake CSS3. Tapi ada kekurangannya.

Kode CSS-nya:

.three-col {
-moz-column-count: 3;
-moz-column-gap: 20px;
-webkit-column-count: 3;
-webkit-column-gap: 20px;
}

Tutorialnya ada di sini.

Ada juga yang ngasih saran pake kode ini

div.tile {
    display: inline-block;
    vertical-align: top;
}

Contoh penerapannya bisa dilihat di sini. Lumayan ya kayanya. Belum nyoba. Baru sekedar nyatet ni sekarang.

Yang lagi belajar, yuk belajar sama-sama :).

 

“Abang Mau Nikah Lagi In Sya Allah”

Siang itu, abang makan di rumah. Abang gak terlalu sering makan di rumah. Bolak-balik kantor rumah, walaupun dekat katanya tetap makan waktu. Apalagi nanti tergoda pengen bercanda sama anak-anak.

Karena sekalian sholat Jumat dan makan di rumah, berarti abang agak lama di rumah. Makanya aku putusin, “Dandan ah”.

And then..pulang sholat Jumat..anak-anak pas udah hampir selesai makan siang. “Yuk bang, makan.”

Terus abis ngobrol-ngobrol tentang hal-hal yang ringan, mulailah pembicaraan itu.

“Dek…abang mau ngomong serius.”

Senyum-senyum.

“Abang mau nikah lagi in sya Allah.”

Baca selengkapnya “Abang Mau Nikah Lagi In Sya Allah”

Thoriq 2,5 Tahun + Ziyad

Video Thoriq Baca Hijaiyah

Ini agak kurang rajin kemarin-kemarin ngasih lihat flashcardnya. Alhamdulillah akhir-akhir ini bisa mulai rajin tiap hari. Kelemahannya mungkin karena lafal yang keluar belum sesuai walaupun mungkin maksudnya ya udah bener :D. Misalnya huruf Ka dia bilangnya Ca…Sya juga keluarnya Ca :D.

Baca selengkapnya Thoriq 2,5 Tahun + Ziyad

Adzan

Malam ini, kami keluar makan nasi goreng dan bakmi godok di sebuah warung di jalan Kaliurang.

Sebelumnya kami ke toko buku Toga Mas untuk mencari beberapa buku yang sedang ingin kubaca.

Sepertinya Ziyad dan Thoriq sudah cukup kenyang. Saat di toko buku, merkea sempat makan jagung masing-masng satu gelas. Saat menunggu kami menghabiskan makanan, Thoriq berlari kesana kemari dan akhirnya duduk memandangi pemilik warung membuat pesanan untuk pelanggan lainnya. Tak lama kemudian dia mulai seperti melantunkan sesuatu. Aku pikir dia sedang menyenandungkan salah satu surat Al-Quran yang sudah kami ajarkan.

Ternyata tak lama kemudian dia mulai menutup telinganya dan mengeraskan lantunannya.

“Allahu akbay..allahu akbay..laaiyaaha iyawyahhh…” Hihii…aku sama abang sama-sama kaget banget…

“Masya Allah, Thoriq lihat dimanaaa..? tanyaku. “Di video mas ya? Hihi…sembarangan aja nyebut semua anak pake kata “Mas” atau “Adek”.

Habis itu dia teruuuus seperti itu. Di jalan aku bacakan lafal-lafal adzan secara lengkap.

Masya Allah Thoriq…barakallahu fiik.

 

***

Usia Thoriq 2 tahun 5 bulan alhamdulillah

Mau Hidup Terus

Ziyad masih berumur 4,5 tahun saat mulai berkenalan dengan kematian. Kematian dari sosok yang dekat dengan dirinya. Kucing betina belang tiga, Telon namanya. Kucing yang selalu kami beri makan jika kami punya sisa-sisa makanan yang bisa diberikan. Namun dengan sebab itu pula, entah kenapa secara otomatis kucing itu menjadi milik kami. Waktu itu sepertinya Telon mati karena terkena racun.  Sepanjang hidupku memelihara kucing, saat mereka mati, mereka akan tiba-tiba menghilang. Allah memang Maha Bijaksana. Kalau semua makhluk hidup mati di tengah lalu lalang kehidupan manusia, betapa repotnya manusia mesti menguburkan semua binatang yang mati di sekitar. Mungkin hampir setiap saat.

Waktu kejadian, Telon terkencing-kencing beberapa kali di teras rumah, sebelum akhirnya tergeletak mati. Kejadiannya pun di depan Ziyad saat dia bermain bersama mas Ukkasyah.

Aku minta Abang pulang waktu itu.  Melihat kondisi Telon yang membujur kaku, aku sedih. Dua ekor lalat juga mengitari jasadnya. Di sekitar tubuhnya juga ada genangan-genangan kecil bekas kencingnya. Abang memilih menggali tanah di pinggir jalan depan rumah kami. Tanah yang biasanya menjadi tempat semak-semak tumbuh atau tempat sampah daun pohon rambutan kami timbun.

Ziyad melihat semua proses itu. Penggalian, penguburan. Kematian.

***

Kematian kedua yang Ziyad sadari adalah meninggalnya Fia karena sebab sakit ginjal. Sosok yang hanya beberapa kali kami temui. Namun semuanya penuh kesan. Bukan hanya bagiku, tapi bagi Ziyad. Dan ketika ia meninggal, itulah pertama kalinya aku mulai sadar, Ziyad sudah mulai paham dengan kematian.

“Dikubur, Mi?” tanyanya waktu itu.

Baca selengkapnya Mau Hidup Terus

Cerita Sunat Metode Clamp Ziyad

Alhamdulillah, Ziyad sudah disunat tanggal 11 bulan Maret 2013 kemarin. Proses menuju kesana sebenernya gak secepat pengambilan keputusan tanggal sunatnya tanggal segitu hehe.

Aku lupa sejak kapan memotivasi Ziyad untuk disunat. Sunat itu ibadah. Sunat itu biar bersih. Aku juga kasih lihat ke dia foto anak-anak yang disunat pake metode clamp. “In sya Allah Ziyad pake cara ini. Biar gak terlalu sakit.”

sunat-clamp-ziyad

Dia semangat banget dan gak ada keraguan untuk disunat. Pas lagi seperti itu, aku bujukin abang untuk benar-benar ambil keputusan untuk sunat ini. Gak disangka malah pakai hitungan hari. Abang nelpon tempat yang menyediakan fasilitas sunat clamp itu hari sabtu,trus tau-tau bilang, “Hari Senin aja kalau gitu in sya Allah.” Jiaa… Mulai deh akunya yang deg-degan.

Kenapa Clamp?

Ziyad itu tipe yang kalau sakitnya agak berat mengalami perubahan kelakuan. Pas abis sakit DB itu, lumayan lama untuk balik lagi ke Ziyad yang ceria. Pas sempat sakit panas tinggi banget  tahun lalu karena main hujan-hujanan, abis itu juga bawaannya murung, marah-marah. Terutama ke Ab-nya sama ke Thoriq. Sedih banget ngelihatnya. Padahal udah sembuh. Tapi murung aja. Sampai dibawa nonton acara lumba-lumba. Cerianya sesaat aja. Habis itu tetep cemberut. Sampai bingung. Alhamdulillah trus kita kasih lihat dia video-video dia yang lama. Gimana dia ceria. Gimana dia baik banget sama adiknya masya Allah. Trus pelan-pelan balik lagi ke Ziyad yang heboh, ceria banget masya Allah hehe.

Nah, karena sebab itulah, aku pingin banget proses sunat ini berjalan tidak terlalu menyakitkan bagi dia. Rasanya gak pengen kalau dia jadi murung dan bersikap lain kaya kemarin-kemarin kalau sakit lumayan berat. Setelah browsing sana-sini tentang metode sunat, aku in sya Allah yakin dengan metode clamp ini. Dari hasil browsing itu, entah kenapa di otak aku tuh, kalo pake metode clamp itu gak pake acara sayat-menyayat :D. Atau paling tidak bukan seperti yang kemarin aku lihat pas Ziyad sunat. Kirainnya, kalo pake metode clamp itu, nanti kalau udah dipasang, trus nanti dibiarkan alat tersebut beberapa hari, trus nanti kulitnya kan bakal mati tuh yang terjepit. Jadi bakal gampang untuk “membuang”nya. Gak tau apa mau disayat atau tau-tau ngeletek sendiri kulit matinya (ini ko bisa banget ya pikiran kaya gini haha…).

Baca selengkapnya Cerita Sunat Metode Clamp Ziyad

Latihan Photoshop

apel photoshop

 

Apa terlihat seperti apel betulan hehe?

Ini hasil gambar di photoshop. Mo nyoba ngembangin skill di PS in sya Allah. Untuk yang apel ini untuk tahap awal lumayan bikin semangat in sya Allah.

Yang bola masih agak kurang nih. Tapi lumayan dapat kesan mainan bola berbulunya. Agak sempat kurang langkah pas mo ke step coloringnya.

Baca selengkapnya Latihan Photoshop

Quran Clip V.2

quranclip9

Alhamdulillah…setelah berbulan-bulan lamanya :D, akhirnya weekend kemarin jadi juga yang versi spiral. Setelah diberi masukan oleh abang, in sya ALlah harga Quran Clip jauh lebih murah dari kemarin. Karena ini untuk membantu para penghafal Quran in sya Allah.

Keterangan:
Yang baru dari Quran Clip v.2, in sya Allah lebih lengkaaaappp:

  1. Ada batas per hizb
  2. Ada nomor hizb
  3. Ada batas per juz. Dalam satu juz juga ada batas per 1/4 juz.
  4. Ada nomor ayat
  5. Ada halaman ayat/surat. Mmengacu pada Al-Quran Madinah ya. Kalaupun sama cetakan Indonesia yang sama barisnya seperti Quran Madinah (15 baris) in sya Allah halamannya sama/beda 1 halaman aja.
  6. Ada nomor surat

Harga: Rp 40.000
Spiral: Spiral pure dari percetakan loh ini. Bukan di fotokopian. In sya Allah kheir. Sengaja kertasnya tetap yang tebal supaya tidak mudah rusak/lecek/robek in sya Allah.

Berikut preview Quran Clip v.2 selengkapnya:

quranclip7
Untuk perbandingan ukuran. Mudah dibawa di tas in sya ALlah. Bisa digantung juga dengan menambahkan tali dimasukkan spiral.

Baca selengkapnya Quran Clip V.2

Poster Makhorijul Huruf Syaikh Aiman Rusydi Suwaid

Syaikh Aiman Rusydi Suwaid adalah salah satu ulama qiroat zaman ini.  Kalo mo belajar tahsin, di youtube banyak juga video beliau. Di IQRA TV juga ada acara rutin beliau. Gak tahu masih berlangsung gak sampe sekarang. Salah satu murid beliau Syaikh Abdullah Ali Basfar juga bisa dijadikan rujukan untuk belajar. Ini sebenarnya untuk catatan aku pribadi. Karena untuk saat ini, masih suka susah mengingat nama-nama ulama. Semoga Allah memperbaiki dan menghilangkan kelemahan ini.

tahsin makhorijul huruf download poster

Baca selengkapnya Poster Makhorijul Huruf Syaikh Aiman Rusydi Suwaid

DIY: Mainan Jahit

Tidak semua mainan edukatif itu perlu dibeli. Kadang kita bisa membuatnya sendiri dengan bahan-bahan yang ada di rumah. Proyek membuat mainan ini pun muncul tiba-tiba ketika melihat sisa karton tebal yang ada. Jika tidak ada karton tebal semacam ini, Anda juga bisa menggunakan kardus bekas in sya Allah.

craft sewing toys

Baca selengkapnya DIY: Mainan Jahit

DIY: Mainan Jahit

Tidak semua mainan edukatif itu perlu dibeli. Kadang kita bisa membuatnya sendiri dengan bahan-bahan yang ada di rumah. Proyek membuat mainan ini pun muncul tiba-tiba ketika melihat sisa karton tebal yang ada. Jika tidak ada karton tebal semacam ini, Anda juga bisa menggunakan kardus bekas in sya Allah.

Baca selengkapnya DIY: Mainan Jahit

Lebih Cepat Setahun…Alhamdulillah

Alhamdulillah…Ziyad mulai belajar secara teratur menghafal Al-Quran sejak umur 3 tahun 3 bulan. Hal ini dikarenakan beberapa sebab. Dia baru mulai belajar/mau bicara umur 2 tahun 3 bulanan. Itupun setelah itu masih berat dalam pelafalan. Jadi konsen aja ngajarin dia ngomong waktu itu. Cerita lengkap ada di sini.

Beda anak, beda kemampuan, beda karakter, beda gaya belajar, beda lagi penerapan menghafal Quran. Alhamdulillah Thoriq bisa ngomong pas udah mau umur 2 tahunan. Mau sendiri. Diajarin kata per kata juga mau ngikutin. Jadinya alhamdulillah untuk perkembangan bicaranya juga cepat.

Kalau yang ngikutin perkembangannya Thoriq di blog ini, aku pernah cerita dia tipe suka nyenandung-nyenandung gitu kan. Kayanya lebih ke audio. Plus lagi dia sering denger Ziyad mengulang hafalan atau ditalqin hafalan Quran.

Baca selengkapnya Lebih Cepat Setahun…Alhamdulillah

Hafalan Surat Al-Lail dan Asy-Syams

helikopter toys
Hadiah menghafal surat Asy-Syams. Harga cuma Rp 6.500.

Alhamdulillah pas menghafal surat As-Syams, Ziyad gak terlalu mengalami kesulitan. Padahal kalau dirunut-runut ada beberapa juga yang mirip kayanya. Pokoknya tahu-tahu udah beliin dia mainan ini.

Ceritanya mraktekin tips dari mba Desti di Riyadh. Anak beliau saat ini sudah hafal 16 juz di usia 9 tahun.

Baca selengkapnya Hafalan Surat Al-Lail dan Asy-Syams

Penggunaan Maksimal Wipol, Bayclin dan Porstex

Seperti biasa, kali ini tips rumah tangga adalah berdasarkan trial dan error selama menjalani sebagai ratu rumah tangga :D. Terkadang suatu produk itu, secara umum kita ketahu fungsinya ini, eh ternyata akan lebih maksimal kalau digunakan untuk yang itu. Apa sajakah itu?

wipol

 

Baca selengkapnya Penggunaan Maksimal Wipol, Bayclin dan Porstex

Penggunaan Maksimal Wipol, Bayclin dan Porstex

Seperti biasa, kali ini tips rumah tangga adalah berdasarkan trial dan error selama menjalani sebagai ratu rumah tangga :D. Terkadang suatu produk itu, secara umum kita ketahu fungsinya ini, eh ternyata akan lebih maksimal kalau digunakan untuk yang itu. Apa sajakah itu?

Baca selengkapnya Penggunaan Maksimal Wipol, Bayclin dan Porstex