Cara merubah tampilan kotak komentar blog

Cara merubah tampilan kotak komentar blog, agar terlihat lebih rapi. Dengan cara menambahkan background, box-shawod, warna, serta ukuran dari tulisan yang ada didalam komentar blog. Contohnya seperti gambar dibawah ini.

Untuk lebih jelasnya tentang cara merubah tampilan kotak komentar blog. Ikuti langkah-langkah dibawah ini.

1. Login ke blogger, pili pengaturan Tata Letak > Desainer Templates.
2. Lalu pilih Tingkat Lanjut > Tambahkan Css
3. Dan masukan kode ini kedalamnya.
.comments h4 {Color:#0b5394;margin:0;}
.comments {
border:1px solid #cccccc;
margin:0px 10px 20px 10px;
padding:10px;
box-shadow:0px 1px 10px #aaaaaa;
background:#ffffff;
background-image: -moz-linear-gradient(center top , #fff 0%, #f3f3f3 100%);}

.comments .comments-content {
background:transparent;
margin:-20px 0px -50px 0px;
font-size:13px;
text-align:left;}

.comments .comments-content .user a{
color:#1780dd;
font-size:14px;
font-weight:700;}

.comments .comment-replies .comment-thread{
border:1px solid #dddddd;
box-shadow:1px 1px 1px #bbbbbb;
background-image: -moz-linear-gradient(center top , #fff 0%, #e6e6e6 100%);
margin:0px 0px 0px 12px;}

.comments .continue{border-top:none;}  
.comments .comments-content .comment {margin:0px 0px -10px 0px;}
.comments .comments-content .datetime{
font-size:11px;
margin:3px 0px 0px 0px;
float:right;font-weight:700;}
4. Save template, Selesai.

Keterangan Kode:

• .comments h4 { untuk mengatur warna tulisan dari jumlah komentar. 
• .comments { untuk mengatur warna background dari seluruh kotak komentar blog. 
• .comments .comments-content { untuk mengatur warna, ukuran tulisan dari isi komentar, dan jarak tinggi komentar blog. 
• .comments .comments-content .user a{  untuk mengatur warna dari seluruh nama yang ada dikotak komentar. 
• .comments .comment-replies .comment-thread{ untuk mengatur warna background dari komentar balasan. 
• .comments .continue{ untuk mengatur tombol Balas. 
• .comments .comments-content .comment { untuk mengatur jarak antar komentar balasan. 
• .comments .comments-content .datetime{ untuk mengatur warna dan posisi tanggal.

Silakan baca juga artikel yang terkait dengan desain kotak komentar blog. Seperti cara membuat tanda penulis dikotak komentar blog. Dan juga cara menggantu tulisan poskan komentar dengan gambar. Dan juga artikel-artikel lainnya. Semoga Bermanfaat.

Read More

Cara mengganti poskan komentar dengan gambar

Cara mengganti tulisan poskan komentar yang berada di atas kotak komentar dengan gambar. Tulisan poskan komentar ini akan muncul jika artikel kita belum ada komentar. Dan akan hilang dengan sendirinya jika artikel sudah ada yang berkomentar.

Gambar diatas adalah contoh tulisan poskan komentar yang berada di atas kotak komentar blog. Untuk menggantinya dengan gambar. Ikuti langkah-langkah dibawah ini.

1. Login ke blogger, ke pengaturan Template.
2. Lalu klik edit HTML dan cari kode <data:postCommentMsg/>
3. Setelah itu ganti tulisan tersebut dengan format kode dibawah ini.
<img src="URL gambar kalian" />
4. Kode <data:postCommentMsg/> ada 4 di template blog Ganti semuanya dengan kode gambar seperti diatas.
5. Save template, selesai.

Saya beri contoh gambar dan kodenya.

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgd6EwbvrCPaKDKyGiyZgxJTLVK_qLdxpTfjMqD714nRIk6B1PmGN1AGGi3RHRkFG9B0p_CjVZDonJMLeyN33ZPD2YCNGRWaXzPTSq2rO6so0zpCKOxgwZlxrdITeKnZDC0JQ8grnXlm-i/s1600/KOMENTAR+1.gif" />

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkGLoTKTJMiyKaddW1Q9-UeCMoOVF6D6I0wsnoREuA3FyIps4B5ftIWJMNBuJ_jmnf7Eu1weB6sCH_Ztfjr5wZNXK3NzXlYHJYl3NWccNatjGCfZjgDTtn9OQmPx6BufhTWu_c9HB8vZqe/s1600/Poskan+Komentar+02.gif" />

Silakan gunakan kode dan gambar diatas untuk percobaan diblog anda. Selanjutnya anda bisa gunakan gambar sendiri yang kalian inginkan. Untuk cara upload dan ambil url gambar, upload saja gambarnnya ke blogger, lalu klik kanan dan ambil urlnya, untuk lebih jelasnya bisa kalian baca di cara upload dan ambil url gambar.

Setelah mengganti tulisan poskan komentar dengan gambar, kita juga dapat mengatur posisinya, dikanan, dikiri atau ke posisi lainnya yang sesuai dengan keinginan kita. Caranya tempatkan kode berikut diatas ]]></b:skin>

.comments h4 img{
float:right;
margin:-42px  -35px 0px 0px;
}

Ketarangan kode:

• float:right; mengatur posisi gambar berada dikanan. Untuk mengubah menjadi sebelah kiri, hapus saja kode tersebut.
• margin:-42px  -35px 0px 0px; untuk mngatur posisi kanan, atas, bawah, kiri gambar.

Terakhir save template, selesai. Silakan dibaca juga artikel laiinya yang berkaitan dengan kotak komentar seperti cara membuat tanda penulis di blog pada bagian kotak komentar. Atau cara menghilangkan kotak komentar pada halaman tertentu diblog. Dan juga artikel-artikel lainnya. Semoga bisa bermanfaat untuk anda.

Read More

Tanda Penulis di Kotak Komentar Blog

Cara membuat tanda penulis/author dikotak komentar blog. Seperti gambar dibawah ini. Tanda penulis berupa gambar, yang akan muncul ketika penulis memberikan komentar. Sehingga mudah untuk dibedakan yang mana author/pemilik blog dengan pengunjung yang memberikan komentar.

Untuk lebih jelasnya tentang cara membuat tanda penulis atau author dikotak komentar blog. Ikuti langkah-langkah dibawah ini.

1. Login ke blogger, dari halaman dasbor pilih pengaturan Template.
2. Klik edit HTML dan cari kode ]]></b:skin> dan tempatkan kode berikut ini diatasnya.
.comments .comments-content .icon.blog-author{
background-repeat:no-repeat;
background-image:url(
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRE0jFvrDdNyUm_qcSlhwtMlAe3FDhVznrDUm5XBrutdYf7rrjOGi-jDTHsTvAYcDDEAc4IF6lrDFoEnNdiextG8JG-19xh6s2-BlXZfklsdcSc6vWvCWF6R4OfLiMqUZW87VaHi0UvmwZ/s125/fandra%2520penulis.png);
background-position: top; float:right;width:125px;height:32px;margin:-16px 0px 0px 0px;
}
3. Save template, selesai.

Keteranga kode diatas:

• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRE0jFvrDdNyUm_qcSlhwtMlAe3FDhVznrDUm5XBrutdYf7rrjOGi-jDTHsTvAYcDDEAc4IF6lrDFoEnNdiextG8JG-19xh6s2-BlXZfklsdcSc6vWvCWF6R4OfLiMqUZW87VaHi0UvmwZ/s125/fandra%2520penulis.png merupakan url dari gambar yang akan ditampilkan.
• float:right; posisi gambar disebelah kanan.
• width:125px;height:32px; tinggi dan lebar gambar.
• margin:-16px 0px 0px 0px; mengatur posisi gambar agar tidak terkena komentar. Pengaturan kode: -16(kanan), 0(atas), 0(bawah), 0(kiri).

Gambar diatas menggunakan format PNG, dan background dibuat transparant. Jadi background gambar akan mengikuti warna background dari kotak komentar. Untuk membuat gambar transparan, baca di cara membuat gambar dengan background transparan. Dan silakan baca juga cara upload dan ambil url gambar, untuk memasukan gambar anda yang akan dijadikan tanda penulis.

Itulah sedikit cara desain blog yaitu tentang membuat tanda penulis dikotak komentar blog, agar pengunjung mengetahui siapa penulis atau pemilik dari blog. Silakan baca juga artikel lainnya, yang berhubungan dengan gambar. Seperti cara menambahkan gambar disamping judul posting atau cara memasang icon berbeda disetiap judul widget. Dan juga artikel lainnya.

Semoga bisa bermanfaat untuk anda.

Read More

Menghilangkan kotak komentar pada halaman tertentu diblog

Menghilangkan kotak komentar pada halaman tertentu diblog. Untuk suatu halaman, seperti halaman contact, tentang/profil, atau pun juga daftar isi. Beberapa orang mungkin tidak menginginkan kotak komentar dibawahnya. Agar halaman tersebut bisa terlihat lebih rapi, dan berbeda dengan halaman-halaman lainnya.

Untuk melihat contohnya: silakan lihat halaman hubungi pada menu blog ini atau halaman tentang saya(jika masih saya gunakan). Berikut ini adalah cara agar kotak komentar pada suatu halaman diblog hilang. Tapi pada halaman lainnya, kotak komentar tetap ada. Ikuti langkah-langkah dibawah ini.

1. Login ke blogger, dari halaman dasbor pilih pengaturan post.

2. Selanjutnya, buatlah entri baru atau buka artikel lama saja.

3. Lalu klik Pilihan(letaknya disebelah kanan bawah, diurutan Setelan entri).

4. Setelah itu, beri tanda Jangan bolehkan pada pilihan Komentar pembaca. Seperti gambar dibawah ini.

5. Klik selesai, lalu silahkan dipublikasikan(untuk entri baru) atau Perbarui(pada artikel lama). Dan lihat halaman tersebut, kotak komentar akan hilang. Selesai.

Setelah melakukan cara diatas. Ketika kamu membuat entri baru, coba cek pengaturan pilihan, biasanya tanda masih di Jangan bolehkan pada pilihan komentar pembaca. Ganti menjadi izinkan, agar entri baru tersebut dapat dikomentari oleh pembaca. Untuk entri baru selanjutnya. blogger akan mengatur otomatis, pengaturan komentar pembaca pada pilihkan bolehkan.

Silahkan dibaca juga cara-cara membuat suatu halaman blog berbeda dengan halaman lainnya. Seperti menghilangkan sidebar blog pada halaman tertentu, widget2 dikiri dan kanan blog akan dihilangkan. Atau baca juga artikel tentang background berbeda dihalaman berbeda, kita dapat memberi backcground pada halaman tertentu.

Dan silahkan baca juga artikel yang berhubungan dengan kotak komentar, yaitu tentang cara memasang scroll dikotak komentar blog, untuk mempersingkat tampilan kotak komentar jika sudah ada banyak komentarnya. Dan juga artikel-artikel lainnya. Semoga bermanfaat untuk anda.

Read More

Cara Memasang Scroll di Kotak Komentar Blog

Cara Memasang Scroll di Kotak Komentar Blog. Silakan lihat contoh gambar dibawah ini:

Untuk lebih jelasnya tentang cara memasang scroll di kotak komentar blog. Ikuti langkah-langkah dibawah ini.

1. Login Ke Blogger, Dari halaman Dasbor pilih pengaturan Template.
2. Klik Edit HTML dan cari kode <div class='comments' id='comments'>
3. Setelah ketemu, ganti kode tersebut dengan kode dibawah ini.
<div class='comments' id='comments' style='max-height:960px;overflow:auto;'>
4. Karena kode <div class='comments' id='comments'> ada 2 ditemplate. Ganti kedua² nya dengan kode diatas. 
5. Selanjutnya save template, selesai.

Keterangan Kode:  max-height:960px untuk mengatur tinggi kotak komentar yang akan ditampilkan. Dan overflow:auto; ini kode scroll nya,  scroll akan muncul ketika kotak komentar sudah melebihi max-height yang sudah kita atur.

Kotak scroll diatas berfungsi untuk mempersingkat tampilan komentar blog. Ketika artikel kita sudah mempunyai komentar yang banyak, maka komentar yang akan terlihat pertama kali hanya sebatas dari tinggi kotak yang telah kita atur. Pada saat discroll kebawah, maka komentar lain akan muncul, dan komentar² yang pertama akan disembunyikan. Jika di scroll lagi ke atas, maka komentar yang disembunyikan tadi akan muncul kembali, jadi semua komentar tetap ada, hanya tampilannya saja yang kita persingkat.

Dengan memasang kotak scroll di kotak komentar blog, maka loading blog akan lebih cepat, jika dibandingkan harus membuka semua komentar2 yang ada pada suatu artikel. Jika artikel kita belum ada komentar, maka scroll pun tidak akan terlihat. Scroll hanya akan muncul ketika komentar di artikel kita sudah banyak, atau sudah melebihi tinggi kotak komentar, seperti penjelasan saya di keterangan kode.

Itulah sedikit tips dan trik tentang cara memasang scroll di kotak komentar blog, silakan baca tips dan trik lainnya yang dapat kita gunakan diblogspot, seperti cara mempercepat loading blog agar lebih mudah untuk dibuka, atau cara menuliskan pangkat di blog seperti ini 2⁸ dan artikel lain²nya.  

Semoga bisa bermanfaat untuk anda.

Read More