masukan email anda:

artikel baru langsung masuk ke email anda, GRATIS!

Membuat Kolom Komentar | tipsyournet

Labels:

Setelah 3hari 3 malam, tidak melakukan posting, kini tipsyournet muncul dengan tutorial blog, dengan diiringi lagu Indonesia Raya ::waah.. kayak mo upacara ja:: hehhe :) jadi keingat masalalu masa2 SMA, eiits.. malah ngelantur curhat jadinya.. hehhe:) yaudah kita langsung saja ke pokok permasalahan, kolom komentar ini fungsinya seperti kolom komentar pada umumnya, Terus Apa donk tipsyournet posting ini? naah.. setiap tipsyournet melakukan posting, tipsyournet berusaha membuat inovasi baru, kini kolom komentarnya berbeda bentuknya, yaudah kita langsung saja ke TKP.


* Login ke account blogger kamu.
    * Pilih Tata Letak --> Edit HTML --> centang "Expand Template Widget".

Tips : Sebelum melakukan edit template, sebaiknya simpan dulu template kamu yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan kamu sudah memiliki back-up untuk mengembalikannya seperti semula.

    * Cari kode CSS berikut.

    /* Comments
    ---------------*/

    #comments h4 {
    background:#EAE9E9;
    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;
    border:0px dotted #ccc;
    }
    #comments-block .comment-author {
    color:#808080;
    margin:.5em 0;
    border-top:1px dotted #ccc;
    }
    #comments-block .comment-body {
    text-align:justify;
    margin:.25em 0 0;
    }
    #comments-block .comment-footer {
    margin:-.25em 0 2em;
    line-height: 1.4em;
    border-top:1px dotted #ccc;
    font-size:9px;
    letter-spacing:.1em;
    }
    #comments-block .comment-body p {
    margin:0 0 .75em;
    }

    .deleted-comment {
    font-style:italic;
    color:gray;
    }


Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan muncul menu toolbar pencarian di bawah browser (Firefox), sehingga kamu tinggal memasukkan kata yang ingin dicari.

    * Ganti dengan kode CSS di bawah ini.

    /* Comments
    ----------------*/

    #comments h4 {
    background:#EAE9E9;
    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;
    border:0px dotted #ccc;
    }
    #comments-block .comment-author {
    color:#808080;
    margin:.5em 0;
    border-top:1px dotted #ccc;
    }
    #comments-block .comment-body {
    text-align:justify;
    margin:.25em 0 0;
    }
    #comments-block .comment-footer {
    margin:-.25em 0 2em;
    line-height: 1.4em;
    border-top:1px dotted #ccc;
    font-size:9px;
    letter-spacing:.1em;
    }
    #comments-block .comment-body p {
    margin:0 0 .75em;
    }

    .deleted-comment {
    font-style:italic;
    color:gray;
    }

    .owner-Body {
    background:#808080;
    margin-left:20px;
    color:#000000;
    }
    .owner-Body p {
    text-align:justify;
    margin:0 0 .75em;
    padding-left:10px;
    background:#E3F6CE;
    border-left:3px dotted #6E6E6E;
    }


    * Cari kembali kode HTML berikut.

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

    <dl id='comments-block'>
    <b:loop values='data:post.comments' var='comment'>

    <dt expr:class='"comment-author " + 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>
    </b:if>
    <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>

    <data:post.commentRangeText/>

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

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

    <data:post.commentRangeText/>

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



    * Kemudian ganti 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>

    <dl id='comments-block'>
    <b:loop values='data:post.comments' var='comment'>

    <dt expr:class='"comment-author " + 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>

    <b:if cond='data:comment.author == data:post.author'>
    <dd class='owner-Body'>
    <p><data:comment.body/></p>
    </dd>
    <b:else/>

    <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>
    </b:if>
    <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>

    <data:post.commentRangeText/>

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

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

    <data:post.commentRangeText/>

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


    * Jangan lupa disimpan.


Selamat membuat kolom komentar...ada pertanyaan untuk tipsyournet silahkan klik komentar. terimakasih.
Postingan Terkait Lainnya :


Related post | Widget by Tipsyournet.blogspot.com
.Ingin artikel seperti ini langsung ke Email anda? Silahkan masukan alamat email anda untuk berlangganan atau Mau dapet tips2 lain yang lebih seru & orang lain belum tahu.

Masukan alamat email anda:

GRATIS!

4 comments:
gravatar
Oyah said...
4/25/2010  

Nice info, sob ... lanjuuuutttt dan sukses yaaaa...

gravatar
Kang Romly said...
4/25/2010  

sipp...mo tnya ni sob..gmn buat kolom komen dengan replynya, cuam kolom replynya yg lasung ada di bawah klom komentar pengunjung....?tlng pencerahannya

gravatar
tipsyournet said...
4/25/2010  

Oyah, terimakasih ssob atas supportnya, gud lucuk jg yah :) salam blogger :)

gravatar
tipsyournet said...
4/25/2010  

Kang Romly, maksud anda seperti kolom komen Facebook? Ada orang ketiga yang menyediakan hosting khusus komen seperti facebook, klik disqus.com, dulu saya sudah pernah pasang, tampilannya bagus juga. selamat mencoba, kesempatan lain, saya akan memposting seperti permintaan sob Romly. Terimakasih sob atas pertanyaannya.

Post a Comment

Powered By Blogger