Mostrar todas las entradas y comentarios del blog en un cartel


Como habíamos visto en otra entrada anterior sobre cómo poner un script para mostrar todas las entradas y comentarios de nuestro Blog, esta es otra opción pero con un icono para cada sección y también tendrá un contador de días online desde que empezó el Blog, así se vería:

Para colocar este script solamente van Diseño > Elementos de la página > Añadir un elemento HTML/Javascript y pegamos el siguiente código:
<div class='widget-content'> <p><p> <img src="http://i147.photobucket.com/albums/r308/alb3rto_williams/txt.png" /> <script style="text/javascript"> function showpostcount(json) { document.write(parseInt(json.feed.openSearch$totalResults.$t,10)); }</script> <script src="http://TUBLOG.blogspot.com/feeds/posts/default?alt=json-in-script&callback=showpostcount"></script> <strong>Entradas</strong> <p> <p><p> <img src="http://i147.photobucket.com/albums/r308/alb3rto_williams/folder_apps.png" /> <script style="text/javascript"> function showpostcount(json) { document.write(parseInt(json.feed.openSearch$totalResults.$t,10)); }</script> <script src="http://TUBLOG.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showpostcount"></script> <strong>Comentarios</strong> <p> <p><img src="http://i147.photobucket.com/albums/r308/alb3rto_williams/Globe-icon-1-1.png" /> <script> function DiasOnline(Dia, Mes, Year, Texto) { Meses = new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"); Hoy = new Date(); Inicio = Date.parse(Meses[Mes - 1] + " " + Dia + " " + Year); Resultado = Math.round((Hoy.getTime() – Inicio) / 86400000); document.write(Resultado + " " + Texto); } DiasOnline(18, 05, 2010, "Días Online" );</script> </p> <p><span style="font-weight:bold;"> </span></p></p></p></p></p></p></p></div>
Ahora solamente cambiamos los valores que están en color azul por el nombre de tu Blog y la fecha en que se inicio. Eso sería todo, solamente guardamos y listo.

Poner un aviso de "cargando página"


Esta es una nueva forma para darle estilo a tu Blog, poniendo un icono diciéndole al visitante que se está cargando la página, y se quita el anuncio cuando se halla cargado totalmente, se basa en un elemento Script, fácil de colocar en tu plantilla.
Imagen Cargando Página Cargando página

Realmente seria para los que tienen muchas imágenes, scripts, gadgets en su Blog y tarda algo en cargarse, y con este anuncio el lector se esperara un poco para que puede cargarse la página.
Para colocarlo en tu plantilla nos vamos a Diseño > Edición de HTML y justo antes de </head> pegamos lo siguiente:
<script type='text/javascript'> window.onload = detectarCarga; function detectarCarga(){ document.getElementById("imgLOAD").style.display="none"; } </script>
Vemos la vista previa, y si todo está bien guardamos, ahora nos vamos Diseño > Elementos de la página > Añadir un elemento HTML/Javascript y pegamos el siguiente código:
<div id='imgLOAD' style="TEXT-ALIGN: center"> <b>Cargando página…</b> <IMG src="http://i147.photobucket.com/albums/r308/alb3rto_williams/cargandoimagen1.gif"> </div>
Solamente cambiamos lo que está en negrita por la url de la imagen de carga que quieras, en Ajaxload puedes encontrar varios diseños de carga, una vez obtenida la imagen deseada la subimos a nuestro alojamiento de imágenes y pegamos la url, ya con esto guardamos y listo.

Por V Junkie

Poner una faviconera en Blogger


Como habíamos visto anteriormente de cómo colocar una faviconera en la cabecera del Blog, ahora les mostrare comoponerla en la sidebar, abajo de las entradas, al final del Blog o donde ustedes quieran.
faviconeria sidebar

Es muy fácil colocarla, lo primero que tenemos que hacer es irnos a Diseño > Elementos de la página > Añadir un elemento HTML/Javascript, y ahí pegamos el siguiente código:
<style type="text/css"> #faviconera { width:300px; text-align:center; margin:10px auto 10px auto; } #faviconera .contimg img { padding:1px 1px 1px 1px; border:1px solid #8C8984; } #faviconera .contimg a:hover img{ border:1px solid #ffffff; } </style> <div id="faviconera"> <div class="contimg"> <a href="URL DEL BLOG A ENLAZAR"><img src="URL DE LA IMAGEN DEL FAVICON" title="TITULO DEL ENLACE" /></a> <a href="URL DEL BLOG A ENLAZAR"><img src="URL DE LA IMAGEN DEL FAVICON" title="TITULO DEL ENLACE" /></a> <a href="URL DEL BLOG A ENLAZAR"><img src="URL DE LA IMAGEN DEL FAVICON" title="TITULO DEL ENLACE" /></a> <a href="URL DEL BLOG A ENLAZAR"><img src="URL DE LA IMAGEN DEL FAVICON" title="TITULO DEL ENLACE" /></a> </div> </div>
Si quieren cambiar el tamaño de la faviconera lo pueden hacer en la opción de width, así también como el tamaño delborde y el color del mismo.
Luego debemos cambiar lo que está en color azul por lo que nos pide, el código lo coloque para 4 favicons pero para mostrar más, tenemos que agregar: <a href="URL DEL BLOG A ENLAZAR"><img src="URL DE LA IMAGEN DEL FAVICON" title="TITULO DEL ENLACE" /></a> Guardamos y listo.

Personalizar los links Entradas Recientes y Entradas Antiguas

Image representing Blogger as depicted in Crun...
Image via CrunchBase

En Blogger podemos ver al pie de las entradas unos links de navegación "Entradas más recientes", "Página principal" y "Entradas antiguas", para que el visitante tengas más facilidad de navegar en tu Blog, pero para que se vean de una forma diferente podemos personalizarlos poniendo un icono para cada link.
Links de Navegación
Primero nos vamos a Diseño > Edición de HTML > Expandimos los Artilugios y buscamos los siguientes códigos de cada link de navegación:
Entradas antiguas
<b:if cond='data:olderPageUrl'> <span id='blog-pager-older-link'> <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'&gt;<data:olderPageTitle/></a> </span> </b:if>
Página principal
<b:if cond='data:blog.homepageUrl != data:blog.url'> <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a> <b:else/> <b:if cond='data:newerPageUrl'> <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a> </b:if> </b:if>
Entradas más recientes
<b:if cond='data:newerPageUrl'> <span id='blog-pager-newer-link'> <a class='blog-pager-newer-link' expr:href='data:newerPageUrl + &quot;?max-results&quot; ' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a> </span> </b:if>
Ya encontrado los códigos para cada navegación, lo que está en negrita tenemos que remplazarlo por el siguiente código:
<img src='URL de la Imagen'/>
Solamente tenemos que cambiar donde dice Url de la imagen por tu imagen que quieres colocar. Donde podrás encontrar iconos my buenos para la navegación serian en Find Icons o Icon Finder.

Artículo por V-Junker

Enhanced by Zemanta

Optimización para la carga más rápida de los iconos de las redes sociales al blog


Cargar el botón de twitter, facebook, linkedin, google plus y demás componentes de distribución de contenido en redes sociales puede aumentar mucho el tiempo de espera de los lectores durante la lectura del contenido que publicamos, un problema que puede solucionarse parcialmente con soluciones como la que proponemos hoy.
Se trata de Socialite.js, un script que nos permite determinar el momento deseado de carga de dichos botones, evitando que se bajen todos al mismo tiempo sin que haya necesidad de hacerlo.
Podemos configurarlo para que se activen a medida que leemos el contenido de la página desplazándonos hacia abajo, o determinar que solo muestre los números asociados cuando se pase el ratón por encima de las figuras, tal y como se puede ver en las dos demostraciones disponibles en su página.
La técnica no es nueva, aunque en este caso su instalación es tan sencilla que está disponible para webmasters de cualquier nivel técnico, siendo necesario únicamente definir las características estéticas e incluir la llamada al .js dentro de cada página.
   

Autocategorías en Blogger: Muy útil para profesionalizar tu blog


Algunas veces queremos tener todo muy organizado para que nuestros lectores puedan encontrar con mayor facilidad los temas de su interés, y es ahí cuando en lugar de poner un gadget con las últimas entradas queremos poner sí las últimas entradas pero por categorías, de manera que puedas mostrar las últimas entradas por cada etiqueta que quieras y además mostrar la miniatura de dicho elemento.


 


Para poner en tu blog este gadget de últimas entradas por categorías realizaremos estos sencillos pasos:
1.- Entra en Diseño | Edición de HTML y antes de ]]></b:skin> pega lo siguiente:
/* Últimas entradas por categorías
--------------------------------- */
img.label_thumb{
float:left;
border:1px solid #8f8f8f; /* Borde de las miniaturas */
margin-right:10px !important;
height:55px; /* Alto de las miniaturas */
width:55px; /* Ancho de las miniaturas */
}
.label_with_thumbs {
float: left;
width: 100%;
min-height: 70px;
margin: 0px 10px 2px 0px;
padding: 0;
}
ul.label_with_thumbs li {
padding:8px 0;
min-height:65px;
margin-bottom:10px;
}
.label_with_thumbs a {}
.label_with_thumbs strong {padding-left:0px;}
2.- Luego antes de </head> pega este script:
<script type='text/javascript'>
//<![CDATA[
function labelthumbs(json){document.write('<ul class="label_with_thumbs">');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error)
{s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl=d;}else thumburl='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3ew5hMCeGE3zuRVMwclMb0t0cS3oBirir2CC-S4SZnXpv2TpssVlTlge09OfiUNX1AJyizhiFHN3TNV4KeZ5VK2SjS0A4TVITbBPimHSVbaz3-R025EHENRrfZL8Ads9jvhNlg9IlTQY/';}
var postdate=entry.published.$t;var cdyear=postdate.substring(0,4);var cdmonth=postdate.substring(5,7);var cdday=postdate.substring(8,10);var monthnames=new Array();monthnames[1]="Ene";monthnames[2]="Feb";monthnames[3]="Mar";monthnames[4]="Abr";monthnames[5]="May";monthnames[6]="Jun";monthnames[7]="Jul";monthnames[8]="Ago";monthnames[9]="Sep";monthnames[10]="Oct";monthnames[11]="Nov";monthnames[12]="Dic";document.write('<li class="clearfix">');if(showpostthumbnails==true)
document.write('<a href="'+posturl+'" target ="_top"><img class="label_thumb" src="'+thumburl+'"/></a>');document.write('<strong><a href="'+posturl+'" target ="_top">'+posttitle+'</a></strong><br>');if("content"in entry){var postcontent=entry.content.$t;}
else
if("summary"in entry){var postcontent=entry.summary.$t;}
else var postcontent="";var re=/<\S[^>]*>/g;postcontent=postcontent.replace(re,"");if(showpostsummary==true){if(postcontent.length<numchars){document.write('');document.write(postcontent);document.write('');}
else{document.write('');postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('');}}
var towrite='';var flag=0;document.write('<br>');if(showpostdate==true){towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;flag=1;}
if(showcommentnum==true)
{if(flag==1){towrite=towrite+' | ';}
if(commenttext=='1 Comments')commenttext='1 Comment';if(commenttext=='0 Comments')commenttext='No Comments';commenttext='<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';towrite=towrite+commenttext;flag=1;;}
if(displaymore==true)
{if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">Más »</a>';flag=1;;}
document.write(towrite);document.write('</li>');if(displayseparator==true)
if(i!=(numposts-1))
document.write('');}document.write('</ul>');}
//]]>
</script>

3.- Por último entra en Diseño | Elementos de la página | Añadir un gadget | HTML/Javascript y ahí pega esto:
<script type='text/javascript'>var numposts = 3;var showpostthumbnails = true;var displaymore = false;var displayseparator = true;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 100;</script>
<script type="text/javascript" src="/feeds/posts/default/-/Nombre-de-la-etiqueta?published&alt=json-in-script&callback=labelthumbs"></script>
En donde dice Nombre-de-la-etiqueta va el nombre de la etiqueta que quieres mostrar, tal como es, respetando mayúsculas y minúsculas. En el caso que la etiqueta contenga espacios o acentos lo mejor es que ingreses a la etiqueta y te fijes en la URL que aparece en la barra de direcciones del navegador, al final de la URL vendrá el nombre de la etiqueta tal como debe ponerse, por ejemplo, si tuviera espacios se vería así:
http://Nombre-de-mi-blog.blogspot.com/search/label/Nombre%20etiqueta

También dentro de éste último código hay unas áreas que podemos personalizar, true significa que lo mostrará y false que no lo mostrará.
var numposts ← Número de entradas a mostrar
var showpostthumbnails ← Mostrar o no las miniaturas
var displaymore ← Mostrar o no el enlace para leer más
var displayseparator ← Mostrar o no un separador
var showcommentnum ← Mostrar o no el número de comentarios
var showpostdate ← Mostrar o no la fecha de las entradas
var showpostsummary ← Mostrar o no el resumen de las entradas
var numchars ← Número de caracteres en los resúmenes

Y en el segundo código hay una URL en color naranja, esa es la imagen que se mostrará cuando la entrada no contenga ninguna imagen, puedes cambiarla por otra imagen si lo deseas.

Recuerda que el gadget muestra las ultimas entradas de una etiqueta en particular, por lo tanto, si quieres mostrar las últimas entradas de otras etiquetas entonces sólo tienes que repetir el paso #3 por cada categoría adicional que quieras agregar.

Comparte fragmentos de códigos HTML u otras notas


¿Necesitas compartir cualquier fragmento de código con cualquier otro usuario? SnipSource es una opción para ello, ya que sin necesidad de registros, incluirás el texto perteneciente a tu código junto a tu propio código, obteniendo para ello una URL específica que será la que entregues a otro u otros usuarios según las circunstancias. A la hora de introducir el código, también indicarás a qué lenguaje de programación pertenece, o si por el contrario, entregas texto plano.
Interesante es que además puedas añadir una contraseña o la verificación mediante captcha, que son las opciones extras de las que puedes disponer para añadir seguridad a tu código si no deseas que cualquiera, por puro azar, pueda acceder al mismo.
No hay necesidad de registro de usuario alguno, es fácil de utilizar y enseguida tendrás la URL de dicho código.
Related Posts Plugin for WordPress, Blogger...