Cara Modifikasi Kotak Komentar Keren Di Blogger-Apakah Trick Baru Chakly Untuk Blogger di Blog Anda Yang Akan Membantu Anda Dalam Menyesuaikan Kotak Komentar Anda Dalam Blogspot Blog ini adalah cara yang sedang anda cari? jika Yaa..." Silahkan teruskan bacanya yaa. Gaya Default kotak komentar memang terlihat jelek dan tidak akan menyenangkan bagi pengunjung Anda untuk berkomentar. Tapi itu tidak berarti bahwa hanya sistem komentar gaya keren diperlukan dan harus dirubah.
Mari kita Mulai Tutorial Memodifikasi Tampilan Kolom Komentar Keren Di Blogger
Kustomisasi dilakukan dengan bantuan kode CSS. Kode CSS yang akan Anda dapatkan di blog Sahabat GOOGLE ini yang benar-benar akan mengubah sistem komentar lama Anda dan menambahkan nuansa serta desain yang baru. Hal ini terintegrasi dalam template dalam hitungan detik. Ikuti setiap langkah hati-hati.
Catatan: Hal ini sangat penting untuk Membuat Backup Blogger Template.
Setelah membuat Backup jangan ragu lagi mengikuti tutorial ini.
Langkah 1
Pergi Menuju Blogger.com Home> Dashboard> Template> Edit HTML
Langkah 2
Klik di mana saja di wilayah kode untuk memancing "Tik" pada Keyboard dan Tekan Ctrl + F Untuk Mencari: Carilah kode tanda ]]> </ b: skin> di HTML template tsb. (Gunakan pencarian untuk menemukan)
Langkah # 3
Sekarang Paste Kode Berikut Hanya Di atas atau sebelum
]]> </ B: skin>
Kode Untuk di Pastekan:
.comments h4 {color: # FFFFFF; ! Display: inline-block important; background: # 3BB7D9; padding: 10px; } .comments-Action .comment .comment a {background: # 3BB7D9; border-radius: 5px; Color: # FFFFFF; Font: 12px Georgia; margin-right: 8px; padding: 5px; text-decoration: none! important; } .comments .comment-Aligned {background: # f8f8f8; border: 1px solid # f0f0f0; padding: 10px; .continue} {Border-top: none! important; .continue} A {background: # 3BB7D9; border: 1px solid # 3BB7D9; border-radius: 5px; Color: # FFFFFF; ! Display: inline-block important; margin-top: 8px; padding: 5px; text-decoration: none! important; Font: 12px Georgia, arial; } .comment-Header {color: # 222222 crucial; } #comments .avatar-Image-container img {border: 2px solid # f0f0f0; border-radius: 50px 50px 50px 50px; height: 58px; max-width: 58px; } .comments .avatar-Image-container {border: 2px solid #FFFFFF; border-radius: 34px 34px 34px 34px; box-shadow: 1px 1px 3px #dcdcdc; float: left; margin-left: -20px; max-height: 61px important; overflow: hidden; ! Width: 61px important; }
Langkah # 4
Preview/Pratinjau Template Anda untuk memastikan mereka tidak ada kesalahan dan jika semuanya terlihat baik, Kamu boleh mengklik Simpan Template.
Lihatlah screenshotnya dari sistem komentar keren ini di bawah ini yang akan terlihat seperti setelah penyesuaian
Nah di atas untuk gaya kotak komentar untuk blogger Smart mungkin sedikit sederhana. Jika Anda ingin menambah sedikit efek yang lebih dan fitur-fitur canggih untuknya, Anda mungkin ingin menambahkan kode di bawah ini bukan kode di atas. Lupakan aja kode di atas dan beralih ke kode yang memiliki lebih banyak fitur. Ini kotak komentar Blogger yang benar-benar mengagumkan.
Catatan Lagi: Tidak begitu banyak yang istimewa dari atas gaya tetapi berubah warna dan efek mouse Hover ditambahkan dalam gaya yang diberikan di bawah ini.
Sekarang waktu untuk Kustomisasi dari kotak komentar keren.
Pergi Untuk Blogger Home> Dashboard> Template> Edit HTML.
Sekarang Cari Untuk "]]> <" tanpa tanda kutip dan Pastekan kode yang diberikan di bawah tepat di atas atau sebelum "]]> <"
.comments h4 {color: # FFFFFF; ! Display: inline-block important; background: # 292 832; padding: 10px; } .comments-Action .comment .comment a {background: # 292 832; border-radius: 5px; Color: # FFFFFF; Font: 12px Georgia; margin-right: 8px; padding: 5px; text-decoration: none! important; } .comments .comment .comment-Action a: hover {background: # 808080; border-radius: 5px; color: # 292 832; Font: 12px Georgia; margin-right: 8px; padding: 5px; text-decoration: none! important; } .comments .comment-Aligned {background: # f8f8f8; border: 1px solid # f0f0f0; padding: 10px; .continue} {Border-top: none! important; .continue} A {background: # 292 832; border: 1px solid # 292 832; border-radius: 5px; Color: # FFFFFF; ! Display: inline-block important; margin-top: 8px; padding: 5px; text-decoration: none! important; Font: 12px Georgia, arial; .comment-Header} {color: # 222222 crucial; } #comments .avatar-Image-container img {border: 2px solid # 292 832; border-radius: 50px 50px 50px 50px; height: 58px; max-width: 58px; } .comments .avatar-Image-container {border: 2px solid #FFFFFF; border-radius: 34px 34px 34px 34px; box-shadow: 1px 1px 3px #dcdcdc; float: left; margin-left: -20px; max-height: 61px important; overflow: hidden; ! Width: 61px important; }
Menggunakan kode di atas akan membuat Komentar Anda dan Reply Thread seperti gambar di bawah ini diberikan
Jika Anda teliti mengikuti Setiap Langkah dan hati-hati daripada Anda Harus Telah Berubah Desain Kotak Komentar Anda. Nikmati Sistem Komentar gaya blog Blogger Anda. Terus mengunjungi Sahabat GOOGLE untuk dapet Tutorial yang insya Allah bermanfa'at lainnya yaa.