Revisi: Cara Modifikasi Kotak Komentar

Sudah baca tutorial kemarin tentang cara modifikasi kotak komentar? Bagaimana hasilnya? dari komentar yang masuk dan setelah kang rohman kunjungi blognya, ternyata memang banyak yang sudah berhasil. Namun ada yang mengeluhkan bahwa hasilnya sedikit berbeda dengan yang di miliki kang rohman, yaitu di sebelah atas garisnya tidak rata sehingga mengurangi keindahan dari kotak komentar tersebut. Screenshotnya seperti ini :

 

 

Hiks…. kenapa ya bisa begitu? ternyata permasalahnya adalah gambar yang di upload ke blogger sebagai background kotak komentar tersebut mengalami penyusutan alias di perkecil oleh mesin blogger. So, gambar yang tadinya sudah pas menjadi tidak pas. Apakah ada solusi? tentu saja. solusinya anda harus menyimpan gambar background di server lain seperti di photobucket, google pages, imageshack, yahoo geocities atau di server lainnya yang biasa anda gunakan untuk menyimpan gambar. Tentunya sudah tahu kan cara menyimpan gambar dan mengambil alamat URL nya, belum tahu juga? sok atuh di baca postingan kang rohman tentang “upload gambar ke photobucket” atau tentang “google page creator”.

 

Trus bagaimana kelanjutan tentang kotak komentarnya? hiksss…lupa. Sekarang begini, silahkan anda save gambar di bawah ini! belum tahu caranya? tinggal sorot saja gambarnya, kemudian klik kanan lalu pilih Save Image As… (untuk fire fox) atau Save Picture As… (untuk internet explorer), kemudian simpan di komputer anda.

 

 

 

Sudah di simpan gambarnya? jika sudah, silahkan upload ke server tempat anda biasa menyimpan gambar, kemudian jangan lupa untuk mengcopy alamat URL nya.

Jika sudah dapat, silahkan ikuti tutorial berikut untuk memperbaiki kotak komentar yang kemarin.

 

1. Login ke blogger dengan ID anda.
2. Klik Tata Letak.
3. Klik tab Edit HTML.
4. Klik tulisan Download Template Lengkap. Silahkan backup dulu templatenya (penting!).
5. Cari kode css yang seperti ini (kode yang kemarin hasil modifikasi).

    

   .commenttext {
       clear: both;
       margin: 3px 0px 10px 0px;
       padding: 20px 10px 5px 10px;
       width: 490px;
       background: #FFFFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy3jXSCvlqraOGzKN1u3K2DGcOnPuAl6KA8TIFDIxovUctFaH7byDKpexLiT5rSH2E9m09tnt7uFl2Xs81L_FsZd-8QnmOeP4ko5VlgUk1_ZjPClS2N5t3nnKYU6VGNyZtLAviULW-ZWP0/s320-r/comment.gif) no-repeat top left;
       }

   .commenttext-admin {
       clear: both;
       margin: 3px 0px 10px 0px;
       padding: 20px 10px 5px 10px;
       width: 490px;
       background: #FFFFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy3jXSCvlqraOGzKN1u3K2DGcOnPuAl6KA8TIFDIxovUctFaH7byDKpexLiT5rSH2E9m09tnt7uFl2Xs81L_FsZd-8QnmOeP4ko5VlgUk1_ZjPClS2N5t3nnKYU6VGNyZtLAviULW-ZWP0/s320-r/comment.gif) no-repeat top left;
       }

    

6. Gantilah alamat gambar yang saya beri warna merah dengan alamat gambar yang anda miliki. contoh ( ini contoh saja lho, jangan di pakai) :

    

    

   .commenttext {
   clear: both;
   margin: 3px 0px 10px 0px;
   padding: 20px 10px 5px 10px;
   width: 490px;
   background: #FFFFFF url(http://kangrohman.googlepages.com/commentgray.gif) no-repeat top left;
   }
   .commenttext-admin {
   clear: both;
   margin: 3px 0px 10px 0px;
   padding: 20px 10px 5px 10px;
   width: 490px;
   background: #FFFFFF url(http://kangrohman.googlepages.com/commentgray.gif) no-repeat top left;
   }

    

7. Klik Tombol SIMPAN TEMPLATE.

8. Selesai, silahkan lihat hasilnya.

 

 

 

Mudah-mudahan dengan tutorial ini, keluhan anda bisa jadi terobati. Satu lagi, pada posting berikutnya akan saya berikan altenatif warna lain dari kotak komentar hasil modifikasi ini. Jadi, jangan lewatkan seri berikutnya ya.

 

Selamat berkreasi.

Share on Google Plus

About Admin