Modified Kotak Komen

Rasanya lawa juga kotak komen yang ada ini. Saya sudah pun memakainya. Anda mahu kotak komen anda seperti saya ini? Mari kita tukar kotak komen tersebut menjadi seperti ini..



Mari kita mulakan cara membuatnya ;
Janga lupa backup dahulu template anda (download full template)
  1. Login ke Blogger
  2. Pergi ke Layout --> Edit HTML
  3. Anda klik pada Expan template Widget
  4. Anda cari code seperti ini ;

  5. #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;
    }


  6. Delete code tersebut, anda gantikan dengan code ini

  7. #comments h4 {
    margin:0;
    font-weight: bold;
    line-height: 1.4em;
    text-transform:uppercase;
    letter-spacing:.2em;
    color: #000;
    }

    #bg_commentblock {
    width: 548px;
    background: #ffffff;
    float: left;
    padding:20px;
    margin:0 0 10px 0;
    border:1px solid #C0C0C0;
    }

    #commentblock {
    width: 510px;
    background: #E8E8E8;
    text-align:left;
    padding: 20px 20px 10px 20px;
    margin: 10px 0px 0px 0px;
    border-top: 2px solid #333333;
    border-bottom: 1px solid #333333;
    }
    #commentblock ol {
    list-style-type: square;
    margin: 0px 0px 0px 10px;
    padding: 0px 0px 10px 0px;
    }
    .commentdate {
    font-size: 12px;
    padding-left: 0px;
    }
    #commentlist li p {
    margin-bottom: 8px;
    line-height: 20px;
    padding: 0px;
    }

    .commentname {
    color: #333333;
    margin: 0px;
    padding: 5px 5px 5px 0px;
    }

    .commentinfo{
    clear: both;
    }

    .commenttext {
    clear: both;
    margin: 3px 0px 10px 0px;
    padding: 20px 10px 5px 10px;
    width: 490px;
    background: #FFFFFF url(http://i51.photobucket.com/albums/f375/solehpolysas/Comments.gif) no-repeat top left;
    }

    .commenttext-admin {
    clear: both;
    margin: 3px 0px 10px 0px;
    padding: 20px 10px 5px 10px;
    width: 490px;
    background: #FFFFFF url(http://i51.photobucket.com/albums/f375/solehpolysas/Comments.gif) no-repeat top left;
    }


  8. Kemudian cari code ini pula


  9. <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>



  10. Jika sudah jumpa, anda gantikan code tersebut dengan code ini

  11. <b:includable id='comments' var='post'>

    <div class='comments' id='comments'>
    <a name='comments'/>
    <b:if cond='data:post.allowComments'>

    <div id='bg_commentblock'>

    <h4>

    Comments :

    </h4>

    <div id='commentblock'><!--commentblock-->

    <strong>have</strong> <b:if cond='data:post.numComments == 1'>1
    <b:else/>
    <strong><data:post.numComments/> <data:commentLabelPlural/> at &#8220;<data:post.title/>&#8221;</strong>
    </b:if>

    <dl class='commentlist'>
    <b:loop values='data:post.comments' var='comment'>
    <span><dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName' style='display:inline'>
    <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>at date&#160;<dd class='comment-footer' style='display:inline; margin:0px'>
    <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></span>
    <dd class='commenttext'>
    <b:if cond='data:comment.isDeleted'>
    <span class='deleted-comment'><data:comment.body/></span>
    <b:else/>
    <p><data:comment.body/></p>
    </b:if>
    </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>
    </div><!--end commentblock-->

    </div>
    </b:if>

  12. Save template anda.
  13. Lihat hasilnya bagaimana.

Semoga berjaya.

*code yang saya tunjukkan tidak semestinya sama dengan code di template anda. anda carilah yang lebih kurang sama dengannya.

Jika anda risau template anda rosak, download full template dahulu sebelum membuat trick ini.

*Anda juga boleh mengubah warna background, lebar kotak komen dan sebagainya. Anda editlah sendiri mengikut kesesuaian blog anda.

Semoga berjaya semua..
credit ;kolom-tutorial






22 comments:

  1. Bro soleh,

    Saya dapat link anta dari tranungkite. Your blogging tutorial is very useful. saya Bercadang untuk war2 kan blog anta di blog saya. Thanks.

    abufaris

    ReplyDelete
  2. to spectra94 ;
    TQ sebab support blog sy..

    ReplyDelete
  3. Ke mana hilangnya site: http://myp2u
    Dah kena rosak ke sebab banyak sangat diedit??
    Tu la pandai sangat!

    ReplyDelete
  4. to anonymous ;
    bukan myp2u.. tp MyP4u.. blog 2 tidak rosak. Masih elok seperti biase. cuma sy yang ingin berpindah ke blog ini.. lebih mudah, sbb kene dgn nama sy..

    jika blog itu rosak, sy tidak akn bg tips lagi kepada anda semua. sbb sy tahu siapakah sy untuk mengajar orang.

    Segala tips dalam blog ini sy jadikan koleksi untuk sy dan sy kongsi dgn semua. jika anda tidak suka, tidak mengapa. saya tidak mengharapkan apa2 daripada anda.

    TQ..

    ReplyDelete
  5. tenkiuuuuuuuuuu!
    wa..soleh dah jadik teacher blog aa skang..
    si kambeng kat ats tuh pesal?
    anonymous lak tuh,
    eeeEeE,,btw,blog soleh ni ajar tutorial snang paam.
    tq2!

    ReplyDelete
  6. to *secret ;
    okey, sama2, lama xdengar kaba.. huhu..

    ReplyDelete
  7. salam
    macamana nak kecikkan kotak komen???

    ReplyDelete
  8. to adiba ;
    tukar saiz die kat width..

    ReplyDelete
  9. Soleh, saya dah cube byk kali untuk edit komen ini. still xboleh jugak lar... guna front page pun xbetul jugak...

    ReplyDelete
  10. to sir ilzam ;
    boleh, xperlu gunakan frontpage.. ikut betul2..
    jika xboleh juga, maknanya template yang digunakan tidak dapat menerimanya. selalunya xde masalah.

    ReplyDelete
  11. Arrggghhh... jadi besar lak kotak nya. xmuat la masuk blog saya... mcm ner nak edit kasi kecik cikit yer?
    saya guna front page xleh view lak code nie.. hm.. tolong2

    ReplyDelete
  12. Ehm... soleh.. nape xde kotak post a comment mcm awk nyer yer? bgmn saya boleh dapatkan?

    ReplyDelete
  13. to sir ilzam ;
    kan saya sudah katakan, xperlu guna front page..

    kotak komen ni ubah suai yang saya buat sendiri. susah sikit nak cerite di komen ni, saya pun dah xberapa ingat mcm mana nak buat. kene ubah suai sendiri.

    kalau kotak comment sebelum ini ada, lepas buat ni xde, itu masalah lain, saya xtau.

    ReplyDelete
  14. thanks soleh.. mungkin code xsame kot

    ReplyDelete
  15. to sir ilzam ;
    setiap template adakalanya berbeza code..

    ReplyDelete
  16. to Adiebah Sazalie ;
    bagilah link blog..

    ReplyDelete
  17. mmg ifo bguna...byk perlu sy bljr...sy msh baru mgenai blog ni.

    ReplyDelete
  18. to angeline ;
    TQ, belajar itu sudah semestinya..

    ReplyDelete

Blog ini telah menggunakan do follow untuk link komen anda. Link anda akan tersenarai di search engine.