expr:class='"loading" + data:blog.mobileClass'>

Cara Merubah Kotak Komentar Pada Postingan Blog

Merubah Kotak Komentar pada Postingan Blog akan membuat tampilan halaman pada Blog anda akan menjadi lebih menarik dan terlihat lebih rapi.
Contohnya seperti gambar dibawah ini:


Berikut ini adalah Tutorialnya:

•  Masuk ke Blog anda.
•  Klik Template > Edit HTML.
•  Cari kode ]]></b:skin>
•  Tambahkan kode dibawah ini tepat diatas ]]></b:skin>

    .comments {
    padding: 4px;
    background: #000000;
    border: 3px solid #000000;
    border-radius: 20px;}

    .comments-content .comment-thread {
    padding: 4px;

    background:#000000;}

    .comments .comments-content .comment {

    margin-bottom: 0px; padding-bottom: 0px;}

    .comments .comments-content .comment:first-child {

    padding-top: 0px;}

    .comments .avatar-image-container {

    height: 36px;
    padding-left: 0px;
    border: 1px solid #ffffff;
    border-radius:20px;}

    .comments .comment-block {
    padding-top: 4px;
    padding-bottom: 8px;
    padding-left: 4px;
    padding-right: 4px;
    background: #000000;
    border: 1px solid #ffffff;
    border-radius:10px;}

    .comments .comments-content .inline-thread {
    border: 1px solid #ffffff;}

    .comments .comments-content .comment-replies {
    margin-left: 48px;}

    .comments .comment .comment-actions a {
    margin-right: 4px;
    padding: 2px;
    background: #000000;

    .comments .continue a {
    padding: 2px;
    background: #ffffff; border: 2px ridge #000000;}
 

    .comments .comments-content .datetime {
    float: right;
    margin-right: 4px;}

    .comments .comments-content .icon.blog-author {
    float: right; margin-right: 3px;}

    .comment-form {
    max-width: 100%;
    width: 100%;}


•  Sehingga akan menjadi seperti ini:

    .comments {
    padding: 4px;
    background: #000000;
    border: 3px solid #000000;
    border-radius: 20px;}

    .comments-content .comment-thread {
    padding: 4px;

    background:#000000;}

    .comments .comments-content .comment {

    margin-bottom: 0px; padding-bottom: 0px;}

    .comments .comments-content .comment:first-child {

    padding-top: 0px;}

    .comments .avatar-image-container {

    height: 36px;
    padding-left: 0px;
    border: 1px solid #ffffff;
    border-radius:20px;}

    .comments .comment-block {
    padding-top: 4px;
    padding-bottom: 8px;
    padding-left: 4px;
    padding-right: 4px;
    background: #000000;
    border: 1px solid #ffffff;
    border-radius:10px;}

    .comments .comments-content .inline-thread {
    border: 1px solid #ffffff;}

    .comments .comments-content .comment-replies {
    margin-left: 48px;}

    .comments .comment .comment-actions a {
    margin-right: 4px;
    padding: 2px;
    background: #000000;

    .comments .continue a {
    padding: 2px;
    background: #ffffff; border: 2px ridge #000000;}
 

    .comments .comments-content .datetime {
    float: right;
    margin-right: 4px;}

    .comments .comments-content .icon.blog-author {
    float: right; margin-right: 3px;}

    .comment-form {
    max-width: 100%;
    width: 100%;}


    ]]></b:skin>

•  Kemudian klik Save / Simpan Template. 

Tidak ada komentar:

Posting Komentar