Pada artikel sebelumnya kita sedikit mengetahui bermacam-macam kesalahan yang sering kita temui pada blog, dalam hal keindahan tipografi (setidaknya menurut saya 
). Selanjutnya yang akan kita bahas di sini adalah bagaimana memanfaatkan CSS untuk mengatur dan membentuk tulisan postingan kita menjadi sedikit lebih menarik dan bernilai. Ya, yang akan kita bahas kali ini sepenuhnya mengenai CSS styling, dan bagaimana mengaplikasikannya pada setiap artikel yang kita tulis. Jadi, siap-siap buka text editor dan menyalin deklarasi-deklarasi CSS berikut sekalian belajar CSS dengan mencoba sedikit demi sedikit mengubah nilai dari property CSS yang tersedia supaya sesuai dengan template yang kita gunakan. Continue reading
Category Archives: Belajar CSS
Membuat Highlight Author Comment Pada Komentar Thread
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.
- Pertama-tama install plugin wordpress thread comment apabila belum menggunakannya.
- Setelah diaktifkan, buka tab Options atau Settings pada dashboard dan klik tab WP Thread Comment
- Pada box Edit Comment HTML, masukkan kode dibawah ini menggantikan kode-kode defaultnya (jangan lupa untuk mengganti
email@domain.comdengan 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> - 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!
Belajar CSS Yuk: Membuat Highlight Komentar
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:
- Buka stylesheet atau
style.csstema 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#00CCFFyang tentunya bisa kamu ubah sendiri sesuka kamu) ↓.highlighted { padding:5px; margin-bottom:4px; background-color:#00CCFF; } - Buka file comments.php kemudian cari bagian dibawah ini (jangan lupa ganti
email@domain.comdengan 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 } ?> - Refresh browser, selesai. Silakan dicoba!