sábado, 14 de febrero de 2009

Enumerar entradas blog

No sé si les ha pasado que cuando visitan un nuevo blog, y les parece hermoso les gusta ver la entradas antiguas, por lo general las plantillas tiene esto: “ENTRADAS ANTIGUAS”, y bueno así poco a poco vamos viendo todo, pero “OH NO” quieres regresar a ver algo de nuevo… y dices queeeeeeeeeeee???? tengo que pasar de nuevo por todo para regresar…. Pues ahora les tengo un truco como numerar las páginas… le mostrare el paso a paso de cómo hacerlo…

1-Nos vamos a
DISEÑO y seleccionamos ELEMENTOS DE PÁGINA.

2-Damos click en AÑADIR UN GADGET.

3-Aparecera una ventana donde se desglosara una serie de aplicaciones (bajamos, buscamos y seleccionamos HTML/Javascript

4-Nos aparecerá una nueva ventana… en la cual Pegarás el codigo que te digo más abajo.… (La opción titulo déjala vacía).

Este es el código. Bastante Largo...

<style>

.showpageArea a {

text-decoration:underline;

}

.showpageNum a {

text-decoration:none;

border: 1px solid #ccc;

margin:0 3px;

padding:3px;

}

.showpageNum a:hover {

border: 1px solid #ccc;

background-color:#ccc;

}

.showpagePoint {

color:#333;

text-decoration:none;

border: 1px solid #ccc;

background: #ccc;

margin:0 3px;

padding:3px;

}

.showpageOf {

text-decoration:none;

padding:3px;

margin: 0 3px 0 0;

}

.showpage a {

text-decoration:none;

border: 1px solid #ccc;

padding:3px;

}

.showpage a:hover {

text-decoration:none;

}

.showpageNum a:link,.showpage a:link {

text-decoration:none;

color:#333;

}

</style>







<script type="text/javascript">



function showpageCount(json) {

var thisUrl = location.href;

var htmlMap = new Array();

var isFirstPage = thisUrl.substring(thisUrl.length-5,thisUrl.length)==".com/";

var isLablePage = thisUrl.indexOf("/search/label/")!=-1;

var isPage = thisUrl.indexOf("/search?updated")!=-1;

var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";

thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;

var thisNum = 1;

var postNum=1;

var itemCount = 0;

var fFlag = 0;

var eFlag = 0;

var html= '';

var upPageHtml ='';

var downPageHtml ='';



var pageCount = 4;

var displayPageNum = 5;

var upPageWord = 'Previous';

var downPageWord = 'Next';







var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';



for(var i=0, post; post = json.feed.entry[i]; i++) {

var timestamp = post.published.$t.substr(0,10);

var title = post.title.$t;

if(isLablePage){

if(title!=''){

if(post.category){

for(var c=0, post_category; post_category = post.category[c]; c++) {

if(encodeURIComponent(post_category.term)==thisLable){

if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){

if(thisUrl.indexOf(timestamp)!=-1 ){

thisNum = postNum;

}



postNum++;

htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;

}

}

}

}//end if(post.category){



itemCount++;

}



}else{

if(title!=''){

if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){

if(thisUrl.indexOf(timestamp)!=-1 ){

thisNum = postNum;

}



if(title!='') postNum++;

htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;

}

}

itemCount++;

}

}



for(var p =0;p< htmlMap.length;p++){

if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){

if(fFlag ==0 && p == thisNum-2){

if(thisNum==2){

if(isLablePage){

upPageHtml = labelHtml + upPageWord +'</a></span>';

}else{

upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';

}

}else{

upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';

}



fFlag++;

}



if(p==(thisNum-1)){

html += '<span class="showpagePoint">'+thisNum+'</span>';

}else{

if(p==0){

if(isLablePage){

html = labelHtml+'1</a></span>';

}else{

html += '<span class="showpageNum"><a href="/">1</a></span>';

}

}else{

html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +'</a></span>';

}

}



if(eFlag ==0 && p == thisNum){

downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';

eFlag++;

}

}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){

}//end for(var p =0;p< htmlMap.length;p++){



if(thisNum>1){

if(!isLablePage){

html = ''+upPageHtml+' '+html +' ';

}else{

html = ''+upPageHtml+' '+html +' ';

}

}



html = '<div class="showpageArea"><span style="COLOR: #000;" class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;



if(thisNum<(postNum-1)){

html += downPageHtml;



}



if(postNum==1) postNum++;

html += '</div>';



if(isPage || isFirstPage || isLablePage){

var pageArea = document.getElementsByName("pageArea");

var blogPager = document.getElementById("blog-pager");



if(postNum <= 2){

html ='';

}



for(var p =0;p< pageArea.length;p++){

pageArea[p].innerHTML = html;

}



if(pageArea&&pageArea.length>0){

html ='';

}



if(blogPager){

blogPager.innerHTML = html;

}

}



}

</script>



<script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ; type="text/javascript"></script>



5-Ya cuando pegamos el texto, GUARDAMOS

6-
Ya esta lista en la parte de abajo la numeración de páginas de nuestro blog… si quieres puedes arrastrar el gadget, hacia abajo.. Aunque no difiere en nada, o bueno no sé si eso dependerá de cada plantilla, a mi no me afecto en nada, pero si quieres muévelo…

Eliminar la barra de Blogger

Si queremos ocultar la barra de Blogger que se encuentra en la parte superior de nuestro blog, podemos hacerlo con unos sencillos pasos. Sólo vamos a ocultar la barra en ningún caso eliminarla.

A tal efecto nos situaremos en "Diseño" accederemos a "Edicion Html" y buscaremos el siguiente código:

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Y justamente debajo pegaremos este otro:

#navbar #Navbar1 iframe{
display:none; visibility:none;
}

Si en cualquier otro momento deseas mostrar la barra de nuevo eliminas este último código y listos.

Redireccionar el Blog

Hoy os propondré un código muy sencillo para redireccionar nuestro blog a otro, como por ejemplo si tenemos nuevo dominio. Muy útil si no queremos perder a los visitantes de nuestro antiguo blog.

¿Como podemos hacerlo?

Accedemos al Panel de Control del blog que queremos redireccionar, y nos dirigimos a Diseño, Edición de HTML y sin necesidad de expandir artilugios pegamos el código que os muestro a justamente antes de (Recuerda que para buscar puedes utilizar las teclas Ctrl + F)

<script>



location.href='URL DEL NUEVO BLOG';



</script>


Una vez introducido el código, cuando nuestras visitas entren en nuestro blog el navegador los llevará directamente al blog que hayamos escogido.

viernes, 13 de febrero de 2009

"Leer más" solo en los post escogidos

Me he encontrado en Blogger Magz con una nueva forma de aplicar el "Leer más" solo a las entradas que queramos mediante el uso de javascript.

A juzgar por los comentarios de allí parece ser que no da el problema de otros "Leer más" anteriores, que aparecía en todas las entradas a pesar de no incluir el código en las mismas.

Yo misma lo he instalado en un blog de pruebas y parece ser que así es, que el "Leer más" solo es visible en las entradas en las que incluyamos el código para el efecto.


[1] En nuestro panel de Blogger, nos situamos en la pestaña de "Edición HTML" y marcamos la opción de "Expandir las plantillas de artilugios" para colocar este código justo antes de :

<b:if cond='data:blog.pageType == "item"'>

<style>.fullpost{display:inline;}</style>

<b:else/>

<style>.fullpost{display:none;}</style>

<script type='text/javascript'>

function checkFull(id) {

var post = document.getElementById(id);

var spans = post.getElementsByTagName(&#39;span&#39;);

var found = 0;

for (var i = 0; i &lt; spans.length; i++) {

if (spans[i].className == &#39;fullpost&#39;) {

spans[i].style.display = &#39;none&#39;;

found = 1;

}

if (spans[i].className == &#39;showlink&#39;) {

if (found == 0) {

spans[i].style.display = &#39;none&#39;;

}

}

}

}

</script>

</b:if>

[2] Localizamos ahora esta parte del código de la plantilla:

<div class='post-body'>

<p><data:post.body/></p>

<div style='clear: both;'/> <!-- clear for photos floats -->

</div>

Dependiendo de la plantilla, la primera línea de este código podría verse así:

<div class='post-body entry-content'>

o de alguna otra manera. Tomando como referencia el resto del código no será demasiado difícil localizarlo.

Y lo cambiamos por este otro:

<div class='post-body' expr:id='"post-" + data:post.id'>

<p><data:post.body/></p>

<b:if cond='data:blog.pageType != "item"'>

<span class='showlink'>

<p><a expr:href='data:post.url'>Leer más...</a></p>

</span>

<script type='text/javascript'>

checkFull(&quot;post-<data:post.id/>&quot;);

</script>

</b:if>

<div style='clear: both;'/> <!-- clear for photos floats -->

</div>


[3] Una vez guardados los cambios, para usar el "Leer más" hemos de colocar un pequeño código en cada entrada en la que vayamos a usar el efecto de esta manera:

Parte de la entrada que estará a la vista



<span class="fullpost">



El resto de la entrada que estará oculta hasta pinchar en el "Leer más"



</span>



El resto de la entrada que estará oculta hasta pinchar en el "Leer más"

[4] Podemos incluir el código en Opciones - Formato - Plantilla de entrada, así el código aparecerá automáticamente cada vez que vayamos a escribir un nuevo post, si en alguna entrada no queremos mostrar el "Leer más", solo tendremos que borrar el código.

Traducir al inglés tus post

Os explico como podéis poner un traductor en el pie de vuestras entradas para dar la posibilidad a vuestros visitantes de traducir ese determinado post al inglés. Aunque podéis optar incluso por traducirlos al italiano, alemán, francés y ruso, por gentileza de Vivek Sanghi.
El resultado es esa banderita pequeña que veis en el pie de mis entradas donde pone English al lado (eso lo podéis quitar en el código) en realidad yo pienso quitarlo, pero de momento lo dejo tal cuál para que podáis verlo y decidir como os gusta más "con o sin". ;-)

El código es este:

<a expr:href='"http://world.altavista.com/babelfish/trurl_pagecontent?url=" + data:post.url + "&amp;lp=es_en"' title='Spanish to English'><img src='http://1.bp.blogspot.com/_XGtsagQTuUQ/RZk8DP2JNiI/AAAAAAAAADk/eRxHS5s1f10/s320/english.jpg' alt='Eng' /> English</a>

Tenéis que colocarlo en vuestra plantilla-HTML después de:

<p class='post-footer-line post-footer-line-3'>

Los títulos en Blogger

Cuando publicamos una entrada en Blogger en la que hemos escrito su título de forma correcta, Blogger hace una serie de cambios a la hora de mostrar la url de esa entrada en el navegador:

Desaparece las vocales acentuadas y signos extraños como la ñ.
Ejemplo: si en el título dice "Árbol Genealógico por años", en la url aparecerá "rbol-genealgico-por-aos".

Recorta parte de las palabras que incluyan un carácter especial que comience con &, desde donde aparece dicho símbolo hasta el final de la palabra.

Además recorta la URL a 37 caracteres como máximo.


La solución para evitar esto no es demasiado complicada:

Escribimos el título sin colocar los acentos, usamos enes en lugar de eñes y publicamos la entrada.

Una vez publicada, volvemos a editar el título de la entrada colocando los signos de puntuación y las eñes, esto ya no afectará a la url porque ya fue creada en la primera publicación del post.

Además de corregir el título podemos aumentar el título del post, sin que esto influya en la url anterior.

En Blogger el título de la entrada es al mismo tiempo el título de la página y este cuanto más descriptivo sea, mucho mejor, ya que tu posición en Google dependerá en gran parte de que, en el título de tu página y en la url de la misma, se encuentren las palabras que busca alguien en Google.

Google asume como iguales a las vocales acentuadas y no acentuadas.
Google trata igualmente a mayúsculas y minúsculas.
Google asume que la n puede ser tomada como ñ y también aproxima otros caracteres al que más se le parezca.


Consejos de: TensaiWeb

Nube de etiquetas en movimiento (solucionando problemas)

Hace unos días publicaba la forma de colocar una "Nube de etiquetas en movimiento" y, aunque la mayoría la ha podido instalar sin problemas, como bien dice Amanda de Blogger Buster, algunos han tenido problemas al intentarlo.
Según Amanda esta nueva forma de instalar el widget evitará la aparición del "widget en blanco" como le sucedió a muchas personas y será capaz de mostrar todas las etiquetas sin problema. He de confesar que en este caso no lo he comprobado personalmente, aunque a decir verdad, confió por completo en el buen hacer de Amanda...

En primer lugar iremos a "Editar Html" de nuestro panel y sin expandir las plantillas de artilugios localizaremos esta línea de código:

<b:section class='sidebar' id='sidebar' preferred='yes'>

Inmediatamente después de esta línea, pegaremos la siguiente sección de código:






<b:widget id='Label99' locked='false' title='Etiquetas' type='Label'>

<b:includable id='main'>

<b:if cond='data:title'>

<h2><data:title/></h2>

</b:if>

<div class='widget-content'>

&lt;object type="application/x-shockwave-flash" data="http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf" width="250" height="200" allowscriptaccess="always" &gt;

&lt;param name="movie" value="http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf" /&gt;

&lt;param name="bgcolor" value="#ffffff" /&gt;

&lt;param name="flashvars" value="tcolor=0x000000&amp;mode=tags&amp;distr=true&amp;tspeed=100&amp;tagcloud=&lt;tags&gt;

<b:loop values='data:labels' var='label'>

<a expr:dir='data:blog.languageDirection' expr:href='data:label.url' style='12'><data:label.name/></a>

</b:loop>

&lt;/tags&gt;" /&gt;

&lt;p&gt;Blogumulus by &lt;a href='http://www.roytanck.com/'&gt;Roy Tanck&lt;/a&gt; and &lt;a href='http://www.bloggerbuster.com'&gt;Amanda Fazani&lt;/a&gt;&lt;/p&gt;

&lt;/object&gt;

</div>

<b:include name='quickedit'/>

</b:includable>

</b:widget>



Hacemos ahora una vista previa de la plantilla. Si la instalación es satisfactoria, deberíamos ver la nube de etiquetas en movimiento en la columna lateral. Guardamos los cambios y en la parte de diseño movemos el widget al lugar que queramos mostrarlo en la sidebar.

Al igual que en la nube original, es posible personalizar algunos aspectos de la nube para adaptarla al estilo de nuestro blog.