Blogger Gelişmiş Toplam Yazı ve Yorum Eklentisi

Blogger için Sayaçlı sosyal takip butonları adında Tayfun arkadaşımız bir konu paylaşmış oldukça güzel bir konu ve yaptığı işlerde oldukça başarılı.Şimdi ben o konudan ve kodlardan yararlanarak sizler için Toplam yazı ve Toplam yorum eklentisine dönüştürdüm.Normal eklentisini elvet görmüşünüzdür sadece yazı olarak yazılıyordu ve çekici bir yanı yoktu ama yaptığım düzenlemelerden sonraki halini çok seviceksiniz.

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/AVvXsEgtLd6Ru-ssOLeszg4l91V3GHrh1R16WDzh3iHnkkA5UZV-R8XcjYEpBKCkKNPnIiLi39rOeEvP-UlMuC6XG3VHIctEa8Z-NbgUZzX-LeymxiiZIoIiX0jl2qNpTZDSvL3RuV_sRf_6f80/s1600/konusayisi.png.png'/></div><div class='cell_2'>Toplam Konu</div><div class='cell_3 '><span class='count' id='rss'/><script src="http://eklentiblogger.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/AVvXsEgJ99087RpoQusRu4OnyQCgH_JIJK6FRs_SgyZL9pXP3ca5CsVvbAfjEBBsDiEymGV0xyK20PbjSIOdJmq7DqH4Kne8Mggu9L7nzNHrO4MNuiTIrxKxuutQRvCmuya73hgj4kMnCvwPOkc/s1600/yorumsayisi.png'/></div><div class='cell_2'>Toplam Yorum</div><div class='cell_3 '><span class='count' id='rss'/><script src="http://eklentiblogger.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.