Buat Pembatas Antar Komentar Menggunakan Background Image

Komentar bagi seorang blogger adalah ibarat setetes air di tengah teriknya mentari di atas gurun. Sangat diharapkan untuk tetap menyalakan semangat posting. Dan tetesan air itu kurasakan juga hari ini. Menggugah semangat ku yang beberapa waktu sempat lunglai ditelan banyaknya kesibukan. Yah..., sekalipun ketika mau memulai terasa begitu berat. Kemalasan telah sedikit menggerogoti rasa antusias yang selama ini begitu menggelegak. Beruntunglah sekalipun dengan langkah tertatih akhirnya jemari ku mulai menari menyentuh setiap onggokan hitam berbalut putih huruf di keyboard ku! Buih ..., setelah sekian bulan tak pernah tersentuh, akhirnya pagi ini satu posting tutorial dan panduan blogger dalam memodifikasi blog selesai ku buat.

Satu hal sederhana dan masih berhubungan dengan "komentar si penyala semangat posting", kali ini aku akan mencoba membedah sedikit persoalan bagaimana "menambal" template/blog kita supaya terlihat rapi dan kolom komentar terlihat sedikit berbeda dengan tampilan biasanya. Membuat sebuah garis batas antar setiap komentar yang telah diberikan pengunjung mungkin akan membuat blog terlihat lebih indah dan dengan mudah siapapun dapat membedakan satu persatu komentar yang menghiasi halaman posting.

Batas setiap komentar yang masuk dapat dibuat dengan 2 (dua) buah macam cara:

• Menggunakan border : penggunaan border adalah sebuah cara yang paling simpel sekalipun tidak banyak variasi bentuk pembatas komentar yang bisa diciptakan. Kita hanya bisa merubah jenis bordernya serta warna border. Bagi yang menyukai "blog minimalis" ini adalah cara yang paling tepat. Sederhana, praktis pembuatannya dan tentu saja dengan amat cepat segera bisa diselesaikan.
• Menggunakan background-image : Memanfaatkan sebuah background sebuah gambar merupakan cara yang paling tepat bagi blogger yang menyukai warna, seni atau keindahan. Dengan background-image kemungkinan pembuatan bentuk batas komentar menjadi tidak terbatas. Berbagai variasi bentuk dan warna bisa dibuat, bahkan bagi yang menyukai sebuah gambar animasi (.gif), maka dengan amat cantiknya sebuah batas komentar beranimasi dapat kita buat.

Cara Membuat Batas Setiap Komentar

• Login : Silahkan lakukan login ke blogger terlebih dahulu.
  • Tulis User Name (Nama Pengguna) atau bisa juga menggunakan Alamat Email (Email Address).
  • Tulis juga Password (Kode Rahasia/Sandi).
  • Klik Login.
• Dasboard (Dasbor) : Klik Design (Rancangan).
• Design (Rancangan) : Klik Edit HTML.
• Di halaman HTML ini akan terlihat banyak sekali kode html, silahkan cari kode ]]></b:skin>. Copy paste kode CSS di atas kode ]]></b:skin>.
• Klik SAVE Templates (Simpan Template).
• Anda harus membuka halaman posting yang sudah ada komentarnya. Apabila belum ada , buatlah komentar sendiri supaya bisa terlihat hasilnya. Jika dikehendaki, setelah bisa diketahui hasil akhir pembuatan batas komentar, maka komentar bisa anda hapus melalui link Comments atau Komentar.

Batas Komentar Menggunakan Border

Kode CSS

dd.comment-footer {
      border-bottom: 4px solid #888; 
}

Beberapa perubahan yang dapat dilakukan jika kita gunakan border:

• Silahkan anda bisa merubah tebal border (4px) sesuai tebal batas komentar yang di kehenndaki. Semakin besar nilainya maka akan semakin tebal bentuk batasnya.
• Untuk merubah warna border, anda bisa mengganti kode warna (#555) dengan kode warna yang lain. Bisa dalam bentuk kode menggunakan angka dan huruf (#000, #fff, #333, #b40303 , ... dsb) atau kode warna berbentuk teks (contoh: blue, red, white ... dsb).
• Pilihan lain yang bisa anda lakukan untuk merubah bentuk batas komentar adalah dengan merubah style border-nya (contoh: ridge, dotted, solid, outset, dashed, inset). Dibawah ini adalah bentuk perubahan yang dilakukan.

dd.comment-footer {
      border-bottom: 1px dotted lightblue; 
}

Batas Komentar Menggunakan Background-Image

Menggunakan sebuah background-image tidak jauh berbeda dengan penggunaan border, hanya kode CSS yang kita gunakan sedikit berbeda.
Kode CSS

dd.comment-footer {
      padding-bottom: 4px; 
      background: url(http://i43.tinypic.com/2aeqkiv/tabtytm/bgimg/.png) bottom left repeat-x;
   background-position: 50% 15px;
}

Keterangan

• Untuk background position pada posisi vertical kita gunakan sebesar 15px.
• Background-position horizontal bernilai 50% supaya posisi background center horizontal.
• Saat menggunakan sebuah background-image sebagai batas komentar, kita harus mengetahui ketinggian background (gambar).
• Tinggi gambar tersebut kita gunakan sebagai padding-bottom dengan menambahnya sebesar 10px. Penambahan ini dimaksudkan untuk menciptakan ruang dengan komentar di bawahnya.
• Dengan perhitungan menggunakan angka angka di atas, maka batas tiap komentar akan lekat di teks terakhir komentar sementara di bawahnya ada padding yang mencukupi.
• Dalam kode CSS di atas digunakan background berktinggian 4px oleh karena itu padding-bottom = 4px + 10px = 14px.

Beberapa Kode CSS yang bisa dimanfaatkan

Beberapa kode CSS yang telah lengkap dengan background-image ini bisa dimanfaatkan langsung dengan menyimpan di atas kode ]]></b:skin>.

dd.comment-footer {
      padding-bottom: 22px; 
      background: url(http://i37.tinypic.com/t8b1na/tantytm/bgimg/Redball12.gif) bottom left repeat-x;
   background-position: 50% 15px;
}

dd.comment-footer {
      padding-bottom: 25px; 
      background: url(http://i54.tinypic.com/28l7tyr/tantytm/bgimg/V15H5.gif) bottom left repeat-x;
   background-position: 50% 15px;
}

dd.comment-footer {
      padding-bottom: 16px; 
      background: url(http://i40.tinypic.com/2evwaq9/tantytm/bgimg/V6H345.png) bottom left repeat-x;
   background-position: 50% 15px;
}

Menggunakan background animasi:

dd.comment-footer {
      padding-bottom: 24px; 
      background: url(http://i47.tinypic.com/1zf69nr/tantytm/bgimg/minusAnima14.png) bottom left repeat-x;
   background-position: 50% 15px;
}

dd.comment-footer {
      padding-bottom: 35px; 
      background: url(http://i51.tinypic.com/2r2q805/tantytm/bgimg/bloodanima.gif) bottom left repeat-x;
   background-position: 50% 15px;
}

Tutorial lain yang jauh lebih lengkap dengan jumlah ratusan posting menarik dapat anda buka melalui link di bawah ini:

Best Blogger Tutorial Collection