Hacktime

Que seria de la web sin este blog

Archivos de la categoría ‘Trucos Difíciles’

Cambiar leyenda en comentarios

Publicado por yaju en Mayo 27, 2007

De nuevo estoy aquí y como les prometí que volvería con un nuevo hack. Básicamente este truco y gran utilidad su finalidad trata de poder cambiar la leyenda que indica si hay o no comentarios.

Generalmente por defecto de blogger en nuestro maldito blog aparece texto de los comentarios en inglés, como “1 Comment”. Otros de los problemas es cuando uno no se encuntra con comentarios indica “0 comentarios” o también “1 comentarios” eso realmente queda muy feo a nivel estético de nuestro blog y trataremos de cambiar el mismo ya sea para poner en “0 comentarios” –> “Comentar sobre el tema” o bien “No se encuentran comentarios”, y sirva de guía para el navegante al igual que cambiar ese feo “1 Comentarios” y localizarlo en –> “1 comentario” o “un comentario”; En este caso hablamos a nivel portada del blog.

Además, cuando estamos dentro de un post al finalizar también aparece el texto de “0 comentarios” por lo general. Mirá está imágen para “Localizarte” de que estoy hablado, obserá lo marcado.

Bien, para arreglar la leyenda que aparece dentro de nuestro post, nos localizaremos en: Plantilla–>Edición HTML –> Expandir Plantilla de Artilugios.

Y buscamos en la parte de nuestra plantilla donde dice lo siguiente y además seguimos la indicaciones del color azul.

<h4>
<b:if cond=’data:post.numComments == 1′>
1 Comment:
<b:else/>
<data:post.numComments/> Comments:
</b:if>
</h4>

De forma que nos quede así. Opcional: Si usted quiere que aparezca una leyenda cuando no haya comentarios que diga “comentar ya”, añada lo que está marcado en rojo.

<h4>
<b:if cond=’data:post.numComments == 0′>
Ningún comentario todavía
<b:else/>

<b:if cond=’data:post.numComments == 1′>
1 Comentario:
<b:else/>
<data:post.numComments/> Comentarios:
</b:if>
</h4>

Finalmente el código debe quedar así.

<h4>
<b:if cond=’data:post.numComments == 0′>
Ningún comentario todavía
<b:else/>
<b:if cond=’data:post.numComments == 1′>
1 Comentario:
<b:else/>
<data:post.numComments/> Comentarios:
</b:if>
</b:if>
</h4>

Bien a nivel portada, nos quedará muy bien la leyenda de los comentarios y con muy buena estética.


Bien, lo siguiente que cambiaremos es el feo “0 comentarios” y “1 comentarios” que aparece en la portada, o en los archivos, etiquetas, etc. Observá la siguiente imagen para localizarte.

Para eso nos localizaremos en está parte del código que generalmente aparece despues del
” post-footer-line post-footer-line-3 ” en mi caso sería:

<p class=’post-footer-line post-footer-line-3′><span class=’post-comment-link’>
<b:if cond=’data:blog.pageType != “item”‘>

<b:if cond=’data:post.allowComments’>
<a class=’comment-link’ expr:href=’data:post.addCommentUrl’ expr:onclick=’data:post.addCommentOnclick’><b:if cond=’data:post.numComments == 1′>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</span> <span class=’post-backlinks post-comment-link’>

Y trataremos de separar los >< dejándo el código para que pueda ser bien visto:

<p class=’post-footer-line post-footer-line-3′>
<span class=’post-comment-link’>
<b:if cond=’data:blog.pageType != “item”‘>
<b:if cond=’data:post.allowComments’>
<a class=’comment-link’ expr:href=’data:post.addCommentUrl’ expr:onclick=’data:post.addCommentOnclick’>
<b:if cond=’data:post.numComments == 1′>
1 <data:top.commentLabel/>
<b:else/>
<data:post.numComments/> <data:top.commentLabelPlural/>
</b:if>
</a>
</b:if>
</b:if>
</span>

Y Modificamos el código anterior por esté:
Nota: No íncluimos lo que aparece en color azul.

<span class=’post-comment-link’>
<b:if cond=’data:blog.pageType != “item”‘>
<b:if cond=’data:post.allowComments’>
<a class=’comment-link’ expr:href=’data:post.addCommentUrl’ expr:onclick=’data:post.addCommentOnclick’>
<b:if cond=’data:post.numComments == 0′>
Comentar
<b:else/>
<b:if cond=’data:post.numComments == 1′>
1 <data:top.commentLabel/>
<b:else/>
<data:post.numComments/> <data:top.commentLabelPlural/>
</b:if>
</b:if>
</a>
</b:if>
</b:if>
</span>

Espero que les haya servido y que mi explición no se les dificulte.

Saludos desde el BlogHermanoArg.com

Publicado en Trucos Difíciles | 2 Comentarios »

Mostrando Links como pestañas

Publicado por yaju en Mayo 15, 2007

Este es un pequeño, y poco complicado hack que permitira darle estilo a tus links, la utilidad de esto nos ayuda a tener varios links que podemos añadir y borrar de una manera rapida y sencilla utilizando el widget que nos proporciona blogger, pero con un mejor estilo, podemos tener los links de manera horizontal o vertical, exactamente como las categorias.

Ahora bien, los pasos a realizar son los siguientes (basados en pestañas verticales):

Nos dirigimos a:

Plantilla–Elementos de la pagina

Luego clickamos en “Añadir un nuevo elemento de pagina” y seguidamente escojemos el widget “Lista de Vinculos”

Blogger le otorga un identificador a cada “widget” que nosotros creamos, dependiendo del numero de widgets que tengamos en nuestro blog, por ejemplo si fuera la unica “Lista de Vinculos” que tengamos en nuestro blog, el codigo seria el siguiente:

<b:widget id=LinkList1‘ locked=’false’ title=’Links’ type=’LinkList’/>

Notese que el identificador corresponde a “LinkList1″ el cual nos indica que es la primera Lista de Vinculos creada. (paso ya antes mencionado)

Ahora escogemos el estilo de las pestañas (verticales):

En este caso tenemos 14 diseños el cual nos los brinda csspicstock.blogspot.com, yo escogi el Menu4:

/*- Menu 4————————— */

#menu4 {
width: 200px;
margin: 10px;
border-style: solid solid none solid;
border-color: #000;
border-size: 1px;
border-width: 1px;
}

#menu4 li a {
height: 32px;
voice-family: “\”}\”";
voice-family: inherit;
height: 24px;
text-decoration: none;
}

#menu4 li a:link, #menu4 li a:visited {
color: #CCC;
display: block;
background: url(http://photos1.blogger.com/blogg1600/menu4.gif);
padding: 8px 0 0 10px;
}

#menu4 li a:hover {
color: #FFF;
background: url(http://photos1.blogger.com/1600/menu4.gif) 0 -32px;
padding: 8px 0 0 10px;
}

El cual colocamos antes de ]]></b:skin>

Ahora si vamos a comenzar con lo mas complicado…

Nos dirigimos a:

Plantilla–Edicion de HTML–Expandir plantillas de artilugios

Buscamos el siguiente codigo:

<b:widget id=’LinkList1‘ locked=’false’ title=’Links’ type=’LinkList’>
<b:includable id=’main’>

<b:if cond=’data:title’><h2><data:title/></h2></b:if>
<div class=’widget-content’>
<ul>
<b:loop values=’data:links’ var=’link’>
<li><a expr:href=’data:link.target’><data:link.name/></a></li>
</b:loop>
</ul>
<b:include name=’quickedit’/>
</div>
</b:includable>
</b:widget>

Y lo reemplazamos con el siguiente:

<b:widget id=’LinkList1‘ locked=’false’ title=’Links’ type=’LinkList’>
<b:includable id=’main’>
<div id=’menu4‘>
<b:if cond=’data:title’><h2><data:title/></h2></b:if>
<div class=’widget-content’>
<ul>
<b:loop values=’data:links’ var=’link’>
<li><a expr:href=’data:link.target’><data:link.name/></a></li>
</b:loop>
</ul>
<b:include name=’quickedit’/>
</div>
</b:includable>
</b:widget>

Recordad que LinkList1 corresponde al identificador de la Lista de Vinculos (como antes mencionado)

Listo, Guardamos todos los cambios y ya tenemos nuestras links en forma de pestañas ;)

Publicado en Trucos Difíciles | Deja un Comentario »

Categorias en forma de pestañas (vertical)

Publicado por yaju en Mayo 11, 2007

Vamos a realizar este truco algo como el anterior para colocar etiquetas en forma de pestañas, solo que en la 3era parte en vez de colocar ese código colocamos el que nos brinda: csspicstock.blogspot.com (14 diseños); para el ejemplo escogí el menu 4:

/*- Menu 4————————— */

#menu4 {
width: 200px;
margin: 10px;
border-style: solid solid none solid;
border-color: #000;
border-size: 1px;
border-width: 1px;
}

#menu4 li a {
height: 32px;
voice-family: “\”}\”";
voice-family: inherit;
height: 24px;
text-decoration: none;
}

#menu4 li a:link, #menu4 li a:visited {
color: #CCC;
display: block;
background: url(http://photos1.blogger.com/blogg1600/menu4.gif);
padding: 8px 0 0 10px;
}

#menu4 li a:hover {
color: #FFF;
background: url(http://photos1.blogger.com/1600/menu4.gif) 0 -32px;
padding: 8px 0 0 10px;
}

Luego seguimos el paso 4 el cual se indica aqui,(donde se sustituye el código azul por el rojo), cambie tabsF por menu4 (que es el que le corresponde al código que copiamos en el paso 3). Si escogen el menu 1, 2, 10 , o 13( para el paso 3), en el último paso tienen que sustituir tabsF, por el menu que le corresponda.

Gracias a Icaro Nocturno

Publicado en Trucos Difíciles | Deja un Comentario »

Style Sheet Switcher

Publicado por yaju en Marzo 17, 2007

El cambia estilos por fin!! :) , primero le voy a contar mi historia con este efecto…. Primero y antes de comenzar este blog, habia visto este efecto en un blog, le pregunte a su creador como se hacia, pero no me lo quizo decir (eso me dio un poco de coraje) entonces decidi buscar por mi propia cuenta y entonces lo encontre! se llamaba cambiar estilos dinamicamente con cookie pero me fue muy dificil realizarlo, entonces decidi buscar otro metodo, y de repente hay estaba: en Dynamic Drive, con su truco de Style Sheet Switcher, pero no le entendi su ingles tan complicado, asi que decidi seguir buscando, y encontre el de PurpleMoggy’s, y claro que le entendi, con un ingles casero es muy facil :D , y ahora os paso a explicar (porque despues se aburren):

Primero a lo primero, necesitamos crear nuestros archivos CSS, damos CTRL+U y copiamos todo desde body hasta un poco antes de la etiqueta style, copiamos y lo pegamos en el bloc de notas, pero lo guardamos con la extension CSS, algo asi: tuarchivo.css, y lo subimos en algun sistema de alojamiento de archivos, en este caso yo he usado Google Pages, necesitamos crear al menos dos archivos CSS, uno para dejar el blog con el diseño original y el otro donde cambiamos el diseño, los colores del blog, las imagenes y todo…

Ahora nos dirigimos a:

Plantilla–Edicion de HTML

Antes del </head> colocamos el siguiente codigo:

<link href=’http://leonelhack.googlepages.com/Default.css‘ rel=’stylesheet’ type=’text/css’/>
<link href=’http://leonelhack.googlepages.com/res8×6.css‘ media=’screen’ rel=’alternate stylesheet’ title=’res8×6‘ type=’text/css’/>

<script src=’http://yggomelprup.googlepages.com/styleswitch.js’ type=’text/javascript’/>

En azul se encuentra la URL de los archivos que debeis cambiar por las vuestras, guardamos los cambios y listo.

Ahora nos dirigimos a:

Plantilla–Elementos de la pagina–Añadir un nuevo elemento de pagina–HTML/JavaScript

Y añadimos lo siguiente:

<a href=”javascript:chooseStyle(‘none’, 365)”>1024X768</a>
<a href=”javascript:chooseStyle(‘res8×6‘, 365)”>800X600</a>

Donde res8×6 tiene que coincidir con title=’res8×6‘ del codigo anterior. El resultado quedaria la opcion de elegir la resolucion de del blog.

Muchos otros blogueros han realizado este hack y con mejor explicacion que la mia :( asi que si no me entendieron visitad los siguientes blogs:

Blog and Roll: Black or White
Ayuda&Kaos: Elegir el tema de la plantilla (Swicht Theme)
Vagabundia: Blogger con ancho variable
PurpleMoggy: Plantillas Prediseñadas con el Swicht Theme
Beautiful Beta: Style Switcher

Yo he decidido cambiar los aburrido links por algo de CSS para cambiar la resolucion del blog, claro que el CSS lo saque de Vagabundia espero no te moleste JMiur por copiartelo. Ahora si no he colocado algun blog, si no he respondido algun mail en mas de una semana, por favor enviarme otro con un insulto diciendome lo que piensas, espero que te haya servido Gem@ porque esto es lo que tanto me pedias, y ya lo habian realizado muchos otros blogs ;)

Publicado en Trucos Difíciles | 7 Comentarios »

Etiquetas recargadas con ajax

Publicado por yaju en Marzo 5, 2007

Hemos vuelto, y mas recargado que nunca (que mentiroso), despues de unos dias fuera de esto, he vuelto, por consiguiente he dejado de responder algunos mails y comentarios, prometo responderlos lo mas pronto posible. Ahora pasemos al hack…

Como pueden ver en la barra lateral (sidebar) izquierda se encuentran las etiquetas, si damos click en alguna de ella, no recargara la pagina sino parte de ella, solamente las etiquetas, mostrando los ultimos en primer plano, y los demas seguidos por un link hacia los demas(tecnologia AJAX), este hack nos sirve para mejorar la interaccion del blog con el usuario, el post original lo podemos encontrar aqui.

1. Click en Plantilla–Edicion de HTML–Marcamos la casilla expandir la plantilla de artilugios
Buscamos el </head> y antes de este colocamos el codigo siguiente:

<style type=’text/css’>
#indicator {
position:fixed;
z-index:1000;
padding:15px 0;
top:40%;
background-color:#FFFFFF;
border:1px solid #000000;
width:176px;
left:50%;
margin-left:-88px;
text-align:center;
}
#search-result {
border:1px solid #AAAAAA;
padding:10px;
padding-bottom:30px;
font-size:85%;
}
.search-result-meta {
background:#EFEFEF;
padding:2px;
}
.search-result-meta img {
border-width:0;
vertical-align:
text-bottom;
}
.search-title{
font-size:1em;
padding-bottom:3px;
font-weight:bold;
text-align:left;
text-decoration:underline;
}
.search-cat{
display:block;
padding:3px;
font-size:1em;
margin-top:5px;
margin-bottom:5px;
border-bottom:1px solid #C0C0C0;
font-weight:bold;
}
.search-close {
color:silver;
float:right;
border:1px solid #F5F5F5;
margin-top:10px;cursor:pointer;
}
.search-result-nav {
font-size:1.4em;
font-weight:bold;
padding:5px 0pt;
text-align:center;
}
</style>

<script src=’http://bloggerhacked.googlepages.com/prototype.js’ type=’text/javascript’/>
<script type=’text/javascript’>
//<![CDATA[
// Parametros Personalizables por el Usuario
// ----------------------------
// maxresults - Numero de resultado de mostrar por pagina
// navFlag - Poner Navegacion ON o OFF. Dar 1 para ON y 0 para OFF.
// feedLabel - Text to show for the label feed link.
// catLabel - Etiqueta para categorias.
// closeLabel - Etiqueta para boton Cerrar. Tu puedes usar hypertexto tambien.
var maxresults = 5;
var navFlag = 1; //ON por defecto
var feedLabel = "Suscribir a";
var catLabel = "Categoria:";
var closeLabel = "Click para cerrar";
//]]>
</script>
<script src=’http://bloggerhacked.googlepages.com/ajaxlabels.js’ type=’text/javascript’/>

Si tu conoces de CSS puedes modificar el widget para que luzca bien.

2. Buscar esta linea de codigo en tu HTML:

<b:loop values=’data:post.labels’ var=’label’>
<a expr:href=’data:label.url’ rel=’tag’><data:label.name/></a>

Y reemplazar el codigo por este:

<b:loop values=’data:post.labels’ var=’label’>
<a href=’#sres’ expr:onclick=’”javascript:getCat(\”" + data:label.name + “\”,null)”‘ rel=’tag’><data:label.name/></a>

3. Opcional. Si tu ya tienes las etiquetas en tu plantilla:

Buscar este codigo:

<b:if cond=’data:blog.url == data:label.url’>
<data:label.name/>
<b:else/>
<a href=’data:label.url’><data:label.name/></a>
</b:if>

Reemplazar por este:

<b:if cond=’data:blog.url == data:label.url’>
<data:label.name/>
<b:else/>
<a href=’#sres’ expr:onclick=’”javascript:getCat(\”" + data:label.name + “\”,null)”‘ ><data:label.name/></a>
</b:if>

4. Guarda tu plantilla.

5. Añade el siguiente Widget a tu blog

Guardamos el Widget. Disfrutenlo, espero os guste :)

Publicado en Trucos Difíciles | 9 Comentarios »

Añadiendo iconos de navegacion para el nuevo blogger

Publicado por yaju en Febrero 18, 2007

O bien el titulo deberia ser, ¿Como cambiar las palabras “Entradas antiguas” por una imagen?, o quizas, ¿como hacerlo por una palabra mas bonita?, pues bien basandome en el truco de Hoctro, lo he conseguido…

<b:includable id=’nextprev’>
<div class=’blog-pager’ id=’blog-pager’>
<b:if cond=’data:newerPageUrl’>
<span id=’blog-pager-newer-link’>
<a class=’blog-pager-newer-link’ expr:href=’data:newerPageUrl’ expr:id=’data:widget.instanceId + “_blog-pager-newer-link”‘ expr:title=’data:newerPageTitle’><data:newerPageTitle/></a>
</span>
</b:if>

<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’><data:olderPageTitle/></a>
</span>
</b:if>

<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>
</div>
<div class=’clear’/>
</b:includable>

Y si lo que quieres es cambiarlo por una imagen reemplaza el codigo por este:

<b:includable id=’nextprev’>
<div id=’blog-pager’>
<b:if cond=’data:newerPageUrl’>
<a expr:href=’data:newerPageUrl’ expr:title=’data:newerPageTitle’ id=’blog-pager-newer-link’>
<img src=’http://photos1.blogger.com/blogger2/3880/707811929476148/1600/left.gif‘/></a>
</b:if>

<b:if cond=’data:olderPageUrl’>
<a expr:href=’data:olderPageUrl’ expr:title=’data:olderPageTitle’ id=’blog-pager-older-link’>
<img src=’http://photos1.blogger.com/blogger2/3880/7078119
29476148/1600/right.gif‘/></a>
</b:if>
<a class=’home-link’ expr:href=’data:blog.homepageUrl’>
<img src=’http://photos1.blogger.com/blogger2/3880/707811929476148/1600/home.gif‘/></a>
</div>
<div class=’clear’/>
</b:includable>

Guardamos cambios y nos deberia quedar asi:

Tambien podemos cambiar las imagenes recordando siempre que las imagenes deben ir en este orden: 1 Izquierda 2 Derecha 3 Inicio(Central)

Ahora si queremos cambiarlo por palabras diferentes reemplazamos el codigo por este:

<b:includable id=’nextprev’>
<div id=’blog-pager’>
<b:if cond=’data:newerPageUrl’>

<a expr:href=’data:newerPageUrl’ expr:title=’data:newerPageTitle’ id=’blog-pager-newer-link’>Hacia las mas recientes</a>
</b:if>

<b:if cond=’data:olderPageUrl’>
<a expr:href=’data:olderPageUrl’ expr:title=’data:olderPageTitle’ id=’blog-pager-older-link’>Hacia las mas antiguas</a>
</b:if>
<a class=’home-link’ expr:href=’data:blog.homepageUrl’>Pagina de Inicio</a>
</div>
<div class=’clear’/>
</b:includable>

Yo por mi parte he decido personalizar mis iconos de navegacion… como pueden observar al final de la pagina. Que disfruten…

Publicado en Trucos Difíciles | 7 Comentarios »

Comentarios con foto del Autor

Publicado por yaju en Febrero 4, 2007

Despues de algunos post de nuestro amigo Sanshiro, es hora de que vuelva a la accion, ahora este hack lo podran encontrar implementado este blog, y para poder visualizarlo deberan hacer click en el titulo del post. Ahora bien el creador del hack es Purple Moggy, que ahora paso a explicar:

Cuando hacemos hacemos click en el titulo del post se nos dirige a una pagina donde se encuentra el post y los comentarios en conjunto, pero los comentarios se nos muestran un poco simples, ahora al aplicar este hack aparecera la foto, o imagen del autor del comentario.

¿Como aplicarlo?

Primero dirigirse a:

Plantilla–Edicion de HTML–Expandir plantilla de artilugios

Ahora buscamos el siguiente codigo y añadimos el codigo que se encuentra resaltado con rojo.

<dl id=’comments-block’>
<b:loop values=’data:post.comments’ var=’comment’>
<dt class=’comment-author’ expr:id=’”comment-” + data:comment.id’>
<div class=’commentphoto’ style=’float:right;’/>
<a expr:name=’”comment-” + data:comment.id’/>
<b:if cond=’data:comment.authorUrl’>
<a expr:href=’data:comment.authorUrl’ rel=’nofollow’><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<dd class=’comment-body’>
<b:if cond=’data:comment.isDeleted’>
<span class=’deleted-comment’><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
<dd class=’comment-footer’>
<span class=’comment-timestamp’>
<a expr:href=’”#comment-” + data:comment.id’ title=’comment permalink’>
<data:comment.timestamp/>
</a>
<b:include data=’comment’ name=’commentDeleteIcon’/>
</span>
</dd>
<div style=’clear:both;’/>
</b:loop>
</dl>

Tu puedes cambiar el ‘right’ a ‘left’ dependiendo de el lugar donde quieras que aparesca la imagen.

Ahora nos dirigimos hasta el </head> y antes de éste añadimos el siguiente codigo:

<script src=’http://leonelhack.googlepages.com/blogger_comment_photos.js’ type=’text/javascript’></script>
<script type=’text/javascript’>
//<![CDATA[
BloggerProfiles.noimage = 'http://img139.imageshack.us/img139/1011/defaultavatarad7.png'
BloggerProfiles.imageWidth = 60;
BloggerProfiles.imageHeight = 75;
addLoadEvent(function(){showCommentPhotos('commentphoto','comment-author', 1);});
//]]></script>

Guardamos los cambios y listo, ahora podras ver los cambios haciendo click en el titulo de algun post de tu blog. Espero os sirva.

Nota: El script demora unos segundos en cargar por favor ser paciente.

Publicado en Trucos Difíciles | 19 Comentarios »

Vista de posts expandibles en las etiquetas

Publicado por yaju en Enero 13, 2007

Es otro mas de los hack secretos que tengo implementado en mi blog, el siguiente hack nos ayuda a mejorar la experiencia del usuario. La idea es mostrar solo el titulo del post pero tambien provisto de un [+/-] para poder expandir y leer el post.



Checa una prueba de la vista de posts expandibles en esta “categoria
¿Deseas tener los post expandibles en tu blog? Aqui vamos.

Nos dirigimos a:

Plantilla–Edición de HTML–Expandir plantilla de artilugios

Buscamos este código </head> y colocamos el siguiente codigo siguiente:

<script type=’text/javascript’
src=’http://www.anniyalogam.com/widgets/hackosphere.js’ ></script>

Ahora tu necesitas buscar el codigo que se encuentra con negro y añadir las partes que se sobresaltan con rojo, como se muestra aquí.

Guardamos cambios y listo, ¿Te gusta?, que tengan un buen fin de semana :P

Publicado en Trucos Difíciles | 26 Comentarios »

"Leer mas" en Blogger Beta

Publicado por yaju en Diciembre 6, 2006

Este truco no es original mio si no de Hackosphere, el nos enseña el truco de “Leer mas”.

¿En que consiste?

Si tenemos un post muy largo o queremos atraer al lector para que siga leyendo podemos usar este truco.

Ahora vamos a realizarlo

Realizando…

1. Nos dirigimos a:
Plantilla–Edicion de HTML–Marcamos la casilla “Expandir plantilla de artilugios”

2. Buscamos </head> y debajo colocamos el siguiente codigo:

<script type=’text/javascript’ src=

‘http://www.anniyalogam.com/widgets/hackosphere.js’ />

3. Buscamos “post-header-line” para hallar la porcion de codigo en tu template y añadimos lo que esta en rojo, como se muestra:

<b:includable id=’post’ var=’post’>
<div class=’post uncustomized-post-template’ expr:id=’”post-” + data:post.id’>
<a expr:name=’data:post.id’/>
<b:if cond=’data:post.title’>
<h3 class=’post-title’>
<b:if cond=’data:post.url’>
<a expr:href=’data:post.url’><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>

<div class=’post-header-line-1′/>

<div class=’post-body’>

<b:if cond=’data:blog.pageType == “item”‘>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>

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

<a expr:href=’data:post.url’>Leer Mas……</a>
</b:if>

<div style=’clear: both;’/> <!– clear for photos floats –>
</div>

3. Click en Guardar Plantilla.

4. Nos dirigimos a:

Opciones–Formato, en el fondo puedes hallar la caja de texto que dice “Plantilla de Entrada”, Copiar y Pegar estas lineas de codigo:

Escribe tu resumen aqui
<span class=”fullpost”>
Escribe el resto del post aqui
</span>

5. Hacemos click en “Guardar Valores”

Nota: Gracias a Hackosphere por el “hack
Actualizacion: gracias a sus comentarios he mejorado el codigo. Saludos

Publicado en Trucos Difíciles | 15 Comentarios »

Lightbox en Blogger Beta

Publicado por yaju en Noviembre 18, 2006

Fallido, disculpe las molestias muy pronto estaremos reemplazando este hack :)

Publicado en Trucos Difíciles | 18 Comentarios »