Fanari dash Id dot Com - Going to Become a CSS Artist

Siapa sih yang nggak tahu JavaScript Accordion yang sangat terkenal itu. JavaScript Accordion berguna untuk membuat suatu area konten supaya bisa ditampilkan atau disembunyikan menggunakan klik mouse (lihat accordion keren yang saya pakai di footer blog ini ). Sangat baik digunakan untuk website yang membutuhkan space untuk bernavigasi yang cukup banyak. Saya sudah mencoba beberapa diantaranya ↓

Simple Javascript Accordion

Javascript accordion dari Deziner Folio ini paling simpel diantara accordion yang lain. Cukup mudah untuk menggunakannya.

Moo.Fx

Wow, ukurannya yang superlightweight, ultramungil, megakecil ini menjadi salah satu keunggulan JavaScript effect yang satu ini. Katanya sih, script ini sangat mudah digunakan, tapi saya belum bisa memasangnya di blog saya sendiri Keunggulan lainnya adalah script ini bersifat cross-browser (termasuk untuk IE), cepat dan ringan karena ukurannya yang kecil tadi.

jQuery accordion

Ini dia nih script yang saya pakai di blog ini (lihat sidebar). Accordion yang jadi favorit saya dari dulu. Memang ukurannya lebih besar daripada Moo.Fx jadi loadingnya jadi agak lama. Tapi entah kenapa saya lebih paham menggunakan script ini, dibandingkan Moo.Fx yang katanya sangat mudah itu. Animasinya cukup banyak antara lain animasi standar, animasi ease slide dengan mouseover, animasi bounceslide, juga accordion dengan wizard-style. [Read More →]

Bingung lihat tulisan-tulisan di gambar? Hehe itu cuma kata-kata yg banyak muncul di statistik blog ini, yg saya ambil dari WordPress.com Stats. Sekedar review aja, ternyata banyak pengunjung yang sampai ke blog ini lewat pencarian di Google menggunakan keyword-keyword di gambar. Dan udah bisa ketebak, tutorial hosting wordpress gratis-lah yang terbanyak dibaca oleh pengunjung. Bahkan setiap kali membuka statistik, selalu postingan tersebut yang mendapat views terbanyak, padahal itu postingan udah lama saya posting di blogspot, sebelum saya import di blog WordPress saya ini. Waktu itu saya bikin postingan tersebut setelah berhasil untuk pertama kalinya menginstall WordPress, setelah saya kepingin punya blog WP sendiri. Seneng juga sih tutorial itu cukup banyak dibaca orang, walaupun awalnya saya tidak mengiranya. Banyak juga yang sampai konsultasi sama saya, mulai cara daftar domain gratis sampai cara install website di hosting gratisan. Ternyata banyak juga ya yang suka cari yang gratisan

Dan yang lumayan bikin kecewa adalah postingan-postingan yg lain yang saya andalkan supaya banyak dibaca malah nggak populer, hehe

Postingan ini menyambung postingan sebelumnya tentang cara saya bikin highlight author comments tanpa plugin, dan kali ini saya akan berikan trik bikin sorotan komentar penulis apabila kamu memakai plugin WordPress Thread Comment, karena trik yang saya posting sebelumnya tidak berfungsi pada komentar-komentar nested.

1. Pertama-tama install plugin wordpress thread comment apabila belum menggunakannya.
2. Setelah diaktifkan, buka tab Options atau Settings pada dashboard dan klik tab WP Thread Comment
3. Pada box Edit Comment HTML, masukkan kode dibawah ini menggantikan kode-kode defaultnya (jangan lupa untuk mengganti email@domain.com dengan e-mail kamu) ↓

   <div class="comment-childs<?php if ($comment->comment_author_email == "email@domain.com") { ?><?php echo $deep ? ' highlight' : ''; ?>" id="comment-[ID]"><?php }  else { ?><?php echo $deep%2 ? ' chalt' : ''; ?>" id="comment-[ID]"><?php } ?><?php if(function_exists("get_avatar")) echo get_avatar( $comment, 32 ); ?><p>[author] <em>reply on [date] [time]</em>:</p>[content]</div>

4. Pada box Edit Comment CSS, masukkan style dibawah ini menggantikan style yg sudah ada:

   .editComment, .editableComment, .textComment{ display: inline;}.comment-childs{border: 1px solid #999;margin: 5px 2px 2px 4px;padding: 4px 2px 2px 4px;background-color: white;} .chalt {background-color: #FFFFFF;} .highlight {background-color: #00CCFF;}#newcomment{border:1px dashed #777;width:90%;} #newcommentsubmit{color:red;} .adminreplycomment{border:1px dashed #777;width:99%;margin:4px;padding:4px;background-color:#C8FF9F;} .mvccls{color: #999;}

background-color pada class .chalt berfungsi untuk memberi warna background pada komentar orang lain, sedangkan background-color pada class .highlight berfungsi untuk memberi warna background komentar penulis/admin. Ganti sesukamu. Silakan dicoba!

Highlight komentar penulis bisa dibikin dengan memakai plugin highlight author comment, tetapi kekurangannya adalah plugin ini hanya menyoroti teks komentar, sedangkan backgroundnya sendiri tidak. Nah, postingan kali ini saya akan bagi trik simpel hasil coba-coba saya yaitu cara bikin highlight teks dan background komentar penulis tanpa memakai plugin, tetapi dengan sedikit mengubah stylesheet dari tema yang kita pakai (seperti yang saya lakukan di blog ini). Saya asumsikan kamu memakai tema default WP:

1. Buka stylesheet atau style.css tema yang akan diedit menggunakan text editor, kemudian tambahkan kode class di bawah ini pada bagian comment di stylesheet (Pada kode di bawah saya menggunaan warna #00CCFF yang tentunya bisa kamu ubah sendiri sesuka kamu) ↓

   .highlighted {
   padding:5px;
   margin-bottom:4px;
   background-color:#00CCFF;
   }

2. Buka file comments.php kemudian cari bagian dibawah ini (jangan lupa ganti email@domain.com dengan alamat e-mail kamu) ↓

   <li <?php echo $oddcomment; ?>id="comment-<?php comment_ID() ?>">

   Kemudian ganti kode diatas dengan kode berikut ↓

   <?php if ($comment->comment_author_email == "email@domain.com") { ?>
   <li class="highlighted">
   <?php }  else { ?>
   <li <?php echo $oddcomment; ?>id="comment-<?php comment_ID() ?>">
   <?php } ?>

3. Refresh browser, selesai. Silakan dicoba!

Cari tema wordpress gratisan? coba aja yang satu ini. 3 Column “Blue State” WordPress Theme bikinan saya, terinspirasi oleh tema-tema bikinan Jai. Kompatibel dengan WP 2.5.x gallery, ada ads box nya, image logo, widget ready, breadcrumb navigation, dan tabber yg keren di sidebarnya. Tema ini mirip ama tema blog saya yg dulu, cuma belum ada javascriptnya aja sih. Sudah teruji di firefox dan IE, dan keliatannya gak ada masalah secara visual. Saya juga menyertakan file logo.psd untuk diedit pake photoshop buat ganti logonya. Download aja, gratis kok, terserah mau dipake apa nggak . Modifikasi juga boleh asal menyertakan link balik di bagian footer. Jangan lupa install juga plugin yg udah disertakan. Mau liat demo?? klik aja di sini atau mau langsung download?? Oh ya hampir lupa, makasih buat mas jauhari dan mas isnaini atas bantuannya bikin demonya. [Read More →]

Habis upgrade wp ke versi 2.5.1, saya punya tips sebelum upgrade wordpress ke versi terbaru:

1. Disable semua plugin
   Kenapa harus dilakukan? Karena nggak semua plugin dari WordPress versi lama kompatibel dengan WP versi terbaru. Kecuali kalau pakai plugin-plugin keluaran terbaru. Ya tapi buat jaga-jaga aja, supaya nggak terjadi fatal error atau hal-hal yg nggak kita inginkan lainnya.
2. Gunakan default theme sebelum upgrade
   Kenapa penting? Karena kemungkinan yang pertama tema yg sedang dipakai tidak kompatibel dengan wordpress terbaru. Mungkin kalau itu saja tidak terlalu jadi masalah. Masalah yg sering saya alami karena tema kebanyakan sudah dimodifikasi sedemikian rupa, apalagi kalau ditambahi macam2 skrip atau fungsi. nah kalo begini bisa aja muncul pesan error karena tema yg udah dimodifikasi tidak kompatibel dengan wordpress terbaru
3. Backup 3X
   Meskipun Fantastico sudah menyediakan fasilitas backup, nggak ada salahnya kan kalau kita backup database-nya lagi secara manual? bila perlu export kontennya sekalian
4. Berdoa dan pertimbangkan baik2 sebelum mengupgrade WordPress.

Semoga berhasil