Blogger Gelişmiş Toplam Yazı ve Yorum Eklentisi

Merhaba Fiber Dahi okurları size bugün  sizlere üstteki resimde gördüğünüz gibi güel yapılmış bir wigdeti paylaşacağım.
Aşağıdaki kodları Yerleşim > Gadget Ekle > HTML/JavaScript ekle yolunu izleyerek aşağıdaki kodları ekleyin.

<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/AVvXsEiJeAwKBsaTl96je8Ptop2M9PW42vm1WLrO0j40Cn-uRjnC1f1bgTdLqX_8vQTT5EaJsl5bJDhLJKVbmQ4hFCYOIlBi8o_AaRsT5CEmu3dqNbOvB-DBiEzOacRfnbTLzJWbq55hWdS-99s/s1600/konusayisi.png.png'/></div><div class='cell_2'>Toplam Konu</div><div class='cell_3 '><span class='count' id='rss'/><script src="http://teknodr.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/AVvXsEidfVmDwrdO3Xvs5RO020pEa9pT6uNeG2adRhMzhh3SINNdrKEb4oT1ECNFdRP1rUJxLNh4PJsSjhtoOBTdaYXvtOdtmRT-p0Q7stwUXdszfV_uYYCMjlTCIR0X4MWlxg0PdnQSVLSsiEo/s1600/yorumsayisi.png'/></div><div class='cell_2'>Toplam Yorum</div><div class='cell_3 '><span class='count' id='rss'/><script src="http://teknodr.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>

Kırmızı ile işaretlediğim yerleri kendi site adresinizi yazınız.Sidebar ayarlarına gelicek olursak sayfanızsa sıkışıp aşağıya iniyorsa eğer 'width:186px' kodunu aratıp ordaki boyutları değiştirerek küçültüp büyütebilirsiniz. 

Bende kutu içine almadığı için eklentiyi '   '  kodunu koyarak boşluk bırakıp kutu içine aldım eğer sizdede çerçeve varsa ve çerçeve içine almıyorsa kullanabilirsiniz yada eklentinizin altına birşeyler yazıp kutu içine almasını sağlayabilirsiniz.