Cara Membuat Rekapitulasi Komentar

Setelah sebelumnya saya berbagi dengan kawan Cara Membuat Kumpulan Komentar I, II, III sekarang saya akan berbagi lagi yang saya beri judul Cara Membuat Rekapitulasi Komentar yaitu Rekapitulasi Komentar Blogger masing-masing Artikel :r; 
Bagaimana kawan berminat, kalau kawan berminat mari langsung ke Cara membuatnya

• Seperti biasa silahkan masuk ke Blogger Account dengan ID kawan
• Pada Perancang Template pilih tambah Gadget
• Copas Kode berikut kedalamnya

<div style="overflow:auto;width:100%; height:200px;padding:5px;border:1px solid #369;background:#fff;">
<script language='javascript'>
aBold = false;
numposts=100;
maxshowresult=100;
home_page = "http://NAMA BLOG KAWAN.blogspot.com/";
</script>
<script type='text/javascript'>
//<![CDATA[
var postTitlear=new Array();var postUrlar=new Array();var postCommentar=new Array();var totalpost;document.write("<ul>");function showrecentposts(j){var a=j.feed.entry.length;totalpost=a;for(var f=0;f<a;f++){var h=j.feed.entry[f];var c=h.title.$t;var b;var g;if(f==j.feed.entry.length){break}for(var d=0;d<h.link.length;d++){if(h.link[d].rel=="alternate"){g=h.link[d].href;break}}for(var d=0;d<h.link.length;d++){if(h.link[d].rel=="replies"&&h.link[d].type=="text/html"){b=h.link[d].title.split(" ")[0];break}}c=(aBold)?"<b>"+c+"</b>":c;postTitlear.push(c);postUrlar.push(g);postCommentar.push(b)}sortPosts();for(var f=0;f<maxshowresult;f++){var e='<li><a href="'+postUrlar[f]+'" class="recent-link">'+postTitlear[f]+" ("+postCommentar[f]+" comments)</a>";document.write(e)}}function sortPosts(){function c(d,f){var e=postTitlear[d];postTitlear[d]=postTitlear[f];postTitlear[f]=e;var e=postUrlar[d];postUrlar[d]=postUrlar[f];postUrlar[f]=e;var e=postCommentar[d];postCommentar[d]=postCommentar[f];postCommentar[f]=e}for(var b=0;b<postTitlear.length-1;b++){for(var a=b+1;a<postTitlear.length;a++){if(parseInt(postCommentar[b])<parseInt(postCommentar[a])){c(b,a)}}}}document.write('<script src="'+home_page+"feeds/posts/default?max-results="+numposts+'&orderby=published&alt=json-in-script&callback=showrecentposts"><\/script>');
//]]>
</script>
</div>

Keterangan :

Silahkan ganti Nama Blog Kawan dengan URL Blog Kawan

Artikel dengan Komentar paling banyak akan berada paling dan Komentar paling sedikit [tanpa Komentar] akan berada paling bawah

Jangan lupa simpan Blog kawan

Tampilkan Iklan diatas Thread Comment

Sebelumnya saya sudah publish tentang Cara Pasang Iklan diatas Form Komentar, tapi setelah bergulirnya Thread Comment pada Blogspot maka tampilan Iklan dimaksud menjadi berpindah-pindah [kadang tampil kadang tidak atau bisa diatas maupun dibawah Form Komentar] karena Template Blog kawan sudah memakai Thread Comment :z; 
Sekarang saya akan memberikan solusinya bagi kawan yang ingin menampilkan Iklan Sponsor di atas Komentar 

Caranya sangat simple :

• Siapkan script Iklan Sponsor yang sudah di Parse atau  »  disini 
• Masuk ke account Blogger dengan ID kawan
• Untuk jaga-jaga Simpan Template kawan dulu
• Beri tanda centang disamping  Expand Template Widget
• Cari Kode  <div class='comments-content'>   :r; 
• Taruh script Iklan Sponsor diatasnya, yang selengkapnya sebagai berikut :

<a target="_blank" href="http://www.ppcindo.com/click.php?a=6963&x=TVRNd09UQTFOekExTkMweU1qSXVNVEkwTGpFMU5pNHlNekE9&d=1&adurl=296234426&url=http%3A%2F%2Fpaydotcom.net%2Fr%2F59708%2Fbnp%2F26662416%2F5%2F"><img src="http://www.omniforexsignals.com/banners/468x60.gif" width="468" height="60" border="0" style="top: 40.857074455015095px; "></a>
<div class='comments-content'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='threaded_comment_js'/>
</b:if>
<div id='comment-holder'>
<data:post.commentHtml/>
</div>
</div>

Teks yang berwarna biru adalah contoh script Iklan, tapi di Parse dulu  sebelum disimpan :x;

Tampilan Iklan

• Jangan lupa simpan Template kawan :y;

Mengatasi Masalah Iklan di Kanan Komentar

Kreasi saya sebelumnya tentang Tempatkan Iklan disamping kanan Kotak Komentar, masalah yang kawan temukan yaitu Kotak Komentar akan selalu berada dibawah Iklan yang di sebelah kanan Komentar :r;

Cara mengatasinya sebagai berikut :

• Masuk ke Account Blogger dengan ID kawan
• Pada Perancang template pilih Edit HTML
• Beri tanda cek pada Radio disamping  Expand Widget Templates
• Cari  <p><data:blogCommentMessage/></p> yang terakhir 

Kode selengkapnya seperti berikut :

<h4 id='comment-post-message'><data:postCommentMsg/></h4>

      <p><data:blogCommentMessage/></p>

      <data:blogTeamBlogMessage/>

      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>

      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>

</div>

Silahkan dipindahkan atau dipotong [cut] semuanya jangan "di delete" dan Paste-kan diantara </dl> </div> diatas </td><td valign='top'> seperti postingan saya sebelumnya atau selengkapnya sebagai berikut : 

<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:if>
</b:loop>
</dl>
<h4 id='comment-post-message'><data:postCommentMsg/></h4>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/></div>

</div>
</td><td valign='top'>
<div style='width:210px;height:auto;padding:5px; align:right;border:0px solid #F00;background:#FFF;'>
SIMPAN SCRIPT IKLAN / BANNER DISINI
<br/>
</div>
</td></tr></table>
</div>
<b:if cond='data:post.commentPagingRequired'>
<span class='paging-control-container'>

Simpan Template kawan, mudah-mudahan masalah tersebut teratasi :r; 

Tampilkan Iklan disamping Kanan Komentar

Sekarang saya akan mencoba berbagi dengan kawan sesuai Judul yang saya berikan yaitu Simpan Iklan Sponsor disamping kanan Kotak Komentar :a mengapa harus disana ?

jawabannya sangat simple dan sangat realistis, coba kawan perhatikan Komentar Blog kawan, banyak tempat kosong disebelah kanannya, benar kan :z;  

Caranya sangat mudah, masih ingat dengan Kreasi saya sebelumnya yaitu Cara Pasang Iklan diatas Kotak Komentar. Oke langsung saja ke cara pembuatannya :

1. Masuk pada Account Blogger dengan ID kawan
2. Pada Perancang Template pilih Edit HTML
3. Beri tanda cek disamping Expand Template Widget
4. Cari <b:loop values='data:post.comments' var='comment'>

Selengkapnya kurang lebih seperti ini :

<div expr:id='data:widget.instanceId + &quot;_comments-block-wrapper&quot;'>
<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
<b:loop values='data:post.comments' var='comment'>

• Copy-paste kode berikut diatasnya, 

<table border='0' cellpadding='1' height='auto' width='800'>
<tr><td valign='top'>
<div style='width:480px;height:auto;padding:1px; align:left; border:0px solid #999'>

• maka selengkapnya akan menjadi seperti berikut :

<table border='0' cellpadding='1' height='auto' width='800'>
<tr><td valign='top'>
<div style='width:480px;height:auto;padding:1px; align:left; border:0px solid #999'>
<br/>
<div expr:id='data:widget.instanceId + &quot;_comments-block-wrapper&quot;'>
        <dl expr:class='data:post.avatarIndentClass' id='comments-block'>
          <b:loop values='data:post.comments' var='comment'>

• width='800' silahkan disesuaikan dengan lebar postingan blog kawan 
• width=480px; disesuaikan dengan pengurangan tempat iklan 
• selanjutnya cari <data:comment.body/> yang terakhir 
• selengkapnya kurang lebih seperti berikut :

<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:if>
</b:loop>
</dl>
<b:if cond='data:post.commentPagingRequired'>
<span class='paging-control-container'>

• Maka selengkapnya akan menjadi seperti berikut :

<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:if>
</b:loop>
</dl>
</div> </td><td valign='top'> <div style='width:210px;height:auto;padding:5px; align:right;border:0px solid #F00;background:#FFF;'>

SIMPAN SCRIPT IKLAN / BANNER DISINI
<br/></div> </td></tr></table> </div>
<b:if cond='data:post.commentPagingRequired'>
<span class='paging-control-container'>

• Teks yang berwarna biru adalah kode tambahan
• Tempatkan script iklan pada teks warna merah tersebut :r; 
• Simpan Template kawan.

1. Apa yang saya sampaikan ini hanya sebagai gambaran saja, dikarenakan Struktur Template berbeda-beda disamping keterbatasan saya sebagai Admin [Penulis]. 
2. Artikel ini tidak bisa untuk Template Blog dengan Thread Comments

Tampilkan Iklan diatas Komentar Blog

Sekarang saya akan mencoba berbagi dengan kawan cara menampilkan Banner atau Teks Iklan Sponsor diatas kotak editor Komentar Blog, :r;

Caranya :

• Siapkan script Iklan Sponsor yang sudah di Parse »  disini 
• Masuk ke account Blogger dengan ID kawan
• Untuk jaga-jaga Simpan Template kawan dulu
• Beri tanda centang disamping  Expand Template Widget
• Cari Kode  <p><data:blogCommentMessage/></p> (kalau pada template kawan ada 3 atau 4 kode tersebut pakai yang kedua atau diatasnya ada kode seperti ini :

<h4 id='comment-post-message'><data:postCommentMsg/></h4>
[SIMPAN DISINI - KODE IKLAN]
Tampilan Iklan seperti berikut :

atau
<p><data:blogCommentMessage/></p>
[KODE IKLAN - SIMPAN DISINI]
Tampilan Iklan seperti berikut :

• Kawan bisa berkreasi menaruh Banner Iklan Sponsor diatas atau dibawah Poskan Komentar dan atau diatas Post Editor Komentar
• Simpan template kawan 

Cara Membuat Kumpulan Komentar Bag-III

Melanjutkan Cara Membuat Kumpulan Komentar Bag-I, dan Cara Membuat Kumpulan Komentar Bag-II sekarang saya akan lanjutkan berbagi lagi Cara Membuat Kumpulan Komentar Bag-III yang punya kelebihan tersendiri yaitu ada Avatarnya kawan Blogger yang memberikan Komentar :z; 

Script Widget ini saya dapatkan dari Blogger W2B, OK langsung saja ke cara  membuatnya :y;

Caranya sebagai berikut :

• Masuk Account Blogger dengan ID kawan
• Pada Tata Letak pilih Tambah Gadget - HTML / JavaScript 
• Copas script berikut kedalamnya 

<style type="text/css">
    ul.w2b_recent_comments{list-style:none;margin:0;padding:0;}
    .w2b_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}
    .w2b_recent_comments li .avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
    .avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;}
    .w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
    .w2b_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
    // Recent Comments Settings
    var
numComments = 25,
showAvatar = true,
avatarSize = 40,
roundAvatar = true,
characters = 100,
showMorelink = true,
moreLinktext = "More »",
defaultAvatar = "http://www.gravatar.com/avatar/?d=mm",
hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="http://bloggerblogwidgets.googlecode.com/svn/trunk/w2b-recent-comments-w-gravatar.js"></script>
<script type="text/javascript" src="http://blogbego-creation.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=25"></script>

Silahkan Edit seperlunya seperti :

• .avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px; artinya avatar akan dikelilingi dengan bingkai lingkaran, seandainya kawan menginginkan Avatar apa adanya angka 100 tersebut bisa dikecilkan sampai angka 0 [kosong/Nol]
• numComments= 5, artinya jumlah Komentar yang akan kawan tampilkan
• defaultAvatar = "http://www.gravatar.com/avatar/?d=mm", bisa kawan ganti dengan URL Avatar / Gambar punya kawan, karena yang memberikan Komentar tidak ada Avatarnya. 
• Ganti Teks yang berwarna merah URL Blog saya dengan URL Blog kawan
• Simpan Blog kawan

 MAAF POSTINGAN INI SUDAH TAK JALAN LAGI, SILAHKAN LIHAT 

UPDATE

Cara Membuat Kumpulan Komentar Bag-II

Seperti janji saya sebelumnya bahwa saya sudah posting Cara Membuat Kumpulan Komentar Bag-1, sekarang saya akan lanjutkan berbagi lagi Cara Membuat Kumpulan Komentar Bag-2  yang bentuk dan prinsip dasarnya hampir sama dengan yang terdahulu, tinggal sekarang kawan mau pakai yang mana :w itu semua sesuai selera masing-masing

OK saya cukupkan sekian basa-basinya biar jangan ngelantur, langsung saja ke cara membuatnya sangat simple seperti script sebelumnya :z; 

Caranya sebagai berikut :

• Masuk Account Blogger dengan ID kawan
• Pada Tata Letak pilih Tambah Gadget - HTML / JavaScript 
• Copas script berikut kedalamnya 

<script style="text/javascript" src="http://blogergadgets.googlecode.com/files/recentcommentswidgetv1.js"></script>
<script style="text/javascript">
var a_rc=6;
var m_rc=true;
var n_rc=true;
var o_rc=100;
</script><script src="http://NAMABLOG KAWAN.blogspot.com/feeds/comments/default?alt=json-in-script&amp;max-results=6&amp;callback=showrecentcomments"></script>

• Silahkan Edit seperlunya dan ganti Teks yang berwarna merah dengan URL Blog kawan
• Simpan Blog kawan

Kalau kawan ingin memberikan sedikit polesan garis pinggir [Tabel] untuk mengurangi tempat yang ada, kawan cukup menambahkan seperti script sebelumnya 

<div style="border: 1px solid black; height: 200px; overflow: auto; padding: 10px; width: 300px;">
SCRIPT KUMPULAN KOMENTAR DISINI 
</div>

• Simpan kembali Blog kawan dan semoga ada manfaatnya