Blogger Hareketli Toplam Konu ve Yorum Eklentisi

Benimde kullandığım güzel bir eklenti sitenizdeki toplam konu sayısını ve toplam yorum sayısını belirtiyor ziyaretçileriniz bu bilgileri görmek isteyebilir.

Bu eklentiyi sitenize eklemek için yönetici panelinden Yerleşim bölümüne gidiyoruz daha sonra eklentinin gözükmesini istediğiniz yerde Gadget Ekle butonuna basıyoruz karşımıza gelen ekrandan HTML/JavaScript diyoruz. Karşınıza gelen ekrana aşağıda verdiğim kodları kopyalayıp yapıştırın.

<script style="text/javascript"> function numberOfPosts(json) {document.write('<b>' + json.feed.openSearch$totalResults.$t + '</b><br>');} function numberOfComments(json) {document.write('<span class="Apple-style-span" style=""></span> <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');} </script>

<div class='box'>
<div class='cell_1 konu-sayısı'>
<img class='icon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDA6ROu2fu4AsBKyAp3_c1i_5sIX4G4ae4NSBO21RfibY9v1J3AVY6250TjPj2SNpZnEKl7BzTyMBJO9D9n_Kwbwy6Vyg9ZLuGqr3qKMNO0gNgOhoWf2LAxTHYe961sA2g5_KJS43L7iE/s1600/konusayisi.png.png'/></div>
<div class='cell_2'>
Toplam Konu</div>
<div class='cell_3 '>
<span class='count' id='rss'/><script src="http://bloggerefendisi.blogspot.com/feeds/posts/default?alt=json-in-script&callback=numberOfPosts">
</script></span></div>
</div>
<div class='box'>
<div class='cell_1 yorum-sayısı'>
<img class='icon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9cCCZtWbrZoDFCPRbn_lfMO3biNsOwAOQxMH9Wnh1hF0TK6BsP4cv_RoaE3RdOHijHBUAdrdSyzWR5kVAN6vGK5UkWZSmkgj0cGUMzRq9YEG7_sLGYhh_qLGfqBqsWbcit61ZJYJuVw4/s1600/yorumsayisi.png'/></div>
<div class='cell_2'>
Toplam Yorum</div>
<div class='cell_3 '>
<span class='count' id='rss'/><script src="http://bloggerefendisi.blogspot.com/feeds/comments/default?alt=json-in-script&callback=numberOfComments"></script></span></div>
</div>
<style type='text/css'>
.box:hover{
filter:alpha(opacity=85);-moz-opacity:.85;opacity:.85;
}
.box img{
border:0;
padding:0;

}
.icon {
width: 27px;
height: 26px;
margin-top:3px;
border: none;
}


.konu-sayısı {
background-color: #44B8F2;
background-image: -moz-linear-gradient(top, #96DCFF, #2BA6E3);
background-image: -ms-linear-gradient(top, #96DCFF, #2BA6E3);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#96DCFF), to(#2BA6E3));
background-image: -webkit-linear-gradient(top, #96DCFF, #2BA6E3);
background-image: -o-linear-gradient(top, #96DCFF, #2BA6E3);
background-image: linear-gradient(top, #96DCFF, #2BA6E3);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFA461', endColorstr='#E8711A');
border-color: #da7c0c;
color: #fff;
text-shadow: 0 1px 1px rgba(60, 60, 60, 0.75);
}

.yorum-sayısı {
background-color: #F78634;
background-image: -moz-linear-gradient(top, #FFA461, #E8711A);
background-image: -ms-linear-gradient(top, #FFA461, #E8711A);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#FFA461), to(#E8711A));
background-image: -webkit-linear-gradient(top, #FFA461, #E8711A);
background-image: -o-linear-gradient(top, #FFA461, #E8711A);
background-image: linear-gradient(top, #FFA461, #E8711A);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFA461', endColorstr='#E8711A');
border-color: #da7c0c;
color: #fff;
text-shadow: 0 1px 1px rgba(60, 60, 60, 0.75);
}

.box{
font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
font-size: 17px;
line-height: 14px;
list-style-type: none;
display: inline-block;
padding: 0px 0px;
margin:2px 5px ;
color: #333;
text-align: center;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
filter: shadow(color=#000000,direction=135,strength=5);
text-decoration: none;
vertical-align: middle;
background-color: #f5f5f5;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#E6E6E6'); /* for IE */
background-image: -moz-linear-gradient(top, #ffffff, #E6E6E6);
background-image: -ms-linear-gradient(top, #ffffff, #E6E6E6);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#E6E6E6));
background-image: -webkit-linear-gradient(top, #ffffff, #E6E6E6);
background-image: -o-linear-gradient(top, #ffffff, #E6E6E6);
background-image: linear-gradient(top, #ffffff, #E6E6E6);
background-repeat: repeat-x;
border-color: #E6E6E6 #E6E6E6 #BFBFBF;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
border: 1px solid #CCC;
border-bottom-color: #B3B3B3;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
cursor: pointer;
position: relative;
margin-left: -1px;
float: left;
line-height: 20px;
float:left;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.col_4{
float:left;
}
.cell_1{
float:left;
width:40px;
height:30px;
padding:0px 0 0 ;
margin-left: 0;
}
.cell_2{
border-right:1px solid#ddd;
float:left;
width:186px;
height:25px;
text-align:center;
padding:5px 0 0 ;
}
.cell_3{
float:left;
width:50px;
height:25px;
text-align:center;
padding:4px 0 0 ;
}
</style>
</style>

Bloggerefendisi.blogspot.com yazdığım 2 yeri kendi blog adresinizle değiştirin. Boyut değişikliği yapmak isterseniz width:186px numarasıyla oynayabilirsiniz.