Cara Menampilkan Widget Random Posts Berwarna Cara Menampilkan Posting yang Paling Banyak Dikomentari
SETELAH menyebarkan perihal Cara Menampilkan Widget Random Posts Berwarna, eksklusif CB lanjutkan nih dengan menyebarkan ttg Cara Menampilkan Posting yang Paling Banyak Dikomentari (Most Commented Posts) ibarat yg CB pasang di sidebar. Kali aja ada yang tertarik memasangnya.

Fungsinya memasang widget daftar goresan pena blog yang paling banyak dikomentari ini sama dengan Random Post, Related Posts, Popular Posts, dan Recent Posts, yakni sebagai navigasi blog dan internal link untuk meningkatkan Pageviews, Trafik, dan memudahkan pengunjung menemukan isu yang dicari.

Sentuhan warna background yang "warna-warni" (multicolored) hanya sebagai "pemanis" saja untuk lebih menarik perhatian.

CB dapatkan Cara Menampilkan Posting yang Paling Banyak Dikomentari ini dari Help Blogger. Anda juga sanggup menuju ke sana untuk mendapat panduannya.

Cara Menampilkan Most Commented Blog Posts

1. Klik "Template" > "Edit HTML"
2. Cari (CTRL+F) kode </Group> dan Copas aba-aba berikut ini di bawahnya. Jika di template Anda tidak aba-aba tersebut, maka cari kode <b:skin><![CDATA[ dan Copas aba-aba berikut ini di bawahnya.

<Group description="Most Commented" selector=".most-commented">
<Variable name="most.commented.background1" description="background color1" type="color" default="#fa4242" value="#ee377a"/>
<Variable name="most.commented.background2" description="background color2" type="color" default="#ee6107" value="#fcad37"/>
<Variable name="most.commented.background3" description="background color3" type="color" default="#f0f" value="#f8e000"/>
<Variable name="most.commented.background4" description="background color4" type="color" default="#ff0" value="#c7e93d"/>
<Variable name="most.commented.background5" description="background color5" type="color" default="#0ff" value="#5ebded"/>
</Group>

3. Cari kode ]]></b:skin> dan Copas aba-aba berikut ini di atasnya:

 .comment-count {
    padding: 3px 10px;
    background: #fff;
    color: #000;
    font-size: 10px;
    float: right;
}

.most-commented ul {
    padding: 0px !important;
    font-family: Century Gothic, sans-serif;
}

.most-commented ul li {
    list-style-type: none;
    padding: 10px;
    color: #555;
    margin-top: -10px;
}

.most-commented ul li a {
    color: #444;
    font-weight: bold;
    text-decoration: none;
    font-size: 11px;
}

.most-commented ul li img {
    float: left;
    margin: 0px 5px 0px 0px;
    width: 60px;
    height: 60px;
}

.most-commented:nth-child(3n+0) {
    background: $(most.commented.background1);
    width: 100%;
}

.most-commented:nth-child(4n+0) {
    background: $(most.commented.background2);
    width: 95%;
}

.most-commented:nth-child(5n+0) {
    background: $(most.commented.background3);
    width: 90%;
}

.most-commented:nth-child(6n+0) {
    background: $(most.commented.background4);
    width: 85%;
}

.most-commented:nth-child(7n+0) {
    background: $(most.commented.background5);
    width: 80%;
}

4. Klik SAVE Template !!!

Sampai sini Anda sudah memasukkan aba-aba CSS  Posting yang Paling Banyak Dikomentari di template blog Anda. Selanjutnya kembali ke Dashboard Blog lagi.

5. Klik hidangan "Layout" (Tata Letak) > "Add a Gadget" > pilih "Javasript/HTML"

6. Copy  + Paste aba-aba berikut ini di kotak yang tersedia:

<script type="text/javascript">
function stripTags(s,n)
    {
    return s.replace(/<.*?>/ig,"").split(/\s+/).slice(0,n-1).join(" ")
}
function mostcommented(feed) {
 var i;
 for (i = 0; i < feed.count ; i++)
 {
var postURL = "'" + feed.value.items[i].link + "'";
var postTitle = feed.value.items[i].title;
var postComments = feed.value.items[i].commentcount;
var postList = '<div class="most-commented"><ul><li style="margin-bottom: 10px"><div class="comment-count">' + postComments + "</div>" + "<a href="+ postURL + '">' + postTitle + "</a>"  + '</li></ul></div>';
 document.write(postList);
 }
 }
 </script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?
 AddUrlHere=http://idtutorialnih.blogspot.com
&NumberofPosts=5
&_id=2cb5eb603ed55a6264ee1484e5fdd45c
&_callback=mostcommented
&_render=json"
type="text/javascript"></script>
<span style="font-size: 80%; float:left;"><a href="http://idtutorialnih.blogspot.com">Most Commented Posts</a></span>

7. Ganti http://idtutorialnih.blogspot.com dengan alamat blog Anda.
8. Save!

Selamat, Anda sudah memasang widget daftar Posting yang Paling Banyak Dikomentari (Most Commented Posts) di sidebar yang sanggup menciptakan pengunjung makin betah di blog Anda! 

NOTE!
Untuk MENGGANTI WARNA latar belakang:
1. Klik "Template" > "Customize"
2. Klik "Advanced" > "Most Commented"
3. Silakan pilih warna kesukaan Anda.
4. Save dengan klik hidangan "Apply to Blog"

Widget Most Commented Post CB

Berikut ini cara termudah menampilkan widget posting paling banyak dikomentari. Ini yang CB terapkan di footer widget. Cara masangnya juga gampang banget, gak ribet kaya yang di atas:

1. Layout > Add a Gadget > pilih HTML/Javascript
2. Judul isi dengan "Most Commented" atau "Terbanyak Dikomentari"
3. Masukkan aba-aba berikut ini di kolom konten:

<div id="most-comments"></div>
<style scoped='' type='text/css'>
#most-comments li,#most-comments ul,#most-comments ul li{margin:0;list-style:none;color:#444;font-family:'Open Sans',Helvetica,Arial,sans-serif;font-size:14px}#most-comments ul li{position:relative;overflow:hidden;background:#fff;margin:3.5px 0;padding:7px 10px 7px 50px;white-space:nowrap;text-overflow:ellipsis;box-shadow:inset 0 0 #fc4f3f;border:1px solid #e6e6e6;transition:all .6s}#most-comments ul li:hover{box-shadow:inset 310px 0 #fc4f3f}#most-comments ul li a{color:#444;font-weight:700;text-decoration:none;transition:all .3s}#most-comments ul li a:hover,#most-comments ul li:hover a{color:#fff}.count-most{position:absolute;left:0;top:0;width:40px;height:100%;margin:0;padding:7px 0;background-color:#383838;color:#fff!important;text-align:center;transition:all .3s}#most-comments ul li:hover .count-most{background-color:#fc4f3f}
</style>
<script type='text/javascript'>
//<![CDATA[
var numPosts=5;
var homePage="www.idtutorial.com";
var postTitlear=new Array();
var postUrlar=new Array();
var postCommentar=new Array();
var totalpost;document.write('<div id="most-comments"><ul>');
function mostComment(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];}};
postTitlear.push(c);
postUrlar.push(g);
postCommentar.push(b)}sortPosts();
for(var f=0;f<numPosts;f++){var e='<li><span class="count-most">'+postCommentar[f]+'</span><a href="'+postUrlar[f]+'" title="Cara Menampilkan Posting yang Paling Banyak Dikomentari" target="_blank">'+postTitlear[f]+'</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="http://'+homePage+'/feeds/posts/default?max-results=9999&orderby=published&alt=json-in-script&callback=mostComment"><\/script>');
document.write('</li>')
document.write('</ul>')
document.write('</div>');
//]]>
</script>



Ganti alamat blognya dengan kepunyaan Anda. Angka 5 = jumlah posting, sanggup diubah.

4. Save!

Good Luck!
Share To:

Endo Sadewa

Post A Comment:

0 comments so far,add yours