Contador de postagens, comentários e visualizações

CÓDIGO CSS
(colar acima de ]]></b:skin>)

/*---------CONTADOR DE POSTS, COMENTÁRIOS E VISUALIZAÇÕES BY ELAINEGASPARETO.COM*/
#Stats1 ul{margin:0px 0;border:0;padding:0}
#Stats1 li{
display:inline;
width:33%;
border:0;
color:#fff; /*COR DA FONTE DO ITEM*/
float:left;
text-decoration:none;
margin:0;
font-size:12px;  /*TAMANHO DA FONTE DO ITEM*/
list-style-type:none
}
#Stats1 li:hover{
opacity: 0.7;
filter:alpha(opacity=70); /* For IE8 and earlier */
}
#Stats1 h4{
margin:0;
font-size:18px;  /*TAMANHO DA FONTE DO CONTADOR*/
line-height:1.2em;
color:#fff; /*COR DA FONTE DO CONTADOR*/
padding: 0 5px 0 5px;
}
#Stats1 span{
font-size:12px;
color:#fff;
padding: 0 5px 0 5px;
}
#totalposts{
background: #bf005f; /*COR DE FUNDO  DOS POSTS*/
}
#totalComments{
background: #ffb200;  /*COR DE FUNDO DOS COMENTÁRIOS*/
}
#totalCount{
background: #396CC6;  /*COR DE FUNDO DAS VISUALIZAÇÕES*/
}

CÓDIGO HTML
(COLAR EM SUBSTITUIÇÃO AO GADGET STATS)

<b:widget id='Stats1' locked='false' title='' type='Stats'>
  <b:includable id='main'>
<b:if cond='data:title'><h2>
<data:title/></h2>
</b:if>
    <div class='widget-content'>
      <ul>
<li id='totalposts'>
          <h4 id='Stats1_totalPosts'>
…</h4>
<span>Postagens</span>
        </li>
<li id='totalComments'>
          <h4 id='Stats1_totalComments'>
…</h4>
<span>Comentários</span>
        </li>
<li id='totalCount'>
          <h4 expr:id='data:widget.instanceId + "_totalCount"'>
…</h4>
<span>Pageviews</span>
        </li>
</ul>
<script type='text/javascript'>
//<![CDATA[
function totalPosts(json){document.getElementById('Stats1_totalPosts').innerHTML=json.feed.openSearch$totalResults.$t};function totalComments(json){document.getElementById('Stats1_totalComments').innerHTML=json.feed.openSearch$totalResults.$t};document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalPosts\"><\/script><script type=\"text/javascript\" src=\"/feeds/comments/default?alt=json-in-script&max-results=0&callback=totalComments\"><\/script>');
//]]>
      </script>
    </div>
<div style="clear:both"/>
  </b:includable>
</b:widget>

Personalizar cada gadget com um estilo diferente

 MODELO 1

#ID DO GADGET h2{
font: $(widget.title.font);  /*fonte do título do gadget*/
color: $(widget.title.text.color);  /*cor da fonte*/
background: transparent url(http://3.bp.blogspot.com/-9qSzwQLCQME/UhfxRyrdrRI/AAAAAAAAuXQ/XUmtp_3gk7s/s1600/popular-smaller-2.png) center no-repeat;
height: 49px;
width: 262px;
padding-top: 30px;
}


MODELO 2

#ID DO GADGET h2 {
font: 19px 'Walter Turncoat';
color: #fff;
background: #0090D5;
border-left: 6px solid #000;
padding-top: 5px;
padding-bottom: 5px;
}


MODELO 3

#ID DO GADGET h2 {
font: 17px 'Pacifico';
color: #fff;
background: #ff0075;
border-bottom: 4px solid #000;
padding-top: 3px;
padding-bottom: 3px;
}


MODELO 4

#ID DO GADGET h2{
font: 18px 'Pacifico';  /*fonte do título do gadget*/
color: #ffffff;  /*cor da fonte*/
background: transparent url(https://2.bp.blogspot.com/-372Hmu8xcR4/WkOhC_AED5I/AAAAAAABcR0/Zu2-UfKz_CknUx5G3dtRtI_55FxjzEPqACLcBGAs/s1600/faixinha2.png) center no-repeat;
height: 50px;
width: 300px;
padding-top: 30px;
margin-left: -15px;
margin-bottom: -10px;
}

MODELO 5


#ID DO GADGET h2 {
/*Estilos para o título do gadget*/
font: 19px 'Sedgwick Ave Display';
color: #fff;
background: #0090D5;
border-bottom: 6px double #fff;
padding-top: 5px;
padding-bottom: 5px;
}


MODELO 6

#ID DO GADGET h2 {
background:#000000;
border: 8px double #fff;
border-radius: 0px 0px 0px 0px; /* Bordas aredondadas do sub-menu */
margin-top:-12px;
margin-left:-13px;
margin-bottom:10px ;
padding:5px;
width: 100%;
}


MODELO 7

#ID DO GADGET{
background: #FC3880; /*Cor de fundo do gadget*/
padding-top:10px;
padding-rigth: 20px;
padding-left: 5px;
width: 100%;
color: #ffffff; /*Cor de fonte do gadget*/
box-shadow: 0px 7px 20px #a4a4a4; /*Cor de sombra do gadget*/
}


FONTES ESPECIAIS USADAS NOS MODELOS
(cole o código da fonte desejada acima de </head>)

<link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'/>
<link href='https://fonts.googleapis.com/css?family=Sedgwick+Ave+Display' rel='stylesheet' type='text/css'/>
<link href='https://fonts.googleapis.com/css?family=Walter+Turncoat' rel='stylesheet' type='text/css'/>
<link href='https://fonts.googleapis.com/css?family=Norican' rel='stylesheet' type='text/css'/>


Home Sobre mim Tutoriais Loja de templates Portfólio Fanpage