Blogger Adictos

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 :) .

Drop Caps

Publicadas por Andres

Hola, hoy les trigo este truco mas comunmente llamado Drop Caps pero algunos no saben ese nombre por eso le pongo letra capital, este truco consiste en hacer la primera letra mas grande que las otras, este truco es muy sencillo y lo explicare:

1.- En tu HTML, pega el siguiente codigo antes de ]]></b:skin>.:


.dropcaps {
float:left;
color:#1B703A;
font-size:100px;
line-height:80px;
padding-top:1px;
padding-right:5px;
}

2.- Cada que quieras aparecer el Drop Caps pega el siguiente codigo en la entrada:


<span class="dropcaps">D</span>

Remplaza la D por la letra que quiereas y listo :) .

Centrar un elemento.

Publicadas por Andres

Hola, centrar es un elemento es muy facil y es un truco para los que recien comienzan a bloggear, solo sigan los siguientes pasos:

1.- Al pricipio del widget pegar el siguiente codigo:


<center>

2.- Ahora al final del widget agregar el siguiente codigo:


</center>

Guardamos 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 :) .

Quitar la navbar de blogger.

Publicadas por Andres

Hola, este truco es para los aprendices ya que es uno de los primeros trucos que salieron para blogger y es muy pero muy sencillo.

1.- En vuestro HTML pegaos el siguiente codigo despues del head:


#navbar-iframe {
height:0px;
visibility:hidden;
display:none;
}

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

Blogger Adictos

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

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

remplaza_fecha('');remplaza_fecha(ultimaFecha);

var ultimaFecha = '20 mayo 2007'; remplaza_fecha('20 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');

remplaza_fecha('');remplaza_fecha(ultimaFecha);

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

remplaza_fecha('');remplaza_fecha(ultimaFecha);

Labels