miércoles, 20 de marzo de 2013
Contador Flash de Visita para Blogger por paises
Para todos los que quiere saber cuantas personas visitan su blogs y mostrar dicha información también a los lectores, en esta ocasión les presento un contador de vistitas que nos permite esto. se trata de 99counters que nos permite visualizar cuantas personas visitan nuestro blogs, de que país lo están visitando con pequeñas banderas de cada país y en total diario de visitas.
Con Tu cuenta gratis de 99counters ahora puede crear contador de red personalizadas para su sitio de red, blog y perfiles sociales en red.
El uso de 99counters es una manera efectiva y poderosa para obtener instantáneamente estadísticas de red
Para quienes quiera agregar este contador visiten 99counters y registrate.
Entradas Relacionadas para blogger con CSS
Hace ya mucho tiempo salio el script que nos permite ver las entradas relacionadas en nuestro blogs, es mas ya en varias planillas ya viene instalada.
En esta ocasión les explicare como colocar esta opción en nuestro blogs, por si te interesa y aun no lo tienes, a diferencia de los demás tutoriales que e visto, yo le agregare un toque personal con CSS, espero que te guste.
Primero entra a Diseño > Edición de HTML y haz un respaldo de tu plantilla por si no obtuvieras los resultados esperados.
Después pega antes de ]]></b:skin> los estilos:
/*Entradas Relacionadas por Tutoblogger*/
#related-posts {
float : left;
width :auto;
margin-top:20px;
margin-left : 5px;
margin-bottom:20px;
font : 11px Verdana;
margin-bottom:10px;
}
#related-posts .widget {
list-style-type : none;
margin : 5px 0 5px 0;
padding : 0;
}
#related-posts .widget h2, #related-posts h2 {
color : #069;
padding: 7px 30px 0 0;
text-align:center;
width: 475px;
font-size : 18px;
font-weight : normal;
margin : 5px -20px 0 0;
padding : 0 0 5px;
border-bottom: 3px solid #069;
}
#related-posts a {
color : #054474;
font-size : 11px;
text-decoration : none;
}
#related-posts a:hover {
color : #054474;
text-decoration : none;
}
#related-posts ul {
border : medium none;
margin : -25px 0 0 0;
padding : 30px 0 0 0;
border-left: 3px solid #069;
}
#related-posts li:hover {
margin-left: 40px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
#related-posts ul li {
display : block;
background : #f0eeee;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 16px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
}
Luego con los artilugios expandidos busca la etiqueta ]]></b:skin> y justo debajo de ella pega lo siguiente:
<script type='text/javascript'>Ahora busca esta línea:
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var cuantosPosts = 0;
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
var dirURL = document.URL;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
if (relatedUrls[r] != dirURL) {
document.write('<li><a href="' + relatedUrls[r] + '" title="Post relacionado: '
+ relatedTitles[r] + '">' + relatedTitles[r] + '</a></li>');
}
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
cuantosPosts++;
if (cuantosPosts == 5) {
break;
}
}
document.write('</ul>');
}
//]]>
</script>
<b:loop values='data:post.labels' var='label'>Y justo antes del siguiente </b:loop> pega esto:
<b:if cond='data:blog.pageType == "item"'>Ya sólo busca esta línea:
<script expr:src='"/feeds/posts/default/-/" + data:label.name +
"?alt=json-in-script&callback=related_results_labels&max-results=10"'
type='text/javascript'/>
</b:if>
<div class='post-footer-line post-footer-line-3'Y pega debajo de ella lo siguiente:
<b:if cond='data:blog.pageType == "item"'><div id='related-posts'>
<div class='post-footer-line post-footer-line-4' id='relpost'>
<h2>Entradas relacionadas:</h2>
<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</b:if></div>
</div></b:if>
Guarda los cambios y listo. los cambios los podras ver unicamente en las entradas.
Muy Importante:
Cada entrada debe tener minimo una etiqueta y que las etiquetas se muestren en el post para que las entradas relacionadas funcionen.Info: sacado de una planilla de johnytemplate
Suscribirse a:
Entradas (Atom)
Descripcion en imagenes con efecto deslizante usando css
Una forma de agregarle mas estilo a nuestras imágenes y hacer que nuestro blogs sea mas profesional, es poniendo una pequeña descripc...
-
Cuando escribimos una entrada por defecto Feedburner de google le manda toda la información de la entrada a nuestros suscriptores, esto nos...
-
Anteriormente les avía publicado unos útiles consejos para hacer que nuestro blogs cargue de forma mas rápida, ya que actualmente la mayorí...