HTML Notlarım

Sitenizde bulunan yazı ve yorumlarınızı küçük bir HTML kod ile okuyucularınıza gösterebilirsiniz. Bu yazımda size iki adet farklı "Toplam yazı ve yorum" eklentisi paylaşacağım. Bunları sitenizde gözükmesini istediğniz yerdeki gadgete eklemeniz yeterlidir. Kodumuzu eklemek için yine Yerleşim - Gadget ekle - HTML/JavaScriptEkle - Kaydet yolunu izliyoruz...

1. Kodumuz: Kodun içindeki 2 adet ( Siteadı ) kısmına kendi site urlenizi yapıştırın. Yoksa kodunuz çalışmayacaktır.

<div class='box'>
<div class='cell_1 konu-sayısı'>
<img class='icon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj370a6hfxp3CfARroLqsaaB98IRcaWP3ADUukhyqHEkFGzMTrO0LjHzJbXNUxtXphIFq0Ju1hmUzWdmbBeSGs7luhxQL18hpsE-5SQp14tAVEDIV7OU0J5x4dRwtdDSYI0FCILG8I2G7A/s1600/konusayisi.png.png'/></div>
<div class='cell_2'>
Toplam Konu</div>
<div class='cell_3 '>
<span class='count' id='rss'/><script src="http://siteadı/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/AVvXsEjydS9lB-32_76biQRiRlBBe8VLce31SofoZ9ghDT7OtrI2nz2omK_N3qdTDBvgvfSDOxhswGTQy4L6w2XcJrVLHNnH7zqRq_QAZjRVU-AwPMFdOBb5UkJnea2VLGeYFxPJV0lT9unFoms/s1600/yorumsayisi.png'/></div>
<div class='cell_2'>
Toplam Yorum</div>
<div class='cell_3 '>
<span class='count' id='rss'/><script src="http://siteadı/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>

2. Kodumuz: Yukarıdaki kodda olduğu gibi kodun içinde 2 adet ( Siteadı ) kısmı vardır. Buralara kendi site linkinizi yapıştırın.

Görüntüsü aşağıda ki gibidir. 1. kod ve 2. kod görseli.