Cara Membuat Kostum Style System Komentar Blogger

Sistem komentar Blogger tentu cukup kuat untuk disesuaikan dan digunakan secara aman dengan blog Anda. Di masa lalu, kami telah menyediakan beberapa sistem komentar sangat disesuaikan untuk Blogger, dan kali ini kami pikir untuk datang dengan tutorial yang bisa mengajarkan beberapa pemula tentang dasar-dasar menciptakan sistem komentar kustom untuk blog blogger mereka. Dalam artikel ini, akan menggunakan kelas-kelas standar untuk menunjukkan Anda bagaimana Cara Membuat Kostum Style System Komentar Blogger dan beberapa hal keren yang dapat Anda lakukan dengan itu.

Catatan: Karena, blogger template yang berbeda dikodekan oleh desainer yang berbeda. Oleh karena itu, kami ingin Anda untuk terlebih dahulu menyingkirkan semua CSS sebelumnya coding yang Anda gunakan dari styling komentar Anda.

Cara Tepat Cari Yang Kelas CSS Edit:

Sebelumnya, kami mengajarkan Anda bagaimana gaya komentar Anda, adalah penting untuk mendapatkan beberapa tips atau trik untuk melihat bagaimana Anda benar-benar dapat menemukan apa yang CSS kelas atau ID Anda harus mengedit untuk mendapatkan pekerjaan dilakukan dengan baik. Google Chrome dan Mozilla Firefox datang dengan beberapa sekelompok alat-alat praktis untuk pengembang web. Alat "Inspect Element" adalah tongkat ajaib untuk pengembang.

Sederhana Hover mouse Anda ke setiap elemen pada halaman web, klik kanan dan pilih "Periksa Elemen". Sekarang panel baru akan muncul di bagian bawah layar Anda. Ini akan dipisahkan menjadi dua baris. Pada baris pertama, Anda akan melihat Source code dan CSS coding di lainnya. Anda dapat mengedit CSS untuk menguji beberapa hal seperti Margin, padding, warna latar belakang dan dll Anda bahkan dapat menambahkan CSS kustom Anda dalam Id tertentu. Hal ini seperti alat pengembangan Anda sendiri. Padahal, saat Anda akan me-refresh halaman semuanya akan kembali normal. Untuk membuat perubahan permanen, Anda harus menggunakan CSS yang sama di StyleSheet dari template Anda.

Styling Posting Pembuat Avatar:

Avatar adalah jenis gambar yang mewakili identitas Anda. Namun, terkadang seseorang mungkin ingin telah bulat avatar daripada memiliki satu persegi panjang sederhana. Pelaksanaan ini cukup banyak seperti hanya dapat dilakukan dengan CSS dan semua yang Anda butuhkan adalah sepotong berikut CSS coding. Anda juga dapat menambah gaya kustom Anda sendiri

.comments .avatar-image-container, .comments .avatar-image-container img {
width: 48px;
max-width: 40px;
height: 40px;
max-height: 48px;
background: #FFF;
float: left;
border-radius: 50%;
-moz-border-radius: 50%;
margin: 0 10px 0 0;
}
#comments .avatar-image-container img {
border: 1px solid #ddd;
}
.comments .comment-thread.inline-thread .avatar-image-container, .comments .comment-thread.inline-thread .avatar-image-container img {
width: 36px;
max-width: 36px;
height: 36px;
max-height: 36px;
margin-left: 5px;
}

Untuk menyesuaikan dgn mode avatar Anda dengan bentuk bulat Anda hanya dapat menggunakan kode berikut, hanya paste di CSS coding dari template Anda (TIP: Pergi ke Blogger.com >> Template >> Edit HTML >> Cari Skin dan di atasnya paste kode berikut).

Styling Badan Komentar di Blogger:

Styling tubuh komentar untuk para pengguna serta penulis adalah sesuatu, yang memberi hidup pada sistem Anda. Hal ini memungkinkan hal untuk bekerja secara sistematis. Ini memegang segala sesuatu bersama-sama. Misalnya, pengguna meninggalkan komentar karena tubuh tidak well-formed teks meluap. Oleh karena itu, adalah penting untuk memberikan bantalan yang tepat dan margin sehingga semuanya terlihat rapi dan bersih.

#comments {
background-color: #fff;
padding-top: 20px;
border-top: 1px solid #ddd;
}
.comments .comment-block,.comments .comments-content .comment-replies,.comments .comment-replybox-single {
margin-left:60px;
width:490px;
}
.comments .comment-block,.comments .comment-thread.inline-thread .comment {
border:1px solid #ddd;
background:#fff;
background-color:#fff;
padding:10px;
padding-right:0px;
padding-left: 0px;
}
.comment-header {
border-bottom: 1px solid #ddd;
padding-bottom: 10px;
}
.thread-chrome.thread-expanded .comment-header {
width: 412px;
margin-left: 15px;
}
.comments .comments-content .comment {
width:100%;
line-height:1em;
font-size:13px;
margin:15px 0 0;
padding:0;
}
.comments .comments-content .comment-content {
text-align: justify;
line-height: 22px;
overflow: hidden;
}
.thread-chrome.thread-expanded .comment-content {
width: 380px;
line-height: 22px;
overflow:hidden
}
.comments .comment-thread.inline-thread .comment-actions {
display: none;
}
.item-control.blog-admin {
display: none;
}
.comments .comments-content .comment-replies {
margin-top:0;
}
.comments .comment-content {
line-height: 1.4em;
padding: 15px;
}
.comments .comment-thread.inline-thread {
padding-left: 0px;
}
.comments .comment-thread.inline-thread .comment {
width:auto;
}
.comments .comment-thread.inline-thread .comment:after {
content:"";
position:absolute;
top:10px;
left:-20px;
border-top:1px solid #d2d2d2;
width:10px;
height:0;
}
.comments .comment-thread.inline-thread .comment .comment-block {
border:0;
background:transparent;
padding:0;
}
.comments .comment-thread.inline-thread .comment-block {
margin-left:48px;
}
.comments .continue {
border-top:0;
width:100%;
}
#comment-editor {
width:98%!important;
}
.comment-form {
width:100%;
max-width:100%;
}

Berikut adalah contoh kode yang dapat digunakan. Anda dapat menyesuaikan sesuai dengan kebutuhan keinginan Anda.

Styling Komentar Penulis Nama dan Meta:

Platform Blogger memiliki fungsi yang kuat yang dapat membantu Anda dalam merancang komentar nama penulis serta informasi Meta. Hal ini memungkinkan para desainer untuk menyesuaikan tanggal, waktu dan nama penulis. Berikut adalah contoh kode yang Anda hanya bisa copy dan paste ke dalam StyleSheet dari template Anda.

Anda juga dapat menambahkan gaya kustom Anda seperti dapat mengubah font, warna, ukuran dan apa pun yang Anda sukai. Apa pun yang Anda bayangkan dapat diterapkan untuk desain Anda.

#comments h4 {
display:inline;
line-height:40px;
padding:10px;
}
.comments .continue a {
background:#0d86cc;
text-align:center;
padding:10px 0;
display:none;
}
#comments h4,.comments .continue a {
line-height: 30px;
margin: 0;
padding: 20px 0 14px 10px;
font-size: 18px!important;
text-transform: uppercase;
font-weight: 400!important;
color: #444;
}
.comments .user a {
color: #444!important;
font-size: 18px;
line-height: 25px;
text-transform: capitalize;
margin-top: 20px;
font-weight: 600;
padding-left: 15px;
}
.comments .comments-content .datetime {
cursor: pointer;
float: right;
padding-top: 6px;
padding-right: 20px;
}
.icon.user {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggC7lMlYr5LkCETyEf8j47hC1YPPfrLNuTMHcDAmQ52DRDWxv06jVxdcRZVu3SpK9VRUC8r-uqwQLXH5l5-nhkTVZbafgrxu4joH331q_Zu0sz5z-bVrGLpGa6XCRJxcGSTW8Em-hhUJq3/s1600/online.png) no-repeat;
height: 12px;
width: 16px;
display: inline-block;
margin: 0 0 -4px 6px;
}
.comments .comment-thread.inline-thread .user a {
font-size:13px;
margin: 0px;
padding: 0px;
}

Styling Komentar tombol "Balas" di Blogger:

Hampir semua template blogger memiliki tombol reply pada komentar. Namun, hanya bekerja dengan sistem threaded. Sekarang sehari, semua default blogger template yang terhubung dengan komentar threaded. Jadi di sini adalah contoh dari CSS yang anda bisa langsung copy paste di StyleSheet template.

.comment-actions {
background: #f2f2f2;
padding: 8px;
margin-left: 435px;
border: 1px solid #ddd;
float: right;
margin-top: -30px;
margin-right: 5px;
}
.comment-thread a {
color: #777;
}
.comments .comment .comment-actions a:hover {
text-decoration: underline;
}

Styling Entri Penulis Berbeda dari orang lain:

Paling sering Anda telah melihat bahwa komentar dari penulis posting disorot dengan latar belakang yang berbeda atau tag kecil seperti 'Editor "atau lencana tambahan ditugaskan untuk nama mereka. Hal ini membantu pengguna untuk mengidentifikasi penulis sesungguhnya.

Hal ini dapat dilakukan dengan bantuan icon.blog-penulis itu. Membantu Anda untuk menyesuaikan dgn komentar-komentar dari penulis posting berbeda. Berikut adalah contoh yang dapat langsung copy dan paste di StyleSheet Anda. 

.comments .comments-content .icon.blog-author {
display: inline-block;
height: 18px;
margin: 0 0 -4px 6px;
width: 18px;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixkhoFnU4_qOdTZzaZHsnQy3m3usW6o2zwA9CJz3UJxtKAcwGR1YMT5OhOt0M45vEodljRCQMv4ereXAGDNqdwAjqiazXWMLZDwLhxqZuj-24Fsa-fJoycCsFW16biVjGIVlPV5hDiBrAj/s1600/Verificon.png);
}

Kami harap tutorial ini telah membantu Anda untuk belajar bagaimana untuk Cara Membuat Kostum Style System Komentar Blogger. Jika Anda menghadapi kesulitan atau memiliki saran untuk kami maka jangan ragu untuk memberitahu kami tahu dengan meninggalkan komentar di bawah ini.

Source Image & Script : My Blogger Lab

Share this post