Memodifikasi kotak komentar pada blog

Sedikit Info Seputar Memodifikasi kotak komentar pada blog Terbaru 2017 - Hay gaes kali ini team Android Apps For Free, kali ini akan membahas artikel dengan judul Memodifikasi kotak komentar pada blog, kami selaku Team Android Apps For Free telah mempersiapkan artikel ini untuk sobat sobat yang menyukai Android Apps For Free. semoga isi postingan tentang Artikel tips blogspot, yang saya posting kali ini dapat dipahami dengan mudah serta memberi manfa'at bagi kalian semua, walaupun tidak sempurna setidaknya artikel kami memberi sedikit informasi kepada kalian semua. ok langsung simak aja sob
Judul: Berbagi Info Seputar Memodifikasi kotak komentar pada blog Terbaru
link: Memodifikasi kotak komentar pada blog

"jangan lupa baca juga artikel dari kami yang lain dibawah"

Berbagi Memodifikasi kotak komentar pada blog Terbaru dan Terlengkap 2017

ok bro balik lagi nih kali ini aku akan berbagi tips untuk memodifikasi komentar pada blog anda.ok lanhsung aja bro ikuti langkah-langkah di bawah ini:

Berikut langkah-langkah cara membuat nama pengomentar dan isi komentar saling berdampingan.
  • Login ke blogger
  • Klik Rancangan
  • Edit HTML
  • Beri tanda centang pada "Expand Template Widget"
  • Kemudian cari kode di bawah ini
    #comments h4 {
    margin:1em 0;
    font-weight: bold;
    line-height: 1.4em;
    text-transform:uppercase;
    letter-spacing:.2em;
    color: $sidebarcolor;
    }

    #comments-block {
    margin:1em 0 1.5em;
    line-height:1.6em;
    }
    #comments-block .comment-author {
    margin:.5em 0;
    }
    #comments-block .comment-body {
    margin:.25em 0 0;
    }
    #comments-block .comment-footer {
    margin:-.25em 0 2em;
    line-height: 1.4em;
    text-transform:uppercase;
    letter-spacing:.1em;
    }
    #comments-block .comment-body p {
    margin:0 0 .75em;
    }
    .deleted-comment {
    font-style:italic;
    color:gray;
    }
  • Hapus kode tersebut kemudian ganti dengan kode di bawah ini
    .commentlistdiv{margin-top:10px;background:#FFF;border:1px dotted #ddd;font-size:.75em;color:#666;padding:20px}
    .commentlistdiv h1{font-size:1.3em;color:#366799;border-bottom:1px solid #eee;line-height:1.5em}
    .commentlist li{background:#fff;border-bottom:1px dotted #ddd;padding:20px}
    .commentlist li.alt{background:#fff}
    .deleted-comment{font-style:italic;color:gray}
    .feed-links{clear:both;line-height:2.5em}
    .pane_l{float:left;display:inline;width:160px;min-width:160px;max-width:160px;border-right:1px dotted #ddd;padding-right:20px;margin-right:20px}
    .c_author{font-size:.9em;font-weight:700;margin:0 0 7px}
    .c_avatar{display:block;margin:0 0 7px}
    .c_date{color:#aaa;font-size:.9em;margin:0 0 7px}
    .c_approved{color:#aaa;font-size:.9em}
    .comment-form{background:#414141;border:5px solid #ccc;margin:0 10px 20px;padding:10px 0 0 20px}
    .owner-Body p{font-size:100%;color:red;text-decoration:bold;margin:0 0 .2em}
    .pane_r,.owner-Body{display:block;line-height:1.5em;margin-left:201px}
    .comment-link{margin-startside:.6em}
  • Kemudian cari kode di bawah ini
    <b:includable id='comments' var='post'>
    <div class='comments' id='comments'>
    <a name='comments'/>
    <b:if cond='data:post.allowComments'>
    <h4>
    <b:if cond='data:post.numComments == 1'>
    1<data:commentLabel/>:
    <b:else/>
    <data:post.numComments/> <data:commentLabelPlural/>:
    </b:if>
    </h4>

    <b:if cond='data:post.commentPagingRequired'>
    <span class='paging-control-container'>
    <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>
    &#160;
    <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>
    &#160;
    <data:post.commentRangeText/>
    &#160;
    <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
    &#160;
    <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>
    </span>
    </b:if>

    <dl id='comments-block'>
    <b:loop values='data:post.comments' var='comment'>
    <dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
    <a expr:name='data:comment.anchorName'/>
    <b:if cond='data:comment.authorUrl'>
    <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
    <b:else/>
    <data:comment.author/>
    </b:if>
    <data:commentPostedByMsg/>
    </dt>
    <dd class='comment-body'>
    <b:if cond='data:comment.isDeleted'>
    <span class='deleted-comment'><data:comment.body/></span>
    <b:else/>
    <p><data:comment.body/></p>
    </b:if>
    </dd>
    <dd class='comment-footer'>
    <span class='comment-timestamp'>
    <a expr:href='data:comment.url' title='comment permalink'>
    <data:comment.timestamp/>
    </a>
    <b:include data='comment' name='commentDeleteIcon'/>
    </span>
    </dd>
    </b:loop>
    </dl>

    <b:if cond='data:post.commentPagingRequired'>
    <span class='paging-control-container'>
    <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
    <data:post.oldestLinkText/>
    </a>
    <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
    <data:post.olderLinkText/>
    </a>
    &#160;
    <data:post.commentRangeText/>
    &#160;
    <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
    <data:post.newerLinkText/>
    </a>
    <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>
    <data:post.newestLinkText/>
    </a>
    </span>
    </b:if>

    <p class='comment-footer'>

    <b:if cond='data:post.embedCommentForm'>
    <b:include data='post' name='comment-form'/>
    <b:else/>
    <b:if cond='data:post.allowComments'>
    <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
    </b:if>
    </b:if>

    </p>
    </b:if>
  • Ganti kode tersebut dengan kode di bawah ini
    <b:includable id='comments' var='post'>
    <div class='comments' id='comments'>
    <a name='comments'/>
    <b:if cond='data:post.allowComments'>
    <h4>
    <b:if cond='data:post.numComments == 1'>
    1 <data:commentLabel/>:
    <b:else/>
    <data:post.numComments/> <data:commentLabelPlural/>:
    </b:if>
    </h4>
    <b:if cond='data:post.commentPagingRequired'>
    <span class='paging-control-container'>
    <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>
    &#160;
    <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>
    &#160;
    <data:post.commentRangeText/>
    &#160;
    <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
    &#160;
    <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>
    </span>
    </b:if>
    <ul class='commentlist'>
    <b:loop values='data:post.comments' var='comment'>
    <li>
    <div class='pane_l'>
    <div class='c_author'>
    <b:if cond='data:comment.authorUrl'>
    <a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'><data:comment.author/></a>
    <b:else/>
    <data:comment.author/>
    </b:if>
    <data:commentPostedByMsg/>
    </div>
    <div class='c_avatar'/>
    <div class='c_date'><span class='comment-timestamp'>
    <a expr:href='&quot;#comment-&quot; + data:comment.id' title='comment permalink'>
    <data:comment.timestamp/>
    </a>
    <b:include data='comment' name='commentDeleteIcon'/>
    </span></div>
    <div class='c_approved'/>
    </div>
    <b:if cond='data:comment.author == data:post.author'>
    <div class='owner-Body'>
    <p><data:comment.body/></p>
    </div>
    <b:else/>
    <div class='pane_r'>
    <b:if cond='data:comment.isDeleted'>
    <span class='deleted-comment'><data:comment.body/></span>
    <b:else/>
    <p><data:comment.body/></p>
    </b:if>
    </div>
    </b:if>
    <div class=' clear'/></li>
    </b:loop>
    </ul>
    <b:if cond='data:post.commentPagingRequired'>
    <span class='paging-control-container'>
    <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
    <data:post.oldestLinkText/>
    </a>
    <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
    <data:post.olderLinkText/>
    </a>
    &#160;
    <data:post.commentRangeText/>
    &#160;
    <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
    <data:post.newerLinkText/>
    </a>
    <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>
    <data:post.newestLinkText/>
    </a>
    </span>
    </b:if>
    <p class='comment-footer'>
    <b:if cond='data:post.embedCommentForm'>
    <b:if cond='data:post.allowNewComments'>
    <b:include data='post' name='comment-form'/>
    <b:else/>
    <data:post.noNewCommentsText/>
    </b:if>
    <b:else/>
    <b:if cond='data:post.allowComments'>
    <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
    </b:if>
    </b:if>
    </p>
    </b:if>
  • Simpan tamplate anda...
  • Sekarang silahkan lihat hasilnya di komentar blog anda

Silahkan ubah suaikan jika belum pas lebar atau padding dan marginnya, karna setiap tamplate hasilnya akan berbeda. yang pastinya kode tersebut tidaklah mutlak seperti itu, anda bisa memodipikasinya sendiri agar sesuai dengan keinginan anda masing-masing. semoga artikel ini bermanfaat dan jangan lupa tunggu update terbaru ku selanjutnya. selamat mencoba bro....

Itulah sedikit Artikel Memodifikasi kotak komentar pada blog terbaru dari kami

Semoga artikel Memodifikasi kotak komentar pada blog yang saya posting kali ini, bisa memberi informasi untuk anda semua yang menyukai Android Apps For Free. jangan lupa baca juga artikel-artikel lain dari kami.
Terima kasih Anda baru saja membaca Memodifikasi kotak komentar pada blog