Cara Letak turutan nombor untuk setiap komen di post/entry


Suka cuba try tutorial, kali ni cuba tutorial berkaitan letak turutan nombor untuk setiap komen di post/entry (Numbering comments). Untuk tutorial asal boleh kesini.

Cara atau langkah untuk meletakkan nombor pada komen seperti dibawah:

  1. Pergi ke bahagian Design -> Edit HTML
  2. Sebagai langkah keselamatan, sila Download Full Template
  3. Klik pada Expand Widget Templates
  4. Cari code <b:loop values='data:post.comments' var='comment'>, Kemudian copy dan paste code dibawah sebelum code <b:loop values='data:post.comments' var='comment'> tadi.

  5. Cari code <data:commentPostedByMsg/>, Kemudian copy dan paste code dibawah selepas code <data:commentPostedByMsg/> tadi.

    <!--COMM-NUM-STARTS-->
    <span class='comm-num'>
    <a expr:href='data:comment.url' title='Comment Link'>
    <script type='text/javascript'>
    CommentsCounter=CommentsCounter+1;
    document.write(CommentsCounter)
    </script>
    </a>
    </span>
    <!--COMMNUM-STOPS-->

  6. Cari perkataan </head>, Kemudian copy dan paste code dibawah sebelum perkataan </head> tadi.

    <!--COMM-NUM-STARTS-->
    <style type="text/css">
    .comm-num a:link, .comm-num a:visited {
    color: white !important;
    text-decoration: none !important;
    background: url(http://i50.tinypic.com/egx3t3.jpg) no-repeat;
    width: 50px;
    height: 48px;

    float: right;
    display: block;
    margin-right: 5px;
    margin-top: -15px; /*comments-counter position*/
    text-align: center;
    font-family: 'Century Gothic','Lucida Grande',Arial,Helvetica,Sans-Serif;
    font-size: 15px;
    font-weight: normal;
    }

    .comm-num a:hover, .comm-num a:active {
    color: gray !important;
    text-decoration: none !important;
    }
    </style>
    <!--COMM-NUM-STOPS-http://bloggerstop.net-->

  7. Save Templates

Note : Korang boleh tukar image (background: url(http://i50.tinypic.com/egx3t3.jpg) no-repeat; ) dengan image korang sendiri atau salah satu dari image/gambar dibawah.









No comments:

Post a Comment