Add the most commented topics to Blogger Th3safelink
I present to you today an almost exclusive addition, which is the addition of the most commented topics. This addition works according to a beautiful and distinctive idea, so that the visitor browses more topics. When the visitor sees the number of comments on a particular topic, he will be surprised and immediately he will go to read the topic.
Important note: this script works to extract Blogger comments only. If it uses another type of comment box, then unfortunately, those comments will not be counted as if they are not available.
Install adding the most commented topics
The installation of the add-on is very easy, all you have to do is go to planning and then create a "shhh" tool where you want the extension to appear and put the following code in it
<style type='text/css'>
#most-comments li,#most-comments ul,#most-comments ul li{
margin:0;
list-style:none;
color:#444;
font-family:cursive,droid arabic kufi;
font-size:11px;
text-align: right;
}
#most-comments ul li{
position:relative;
overflow:hidden;
background:#fff;
margin:3.5px 0;
padding:7px 50px 7px 10px;
white-space:nowrap;
text-overflow:ellipsis;
box-shadow:inset 0 0 #7343a8;
border:1px solid #e6e6e6;
transition:all .6s
}
#most-comments ul li:hover{
box-shadow:inset 310px 0 #7444aa
}
#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;
right:0;
top:0;
width:40px;
height:100%;
margin:0;
padding:7px 0;
background-color:#9f5de8;
color:#fff!important;
text-align:center;
transition:all .3s
}
#most-comments ul li:hover .count-most{
background-color:#7444aa
}
#most-comments ul div:first-of-type .mnqush-imgs{
display: block;
order: 1px solid #e6e6e6;
margin: 0 0 -4px 0;
}
#most-comments ul div:first-of-type a:hover{opacity: 0.8;}
#most-comments ul div:first-of-type .mnqush-imgs a{
display: grid;
}
#most-comments ul div:first-of-type li{
box-shadow: inset 310px 0 #59afec;
color: #fff;
margin: 0px 00px 0;
border: none;
}
#most-comments ul div:first-of-type .count-most{
background-color: #478dc1;
}
#most-comments ul div:first-of-type li a{
color: #fff;
}
.grop-abdualla .mnqush-imgs{
display: none;
}
</style>
<div class='div-wad'>
<script type='text/javascript'>
var numPosts=8;
var homePage="";
var postTitlear=new Array();
var imgwnr=new Array();
var postUrlar=new Array();
var postCommentar=new Array();
var totalpost;document.write('<div id="most-comments"><ul>');
function most43Comment(j){var a=j.feed.entry.length;totalpost=a;
for(var f=0;f<a;f++){
var h=j.feed.entry[f];
var im=h.media$thumbnail.url
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);
imgwnr.push(im);
postUrlar.push(g);
postCommentar.push(b)}sortPosts();
for(var f=0;f<numPosts;f++){var e='<div class="grop-abdualla"><div class="mnqush-imgs"><a href="'+postUrlar[f]+'" target ="_top"><img class="label_thumb" style="width:100%;" src="'+imgwnr[f]+'"/></a></div><li><span class="count-most">'+postCommentar[f]+'</span><a href="'+postUrlar[f]+'" title="'+postTitlear[f]+'" target="_blank">'+postTitlear[f]+'</a></div>';
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=imgwnr[d];
imgwnr[d]=imgwnr[f];
imgwnr[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('</li>')
document.write('</ul>')
document.write('</div>');
</script>
</div>
<div id="most-comments">
<ul>
<script src="https://th3safelink.blogspot.com/feeds/posts/default?max-results=9999&orderby=published&alt=json-in-script&callback=most43Comment"></script>
</ul>
</div>
<script type='text/javascript'>
$(document).ready(function() {
$('.label_thumb').attr('src', function(i, src) {return src.replace( 's72-c', 's500' );});
$('.label_thumb').attr('src', function(i, src) {return src.replace( '/default.jpg', '/mqdefault.jpg' );});
});
</script>
