Blogger Adictos: Trucos

Mostrando las entradas con la etiqueta Trucos. Mostrar todas las entradas

Fecha estilo Wordpress.

Publicadas por Andres

Hola, al fin me he acordado de este truco, me lo tenia guardado, pero se me olvido y despues de unos meses me acorde haci que comenzemos:

1.- Nos dirigimos a Opciones-Formato y cambiamos la fecha por la que esta en la penultima opcion.
2.- Ahora en el HTML expandimos los artilugios y pegamos el siguiente codigo antes del /head:


<script>
function date_replace(d){
var da = d.split(' ');
day = "<span class='theDate'>"+da[0]+"</span>";
mon = "<span class='theMonth'>"+da[1].slice(0,3)+"</span>";
year = "<span class='theYear'>"+da[2]+"</span>";
document.write(day+mon+year);
}
</script>

3.- Ahora expandidos los artilugios buscamos el siguiente codigo:


<data:post.dateHeader/>

4.- Y reemplazamos el codigo anterior por este:


<div id='post-date'>
<script>date_replace('<data:post.dateHeader/>');</script>
</div>

5.- Si sos perezoso y no te quieres molestar en crear un estilo para la fecha usa este:


div#post-date {
display: block;
float:left; /* set this to right if you want it go to the right */
padding: 1em; /* to keep the text away from the edges */
background-color: #555555; /* you can change this to hold a picture, will make it look nicer */
border: 3px double gray; /* a border to make it look nice */
}

div#post-date span.theDate {
display: block; /* to put this in a different line */
font-size: 3em; /* to make the date stand out */
background-color: transparent; /* to let the background show through */
color: white;
}

div#post-date span.theMonth {
display: block;
font-size: 1em; /* smaller compared to the date */
background-color: transparent;
color: white;
}

div#post-date span.theYear {
display: block;
font-size: 1em; /* smaller compared to the date */
background-color: transparent;
color: white;
}

6.- Disfruta el truco XD.

Buscador Interno (Actualizacion)

Publicadas por Andres

Hola, volviendo a lo interesante y no cosas de principiante aprenderemos a añadir un buscador interno es facil solo sigan los siguientes pasos:

1.- Añdimos un widget Html/Javascript con el siguiente codigo:


<center><form id="searchthis" action="http://blogger-adictos.blogspot.com/search" style="display:inline;" method="get">
<input id="b-query" maxlength="255" name="q" size="15" type="text"/>
<input id="b-searchbtn" value="Search" class="blue" type="submit"/>
</form></center>

2.- Y si quieres ponerle una imagen que remplaze el boton buscar:


<form action='/search' id='searchthis' method='get' style='display:inline;'>
<input id='search-box' name='q' onblur='if (this.value == "") this.value = "Buscar en el Blog";' onfocus='if (this.value == "Buscar en el Blog") this.value = "";' type='text' value='Buscar en el Blog'/>
<input class="submit" type="submit" value="Buscar" />
</form>

3.- Buscador con texto en cuadro de texto; Incluye texto dentro del cuadro donde se coloca la palabra a buscar y el botón buscar:


<form action='/search' id='searchthis' method='get' style='display:inline;'>
<input id='search-box' name='q' onblur='if (this.value == "") this.value = "Buscar en el Blog";' onfocus='if (this.value == "Buscar en el Blog") this.value = "";' type='text' value='Buscar en el Blog'/>
<input class="submit" type="submit" value="Buscar" />
</form>

4.- Y tambien Una imagen que reemplaze el boton buscar y una imagen dentro del textarea:


<form action='/search' id='searchthis' method='get' style='display:inline;'>
<input id='search-box' name='q' onblur='if (this.value == "") this.value = "Buscar en el Blog";' onfocus='if (this.value == "Buscar en el Blog") this.value = "";' type='text' value='Buscar en el Blog'/>
<input alt='Buscar' border='0' src='http://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Crystal_Clear_app_xmag.png/32px-Crystal_Clear_app_xmag.png' type='image'/>
</form>

Y listo :) .

Poner imagen de fondo en el HTML.

Publicadas por Andres

Para poner una imagen de fondo en el html solo tienes que seguir los siguientes pasos:



1.- Nos dirigimos a vuestro HTML y buscamos el siguiente codigo:

code {

2.- Ahora reemplazamos el codigo anterior por este:


code {
display: block; /* fixes a strange ie margin bug */
font-family: Courier New;
font-size: 9pt;
overflow:auto;
background: #f0f0f0 url(http://chenkaie.googlepages.com/Code_BG.gif) left top repeat-y;
border: 1px solid #ccc;
padding: 5px 5px 5px 20px;
max-height:200px;
line-height: 1.2em;
margin: 5px 5px 0 15px;
}

Listo :) .

Poner iconos en las entradas.

Publicadas por Andres

Hola, este truco sirve para poner imagenes en las entradas de los blogs.

Post:

Para la fecha:


.date-header {
padding-left: 20px;
padding-top: 5px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgG3DgoXz7U2Q1lZvYceHe329nWRPSPzTPJg-m0mVZX2DGzoJqOpXcdhXW7b8sRS7DnMwwfWZ4gncHpY8_4bUcavtVdjkOXtIGGM9Unt1B8JpU4o4QgZ-t75KEXGoFdAQnZ9HG2ePuqZhg/s1600/time.png) center left no-repeat;
}

Para las etiquetas:


.post-labels {
padding-left: 20px;
padding-top: 5px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ2A-GTTDbKMs-b0UeRxUwbYgll09ps-QGwXnz8vpCtRrcw44Pv_Stbkit02LkqDi-hizVGfRu9mes2-SzrSeWU0Juu6uB6l9nS0so-SUH5xAs_f0mlVS7Ty0QcXF745qxJ91Eo3hsMrg/s1600/etiqueta_naranja.gif) center left no-repeat;
}

Para el autor:


.post-author {
padding-left: 20px;
padding-top: 5px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHJcnV91uBspsCPPl0OQSGXDKDicpL4mrx6rBfJM-TPqUopfdIt_bhEhWNgpk_svNOx2BxPnmzLbDzODMNrIO4QbN5eKQ4WArasrHgAKNZHt1Ewz_hrp5LM2h_g3j5Ke_ZXpcqLz9ClrY/s1600/autor.gif) center left no-repeat;
}

Para el titulo del post:


.post-title {
padding-left: 20px;
padding-top: 5px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTRC8tAcR2R9tKkYhAJQTFeM9_1TPXhEzacTEa0Ba5DYH0yr6BZ9PaMvSsDxe59VQzJQelRGIRilcUymIM4n1WOq5REJRrr3FoZ734cEVhv-YSDZgeOGl0Pn7xVrzjqGY30eB7JqrmZAI/s1600/icono-documento.gif) center left no-repeat;
}

Para la fecha de los comentarios:


.comment-timestamp {
padding-left: 20px;
padding-top: 5px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSznBdn57Ao7FZJglGcFd78p-vmcmzFLQXAGQUp1PENwVECOdnNHtDkP9M8RBM3p-Y1y_aERIKGMkAaDPFopSA1F4IEtys5GFrug-So6U6pmhmCmiHf3HgP3-yebfeH38B3mxASH5bksI/s1600/icono-calendario.gif) center left no-repeat;
}

Para los comentarios:


.comment-link {
padding-left: 20px;
padding-top: 5px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPpgKria5KVeJJ7AL2he0l1mqFLvZeFVgmNQ3go7hllQnIEdS-rHqCxEvFYW23iZ3eksBFCx2yFO9eB0koAZ6Romv2yBdPRcB8qFVXKAsbpQerHh62Z2VHZviOrlVlySYK5fRoU6qAn78/s1600/icono-comentarios.gif) center left no-repeat;
}

Sidebar:

Para los links:


#LinkList1 ul, #LinkList2 ul {
list-style-type:none;
}

#LinkList1 li, #LinkList2 li {
padding-left: 20px;
padding-top: 5px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgvzEz40s4hLE1zBhHiPRP5H_-OWW25uuaS17Hp2N3mc6e68WvopBjB_doxMH4OjH15jJpdLiU07pZUxkC9o1x8TN0NY2Tjow4DxhcUa5gWc1hfi5SzEtmH4msK7pV0J1RPnODaiogQ9w/s1600/icono-links.gif) center left no-repeat;
}

Para los blacklinks:


#backlinks-container h4 {
padding-left: 20px;
padding-top: 5px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3GCP8inRWSM1NIOzOkNuLSNVd7asbUxu5xw0QqF3ZQ5lJATUM2Le5ufvtx4oDF-9rQFSxEfiz2cFP8DOUYhvd-w_QHwSVAnKE-nlBABfkJK1fO6vXOuQDMkpBOcNyP-hZBfztXCwmZyc/s1600/icono-backlinks.gif) center left no-repeat;
}

Para las etiquetas:


#Label1 ul, #Label2 ul {
list-style-type:none;
}

#Label1 li, #Label2 li {
padding-left: 20px;
padding-top: 5px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLJGI65KlhRgSCdrkT_YnRqbZp5HzTWARpeQ6KbHi476onf7GdQxjvQ0vg8jhanU5DcFpDtUTDTAD3X6ccElsN9RQCOr4BnQNh-4nK8_aWUgSty8AUXrAiD1Gpcb1xJV1Slj_kV-kKYRg/s1600/icono-etiqueta-azul.gif) center left no-repeat;
}

Footer:

Para el feed:


.feed-links {
padding-left: 20px;
padding-top: 5px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqYDINTl_J-RDEwm5kXpohQbTROsFMs-nzbWMjrcJfrGoGSXBfyRjTE-fQKrZWtp4PW2n9OZThIOusqVzsGHbXRb3O3B7wF-jJ-wbCU5ZoDJgGAP4nKp9ncvjGs5vDlh185ZO0POlAnQY/s1600/icono-feed.gif) center left no-repeat;
}

Listo :) .

Añadir Redes Sociales al Blog (Actualizacion).

Publicadas por Andres

Hola, muchos se preguntan como añadir las redes sociales creadas por beautifulbeta al blog, ya que en beautifulbeta no lo explican solo el primer paso, bueno esto es muy facil pasamos a explicar:

1.- En nuestro HTML antes del /head pegamos el siguiente codigo:


<script src='http://andresblogs.googlepages.com/beautifulbeta.js' type='text/javascript'/>

2.- Ahora expandimos los artilugios y buscamos la siguiente linea:


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


3.- Y reemplazamos esta linea por el siguiente codigo, solo esa linea por el siguiente codigo:

<p class='post-footer-line post-footer-line-3'>
<span class='bookmark'>
<table align='left' border='0' cellpadding='0' width='100%'>
<tr>
<td style='vertical-align:middle' valign='middle' width='30%'>
<div expr:id='"sbtxt"+data:post.id'>Bookmark this post:</div><script type='text/javascript'>showsbtext(&quot;sbtxt&quot; + "<data:post.id/>&quot;,0)</script>
</td>
<td>
<a expr:href='"http://digg.com/submit?phase=3&amp;url=" + data:post.url' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",1);"' target='_blank'><img alt='DiggIt!' src='http://home.planet.nl/~hansoosting/images/icon_sb_dig.gif'/></a> <a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&amp;title=" + data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",2);"' target='_blank'><img alt='Del.icio.us' src='http://home.planet.nl/~hansoosting/images/icon_sb_del.gif'/></a> <a expr:href='"http://www.blinklist.com/index.php?Action=Blink/addblink.php&amp;Description=&amp;Url=" + data:post.url + "&amp;Title=" + data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",3);"' target='_blank'><img alt='Blinklist' src='http://home.planet.nl/~hansoosting/images/icon_sb_bli.gif'/></a> <a expr:href='"http://myweb2.search.yahoo.com/myresults/bookmarklet?u=" + data:post.url + "&amp;=" + data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",4);"' target='_blank'><img alt='Yahoo' src='http://home.planet.nl/~hansoosting/images/icon_sb_yah.gif'/></a> <a expr:href='"http://www.furl.net/storeIt.jsp?u=" + data:post.url + "&amp;t=" + data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",8);"' target='_blank'><img alt='Furl' src='http://home.planet.nl/~hansoosting/images/icon_sb_fur.gif'/></a> <a expr:href='"http://www.technorati.com/cosmos/search.html?url=" + data:post.url' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",9);"' target='_blank'><img alt='Technorati' src='http://home.planet.nl/~hansoosting/images/icon_sb_tec.gif'/></a> <a expr:href='"http://meneame.net/login.php?return=/submit.phphref=" + data:post.url + "&amp;title=" + data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",10);"' target='_blank'><img alt='Meneame' src='http://andresblogs.googlepages.com/icon_sb_men.gif'/></a> <a expr:href='"http://www.google.com/bookmarks/mark?op=add&amp;bkmk=" + data:post.url + "&amp;title="+data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",19);"' target='_blank'><img alt='Google' src='http://home.planet.nl/~hansoosting/images/icon_sb_goo.gif'/></a>
</td>
</tr>
</table>
</span>
</p>
</div>

Y Listo :) .
Nota: No compatible con algunas plantillas

Menu que baja con el scroll.

Publicadas por Andres

Hola, pienso que todos ven el menu al lado de la sidebar que baja con el scroll, bueno, los que no veanlo, pasare a explicar el truco ahora :D :

1.- Nos dirigimos a nuestro HTML y antes del cierre b:skin pegamos el siguiente codigo:



#SmallIcon{
position:fixed;
text-align:left;
margin-top:100px;
margin-left:-28px;
}

* html #SmallIcon{ /*IE only*/
position:absolute;
}

#SmallIcon a img{
opacity:1;
-moz-opacity:1;
filter:alpha(Opacity=100);
}

#SmallIcon a:hover img{
opacity:0.8;
-moz-opacity:0.8;
filter:alpha(Opacity=80);
position:relative;top:0px;left:2px;
}

* html #SmallIcon a img{
filter:alpha(Opacity=100);
}

#SmallIcon img{
margin-bottom: -5px;
}

* html .SmallIcon{
margin-bottom: -3px;
}

2.- Ahora, en elementos de pagina añadimos un artilugio, un html con el siguiente codigo:


<div id="SmallIcon">
<span>
<a style="border:0;" href="http://blogger-adictos.blogspot.com" rel="external" title="Volver al Inicio"><img alt="Home" src="http://chenkaie.googlepages.com/HomeIcon_BG_G.png" class="SmallIcon"/></a>
<br/>
<a style="border:0;" href="http://www2.blogger.com/profile/07614536744753096596" rel="external" title="Sobre Mi"><img alt="Home" src="http://chenkaie.googlepages.com/ArchiveIcon_BG_G.png" class="SmallIcon"/></a>
<br/>
<a style="border:0;" href="mailto:andresblogs@gmail.com" title="Contactame"><img alt="Contactar al Autor" src="http://chenkaie.googlepages.com/EmailIcon_BG_G.png" class="SmallIcon"/></a>

<br/>
<a style="border:0;" href="http://http://blogger-adictos.blogspot.com/feeds/posts/default" title="Subscribete a Blogger Adictos"><img alt="Subscribe to Blogging Secret feed" src="http://andresblogs.googlepages.com/FeedIcon_BG_Gcopy.png" class="SmallIcon"/></a>
<br/>
<a style="border:0;" href="#" onclick="new effect.scrollto(header-wrapper,{offset: 0})" title="Ir Arriba"><img top="" alt="Back to " src="http://louislim2.googlepages.com/topbutt2.PNG" class="SmallIcon"/></a>
</span>
</div>

Bueno listo, creo que el widget es mas grande que el estilo :D .

Post expandibles para el Blog.

Publicadas por Andres

Hola, algunos de ustedes, se habran perguntado como hacer este truco de post expandibles pues es facil solo sigan los siguientes pasos:

1.- En nuestro HTML antes del /head pegamos el siguiente codigo:


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

2.- Ahora expandimos los artilugios y buscamos el siguiente codigo:


<b:includable id='main' var='top'>
<!-- posts -->
<div id='blog-posts'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>

3.- Encima de este codigo pegamos el siguiente:


<b:includable id='PeekABooPost' var='post'>
<div class='post uncustomized-post-template'>
<table><tr>
<td width='40px'>
<a href='javascript:void(0)' title='Expand/collapse this post' style='text-decoration:none' expr:onclick='"javascript:toggleIt(\"" + data:post.id + "\");"'>[+/-]</a>
</td>
<td>
<h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3>
</td>
</tr></table>
<div class='post-body' expr:id='data:post.id' style='display:none'>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
</div>
</b:includable>

4.- Ahora buscamos el siguiente codigo:


<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.allowComments'>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
</b:loop>
</div>

5.- Y encima de este pegamos el siguiente:


<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<b:include data='post' name='PeekABooPost'/>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>

<b:include data='post' name='post'/>

</b:if>

Y listo :P .

Iconos de Navegacion para el Blog.

Publicadas por Andres

Hola, este truco sirve para reemplazar: Entardas Antiguas - Pagina Principal - Entradas Siguientes por unos iconos de navegacion muy cheveres, asi que a trabajar:

1.- En tu HTML expamdimos los artilugios y buscamos el siguiente codigo:

<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>

2.- Lo reemplazamos por el siguiente:

<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://andresblogs.googlepages.com/Left.png'/>
</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://andresblogs.googlepages.com/Right.png'/>
</a>
</b:if>

<a class='home-link' expr:href='data:blog.homepageUrl'>
<img src='http://andresblogs.googlepages.com/Home.png'/>
</a>
</div>
<div class='clear'/>
</b:includable>

Y listo :) .

Categorias recargadas con ajax para el Blog.

Publicadas por Andres

Hola, si dan click en mis etiquetas podran ver que se abre un cudro donde dice cargando y al lado una imagen, luego se abre un cuadro con los ultimos post, bueno si te gusta aqui el truco:

1.- En tu HTML pega el siguiente codigo antes del /head:

<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'/>

2.- Buscar la siguiente 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>

3.- Y remplazalo por el siguiente:

<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>

4.- Opcional. Si tu ya tienes las etiquetas en tu plantilla buscar el siguiente 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>

5.- Y reemplazarlo 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>

6.- Ahora en elementos de la pagina, añade un widget y luego un HTML/Javascript y pega el siguiente codigo:

<br/><div id="indicator" style="display:none"><img alt="Indicator" src="http://bloggerhacked.googlepages.com/indicator.gif"/> Cargando...</div><br/><div id="search-result" style="display:none"><a name="sres"></a><br/><div class="search-close" onclick="javascript:Element.hide('search-result')"><br/><script type="text/javascript">document.write(closeLabel);</script></div><br/><div id="show-result"></div><br/><div class="search-close" onclick="javascript:Element.hide('search-result')"><br/><script type="text/javascript">document.write(closeLabel);</script></div></div>

Y listo disfrutenlas :) .

Leer mas para el Blog.

Publicadas por Andres

Hola, les traigo este truco ya que veo que muchas personas lo implementan en sus blogs y pienso que a ustedes tambien les gustaria, bueno comenzemos:

1.- En nuestro HTML pegar el siguiente codigo antes del /head:

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

2.- Buscamos la siguiente linea:

<div class='post-body'>

3.- Y la reemplazamos por la siguiente:

<div class='post-body' expr:id='"post-" + data:post.id'>
<b:if cond='data:blog.pageType == "item"'>

4.- Ahora buscamos el siguiente codigo:

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

5.- Y debajo de este pegamos el siguiente:

<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>Read More...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>Summary only...</a></p>
</span>
<script type='text/javascript'>checkFull("post-" + "<data:post.id/>")</script>
</b:if>

Y listo :) .

Boton ir arriba (Actualizacion)

Publicadas por Andres

Hola, en mi pagina hay un boton que se mueve con el scrool y que dice ir arriba, al darle click se dirige hacia arriba de la pagina, pienso que querrian esl truco asi que aqui va:

1.- Antes del primer body de tu codigo html pegar este codigo:

<a href="aqui el enlace"><img src="aquí la url de la imagen " alt="ir arriba" border="0" style="position:fixed; bottom:0; right:0;" /></a>

Y listo que facil no?? :) .

Nota: No compatible con ie 6 solo 7

Comentarios con imagen del autor para el Blog.

Publicadas por Andres

Hola, hoy traigo un truco muy bueno y cool para vuestros comentarios, se trata de cambiar el estilo de los comentarios de blogger por uno mejor, ahora paso a explicar el truco:

1.- Nos dirigimos al HTML y expandimos los artilugios, ahorabuscamos el siguiente codigo:

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>

2.- Debajo de este codigo añadimos el siguiente:

<div class='commentphoto' style='float:right;'/>

3.- Ahora un poco mas abajo ubicamos el siguiente codigo:

<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>

4.- Y abajo de este pegamos este otro:

<div style='clear:both;'/>

5.- Listo, ajora nos ubicamos antes del /head y antes de este pegamos 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>

Listo disfrutenlo :) .

Comentarios mas coloridos para el Blog

Publicadas por Andres

Hola, hoy traigo un truco muy bueno y cool para vuestros comentarios, se trata de cambiar el estilo de los comentarios de blogger por uno mejor, ahora paso a explicar el truco:

1.- En tu HTML busca el siguiente codigo:

/* Comments ----------------------------------------------- */
#comments {
margin:0;
}
#comments h4 {
margin:0 0 10px;
border-top:1px dotted $borderColor;
padding-top:.5em;
line-height: 1.4em;
font: bold 110% Georgia,Serif;
color:#333;
}
#comments-block {
line-height:1.6em;
}
.comment-author {
background:url("http://www.blogblog.com/dots/icon_comment.gif") no-repeat 2px .35em; margin:.5em 0 0;
padding:0 0 0 20px;
font-weight:bold;
}
.comment-body {
margin:0; padding:0 0 0 20px;
}
.comment-body p {
margin:0 0 .5em;
}
.comment-body-author {
margin:0; padding:0px 0px 0px 20px;
}
.comment-body-author p {
font-size:100%; margin:0 0 .2em 0;
color:#000000; text-decoration:bold;
}
.comment-footer {
margin:0 0 .5em;
padding:0 0 .75em 20px;
color:#996;
}
.comment-footer a:link {
color:#996;
}
.deleted-comment {
font-style:italic;
color:gray;
}

2.- Ahora remplazamos este codigo por el siguiente:

/* Comments
----------------------------------------------- */

#comments {
padding-top: 10px;
color: #555;
font-family: 'Trebuchet MS';
}
#comments h4 {
margin: 0px;
padding: 8px 0 0 30px;
font-size: 20px;
color: #555;
background: url(http://andresblogs.googlepages.com/Chat.png) no-repeat;
height: 29px !important; /* for most browsers */
height /**/:37px; /* for IE5/Win */
}
#comments ul {
margin-left: 0;
}
#comments li {
background: none;
padding-left: 0;
}
.comment-body {
background: url(http://compuanimation3d.googlepages.com/bg_comment.gif) no-repeat 35px 0px;
padding-top:1px;
}
.comment-body p {
background:#d0d0d0;
margin: 5px 0 0px 0;
border: 6px solid #e5e5e5;
line-height: 1.6em;
padding: 7px 7px 7px 13px;
}
.comment-body-author {
background: url(http://compuanimation3d.googlepages.com/bg_comment.gif) no-repeat 35px 0px;
padding-top:1px;
}
.comment-body-author p {
background:#ccdacc;
margin: 5px 0 0px 0;
border: 6px solid #e5e5e5;
line-height: 1.6em;
padding: 7px 7px 7px 13px;
}
.comment-author {
margin: 0px 0px 0px 0px;
padding: 0 10px 0 40px;
color: #777;
font-size: 16px;
font-weight:bold;
background: url(http://andresblogs.googlepages.com/coments.png) no-repeat 20px 0px;
}
.comment-footer {
padding: 5px 0px 3px 30px;
}
#comments li {
padding: 0 0 1px 17px;
background: url(http://compuanimation3d.googlepages.com/talk1.png) no-repeat 0 3px;
}
.comments-block .comment-body {
background: #fff;
}
.comments-block .comment-footer{
margin: 0 0 0 -10px;
}
.comment-title{
margin: 0 0 0 30px;
}
.deleted-comment {
font-style:italic;
color:gray;
}

Y listo difruten el truco :) .

Emoticones en el Blog.

Publicadas por Andres

Hola, hoy de todos los trucos para blogger me toca compartir con ustedes el truco de los emoticones, es un truco muy sencillo que me ha gustado mucho ya que los emoticones se ven muy bien, lo unico que tienes que hacer es seguir los siguientes pasos y listo, aqui los pasos:

1.- En tu edicion HTML, busca esta parte: /head y antes de esta pega el siguiente codigo:

<script src='http://leonelhack.googlepages.com/addSmiley.js'></script>/">

2.- Ahora expandimos los artilugios y buscamos el siguiente codigo:

<b:section class="'main'" id="'main'" showaddelement="'no'"><br /><b:widget id="'Blog1'" locked="'false'" title="'Entradas" type="'Blog'/"><br /></b:section>

3.- Debajo de este colocamos este otro codigo:

<script language="javascript"><br />addSmiley('post-author', 'post-notes', 'comment-author');<br /></script>

Y listo tenemos nuestros emoticones disfrutenlos como yo :) .

Tooltip para el Blog

Publicadas por Andres

Hola, he encontrado un muy buen truco para un tooltip, y tiene transparencias, aqui les explicare el truco y les dejare un ejemplo en el post de arriba:

1.- Pega el siguiente codigo antes del /head de tu plantilla:

<script src=' http://es.geocities.com/josep_m2003/boxover.js '/>
<script

2.- En cada entrada que quieras usar el tooltip solo pega el siguiente codigo en vez del el link:

<span title="header=[información adicional]body=[ Aquí el texto que quieras]">
<a href="aquí la url"> aquí el texto que quieras enlazar</a></span>

Espero que este truco les haya servido de algo :) .

Comillas en el Blog.

Publicadas por Andres

Hola, he encontrado el truco de las comillas y he descubierto lo facil que es asi que aqui os dejo el truco:

1.- Pegar el siguiente codigo despues del head:

<style>
blockquote {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwWTZrcg4aWOkZmEXOOL3R3O5km2zXxnEJwki0s7URTd614gjOPo4NB0Dot_aAWtsbb5ee_V6xGOXX0OrdhuqT2hVhyEk9IYDI_M_645G4RbbeuQv9vgiiFBMLITy874oPqm5-o6_ZzX0/s320/comillas.gif) no-repeat 0 3px;
color: #666;
padding-left: 20px;
font-style: italic;
margin-bottom: 1px;
display:block;
padding-top:7px;
}

2.- Ahora solo en cada pos donde queramos poner las comillas pegamos el siguiente codigo y reemplazamos lo que dice Aqui el texto por lo que quiras poner:

<blockquote> Aquí el texto</blockquote>

var ultimaFecha = '26 mayo 2007'; remplaza_fecha('26 mayo 2007');

var ultimaFecha = '21 mayo 2007'; remplaza_fecha('21 mayo 2007');

var ultimaFecha = '16 mayo 2007'; remplaza_fecha('16 mayo 2007');

remplaza_fecha('');remplaza_fecha(ultimaFecha);

var ultimaFecha = '12 mayo 2007'; remplaza_fecha('12 mayo 2007');

var ultimaFecha = '05 mayo 2007'; remplaza_fecha('05 mayo 2007');

remplaza_fecha('');remplaza_fecha(ultimaFecha);

remplaza_fecha('');remplaza_fecha(ultimaFecha);

var ultimaFecha = '29 abril 2007'; remplaza_fecha('29 abril 2007');

remplaza_fecha('');remplaza_fecha(ultimaFecha);

remplaza_fecha('');remplaza_fecha(ultimaFecha);

remplaza_fecha('');remplaza_fecha(ultimaFecha);

remplaza_fecha('');remplaza_fecha(ultimaFecha);

remplaza_fecha('');remplaza_fecha(ultimaFecha);

remplaza_fecha('');remplaza_fecha(ultimaFecha);

remplaza_fecha('');remplaza_fecha(ultimaFecha);

Labels