Hari ini aku akan cuba tunjukkan bagaimana cara-cara untuk membuat kotak komen dibawah post di blogger.Sebenarnya telah banyak blog yang menunjukkan cara untuk membuat kotak komen dibawah post tetapi cara yang aku nak tunjukkan ini agak berlainan daripada yang lain.Seperti yang kita sedia maklum di blogger ada mempunyai 2 cara untuk memperlihatkan komen tetapi kedua-duanya ada mempunyai sedikit kelemahan.
1.Embedded below post
kelemahan yang ada jika kita membuat kotak komen di bawah post ialah kita tidak akan dapat melihat wajah orang yang memberikan komen itu tetapi ianya lebih mudah untuk visitor memberikan komen
2.Pop-up window
Kelemahan yang ada jika membuat kotak komen secara Pop-up window adalah apabila visitor hendak memberikan komen kotak komen itu akan terbuka secara Pop-Up dan ini sudah tentu akan menyusahkan visitor anda untuk memberikan komen tetapi dengan cara ini akan berjaya memperlihatkan wajah orang yang memberikan komen.
Tetapi dengan membuat kotak komen dengan cara yang akan aku tunjukkan ini tentu lebih memudahkan kepada visitor anda untuk memberikan komen tanpa terbuka secara Pop-Up dan sekaligus akan memperlihatkan wajah orang yang memberikan komen.Tetapi cara ini tidaklah dapat menyerupai seperti di wordpress dan ini adalah salah satu kelemahan di blogger diharap pihak blogger dapat membuat sesuatu dengan perkara ini.Anda boleh klik
disini untuk melihat contoh kotak komen yang aku sebutkan ini.Dan sila tinggalkan komen untuk melihat hasilnya.Jika anda rasa berminat untuk membuatnya anda bolehlah ikuti caranya dibawah.
1.lakukan backup terlebih dahulu keatas template anda.
2.Pergi ke setting--->comments
kemudian pergi ke Comment Form Placement dan pilih Pup-Up window.
3.pergi ke dashboard--->Layout----->edit HTML
4.Berikan tanda kepada kotak Expand Widget Templates
5.Kemudian cari kod dibawah 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 class='comment-author' expr:id='"comment-" + data:comment.id'><a expr:name='"comment-" + data:comment.id'/><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='"#comment-" + data:comment.id' title='comment permalink'><data:comment.timestamp/></a><b:include data='comment' name='commentDeleteIcon'/></span></dd></b:loop></dl><p class='comment-footer'><a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a></p></b:if><div id='backlinks-container'><div expr:id='data:widget.instanceId + "_backlinks-container"'><b:if cond='data:post.showBacklinks'><b:include data='post' name='backlinks'/></b:if></div></div></div></b:includable>
6.Kemudian tukarkan semua kode yang diatas tadi dengan kode ini.
<b:includable id='comments' var='post'><div class='comments' id='comments'><a name='comments'/><b:if cond='data:post.allowComments'><!-- jackbook.com part 1 start --><!--<h4><b:if cond='data:post.numComments == 1'>1 <data:commentLabel/>:<b:else/><data:post.numComments/> <data:commentLabelPlural/>:</b:if></h4>--><div class='onepx'><dl id='comments-block' style='height: 1px;overflow:hidden;'><b:loop values='data:post.comments' var='comment'><dt class='comment-author' expr:id='"comment-" + data:comment.id'><a expr:name='"comment-" + data:comment.id'/><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='"#comment-" + data:comment.id' title='comment permalink'><data:comment.timestamp/></a><b:include data='comment' name='commentDeleteIcon'/></span></dd></b:loop></dl></div><!--<p class='comment-footer'><a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a></p>--><!-- jackbook.com part 1 ends --><!-- actually i almost do nothing with your template, just add that comment, you did it :) --><div id='comment-parent' onmouseover='showcomment("hoverme", "comment-child");' style='margin-bottom: 50px;'><h3 id='hoverme' style='display:block;'><img alt='Your cOmment"s Here! Hover Your cUrsOr to leave a cOmment.' src='http://img229.imageshack.us/img229/5559/htmlcodeleavecommentfi5.gif' title='Your cOmment"s Here! Hover Your cUrsOr to leave a cOmment.'/></h3><!-- this iframe below is your comment form. you can change the height, or add more style property into it --><div id='comment-child' style='border:none; display: none; height:750px; width: 440px; margin-bottom: 5px; background: #fff none; border: 1px solid #FCO;'><iframe expr:src='data:post.addCommentUrl' height='100%' scrolling='yes' style='border:none;' width='100%'/><br/><a href='http://www.jackbook.com/2007/06/how-to-make-readers-leave-comment.html' title='Want to have this on your blogger/blogspot?'>Comment Form under post in blogger/blogspot</a></div><!-- end of iframe --></div></b:if><div id='backlinks-container'><div expr:id='data:widget.instanceId + "_backlinks-container"'><b:if cond='data:post.showBacklinks'><b:include data='post' name='backlinks'/></b:if></div></div></div></b:includable>
7.Copy semua kode HtML dibawah ini dan pastekan di atas </body>
<!-- www.jackbook.com --><!-- this to hide and show el --><span id="preserve01883777c627429b9b5ee55240550c11" class="wlWriterPreserve"><script languange="'javascript'">function showcomment(a,b){var jackbookdotcom = document.getElementById(a);jackbookdotcom.style.display = 'none';jackbookdotcom = document.getElementById(b);jackbookdotcom.style.display = 'block';}</script></span><!-- www.jackbook.com -->
8.Kemudian cari pula kode ini
<span class="'post-comment-link'"><b:if cond="'data:blog.pageType"><b:if cond="'data:post.allowComments'"><a class="'comment-link'" href="'data:post.addCommentUrl'" onclick="'data:post.addCommentOnclick'"><b:if cond="'data:post.numComments">1 <data:top.commentlabel/><b:else/><data:post.numcomments/> <data:top.commentlabelplural/></b:if></a></b:if></b:if></span>
9.Kemudian anda tukarkan semua kode diatas itu dengan kode ini
<span class='post-comment-link'><b:if cond='data:blog.pageType != "item"'><b:if cond='data:post.allowComments'><a class='comment-link' expr:href='data:post.url + "#comments"'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a></b:if></b:if></span>
10.Selesai,semoga berjaya jangan lupa tinggalkan komen anda.
Creadit to
Jackbook.Com
