Quiero dejar constancia de como numerar los comentarios en el blog.

Para conseguirlo haremos lo siguiente:

1. Diseño
2. Plantilla
3. Editar HTML
4. Clic en el Código
5. Ctrl + f
6. Buscar

Buscamos la primera linea del codigo:

<div expr:id='data:widget.instanceId + "_comments-block-wrapper"'>
<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt expr:class='"comment-author "+ data:comment.authorClass' expr:id='data:comment.anchorName'>
<b:if cond='data:comment.favicon'>
<Img expr: 'Datos: comment.favicon' src = height = '16px 'style =' margin-bottom: 2px; 'Width = '16px' />
</ B: if>

Y la sustituimos Porción este:

<div expr:id='data:widget.instanceId + "_comments-block-wrapper"'>
<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
Tipo Mensajero = 'text / javascript'> var CommentsCounter = 0; </ Script>
<b:loop values='data:post.comments' var='comment'>
<dt expr:class='"comment-author "+ data:comment.authorClass' expr:id='data:comment.anchorName'>
<b:if cond='data:comment.favicon'>
<Img expr: 'Datos: comment.favicon' src = height = '16px 'style =' margin-bottom: 2px; 'Width = '16px' />
</ B: if>

Localizamos, mas abajo:

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

Y pegamos seguidamente:

<Span class = float Estilo 'numberingcomments' = ': right; font-size: 16px; color: # ffffff ">
<a rel='nofollow' style='text-decoration:none' title='Comment Link'> #
Tipo Mensajero = 'text / javascript'>
CommentsCounter = CommentsCounter 1;
document.write (CommentsCounter);
</ Script>
</ A>
</ Span>

En esta parte del código, podremos cambiar el color, la fuente, el tamaño...

<Span class = float Estilo 'numberingcomments' = ': right; font-size: 16px; color: # ffffff ">

Ahora solo nos queda comprobar y guardar.

¿Te animas a numerar los comentarios en el Blog ​​?

Vamos a guardar este sencillo código, lo tendremos que poner en edición HTML para que funcione:

<marquee>Aqui lo que queramos que se mueva</marquee>

Aqui lo que queramos que se mueva



Como podéis ver, si ponemos el código de una imagen, función igual

Podemos resaltar las etiquetas con un color de fondo o un recuadro para que destaquen más.
Tanto los colores como el grosor y estilo de los marcos puede modificarse con unos códigos CSS

Buscaremos un código similar a este:

span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != "true"'> , </b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=20"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
<!-- quickedit pencil -->
<b:include data='post' name='postQuickEdit'/>
</span>

Le añadimos las líneas que están en color rojo para otorgar una clase única y poder así utilizar el CSS necesario.

span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<span class='laredteayudara'><a expr:href='data:label.url' rel='tag'><data:label.name/></a></span><b:if cond='data:label.isLast != "true"'> , </b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=20"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
<!-- quickedit pencil -->
<b:include data='post' name='postQuickEdit'/>
</span>

La coma destacada (,) es la encargada de separar nuestras etiquetas. Puede reemplazarse por una imagen o icono utilizando este código:

<img src="URL IMAGEN"/>

Buscamos la etiqueta 

]]></b:skin> 

y justo encima incluimos los dos bloques de CSS pertenecientes al estilo deseado

.laredteayudara a:link, .laredteayudara a:visited {
background: #fff; /* Color de fondo */
color: #000; /* Color del texto */
padding: 4px 8px; /* Distancia entre el texto y el marco */
border-right: 2px dashed #000;
border-left: 2px dashed #000;
border-top:2px dashed #000;
border-bottom: 2px dashed #000;
}
.laredteayudara a:hover {
background: #000; /* Color de fondo al pasar el cursor por encima */
color: #fff; /* Color del texto al pasar el cursor por encima */
border-right: 2px dashed #fff;
border-left: 2px dashed #fff;
border-top:2px dashed #fff;
border-bottom: 2px dashed #fff;
text-decoration: none;
}

Estos están como puedes ver, en blanco y negro con el canto pespunteado al contrario, pero tú podrás modificar y ajustar a tus colores preferidos, tan solo será necesario trastear con el código.
Cuando consideres que todo esta a tu gusto, guardaremos.

 Si nos situamos sobre nuestro gadget en vista diseño, abajo nos aparecerá el ID del gadget, sabiendo el nombre, lo demás es seguir los pasos:

Y  sabremos  Cómo reducir el espacio entre los gadgets  Esta es la parte que tenemos que mirar:


Una vez que tenemos el nombre del gadget, tan solo nos queda ir a diseño, plantilla,personalizar,  avanzado, Añadir CSS.
Como es la cabecera la que quiero subir:

Pondremos el siguiente código:

#Header1{
margin-bottom: -40px !important;
}

Se puede usar para cualquier gadget, que queramos juntar o separar, dependiendo de los px que se le den. Eso es cuestión de trastear y probar.. el resultado sera el siguiente:

Seguir a @laredteayudara            

Directamente a tu e-mail     

                                                    O suscríbete por otras vías: RSS

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

 http://www.google.com/fonts 

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

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:

 Por ejemplo en el body:

body { font-family: 'Indie Flower', cursive;
color: #991188; 

El resultado sera:

Seguir a @laredteayudara            

Directamente a tu e-mail     

                                                   

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

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:

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

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

<script language="javascript">
function ir(){
var thebox=document.menu
if (thebox.windowoption.checked){
if (!window.newwindow)
newwindow=window.open("")
newwindow.location=
thebox.example.options[thebox.example.selectedIndex].value
}
else
location=
thebox.example.options[thebox.example.selectedIndex].value
}
</script>
<form name="menu">
<select name="example" size="1">
<option selected/>Etiquetas
<option value="http://www.google.es/"/>Google
<option value="www.blogger.com"/>Blogger
<option value="AQUI LA DIERECCION"/>TITULO

</select>
<input value="OK" onclick="ir()" type="button"/> <br/>
<input value="ON" name="windowoption" type="checkbox"/>
Abrir en una nueva ventana
</form>

 En <option selected/>, es donde pondremos el título que se verá cuando los links no están expandidos.

 Si queremos añadir más links, copiamos una de las líneas y la añadimos antes de </select> y así podemos añadir los que necesitemos.

Podemos colocar en el menú la url de cualquiera de nuestras entradas o etiquetas.

El resultado:

Lo podéis ver en el gadget  ♥ Etiquetas.
Lo podemos abrir en la misma ventana o en una nueva, si clicamos o no. Puede servir para muchas cosas mas.
Eso si, cuando añadamos otro titulo lo tendremos que agregar,
Así que.. imaginación y si queréis dejarme el link para verlo...encantada

Para el menú , copiaremos un sencillo script y el código para colocar los links todo junto en un nuevo elemento HTML-Javascript.

<script language="javascript">
function ir(){
var thebox=document.menu
if (thebox.windowoption.checked){
if (!window.newwindow)
newwindow=window.open("")
newwindow.location=
thebox.example.options[thebox.example.selectedIndex].value
}
else
location=
thebox.example.options[thebox.example.selectedIndex].value
}
</script>
<form name="menu">
<select name="example" size="1">
<option selected/>Etiquetas
<option value="http://www.google.es/"/>Google
<option value="www.blogger.com"/>Blogger
<option value="AQUI LA DIERECCION"/>TITULO

</select>
<input value="OK" onclick="ir()" type="button"/> <br/>
<input value="ON" name="windowoption" type="checkbox"/>
Abrir en una nueva ventana
</form>

 En <option selected/>, es donde pondremos el título que se verá cuando los links no están expandidos.

 Si queremos añadir más links, copiamos una de las líneas y la añadimos antes de </select> y así podemos añadir los que necesitemos.

Podemos colocar en el menú la url de cualquiera de nuestras entradas o etiquetas.

El resultado:

Lo podéis ver en el gadget  ♥ Etiquetas.
Lo podemos abrir en la misma ventana o en una nueva, si clicamos o no. Puede servir para muchas cosas mas.
Eso si, cuando añadamos otro titulo lo tendremos que agregar,
Así que.. imaginación y si queréis dejarme el link para verlo...encantada

 

Después de mucho buscar he encontrado el resultado Como colocar aviso de uso de cookies en el blog y se trata de poner un gadget HTML y pegar el siguiente código, para Blogger:

<script src="http://j.maxmind.com/app/geoip.js"></script>
<div id="barritaloca" style="display:none;position:fixed;left:0px;right:0px;bottom:0px;width:100%;min-height:40px;background: #333333;color:#dddddd;z-index: 99999;">
<div style="width:100%;position:absolute;padding-left:5px;font-family:verdana;font-size:12px;top:30%;">
Usamos cookies propias y de terceros para mostrar publicidad personalizada seg&uacute;n su navegaci&oacute;n. Si continua navegando consideramos que acepta el uso de cookies.
<a href="javascript:void(0);" style="padding:4px;background:#4682B4;text-decoration:none;color:#fff;" onclick="PonerCookie();"><b>OK</b></a>
<a href="http://www.google.com.ar/intl/es-419/policies/technologies/types/" target="_blank" style="padding-left:5px;text-decoration:none;color:#ffffff;">M&aacute;s informaci&oacute;n</a>
</div>
</div>
<script>
function getCookie(c_name){
var c_value = document.cookie;
var c_start = c_value.indexOf(" " + c_name + "=");
if (c_start == -1){
c_start = c_value.indexOf(c_name + "=");
}
if (c_start == -1){
c_value = null;
}else{
c_start = c_value.indexOf("=", c_start) + 1;
var c_end = c_value.indexOf(";", c_start);
if (c_end == -1){
c_end = c_value.length;
}
c_value = unescape(c_value.substring(c_start,c_end));
}
return c_value;
}
function setCookie(c_name,value,exdays){
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}
if(geoip_country_code()=="ES" && getCookie('aviso')!="1"){
document.getElementById("barritaloca").style.display="block";
}
function PonerCookie(){
setCookie('aviso','1',365);
document.getElementById("barritaloca").style.display="none";
}
</script>

Para Worpress lo hariamos en el archivo footer.php
Con este código lo verían solo los visitantes españoles, a los cuales les afecta la ley de cookies, pero si queremos que todos los visitantes sean de donde sean, lo vean agregaremos el siguiente:

<div id="barritaloca" style="display:none;position:fixed;left:0px;right:0px;bottom:0px;width:100%;min-height:40px;background: #333333;color:#dddddd;z-index: 99999;"><div style="width:100%;position:absolute;padding-left:5px;font-family:verdana;font-size:12px;top:30%;"> Usamos cookies propias y de terceros para mostrar publicidad personalizada seg&uacute;n su navegaci&oacute;n. Si continua navegando consideramos que acepta el uso de cookies. <a href="javascript:void(0);" style="padding:4px;background:#4682B4;text-decoration:none;color:#fff;" onclick="PonerCookie();"><b>OK</b></a> <a href="http://www.google.com.ar/intl/es-419/policies/technologies/types/" target="_blank" style="padding-left:5px;text-decoration:none;color:#ffffff;">M&aacute;s informaci&oacute;n</a></div></div><script>function getCookie(c_name){ var c_value = document.cookie; var c_start = c_value.indexOf(" " + c_name + "="); if (c_start == -1){ c_start = c_value.indexOf(c_name + "="); } if (c_start == -1){ c_value = null; }else{ c_start = c_value.indexOf("=", c_start) + 1; var c_end = c_value.indexOf(";", c_start); if (c_end == -1){ c_end = c_value.length; } c_value = unescape(c_value.substring(c_start,c_end)); } return c_value;}function setCookie(c_name,value,exdays){ var exdate=new Date(); exdate.setDate(exdate.getDate() + exdays); var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString()); document.cookie=c_name + "=" + c_value;}if(getCookie('aviso')!="1"){ document.getElementById("barritaloca").style.display="block";}function PonerCookie(){ setCookie('aviso','1',365); document.getElementById("barritaloca").style.display="none";}</script>

Con cualquiera de estos codigos evitaremos posibles sanciones por la ley de cookies. El creador del script es Cicklow

La barra se coloca abajo pero si quieres que aparezca arriba, busca en el codigo:

style="display:none;position:fixed;left:0px;right:0px;bottom:0px;width:100%;min-height:40px;background: #333333;color:#dddddd;z-index: 99999;">

en vez de bottom pon top y aparecera arriba.

 Mi código y mis colores:

<script src="http://j.maxmind.com/app/geoip.js"></script><div id="barritaloca" style="display:none;position:fixed;right:0px;top:0px;width:100%;min-height:40px;background: #bbf2ce;color:#0d430f;z-index: 99999;"><div style="width:100%;position:absolute;padding-left:200px;font-family:verdana;font-size:12px;top:30%;">Usamos cookies propias y de terceros para mostrar publicidad personalizada seg&uacute;n su navegaci&oacute;n. Si continua navegando consideramos que acepta el uso de cookies.<a href="javascript:void(0);" style="padding:4px;background:#2dcf94;text-decoration:none;color:#fff;" onclick="PonerCookie();"><b>OK</b></a><a href="http://www.google.com.ar/intl/es-419/policies/technologies/types/" target="_blank" style="padding-left:5px;text-decoration:none;color:#0d430f;">M&aacute;s informaci&oacute;n</a></div></div><script>function getCookie(c_name){var c_value = document.cookie;var c_start = c_value.indexOf(" " + c_name + "=");if (c_start == -1){c_start = c_value.indexOf(c_name + "=");}if (c_start == -1){c_value = null;}else{c_start = c_value.indexOf("=", c_start) + 1;var c_end = c_value.indexOf(";", c_start);if (c_end == -1){c_end = c_value.length;}c_value = unescape(c_value.substring(c_start,c_end));}return c_value;}function setCookie(c_name,value,exdays){var exdate=new Date();exdate.setDate(exdate.getDate() + exdays);var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());document.cookie=c_name + "=" + c_value;}if(geoip_country_code()=="ES" && getCookie('aviso')!="1"){document.getElementById("barritaloca").style.display="block";}function PonerCookie(){setCookie('aviso','1',365);document.getElementById("barritaloca").style.display="none";}</script>

En este post, vamos a ver como poner unos códigos para tener un Enlace a Seguidores


    
                             Seguir La Red Te Ayudara



La idea es sin tener el gadget de seguidores, con estos enlaces poderlo hacer, y por supuesto poder ponerlo en el lugar que queramos.
Ya que añadiremos un gadget HTML y lo colocaremos donde queramos.

Con enlace en texto e imagen:

<a href="http://www.blogger.com/follow-blog.g?blogID=XXXXXXXXXXXX" target="_blank"><img src="AQUI LA URL DE LA IMAGEN"/> Seguir La Red Te Ayudara</a>

Con enlace en una imagen:

<a href="http://www.blogger.com/follow-blog.g?blogID=XXXXXXXXXXXX" target="_blank"><img src="AQUI LA URL DE LA IMAGEN"/></a>

Con enlace de texto:

<a href="http://www.blogger.com/follow-blog.g?blogID=XXXXXXXXXXXX" target="_blank"> Seguir La Red Te Ayudara</a>