Usamos cookies propias y de terceros para ofrecer info personalizada según su navegación. Si continua navegando consideramos que acepta el uso de cookiesOKMás información

Titulos expandibles en los post

Unknown
Para tener nuestras entradas ordenadas por etiquetas,
ordenadas por etiquetas























bastara con que sigamos los pasos descritos a continuación:

Recomiendo una copia de seguridad de la plantilla, en este post lo puedes ver.

 Antes de </head> colocaremos el siguiente código:
<script type='text/javascript'>
function toggleIt(id) { post = document.getElementById(id);
if (post.style.display != 'none') {
post.style.display = 'none';
} else { post.style.display = '';
}}
</script>
<script src='https://sites.google.com/site/laredteayudara/script/expandibleslared.txt' type='text/javascript'/>



<b:includable id='blEntradsexpand' 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>
Buscaremos el código de color verde y encima le pegaremos el amarillo.
<b:includable id='main' var='top'>
<b:if cond='data:top.showPlusOne'>
<script expr:src='data:top.plusOneJsUrl'/>
</b:if>
<!-- posts -->
<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
<data:defaultAdStart/>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.isDateStart'>
<b:if cond='data:post.isFirstPost == "false"'>
</div></div>
</b:if>
</b:if>
<b:if cond='data:post.isDateStart'>
<div class="date-outer">
</b:if>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><span><data:post.dateHeader/></span></h2>
</b:if>
<b:if cond='data:post.isDateStart'>
<div class="date-posts">
</b:if>
<div class='post-outer'>
Al terminar el código de color verde le pegaremos el siguiente código.
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<b:include data='post' name='blEntradsexpand'/>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>

<b:include data='post' name='post'/>
Buscaremos el codigo negro y pegaremos el siguiete:
</b:if>
 Miraremos y si todo esta como queremos, guardaremos.
Para tener nuestras entradas ordenadas por etiquetas,
ordenadas por etiquetas























bastara con que sigamos los pasos descritos a continuación:

Recomiendo una copia de seguridad de la plantilla, en este post lo puedes ver.

 Antes de </head> colocaremos el siguiente código:
<script type='text/javascript'>
function toggleIt(id) { post = document.getElementById(id);
if (post.style.display != 'none') {
post.style.display = 'none';
} else { post.style.display = '';
}}
</script>
<script src='https://sites.google.com/site/laredteayudara/script/expandibleslared.txt' type='text/javascript'/>



<b:includable id='blEntradsexpand' 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>
Buscaremos el código de color verde y encima le pegaremos el amarillo.
<b:includable id='main' var='top'>
<b:if cond='data:top.showPlusOne'>
<script expr:src='data:top.plusOneJsUrl'/>
</b:if>
<!-- posts -->
<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
<data:defaultAdStart/>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.isDateStart'>
<b:if cond='data:post.isFirstPost == "false"'>
</div></div>
</b:if>
</b:if>
<b:if cond='data:post.isDateStart'>
<div class="date-outer">
</b:if>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><span><data:post.dateHeader/></span></h2>
</b:if>
<b:if cond='data:post.isDateStart'>
<div class="date-posts">
</b:if>
<div class='post-outer'>
Al terminar el código de color verde le pegaremos el siguiente código.
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<b:include data='post' name='blEntradsexpand'/>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>

<b:include data='post' name='post'/>
Buscaremos el codigo negro y pegaremos el siguiete:
</b:if>
 Miraremos y si todo esta como queremos, guardaremos.

Cómo reducir el espacio entre los gadgets

Directamente a tu e-mail     


                                                    O suscríbete por otras vías: RSS

Directamente a tu e-mail     


                                                    O suscríbete por otras vías: RSS

Cómo utilizar las fuentes personalizadas de Google en Blogger

Vamos a ver como utilizar las fuentes personalizadas de Google en Blogger, para ello tendremos que entrar en:

 http://www.google.com/fonts 
Seleccionar fuente


donde tenemos muchas fuentes para elegir, despues de mirar y mirar seleccionamos la que mas nos guste...


link de la seleccion















Copiaremos el link de la selección le añadiremos / de esta manera
<link href='http://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>

Sera este el que utilizaremos:
<link href='http://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'/>
y lo pegaremos antes de la etiqueta </head> de nuestra plantilla.

Para utilizar  el tipo de fuente,un poco mas abajo encontraremos la font family  que sera lo que añadiremos en el CSS según donde vayamos a utilizarlo:
Font Family














 Por ejemplo en el body:
body { font-family: 'Indie Flower', cursive;
color: #991188; 
El resultado sera:

Ejemplo de fuente




           FacebookGoogle+TwitterBlogRSS RSS

Directamente a tu e-mail     


                                                   

Vamos a ver como utilizar las fuentes personalizadas de Google en Blogger, para ello tendremos que entrar en:

 http://www.google.com/fonts 
Seleccionar fuente


donde tenemos muchas fuentes para elegir, despues de mirar y mirar seleccionamos la que mas nos guste...


link de la seleccion















Copiaremos el link de la selección le añadiremos / de esta manera
<link href='http://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>

Sera este el que utilizaremos:
<link href='http://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'/>
y lo pegaremos antes de la etiqueta </head> de nuestra plantilla.

Para utilizar  el tipo de fuente,un poco mas abajo encontraremos la font family  que sera lo que añadiremos en el CSS según donde vayamos a utilizarlo:
Font Family














 Por ejemplo en el body:
body { font-family: 'Indie Flower', cursive;
color: #991188; 
El resultado sera:

Ejemplo de fuente




           FacebookGoogle+TwitterBlogRSS RSS

Directamente a tu e-mail     


                                                   

Como poner tres columnas o más con código en un post

Código para  tres columnas o más




















El anterior post, daba repuesta a una consulta, pero aunque se soluciono, quedo una duda que hoy, si doy por explicada.

Así que después de pensarla  os dejo la otra manera de hacerlo y que desde luego me parece mejor.



Código para  tres columnas o más

Copiaremos el código en HTML y donde pone  Pegar el Texto  pondremos el texto que deseamos.

Tres Columnas

<div style="width:33%;float:left;padding:4px;"> Pegar el Texto </div>
<div style="width:33%;float:left;padding:4px;">  Pegar el Texto </div>
<div style="width:30%;float:right;padding:4px;">  Pegar el Texto</div>
<div style="clear:both;"></div>

Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.
Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original.
Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.

Cuatro Columnas


<div style="float: left; padding: 4px; width: 24%;"><div style="text-align: justify;"> Pegar el Texto </div></div>
<div style="float: left; padding: 4px; width: 24%;"><div style="text-align: justify;"> Pegar el Texto</div></div>
<div style="float: left; padding: 4px; width: 24%;"><div style="text-align: justify;"> Pegar el Texto</div></div>
<div style="float: right; padding: 4px; width: 23%;"><div style="text-align: justify;"> Pegar el Texto</div></div>

Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.
Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.
Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.
Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.





Y modificando los porcentajes, podremos poner las columnas que queramos.
Si te gusto comenta y compártelo

Seguir a la red
Código para  tres columnas o más




















El anterior post, daba repuesta a una consulta, pero aunque se soluciono, quedo una duda que hoy, si doy por explicada.

Así que después de pensarla  os dejo la otra manera de hacerlo y que desde luego me parece mejor.



Código para  tres columnas o más

Copiaremos el código en HTML y donde pone  Pegar el Texto  pondremos el texto que deseamos.

Tres Columnas

<div style="width:33%;float:left;padding:4px;"> Pegar el Texto </div>
<div style="width:33%;float:left;padding:4px;">  Pegar el Texto </div>
<div style="width:30%;float:right;padding:4px;">  Pegar el Texto</div>
<div style="clear:both;"></div>

Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.
Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original.
Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.

Cuatro Columnas


<div style="float: left; padding: 4px; width: 24%;"><div style="text-align: justify;"> Pegar el Texto </div></div>
<div style="float: left; padding: 4px; width: 24%;"><div style="text-align: justify;"> Pegar el Texto</div></div>
<div style="float: left; padding: 4px; width: 24%;"><div style="text-align: justify;"> Pegar el Texto</div></div>
<div style="float: right; padding: 4px; width: 23%;"><div style="text-align: justify;"> Pegar el Texto</div></div>

Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.
Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.
Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.
Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.





Y modificando los porcentajes, podremos poner las columnas que queramos.
Si te gusto comenta y compártelo

Seguir a la red

Código para escribir en tres columnas o más

Me ha llegado una pregunta sobre una entrada que se publico, relacionada con columnas que se refería a este post. La pregunta era:
“Me gusto esa entrada de como escribir en dos columnas y te quería preguntar si se puede hacer en tres, yo ya lo he intentado pero sin éxito”

Una solución para escribir varias columnas seria lo siguiente:

3 Columnas

<table width="100%" border="0" cellspacing="10" cellpadding="10">
  <tr>
    <td><div align="justify">Primer Texto</div></td>
    <td><div align="justify">Segundo Texto</div></td>
    <td><div align="justify">Tercer Texto</div></td>
  </tr>
</table>

Para escribir 4 columnas seria el siguiente:


4 Columnas
<table width="100%" border="0" cellspacing="10" cellpadding="10"> 
  <tr>
    <td><div align="justify">Primer Texto</div></td>
    <td><div align="justify">Segundo Texto</div></td>
    <td><div align="justify">Tercer Texto</div></td>
    <td><div align="justify">Cuarto Texto</div></td>
  </tr>
</table>


Y así añadiríamos tantas columnas como quisiéramos, por cada columna añadiríamos:

  <td><div align="justify">Otro Texto</div></td>

Esta seria la estructura básica, se podrá cambiar todas las características que queramos ya podremos elegir la anchura el color, la separación y demás.
Si las columnas tienen distintas medidas, podriamos jugar con los espacios para dejarlas iguales.

Espero que os sirva y si os gusta lo compartáis...
Me ha llegado una pregunta sobre una entrada que se publico, relacionada con columnas que se refería a este post. La pregunta era:
“Me gusto esa entrada de como escribir en dos columnas y te quería preguntar si se puede hacer en tres, yo ya lo he intentado pero sin éxito”

Una solución para escribir varias columnas seria lo siguiente:

3 Columnas

<table width="100%" border="0" cellspacing="10" cellpadding="10">
  <tr>
    <td><div align="justify">Primer Texto</div></td>
    <td><div align="justify">Segundo Texto</div></td>
    <td><div align="justify">Tercer Texto</div></td>
  </tr>
</table>

Para escribir 4 columnas seria el siguiente:


4 Columnas
<table width="100%" border="0" cellspacing="10" cellpadding="10"> 
  <tr>
    <td><div align="justify">Primer Texto</div></td>
    <td><div align="justify">Segundo Texto</div></td>
    <td><div align="justify">Tercer Texto</div></td>
    <td><div align="justify">Cuarto Texto</div></td>
  </tr>
</table>


Y así añadiríamos tantas columnas como quisiéramos, por cada columna añadiríamos:

  <td><div align="justify">Otro Texto</div></td>

Esta seria la estructura básica, se podrá cambiar todas las características que queramos ya podremos elegir la anchura el color, la separación y demás.
Si las columnas tienen distintas medidas, podriamos jugar con los espacios para dejarlas iguales.

Espero que os sirva y si os gusta lo compartáis...

Etiquetas (expandir y contraer)

etiquets-expandir-contraer

En Diseño  Edición Html,Ctrol F y buscamos "Etiquetas"
Si queremos expandir y contraer etiquetas, tendremos que buscar el siguiente código:



<b:widget id='Label1' locked='false' title='Etiquetas' type='Label'>
y lo sustituiremos por:
<b:widget id='Label1' locked='false' title='Etiquetas' type='Label'>
<b:includable id='main'>
<script type='text/javascript'>
//<![CDATA[
if(typeof(rnd) == 'undefined') var rnd = '';
rnd = Math.floor(Math.random()*1000);
rnd = 'id-' + rnd;
document.write('<a href="#" onclick="tmp = document.getElementById(&quot;' + rnd + '&quot;); tmp.style.display = (tmp.style.display == &quot;none&quot;) ? &quot;block&quot; : &quot;none&quot;; return false;" style="float:left;margin-right:5px;">');
//]]>
</script>[+/-]
<script type='text/javascript'>
//<![CDATA[
document.write('<\/a>');
//]]>
</script>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script type='text/javascript'>
//<![CDATA[
document.write('<div id="' + rnd + '" style="display:none;">');
//]]>
</script>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
</li>
</b:loop>
</ul>
<script type='text/javascript'>
//<![CDATA[
document.write('<\/div>');
//]]>
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

[+/-]  Este será el signo que saldrá, pero si queremos poner una imagen como en este caso, el corazón, bastara con quitarlo y poner
<img src='URL DE LA IMAGEN'/>
Cambia URL DE LA IMAGEN por la correspondiente dirección de la imagen y ten en cuenta también el tamaño de la imagen.
Vista previa y si todo va bien, guardar.



etiquets-expandir-contraer

En Diseño  Edición Html,Ctrol F y buscamos "Etiquetas"
Si queremos expandir y contraer etiquetas, tendremos que buscar el siguiente código:



<b:widget id='Label1' locked='false' title='Etiquetas' type='Label'>
y lo sustituiremos por:
<b:widget id='Label1' locked='false' title='Etiquetas' type='Label'>
<b:includable id='main'>
<script type='text/javascript'>
//<![CDATA[
if(typeof(rnd) == 'undefined') var rnd = '';
rnd = Math.floor(Math.random()*1000);
rnd = 'id-' + rnd;
document.write('<a href="#" onclick="tmp = document.getElementById(&quot;' + rnd + '&quot;); tmp.style.display = (tmp.style.display == &quot;none&quot;) ? &quot;block&quot; : &quot;none&quot;; return false;" style="float:left;margin-right:5px;">');
//]]>
</script>[+/-]
<script type='text/javascript'>
//<![CDATA[
document.write('<\/a>');
//]]>
</script>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script type='text/javascript'>
//<![CDATA[
document.write('<div id="' + rnd + '" style="display:none;">');
//]]>
</script>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
</li>
</b:loop>
</ul>
<script type='text/javascript'>
//<![CDATA[
document.write('<\/div>');
//]]>
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

[+/-]  Este será el signo que saldrá, pero si queremos poner una imagen como en este caso, el corazón, bastara con quitarlo y poner
<img src='URL DE LA IMAGEN'/>
Cambia URL DE LA IMAGEN por la correspondiente dirección de la imagen y ten en cuenta también el tamaño de la imagen.
Vista previa y si todo va bien, guardar.



Cómo borrar Suscribirse a: Entradas (Atom) en Blogger

Unknown
Cómo borrar Suscribirse a: Entradas (Atom) en Blogger, hoy vamos a quitar esa leyenda  que a mi modo de ver no sirve para nada.
Iremos a Plantilla.
HTML
Ctrol F para sacar el buscador y pondremos:

Blog feed links
y encontraremos:

<b:if cond='data:blog.pageType != "item"'> <!-- Blog feed links -->
<b:if cond='data:feedLinks'>
<div class='blog-feeds'>
<b:include data='feedLinks' name='feedLinksBody'/>
</div>
</b:if>
Borraremos esta línea:
<b:include data='feedLinks' name='feedLinksBody'/>
Miraremos la vista previa y si todo esta bien Guardaremos cambios.

Si por algún motivo no estuviera bien con dar atrás, no nos guardaría los cambios y podíamos volver a empezar.
Cómo borrar Suscribirse a: Entradas (Atom) en Blogger, hoy vamos a quitar esa leyenda  que a mi modo de ver no sirve para nada.
Iremos a Plantilla.
HTML
Ctrol F para sacar el buscador y pondremos:

Blog feed links
y encontraremos:

<b:if cond='data:blog.pageType != "item"'> <!-- Blog feed links -->
<b:if cond='data:feedLinks'>
<div class='blog-feeds'>
<b:include data='feedLinks' name='feedLinksBody'/>
</div>
</b:if>
Borraremos esta línea:
<b:include data='feedLinks' name='feedLinksBody'/>
Miraremos la vista previa y si todo esta bien Guardaremos cambios.

Si por algún motivo no estuviera bien con dar atrás, no nos guardaría los cambios y podíamos volver a empezar.

Gagdet para iconos sociales de gran utilidad

gadget

Un gadget para iconos sociales, no deja de ser útil para nuestro blog.
¿Como poner nuestros iconos sociales?
Para ello iremos a Diseño, añadiremos gadget, elegiremos HTML y pegaremos el siguiente código:

Facebook Google+ Twitter Blog RSS RSS

<div id="social">
<a href="HTTP                   FACEBOOK" target="_blank">
<img alt="Facebook" src="http://goo.gl/n2PoaI" title="Siguenos en Facebook" /></a>
<a href="HTTP               GOOGLE PLUS" target="_blank">
<img alt="Google+" src="http://goo.gl/w3W8MA" title="Siguenos en Google Plus" /></a>
<a href="HTTP                       TWITTER" target="_blank">
<img alt="Twitter" src="http://goo.gl/iU7MFl" title="Siguenos en Twitter" /></a>
<a href="HTTP            DE    TU    BLOG" target="_blank">
<img alt="Blog" src="http://goo.gl/mCxHG3" title="Siguenos en nuestro blog" /></a>
<a href="HTTP   DE TU  FEEDFURNER" target="_blank">
<img alt="RSS" src="http://goo.gl/JR0GJr" title="Suscribete a nuestro RSS" /></a>
<a href="HTTP       DE           YOU TUBE" target="_blank">
<img alt="RSS" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgoNl8kUPKyZ3UeUAlkSHneEQpXOx2FU74PlNKyOc6BnSNJ_fKtwHlk3pVMASW5rJQIWpe0Uj8Rzm9rwiq2JcqhEMsg7YYFt4frx0txrndpG7_bXGQtXf5wVcRWforOibT6kdziX5Int0/h120/youtube.png" title="Siguenos en You Tube" /></a>
<a href="mailto:              TU     CORREO" target="_blank"><img src="http://goo.gl/VFfdCO" /></a><br /></div>


Hay que respetar las comillas, espero que te resulte sencillo. Luego solo nos quedara ponerlo en el lugar que nos guste mas.

Ya sabes, si quieres comentar...  y si te gusto compártelo...

gadget

Un gadget para iconos sociales, no deja de ser útil para nuestro blog.
¿Como poner nuestros iconos sociales?
Para ello iremos a Diseño, añadiremos gadget, elegiremos HTML y pegaremos el siguiente código:

Facebook Google+ Twitter Blog RSS RSS

<div id="social">
<a href="HTTP                   FACEBOOK" target="_blank">
<img alt="Facebook" src="http://goo.gl/n2PoaI" title="Siguenos en Facebook" /></a>
<a href="HTTP               GOOGLE PLUS" target="_blank">
<img alt="Google+" src="http://goo.gl/w3W8MA" title="Siguenos en Google Plus" /></a>
<a href="HTTP                       TWITTER" target="_blank">
<img alt="Twitter" src="http://goo.gl/iU7MFl" title="Siguenos en Twitter" /></a>
<a href="HTTP            DE    TU    BLOG" target="_blank">
<img alt="Blog" src="http://goo.gl/mCxHG3" title="Siguenos en nuestro blog" /></a>
<a href="HTTP   DE TU  FEEDFURNER" target="_blank">
<img alt="RSS" src="http://goo.gl/JR0GJr" title="Suscribete a nuestro RSS" /></a>
<a href="HTTP       DE           YOU TUBE" target="_blank">
<img alt="RSS" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgoNl8kUPKyZ3UeUAlkSHneEQpXOx2FU74PlNKyOc6BnSNJ_fKtwHlk3pVMASW5rJQIWpe0Uj8Rzm9rwiq2JcqhEMsg7YYFt4frx0txrndpG7_bXGQtXf5wVcRWforOibT6kdziX5Int0/h120/youtube.png" title="Siguenos en You Tube" /></a>
<a href="mailto:              TU     CORREO" target="_blank"><img src="http://goo.gl/VFfdCO" /></a><br /></div>


Hay que respetar las comillas, espero que te resulte sencillo. Luego solo nos quedara ponerlo en el lugar que nos guste mas.

Ya sabes, si quieres comentar...  y si te gusto compártelo...

Quitar Leer más automático de las entradas

Si ahora lo quieres quitar el Leer más automático, seguiremos unos pasos para dejar la entrada como antes. Solo tendremos que retroceder los pasos que en su día dimos para ponerlo.

codigos

Seria interesante que antes de hacer nada, respaldáramos la plantilla.
1. Entramos en Diseño | Edición de HTML Control F buscamos el siguiente código;:



<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'>Leer más...</a></span>
</b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>
Busca lo marcado en verde para situarte, puede que no sea el mismo pero veras que se parece bastante.
2. Una vez localizado, eliminalo todo y pones en su lugar el siguiente código:


<data:post.body/>


Haremos vista previa y si todo va bien, veras las entradas completas.


Así que ahora lo que haremos sera quitar el script, así que aligeraremos nuestra plantilla al no obligarlo a cargar algo que no necesitamos.


3. Buscaremos ahora antes de </head> o después de <head> un código como este lo eliminaremos:
<script type='text/javascript'>
summary_noimg = 400;
summary_img = 300;
img_thumb_height = 125;
img_thumb_width = 125;
</script>
<script type='text/javascript'>
//<![CDATA[
/******************************************
(C)2008 by Anhvo
visit http://en.vietwebguide.com to get more cool hacks
********************************************/
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

Con estos pasos ya no tendremos el  Leer más automático con imágenes en miniatura.
Espero que te sea util.
Si te gusto compártelo...
Si ahora lo quieres quitar el Leer más automático, seguiremos unos pasos para dejar la entrada como antes. Solo tendremos que retroceder los pasos que en su día dimos para ponerlo.

codigos

Seria interesante que antes de hacer nada, respaldáramos la plantilla.
1. Entramos en Diseño | Edición de HTML Control F buscamos el siguiente código;:



<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'>Leer más...</a></span>
</b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>
Busca lo marcado en verde para situarte, puede que no sea el mismo pero veras que se parece bastante.
2. Una vez localizado, eliminalo todo y pones en su lugar el siguiente código:


<data:post.body/>


Haremos vista previa y si todo va bien, veras las entradas completas.


Así que ahora lo que haremos sera quitar el script, así que aligeraremos nuestra plantilla al no obligarlo a cargar algo que no necesitamos.


3. Buscaremos ahora antes de </head> o después de <head> un código como este lo eliminaremos:
<script type='text/javascript'>
summary_noimg = 400;
summary_img = 300;
img_thumb_height = 125;
img_thumb_width = 125;
</script>
<script type='text/javascript'>
//<![CDATA[
/******************************************
(C)2008 by Anhvo
visit http://en.vietwebguide.com to get more cool hacks
********************************************/
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

Con estos pasos ya no tendremos el  Leer más automático con imágenes en miniatura.
Espero que te sea util.
Si te gusto compártelo...

Etiquetas en dos columnas, sencillo y fácil

gadget

















A medida que nuestro blog, va creciendo y lo vamos organizando nuestras etiquetas aumentan, tenemos varias maneras de exponerlas, pero una sencilla manera sera poner las etiquetas en dos columnas,  de una manera sencilla y fácil lo conseguimos.

En esta imagen como lo tenemos:







Vamos a Diseño - Edición de HTML.,buscamos el id del widget de etiquetas.En mi caso es Label1

gadget-panel

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

Ahora lo que haremos sera ir a Plantilla, Personalizar, Avanzados y añadir CSS 
En ella pondremos el siguiente código:


#Label1 ul li{float: left;width: 40%;}


csspanel


daremos dos intros y aplicar al blog, asi guardaremos los cambios que si nos fijamos nada mas dar los intros veremos los cambios en vista previa.
Así es como quedaran nuestras etiquetas.

etiquetas-columnas


Tendremos que estar pendiente del ID, si no corresponde con Label1 tendremos que poner el que tengamos nosotros en nuestra plantilla con esto habremos puesto nuestras etiquetas en dos columnas.

¿Te ha resultado practico?
gadget

















A medida que nuestro blog, va creciendo y lo vamos organizando nuestras etiquetas aumentan, tenemos varias maneras de exponerlas, pero una sencilla manera sera poner las etiquetas en dos columnas,  de una manera sencilla y fácil lo conseguimos.

En esta imagen como lo tenemos:







Vamos a Diseño - Edición de HTML.,buscamos el id del widget de etiquetas.En mi caso es Label1

gadget-panel

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

Ahora lo que haremos sera ir a Plantilla, Personalizar, Avanzados y añadir CSS 
En ella pondremos el siguiente código:


#Label1 ul li{float: left;width: 40%;}


csspanel


daremos dos intros y aplicar al blog, asi guardaremos los cambios que si nos fijamos nada mas dar los intros veremos los cambios en vista previa.
Así es como quedaran nuestras etiquetas.

etiquetas-columnas


Tendremos que estar pendiente del ID, si no corresponde con Label1 tendremos que poner el que tengamos nosotros en nuestra plantilla con esto habremos puesto nuestras etiquetas en dos columnas.

¿Te ha resultado practico?