Subcribete a nuestro RSS FeedSiguenos en TwitterSiguenos en FacebookSiguenos en youtubeSiguenos en google+

miércoles, 25 de diciembre de 2013

Anular,recuperar el nuevo sistema de comentarios con respuestas anidadas

▲▼ Anular,recuperar el nuevo sistema de comentarios con respuestas anidadas

Anterior a esta entrada les conté acerca de lo nuevo en blogger, responder,reply en los comentario ,Hoy les explico dado a tantos problemas ocasionados con esto nuevo de blogger que a muchos los tomo por sorpresa ya que cuando entraban a su blog vieron la parte de los comentarios completamente diferente sin estilos,sin numeracion,sin emoticones y todo debido a este nuevo cambio pero bueno para todo hay y si no la hay se busca la manera de que aparezca una solución a cada problema.

        


bueno trasteando un poco en el blog de prueba me he dado cuenta de que blogger al agregar este nuevo sistema respuestas anidadas también nos incluyo los estilos,css a la plantilla 
 <b:includable id='threaded_comment_css'> si buscan este código en su plantilla de seguro lo van a encontrar todo el código es hasta que cierre <b:includable que debe cerrar así  </b:includable> y tienen dos opciones:

1-Si les funciona bien y quieren mantenerlo pues deben modificar este código de los estilos,css a sus gustos.

2-Si quieren recuperar el diseño anterior de sus comentarios  busquen el siguiente código :



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


Una ves encontrado en su lugar pongan el siguiente:



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



Para las personas cuyas todavía no han experimentado este nuevo sistema ya que sus plantilla son de diseñadores como la mía y quisieran tenerlo o provar lo único que van a hacer es van a buscar los códigos que les di antes pero ahora va a ser contrario :

busquen lo siguiente 



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


Una ves encontrado en su lugar pongan el siguiente:



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


Guarden plantilla y busquen una entrada con comentarios y fijase si lo tienen y si les funciona algo que deben tener en cuenta es que a muchos no les funciona porque este nuevo sistema no es compatible de momento  con la librería scriptaculous. Todo funcionará bien, pero el enlace responder no reaccionará cuando se le haga clic. El resultado es que tendrás el sistema pero no se podrán anidar los comentarios.

Puedes probar y una vez que veas que el aspecto es el nuevo, anula momentáneamente scriptaculous para definitivamente comprobar que todo funciona. oloman también explica algunos métodos y soluciones acerca de este nuevo sistema y JMiur nos explica algo de esto también .

Bueno es todo recuerden que compartir y comentar no cuesta nada si pueden y creen que esta información les es útil denle click a los botoncitos en los que quieran compartir de facebook,twitter,google+ y bitacoras y así otros que también necesitan el código lo podrán ver muchas gracias.
& nbsp;& nbsp;
▲▼ Añadiendole estilo a los Blockquote en blogger

Los Blockquote los usamos mucho para destacar porciones de un artículo tanto como frases cortas como extensos párrafos o codigos, los blockquote poseen un estilo distinto que atrae al lector hacia algo importante. En blogger podemos añadir blockquote con solo un simple clic.solo tenemos que seleccionar lo que van a mostrar primero y luego click en las comillas ,las vas a encontrar en el editor de blogger en la parte superior
Cuando creas una entrada utilizando el editor en blogger encontrarás un botón como el de la siguiente imagen:

        


Blogger incluye en la plantilla unas líneas de CSS para darles un poco de estilo que determinan el estilo del blockquote y por tanto el aspecto que éste tendrá.
En esta entrada quiero explicarles la forma de personalizar este elemento tan útil por lo que seguir los siguientes pasos te ayudará a conseguir blockquote que se adapten a las necesidades de sus entradas.

 Lo primero es ir a su plantilla :


Edición de HTML >>> expandimos artilugios

Y buscamos : ]]></b:skin>
una ves encontrado colocamos los estilos para los blockquote justo antes.

Si le quieren poner una imagen de fondo usen el siguiente codigo:

blockquote {
background:url("URL IMAGEN DE FONDO") repeat scroll 0 0 #FFFFFF;
border:1px solid #CCCCCC;
font:14px/22px normal helvetica,sans-serif;
margin-bottom:15px;
margin-left:60px;
margin-top:15px;
overflow:auto;
padding:10px 5px 10px 15px;
width:480px;
}

Si solo le quieren poner un color de fondo usen el siguiente codigo:

blockquote {
background:#FFFFFF; 
border:1px solid #CCCCCC;
font:14px/22px normal helvetica,sans-serif;
margin-bottom:15px;
margin-left:60px;
margin-top:15px;
overflow:auto;
padding:10px 5px 10px 15px;
width:480px;
}
Como pueden ver los codigos que les brindo  los coloque dentro de blockquote,con eso pueden ver un ejemplo de que se trata .
Pueden cambiar los colores a sus gustos  #FFFFFF;   y  #CCCCCC; por los que ustedes quieran
Si deseas modificar el ancho del blockquote aumenta o disminuye el valor 480 de la línea width:480px;. 
& nbsp;& nbsp;
▲▼ Como Instalar y personalizar el nuevo formulario de contacto de blogger

Desde hace un tiempo blogger nos sorprendió con un nuevo gadget, este se trata de un formulario de contacto,y porque es una sorpresa bueno ya que blogger no contaba con el mismo en comparacion con otros sitios y por lo tanto teníamos que recurrir a otras opciones para poder tener nuestro propio formulario,lo que pasa es que es un gadget por lo tanto aparecerá en nuestra sidebar,barra lateral.Lo que vamos a hacer es colocarlo en una página estática y no dejar que se muestre en un gadget.

        


Lo primero que vamos a hacer es ir a añadirlo para eso nos vamos a diseño y añadir un gadget y buscamos formulario de contacto.

        


Le damos a añadir,este lo pueden añadir en donde quieran ahora sin salirnos de diseño a la izquierda van a ver paginas.

         

Le damos click a paginas>>>> después a pagina nueva>>>> luego a pagina en blanco >>>> le van a dar el titulo que quieran darle >> formulario de contacto o contactame o como quieran luego selecionan HTML y pegan el siguiente código:

<style>
/*Formulário de contacto Blogger */
#formcontact{
 padding: 8px 10px;
 font-size:16px;/*-----tamaño del texto---*/
 color:#000000;/*-----color del texto---*/
 border:solid 1px #000000;/*-----color y ancho del borde del cuadro completo---*/
 border-radius: 18px 18px; /*-----el radio del cuadro  mas en numero mas redonda son las puntas ---*/
 -moz-border-radius: 18px 18px;
 -webkit-border-radius: 18px 18px;  
 box-shadow: inset 1px 1px 3px 0 #000;
 -moz-box-shadow: inset 1px 1px 3px 0 #000;
 -webkit-box-shadow: inset 1px 1px 3px 0 #000;
 text-shadow: 1px 1px 0 #9d9d9d;
 background:-moz-linear-gradient(0% 100% 90deg,#7e7e7e, #5e5e5e);/*-----color de fondo del cuadro ---*/
 background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#5e5e5e), to(#7e7e7e));
  
}

#formcontact p{  
}
.contact-form-name, 
.contact-form-email, 
.contact-form-email-message, 
.contact-form-button-submit { 
 width: 400px;
 max-width: 100%;
 margin-bottom: 20px;
 margin:5;
 padding: 7px 12px;
 font-size:16px;/*-----tamaño del texto que escribes---*/
 color:#fff; /*-----color del texto que escribes---*/
 border:solid 1px #000000;/*-----borde y color de los cuadros donde escribes---*/
 border-radius: 18px 18px; 
 -moz-border-radius: 18px 18px;
 -webkit-border-radius: 18px 18px;  
 box-shadow: inset 1px 1px 3px 0 #000;
 -moz-box-shadow: inset 1px 1px 3px 0 #000;
 -webkit-box-shadow: inset 1px 1px 3px 0 #000;
  background:-moz-linear-gradient(0% 100% 90deg,#7e7e7e, #5e5e5e);/*-----color de fondo de los cuadros donde escribes---*/
 background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#5e5e5e), to(#7e7e7e));
  
}

.contact-form-button-submit {  /*-----como se ve el botón enviar sin pasar el mouse por encima---*/
 width: 180px;  /*-----ancho del botón---*/
 height:40px;    /*-----altura del botón---*/
 border:solid 1px #000;
 color:#000;
  font-size:18px;
  background:-moz-linear-gradient(0% 100% 80deg,#5f5f5f, #000);/*-----color de fondo---*/
 background:-webkit-gradient(linear, 0% 0%, 0% 80%, from(#000), to(#5f5f5f)); 
 box-shadow: inset 1px 1px 3px 0 #000;
 -moz-box-shadow: inset 1px 1px 3px 0 #000;
 -webkit-box-shadow: inset 1px 1px 3px 0 #000;
  text-shadow: 1px 1px 0 #ccc; 

}
.contact-form-button-submit:hover {  /*-----este código es para al pasar mouse por encima cambia boton enviar---*/
border-color: #ccc;  /*-----color del borde---*/
background: #FF8C00;   /*-----color de fondo---*/
color: #fff;   /*-----color del texto---*/
text-shadow: 1px 1px 0 #000; 

}

.Button2 {  /*-----como se ve el botón borrar todo sin pasar el mouse por encima---*/
 width: 180px;  /*-----ancho del botón---*/
 height:40px;    /*-----altura del botón---*/
 border:solid 1px #000;
 color:#000;
  font-size:18px;
 border-radius: 18px 18px;
 -moz-border-radius: 18px 18px;
 -webkit-border-radius: 18px 18px; 
 background:-moz-linear-gradient(0% 100% 80deg,#5f5f5f, #000);/*-----color de fondo---*/
 background:-webkit-gradient(linear, 0% 0%, 0% 80%, from(#000), to(#5f5f5f)); 
 box-shadow: inset 1px 1px 3px 0 #000;
 -moz-box-shadow: inset 1px 1px 3px 0 #000;
 -webkit-box-shadow: inset 1px 1px 3px 0 #000;
 text-shadow: 1px 1px 0 #ccc; 

}
.Button2:hover {  /*-----este código es para al pasar mouse por encima cambia borrar todo---*/
border-color: #ccc;  /*-----color del borde---*/
background: #FF8C00;   /*-----color de fondo---*/
color: #fff;   /*-----color del texto---*/
text-shadow: 1px 1px 0 #000; 
border-radius: 18px 18px;
 -moz-border-radius: 18px 18px;
 -webkit-border-radius: 18px 18px; 
} </style>


<br />
<div id="formcontact">
<br />
<form name="contact-form">
<div>
<br />
<br />
<b>&nbsp;&nbsp;&nbsp;&nbsp;Su Nombre:</b> <span style="color: red;">*</span></div>
&nbsp;<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="50" type="text" value="" />

<br />
<div>
<b>&nbsp;&nbsp;&nbsp;&nbsp;Su E-mail:</b> <span style="color: red;">*</span></div>
&nbsp;<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="50" type="text" value="" />

<br />
<div>
<b>&nbsp;&nbsp;&nbsp;&nbsp;Mensage:</b> <span style="color: red;">*</span></div>
&nbsp;<textarea class="contact-form-email-message" id="ContactForm1_contact-form-email-message" name="email-message" rows="6"></textarea><br />
&nbsp;&nbsp; <input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Enviar" />
&nbsp;<input class="Button2" id="Button2" type="reset" value="Borrar Todo" /><br />
<div style="max-width: 450px; text-align: center; width: 100%;">
<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">
</div>
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
</div>

Ahora le dan a publicar y si le dan a ver van a obtener la url de la página estática que crearon en este caso el formulario de contacto.

Por ultimo nos falta algo que es ocultar el gadget para que no se muestre doble en un gadget y en una página estática y nos vamos a ir a nuestra plantilla y con CTRL+F buscamos </head>
y una ves encontrado justo antes colocamos el siguiente :

<!--Evita que se muestre el gadget de formulario de contacto  -->

<b:if cond='data:blog.url != &quot;&quot;'>
<style type='text/css'>
#ContactForm1 {
display: none;
}
</style>
</b:if>

<!-- Fin para evitar que se muestre el gadget de formulario de contacto  -->


Una vez puesto el codigo le damos a guardar plantilla y es todo ya cuentan con un formulario de contacto .

NOTA: los mensajes los van a recibir en su cuenta de correo de gmail.
& nbsp;& nbsp;
▲▼ Como añadir un autor a blogger usando el nuevo diseño

Muchos blogs cuentan con varios autores.lo cual es una ayuda para el mismo ya que mientras mas autores aiga mas entradas publican y es un muy buen beneficio para el blog.El que cuente con un blog y simplemente quisiera invitar a alguna persona a su blog y brindarles la posibilidad de acceso para publicar en en el mismo ,es bien cencillo de realizar este paso.

        


Un bloguero puede agregar hasta 100 autores en un blog, este cuenta con dos niveles de acceso que se le puede dar a los autores. 

1-Darle acceso de autor, esto le dará a los invitados acceso a publicar únicamente . 

2-Darle acceso de administrador, esto le dará a los invitados acceso completo a su blog. A las entradas ,paginas,estadisticas,comentarios,plantilla,y a la configuracion del mismo.

Para añadirlo nos dirigimos a nuestro control de panel en blogger,y en el blog que quieres añadir al invitado damos click en la pestaña y click en configuracion como muestro en la siguiente imagen.

        


Ahora nos dirigimos a permisos y damos click en añadir autores .

        

En el recuadro van a colocar la direccion de correo de la persona que quieren invitar y damos click en el boton invitar a autores.

        


Aquí van a ver que ya tienen la invitacion pendiente .

        

A la persona la cual le enviastes la invitacion va a recibir algo como en la siguiente imagen.


        


Una ves el invitado haga click en la invitacion lo va a dirigir a su control de panel que automaticamente tiene acceso solo a publicar eso si la persona a  la cual invitas debe tener cuenta con google o blogger para poder entrar ahora si el dueño decea cambiar el acceso del invitado solo se dirige a la imagen 4 y en el cuadro del invitado va a ver una pestaña le das click para abrirla y le puedes cambiar a administrador.


Eso si el unico que tiene el acceso y control por completo a permitirle al invitado que sea autor para que publique o administrador para que tenga acceso a publicar y a otras cosas mas ,es el administrador del blog o sea el dueño como tambien tienes la opcion de eliminarlo por completo vas a configuracion >> permisos y pones el mouse,raton encima del invitado te va a aparecer la pestañita para darle el acceso como autor o administrador y al final te aparece una X le das click en ella y si lo que quieres es eliminarlo por completo y ya no tendra mas acceso a tu blog.
& nbsp;& nbsp;
▲▼ Como instalar el Sistema de estadísticas y visitas de Google Analytics

Google nos proporciona de forma gratuita a Google Analytics este es un completo sistema de estadísticas y con el que podremos obtener informes detallados sobre el número de visitas de nuestro blog,número de páginas vistas,el tiempo de cada visita que permanece en el sitio, ruta de entrada de las visitas (desde un buscador, desde otra página o tecleando directamente la dirección del blog), navegadores,sistemas operativos que utilizan para entrar a nuestro blog,las palabras que han utilizado en los buscadores para llegar al blog,páginas que nos enlazan, partes de nuestro sitio que son las más visitadas y mas......

        

1- Para utilizar este servicio, lo primero será acceder a su página de registro, una vez allí van a ver que hay dos opciones. Si ya contamos con una cuenta de Google, lo único es acceder con los datos de la cuenta. Si no tienen,la crearemos rellenando los datos requeridos.
Una vez hecha la cuenta, podremos acceder al sistema.

        

        


2-Una vez hayamos entrado,pulsaremos en el botón "Regístrese" que se encuentra a la derecha para dar de alta nuestro blog.especificaremos el nombre y la dirección de nuestro blog,mas abajo un nombre que lo identifique,puede ser tu nombre o el que quieran el país desde donde lo publicamos y la zona horaria. Luego Pulsamos en obtener ID de seguimiento.


        

        

       




3-Nos aparecera información sobre los términos de servicio y una vez aceptados nos aparecera toda la informacion que necesitamos,alli nos brindan un ID de propiedad web (UA-XXXXXXXX-X).

4-Al final nos brindan un codigo para ponerlo en nuestra plantilla como el siguiente :

El codigo ya biene listo para ponerlo en nuestra plantilla  con el  ID de propiedad web (UA-XXXXXXXX-X). que nos asignan.


<!-- Google Analytics-->
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-XXXXXXXX-X']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
<!--Final de Google Analytics-->

Copie el código que nos brinda  Google Analytics  y péguelo antes de la etiqueta de cierre </head> en su plantilla.

Una ves hecho eso guardan la plantilla y es todo ya cuentan con  Google Analytics es su sitio
& nbsp;& nbsp;
▲▼ Como recuperar nuestro código de Google Analytics

En varias ocasiones las personas me han preguntado como volver a recuperar e insertar en la plantilla su código de seguimiento de google Analytics,ya que por alguna razón lo han perdido.

La mayoría de las veces la pérdida de este código sucede porque al cambiar de plantilla en nuestro blog, nos olvidamos de guardar este código.

        

Para las personas que estén usando Google Analytics y piensan cambiar de plantilla, deberían de copiar y guardar antes de realizar algún cambio el código (en el notepad por ejemplo) y una vez hayas instalado la nueva plantilla, colocar el código en su lugar,este lo podemos colocar justo antes de  </head> .
Para aquella persona que ya haya hecho el cambio de plantilla y se ha olvidado de guardar el código de google Analytics, podrás recuperarlo fácilmente desde tu cuenta de Google Analytics.lo que tendríamos que hacer es:

[1] Accedemos a la cuenta de Google Analytics.

[2] Una vez en nuestra cuenta, pinchamos en "Administrador" .

[3] Y entre varias opciones le damos click a Información de seguimiento.

        

[4] Al final copiamos el códigos que nos brindan y lo colocamos en nuestra plantilla justo antes de  </head> 

        


una ves hallas colocado el código en su lugar guardamos y es todo ya cuentan con Google Analytics otraves.
& nbsp;& nbsp;
▲▼ Compartir tus entradas de blogger automáticamente a google plus

Desde hace un tiempo no teníamos alguna novedad de blogger,google, pero nos acaba de dar una sorpresita, es una nueva forma para compartir las entradas de blogger automáticamente  a nuestro perfil de google plus, con esto el rey de Internet intenta ponerse a la altura de otras redes sociales como facebook que ya contaba con esta opción mediantes terceros la cual era una ventaja sobre google plus,con esto nos ahorramos tiempo de hacerlo manualmente.

        


Si entramos a nuestro menú,pagina principal en blogger van a ver donde dice Google+, OJO recuerden que las cuentas deben de estar conectadas si le damos click van a ver los perfiles que tienen en google plus si esta seleccionado el perfil personal y lo que quieren es que las entradas se publiquen en el perfil de pagina solo le damos click y este se pondrá hacia arriba y seleccionado.

        


Una ves seleccionado el perfil que queremos marcamos la casilla donde dice Compartir automáticamente después de publicar ,y es todo sus entradas a partir de ese momento se publicaran automaticamente en tu perfil o página de Google Plus según hayas seleccionado .
& nbsp;& nbsp;
▲▼ Cómo guardar los gadgets sin título en Blogger

Hace unos días algunos visitantes me han informado acerca de un pequeño problema que ha surgido.con el cual se ven desesperado sin saber que hacer, se trata de un error que no nos permite guardar un gadget o elemento de página en la barra lateral o en cualquier apartado del blog sin escribir antes su título.Pero esto no viene de ahora ya este problema se encuentra desde hace un tiempo. 

Cuando queremos guardar un gadget nos aparece un mensaje, ( Campo obligatorio; no dejarse en blanco ) algo que hacemos muchos de nosotros para instalar algún truco, decorar el blog con imágenes, etc...

        


Afortunadamente como siempre existen un par de soluciones y  bastante sencillas.por eso no hay que desesperarse siempre aparece alguna solución a los problemas en este caso jaime en su balcon nos habla hacerca de esto.

La primera solución a este problema con tan solo introducir en el campo de texto del título el carácter &nbsp; este representa un espacio en blanco, ya con solo este carácter se soluciona el problema ,porque ya nos permitirá guardar el gadget sin necesidad de agregarle un título.

La segunda opción requiere de mas tiempo pero es también muy efectiva, sobre todo si vas a editar el gadget con frecuencia y no deseas estar copiando el carácter previamente descrito.

1) Darle un título al gadget y guardarlo

2) Accede a plantilla >>> edición de Html >>> continuar >>> Expandir plantillas de artilugios.

3) Pulsando las teclas Ctrl + F para abrir el buscador de tu navegador, escribe el título que le acabas de poner al gadget.

4) Encontrarás un código muy similar a esto:


<b:widget id='HTML6' locked='false' title='AQUI APARECE EL TITULO' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:includable>
</b:widget>


Ahora solo debes de borrar la parte que ves en naranja y guardar la plantilla para terminar.
& nbsp;& nbsp;
▲▼ El gadget buscador en blogger se queda cargando

Desde hace unos días me encontraba haciendo unos ajustes a esta nueva plantilla y preparándola para sustituir la anterior,todo marchaba de maravilla al subirla todo bien que yo supiera ya que el gadget buscador de google al añadirlo se quedaba cargando nunca aparecía y no me explicaba que estaría pasando porque todo marchaba bien ,me puse a buscar para ver que sucedía y nada no encontraba nada y ni idea me puse a chequear en Internet y nada o lo estaba buscando por la palabra equivocada el caso que no daba con lo que era hasta pensé que fuese algún error de blogger y con el tiempo se arreglaría.

        

Visite algunos blogs y nada hasta que llegue al blog de oloman y casualmente le había sucedido lo mismo anteriormente hace ya algún tiempo y gracias a el que lo posteo pude resolver el misterio de porque no aparecía el gadget .Lo que paso fue que al cargar la plantilla con el nuevo diseño de blogger este no me subió un código que parece ser muy importante lo cual hiso que me rompiera la cabeza por unos días. el cual agregue manualmente y problema resuelto todo se debía a este pequeño código que oloman dio con el.

        

Para el que le suceda lo mismo en algún momento sin querer lo borraron o les sucedió igual que a mi o no lo tenia la plantilla que instalaron deben de añadir el siguiente código después del </head> .


<b:include data='blog' name='all-head-content'/>

Una ves puesto el código en su lugar ya aparecerá de regreso nuestro buscador.

        
& nbsp;& nbsp;
▲▼ Evitar la redirección de dominios según el país desde el que se accede.

Blogger a efectuado un cambio para que los blog se redireccionaran automáticamente a  URL con subdominios según el país desde el cual se visite, ejemplo para mexico blogspot.com.mx , para España blogspot.com.es ,para Argentina blogspot.com.ar , etc.......
Siendo así esto genera graves problemas sobre todo en el posicionamiento y PageRank.

        

Por alguna razon para los blog que poseen url personalizada,dominio propio como este no han sido afectado con esto del redireccionamiento.

Segun el soporte de Google para Blogger 

Permitimos a todos los usuarios ver la versión .com de un blog de Blogger. Para ello, deben escribir http://[nombre del blog].blogspot.com/ncr, que siempre redirecciona a esta versión. La indicación "no country redirect" (ncr) nos impedirá temporalmente redireccionar a los lectores a la versión local del blog.

Esto quiere decir que si nuestro blog nos aparece como http://nombreblog.blogspot.com.ar, poniendo en el navegador http://nombreblog.blogspot.com/ncr, este nos aparecerá como siempre, con la dirección a la que estábamos acostumbrados.

Definitivamente Blogger se empeña en ponernos las cosas un poco difíciles pero para todo hay una solucion en este caso Emilio cobos nos brinda un codigo para Evitar la redirección nueva de Blogger 

Para esto simplemente es necesario colocar un pequeño código de un script, en la edición HTML de la plantilla justo despues del <head>

<script>
//<![CDATA[
(function(){
var URL = document.URL, reg = /\.blogspot\.(com\...|..)\//
if( URL.match( reg ) ){
document.location = URL.replace( reg, ".blogspot.com\/ncr\/" )
}
})()
//]]>
</script>
& nbsp;& nbsp;
atras &nbsp;&&nbsp;inicio &nbsp;&&nbsp;siguiente

jueves, 19 de diciembre de 2013

5 trucos Blogger para las listas con viñetas

▲▼ 5 trucos Blogger para las listas con viñetas

Antes de entrar al detalle de estos 5 trucos para modificar el aspecto de las listas con viñetas de Blogger, hay que aclarar para los principiantes que nos referimos a los listados con puntos que puedes crear dentro de un post, que de normal van precedidos de puntos negros y los párrafos todos pegados. Con estos 5 trucos vamos a aprender a separar más el texto de la lista, a que los párrafos estén en una fuente itálica, a quitar los puntos negros y a cambiarlos por cuadrados o por círculos transparentes. En realidad todos estos "trucos" son la aplicación de diferentes propiedades del código CSS, un lenguaje informático con el cual podemos modificar el aspecto de nuestros contenidos.

                       

Truco 1. Quitar las viñetas de todas las listas de todos los posts blog.
Tanto este truco como los siguientes que vamos a ver hacer se basan en la modificación de la plantilla, así que antes de nada vamos al editor de Blogger y abrimos nuestra plantillas (guarda una copia por si acaso). Una vez que guardes comprueba que todo ha quedado bien.
Ve a la parte de la plantilla que tiene el código CSS <b:skin>, expande esa zona.
Bajamas, pasando las zona de Variables Definitions, y entra a la parte donde está el código CSS normal.
Dentro del código CSS busca el apartado /* Widgets ------------------------------- */
Dentro del apartado de los "widgets" bus el siguiente código y guarda la plantilla.

ul li {list-style-type:none;}

Truco 2: Poner en cursiva todas las listas dentro de los posts.
Este es una continuación del anterior truco, lo único que cambia es el código que vamos a pegar que será. todas las listas  Quitar las viñetas de algunas listas del blog.

ul li {font-style:italic;}

Truco 3: Cambiar el tipo de viñeta de la listas.
Aquí podemos elegir por añadir un círculo, un disco o un cuadrado, que son las tres posibilidades que hay para las listas ordenadas, aparte del punto. Tened en cuenta que esto se cambiará en principio en todas las listas del blog, las nuevas y las que ya hayas escrito en el pasado.

ul li {list-style-type:circle;}
ul li {list-style-type:disc;}
ul li {list-style-type:square;}

Truco 4. Separar el texto de las listas de viñetas.
Si queremos que queden el texto más separado que en el resto del documento podemos usar otra propiedad de CSS, en la que colocaremos el valor de separación deseado. 1.0 es una separación estrecha, un 1.5 da más amplitud y un 2.0 es una separación doble, pudiendo adaptar el valor tanto como quieras. Debes tener en cuenta que no está separándote los elementos, sino todas las líneas del texto.

ul li {line-height:1.8;}

Antes de pasar al cuarto y último truco vamos a intentar colocar todo lo que hemos aprendido junto, para que veas que las instrucciones que se colocan dentro de los mismos corchetes. Por ejemplo para la imagen que tienes al inicio del post el código usado es algo así.

ul li {list-style-type:square;
font-style:italic;
line-height:1.8;}

Truco 5. Vamos a explicar como usar todo lo que hemos hecho antes pero sólo en las listas que a nosotros nos interese y no en todas. Ahora tendremos que usar dos códigos uno CSS y uno HTML. El primero lo colocamos igual que antes dentro de la plantilla, en el código CSS, en la sección de los "posts". Sería el mismo código de antes pero cambiando ul por #lista (Sí, es como si fuera un hastag de Twitter, pero en este caso estamos usando una identidad de CSS).

#lista li {list-style-type:square;
font-style:italic;
line-height:1.8;}

¿Bien? El código HTML se aplica dentro del post. Es decir, con el cambio que hemos hecho antes no veras ningún cambio en el blog de Blogger, pero cuando escribas una lista, si le colocas el identificador entonces el aspecto de la lista cambiará.
Desde un post creamos una lista con viñetas, con su contenido.
Entras en el código HTML. normal y buscas la parte donde aparece <ul>.
Le añadimos la identidad, es decir que cambiamos el código <ul> por el siguiente.

<ul id="lista">

Antes de terminar, quiero aclarar que estos trucos son para principiantes para poder hacer las modificaciones ya que no requieren borrar nada de la plantilla. Para un desarrollo más profesional y que quede el código más limpio habría que buscar en cada plantilla el sitio exacto en el que se está codificando el formato de las listas. Por ejemplo en la plantilla Watermark de Blogger, creada por Joshn Peterson, el formato CSS de estas listas está en indicado en el apartado de Widgets, a través de los siguientes selectores:

.widget .post-body ul
.widget .post-body ul li

Para que quede un código más limpio los cambios es mejor realizarlos en esta parte de la plantilla eliminando las características que no queramos para las listas del blog. Espero que las indicaciones os resulten útiles, aunque modificando el código CSS se pueden realizar un montón de cambios en las listas, como por ejemplo añadirles un fondo de pantalla con una imagen, un marco, darles márgenes, hacer que el texto tenga color, cambie de tamaño al pasar o sea más grande.
& nbsp;& nbsp;
▲▼ Activar las vistas dinámicas de Blogger y enlazarlas desde el menú

Muchos usuarios de Blogger tienen la idea de que las "Vistas dinámicas" son sólo una plantilla más que puedes elegir para el blog, que permite a los usuarios ordenar los resultados de varias formas, pero que a penas puedes personalizar. Pero no es así al 100%, de hecho un blog puede tener la plantilla que a ti te guste y al mismo tiempo las Vistas dinámicas activadas. Esto es muy fácil de hacer, así que aprovechando el artículo aprenderemos también como enlazar aquellas Vistas dinámicas que nos interesen y sólo aquellas que nos interesen.

         

1. Activar las vistas 7 dinámicas de Blogger.

Entra en el editor de Blogger y ve a Configuración, allí al apartado otros.
Activa el feed del blog en modo completo. Y guarda el cambio de la configuración. 
Con esto es suficiente, ya se puede acceder a las vistas dinámicas colocando la URL en el navegador.

2. Enlazar las vistas dinámicas de Blogger desde el menú

Bien, ya sabemos que las vistas dinámicas están activadas, pero nuestro blog se sigue viendo igual porque no hemos cambiado la plantilla. ¿Cómo podemos acceder a esta presentación dinámica del blog? Pegando la dirección URL de la vista dinámica en el navegador, pero como nuestros lectores no van a recordar como se hace esto, lo lógico es crear un enlace para que puedan ir hasta las vistas dinámicas.

Como existen 7 vistas dinámicas diferentes cada una de ellas tendrá su propia URL y enlace.
nombredelblog.blogspot.com/view/classic
nombredelblog.blogspot.com/view/flipcard
nombredelblog.blogspot.com/view/magazine
nombredelblog.blogspot.com/view/mosaic
nombredelblog.blogspot.com/view/sidebar
nombredelblog.blogspot.com/view/snapsnot
nombredelblog.blogspot.com/view/timeslider

En el caso de haber comprado un dominio propio se hace igual, pero lo lógico es enlazarlo con el dominio, de forma que por ejemplo, para este blog y la vista classic quedaría así:
http://www.blogeninternet.com/view/classic

¿Y si tienen que enlazar todas? No, sólo las que te interese.

a) Ve al apartado de Página, dentro del editor de Blogger.
b) Crea una nueva página en el blog, del tipo Dirección Web, y copia sólo aquella dirección que te interese.
c) A partir de este momento tendrás un nuevo enlace en tu menú principal que va a la página dinàmica que quieras, y así puedes ver por ejemplo tu blog en formato Flipcard. Mosaico o Magazine.

3. Personalizar el menú de las Vistas Dinámicas de Blogger

El problema que tendrás es que cuando entres a la vista dinámica. Encontrarás que en el menú desplegable de la izquierda vienen todas las vistas dinámicas. Entonces para eliminar este acceso sencillo tienes dos opciones básicas.

  • Quitar el menú desplegable de las Vistas Dinámicas. Al menú principal y a otros no les afectará para nada.
  • Quitar del menú desplegable aquellas vistas dinámicas que no te gustan y dejar las que si te gustan.
Ambas opciones son sencillas de hacer, ya que sólo tienes que copiar unos códigos CSS en las opciones avanzadas del Editor de Plantillas de Blogger. Puedes ver la solución en este blog sobre Blogger, que es de donde he encontrado la información.

Para ver a lo que me refiero en este articulo puedes ver ahora mismo como he añadido una vista de Flipcard del blog, una opción muy interesante para visualizar un blog que tenga imágenes y para realizar búsquedas. Es algo temporal, así que si has entrado a través de una búsqueda de Google es posible que cuando leas esto ya no este visible el enlace. Espero que os haya resultado útil.
& nbsp;& nbsp;
▲▼ CSS: Variables Definitions en Blogger

En la estructura de la plantilla Blooger tenemos una parte dentro de la cabeza (head) que es especial de Blogger, llamada Variables Definition, que es un poco especial porque a una parte de ella la puedes cambiar sin entrar en la plantilla y otra parte no. Lo primero que hay que aclarar que las Variables Definitions de Blogger son una especie de alternativa al CSS. Lo que hacen es poder hacer cambios , y que está relacionado con las siguientes partes del head, el CSS Content y el CSS Mobile. Teniendo esto claro, vamos a ver como está estructurado el código y como modificar sus valores directamente sobre la plantilla para obtener cambios en el aspecto de nuestro blog.

        

Vamos a trabajar directamente sobre la plantilla Simple de Blogger para que puedas seguir todas las indicaciones una por una. Si observas cada uno de los códigos tiene los mismos elementos.
Variable name. Es el nombre que debemos buscar en el código CSS de la plantilla. Si por ejemplo el nombre es body.font, en cada sitio que aparezca se asignara el formato elegido.
Description. Es el nombre que lo describe y puede verse en el Editor de Plantillas.
Type. Explica el tipo de variable que se trata, por ejemplo "font" para fuentes de texto, o "color" para el color de una fuente.
Default. Es el valor por defecto de la plantilla, de forma que si no tocas la plantilla verás que Defalult y Value son el mismo valor, pero el Default no hay que tocarlo a no ser que quieras crear una plantilla nueva. Este es el valor que utiliza el Editor de Blogger si usas la opción de "volver a los valores predeterminados".
Value. Es el valor asignado a la variable y el que modificaremos si queremos cambiar la plantilla. Por ejemplo, en el caso de que sea una fuente, se puede poner el tamaño (12px) y el tipo de fuente (Arial, Times new roman, serif... ). Para el color hay varias formas de asignar el valor, el más frecuente es un valor con seis números como este: #123456. Hay que recordar que los valores se escriben siempre entre comillas.

/* Variable definitions
====================
<Variable name="keycolor" description="Main Color" type="color" default="#66bbdd" value="#66bbdd"/>

<Group description="Page Text" selector="body">
<Variable name="body.font" description="Font" type="font" default="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
<Variable name="body.text.color" description="Text Color" type="color" default="#222222" value="#222222"/>
</Group>

Con esto podrás leer con claridad cada línea y como podrás imaginar para modificar el código CSS lo habitual es sólo cambiar la propiedad Value, que es la que por ejemplo define que color vamos a asignar. El siguiente punto es que saber que hay parte de las Variables Definition que están dentro de 13 grupos (en la plantillas Simple), que además son los valores que puedes ver y cambiar desde el editor de plantillas. Estos grupos los identificarás porque se inician por la etiqueta <Group description ... > y se cierra con </Group>.

13 Grupos, con sus variables y lo que codifican.

 Page Text (texto general de la página)
  body.font  (fuente del texto general de la página)
  body.text.color. (color del texto general de la página)
 Background (fondos)  
  body.background.color (color del fondo del "cuerpo", de la página Web)
  content.background.color (color del fondo del contendor)
  header.background.color (color del fondo de la cabecera)
 Links (enlaces)
  link.color (color normal del enlace)
  link.visited.color (color del enlace cuando se ha entrado)
  link.hover.color (color del enlace al pasar por encima)
 Blog Title (titulo principal)
  header.font (fuente de la letra del título)
  header.text.color (color de la letra del título)
 Blog Description (descripción del blog)
  description.text.color (color del texto)
 Tabs Text (Texto del menú)
  tabs.font (fuente del texto del menú)
  tabs.text.color (color del texto del menú)
  tabs.selected.text.color (color del texto seleccionado)
 Tabs Background (Fondo del menú)
  tabs.background.color (color del fondo del menú)
  tabs.selected.background.color (color del fondo del menú) 
 Post Title (título de la entrada)
  post.title.font (fuente del título de las fuentes)
 Date Header. (fechas de la entrada)
  date.header.color (color de la fecha del post)
  date.header.background.color (color del fondo de la fecha)
 Post Footer (pie de página de la entrada)
  post.footer.text.color (color del texto del pie de la entrada)
  post-footer.background.color (color del fondo)
  post-footer.border.color (color del borde del pie de la entrada)
 Gadgets (Los elementos laterales extra)
  widget.title.font (fuente del texto)
  widget.title.text.color (color del texto)
  widget.alternate.text.color (color del texto alternativo)
 Images (Formato de las imágenes)
  image.background.color (color del fondo)
  image.border.color (color del borde)
  image.text.color (color de texto que hay bajo la imagen)
 Accents (Detalles)
  body.rule.color (color de la línea del separador)
  tabs.border.color (color del borde de las tablas)

Si has observado el código en esta primera parte verás  que todas las variables que se muestran en los grupos son de 2 tipos: colores y fuentes. Sólo se pueden definir estos dos aspectos, ya que estas dos variables son las que te permite modificar a través de la Edición Avanzada del editor de plantillas de Blogger. Cosas que no puedes hacer aquí es insertar gradientes, mover el título hacia la derecha, etc. Aparte, aun quedan un montón de Variables Definition que no están dentro de los grupos y sólo puedes modificarlas desde la plantilla de forma directa, que iremos explorando en otros artículos para no alargarnos demasiado.

Cambiar la plantilla de Blogger desde Variables Definitions. Hay muchas cosas que puedes hacer, vamos a ver por poner un ejemplo la personalización del texto que aparece debajo del Título describiendo nuestro blog.

1. Hacer que la descripción de la cabecera cambie de color. En este caso, como la variable description.color.text ya existe en la plantilla de Blogger Simple, sólo tenemos que modificar el código de color gris oscuro  #777777 a negro #000000. Recuerda que tienes que cambiar Value y no Default, pues si lo haces de la forma incorrecta no verás ningún cambio en el blog.
Buscamos la línea siguiente.

<Variable name="description.text.color" description="Description Color" type="color"
         default="#777777"  value="#777777"/>

Y lo transformamos en:

<Variable name="description.text.color" description="Description Color" type="color"
         default="#777777"  value="#000000"/>

2. Hacer que la descripción de la cabecera tenga formato. Ahora es un poco más complejo porque tenemos que añadir el código que nos interesa y luego unirlo a la sección normal de CSS de Blogger.

El primer paso es crear el código. 

<Variable name="description.text.font" description="Description Font" type="font"
         default="normal normal 20px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 25px Cuprum, Tahoma, Arial, sans-serif"/>

El segundo paso es pegar el código dentro del grupo.

<Group description="Blog Description" selector=".header .description">
     <Variable name="description.text.color" description="Description Color" type="color"
         default="#777777"  value="#000000"/>
     <Variable name="description.text.font" description="Description Font" type="font"
         default="normal normal 20px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 25px Cuprum, Tahoma, Arial, sans-serif"/>
     </Group>

El tercer paso es modificar el código CSS de la plantilla para que "llame" al nuevo código que hemos añadido. Para ello Buscaremos en la plantilla Simple de Blogger este código o uno equivalente si trabajas con otro template.

Header .description {
font-size: $(description.text.size);
color: $(description.text.color);

Lo cambiamos por

Header .description {
font-size: $(description.text.font);
color: $(description.text.color);

Para completar este segundo ejemplo y dejar el código libre de restos, quedaría hacer una cosa: buscar en las variables definition el de Blogger  en el que está description.text.size y tras encontrarlo se elimina, ya que ahora ya no tiene ninguna función. Y aún nos queda una sorpresa, al añadir este código a las "Variables Definitions" esta nueva característica aparecerá en el Editor y desde allí podrás cambiar a partir de ahora el tipo de fuente de la descripción.
& nbsp;& nbsp;
▲▼ Como cambiar el diseño CSS de las plantillas de Blogger

Existen nada menos que 3 formas de cambiar el diseño CSS de las plantillas de Blogger, una de ellas sencillas, usando las ayudas que nos aporta el editor de Blogger y dos de ellas entrando en el código de la plantilla para realizar los cambios a mano. Vamos a señalar sus ventajas y desventajas, para ver porque para personalizar a la medida y transformar el diseño de las plantillas blogspot es necesario aprender un poco de programación CSS, adaptada a Blogger. Antes de entrar en detalle hay que entender que el código CSS de las plantillas de Blogger está dentro de la plantilla (hoy en día se suele escribir fuera del código HTML) y que está formada por dos regiones: El código CSS normal, y las Variables Blogger, en estas últimas se dan valores CSS que se aplicarán a continuación sobre el código CSS normal. Es realmente algo complejo, ya que se podrían conseguir los mismos resultados sólo con el CSS normal.

        

1. Editor de Plantillas. La primera forma de modificar el aspecto de tu blog es entrar en este programa de ayuda donde te permite cambiar las Variables de Blogger como el color del fondo, la anchura del la columna lateral, el tipo de fuente para el título, para el texto de los blogs, etc. El primer método tiene la gran ventaja de que es muy intuitivo y eso está muy bien para principiantes, porque desde el primer día ya puedes elegir algo tan importante como el los colores del blog. También hay que tener en cuenta que el método tiene dos limitaciones.
Sólo puedes cambiar las Variables del diseño CSS definidas en la plantilla. Por ejemplo existen variables para el color de fondo de la pantalla, pero no existe la variable del fondo de los titulares. Si quisieras tener un blog con texto en negro, fondo en blanco, pero que los titulares de cada post fueran con letras blancas sobre un fondo oscuro, no podrías hacerlo.
Sólo puedes dar a las Variables los valores que te permite el Edito de Código CSS. Esto implica que por ejemplo para los colores del fondo el color se debe colocar en un formato en el que podemos añadir todos los colores y también que los fondos sean transparentes, pero el Editor no permite aplicar el sistema RGBA que tiene también colores translucidos, con un % de transparencia. Otro ejemplo, el tamaño de la plantilla se puede definir de forma variable con % para que varíe el contenido que se muestra en el blog si la pantalla es de menor tamaño, pero Blogger el editor de plantillas de Blogger sólo deja la opción de hacerlo con píxeles.

2. Cambiar la plantilla a mano respetando las Variables de Blogger. Esto consiste en entrar en el editor de la plantilla HTML y modifica a mano el código pero respetando el formato de las plantillas blogspot. Estos cambios requieren tener algún conocimiento de CSS y sobre como funcionan estas Variables. Esto permite que las plantilla que se crea aún se puede editar desde el Editor de Plantillas y es lo que hay que hacer si quieres crear un template de Blogger para difundirlo.  La diferencia con la plantilla anterior es que puedes:
Añadir nuevas Variables CSS en el diseño y por lo tanto modificarlas. Esto te permite por ejemplo diferenciar los links de diferentes zonas del blog, aportándoles diferentes colores y efectos gráficos. Así podrías tener links en los títulos con un color diferente a los enlaces que hay dentro del texto y que al pasar el ratón sobre ellos se iluminaran o cambiaran de color, mientras que los otros links del blog fueran fijos. 
Cambiar el CSS directamente sobre el código para añadir propiedades CSS3 como el degradado, bordes redondeados o transiciones.
Borrar Variables CSS que no uses. Esto es útil para hacer la páginas más sencilla y que cargue más rápido. A veces tenemos dos variables que hacen los mismo y se pueden reunir como la misma.
Cambiar el rango de acción de una Variable Blogger. Esto se realiza desde la parte del código CSS clásico, modificando las zonas a las que se aplica el diseño. Esto quiere decir que si por ejemplo tenemos una Variable que afecta al texto de todo el blog, podemos cambiarlo para que sólo se aplique a las columnas laterales.

3. Eliminar las Variables de Blogger y cambiar el código CSS de la forma clásica. Si has hecho algún curso de CSS3 algo que puedes hacer es directamente borrar la parte de las variables de Blogger y construir el código CSS de forma directa, tal y como se hace en cualquier página Web. Las ventajas que tiene este método es que eliminas de momento un montón de código, por lo que subirá de forma instantánea el ratio texto/HTML que es un punto importante en el posicionamiento SEO del blog. Otra ventaja es que el código será más sencillo de entender para un programador profesional ya que está escrito de la forma normal.

Otro punto importante es que al borrar las Variables de Blogger la plantilla no la puedes cambiar con los dos primeros métodos. En resumen, que si alguien se copia tu plantilla y es un principiante no podrá cambiarla, algo que en principio es bueno si quieres tener un diseño diferenciado y es inapropiado si lo que buscas es crear plantillas para difundirlas. Como podrás ver la forma en la que vamos a modificar las plantillas depende sobre todo del objetivo que tengas y de tu nivel de conocimientos de CSS.
& nbsp;& nbsp;
▲▼ Como hacer un fondo de la cabecera transparente

Ahora que hemos empezado a ver como está estructurado el documento de una template de Blogger podemos aplicar algunos trucos para modificar el diseño de una parte de Blogger como la cabecera. Para ello es fundamental darse cuenta de que la apariencia del blog se crea a capas, que están unas delante de otras. Eso quiere decir que de normal sólo ves la capa que está arriba de todo y las demás quedan abajo ocultas, siendo la única excepción cuando una capa es transparente. La otra cosa que hay que tener en cuenta es que cada una de las plantillas básicas de Blogger en el editor muestra diferentes Variables, así que voy a modificar la plantilla Sencilla y usando la variante que tiene un fondo de color naranja.

        

Entra en el Editor de plantillas de Blogger para personalizarla, selecciona en el menú el apartado Avanzado y dentro de ellas ves al grupo "Fondos". Verás que puedes modificar tres fondos el de toda la página (body) el contenido (content) y el tercero de la cabecera donde puedes cambiar el color. Pero además de modificar el color usando la paleta, también tenemos la opción de añadir la opción "transparente" que se ve como un botón a cuadros blancos y grises. Si esto lo aplicas sobre el Header, el fondo de la cabecera se hará transparente y podrás ver el fondo del contenido que es blanco, ya que la cabecera en esta plantilla está dentro de Content. Así que a partir de aquí se abren varias posibilidades.

Sacar la cabecera del apartado de la caja "content".
Hacer que la caja "content" sea transparente y dar color sólo a los posts.
Hacer transparente a la caja "content" y crear otra caja blanca que incluya el resto del contenido.


Vamos a realizar la opción 2 que es en principio la más sencilla, así que ya puedes dar el paso de hacer que el contenido sea también transparente. A continuación guardamos la plantilla y tenemos que ir al Editor de HTML para añadir algunos códigos.

        

1. Buscamos dentro del código CSS Variables Definitions el grupo que determina los fondos de las páginas, que será algo así.

<Group description="Backgrounds" selector=".body-fauxcolumns-outer">
     <Variable name="body.background.color" description="Outer Background" type="color" default="#66bbdd" value="#eeaa00"/>
     <Variable name="content.background.color" description="Main Background" type="color" default="#ffffff" value="transparent"/>
     <Variable name="header.background.color" description="Header Background" type="color" default="transparent" value="transparent"/>
   </Group>

2. Pegamos una nueva variable con el fondo blanco de los posts. 

<Variable name="post.background.color" description="Post Background" type="color" default="#ffffff" value="#ffffff"/>

y quedará como 

<Group description="Backgrounds" selector=".body-fauxcolumns-outer">
     <Variable name="body.background.color" description="Outer Background" type="color" default="#66bbdd" value="#eeaa00"/>
     <Variable name="content.background.color" description="Main Background" type="color" default="#ffffff" value="transparent"/>
     <Variable name="header.background.color" description="Header Background" type="color" default="transparent" value="transparent"/>
    <Variable name="post.background.color" description="Post Background" type="color" default="#ffffff" value="#ffffff"/>
</Group>


3. Enlazamos la nueva variable con el código normal CSS, añadiendo allí ($post.background.color) y también le damos un poco de espacio interior (15 píxeles) para que cuando escribamos las entradas no queden las letras pegadas al margen.
Buscamos este código o similar...

.post {
  margin: 0 0 $(post.margin.bottom) 0;
 }


4. Y añadimos unas líneas para que quede así.

.post {
  background-color: $(post.background.color);
  margin: 0 0 $(post.margin.bottom) 0;
  padding: 15px;
 }

5. Guardamos la plantilla Sencilla y ya la tenemos con un fondo de la cabecera transparente y las entradas sobre un fondo blanco para que puedan ser leídas de forma sencilla.

        
& nbsp;& nbsp;
▲▼ Compartir documentos online en Blogger con Scribd

Scribd es una de las muchas formas de compartir documentos online para que tus amigos, conocidos o alumnos puedan descargarse un archivo de texto, una hoja de cálculo o una presentación, pero destaca porque nos facilita subir esos documentos en nuestro blog de Blogger. ¿Cómo? Una vez hayas creado tu cuenta de Scribd y subido los documentos, puedes insertarlos dentro de uno de los posts, algo que también puedes realizar en Wordpress y en páginas Web de otro tipo. Permite subir documentos en los formatos de texto más frecuentes como RTF, TXT, PDF, PS (postScript), además de imagenes TIF, y algunos documentos de Microsoft Office (en concreto de Word, Excel y Power Point), es decir con extensiones .XLS, .XLSX, .PPT, .PPS, .PPTX, .PPSX, .DOC y .DOCX. También se pueden colgar los documentos de Open Office (archivos con extensiones .ODT, .OPD, .OPS, .ODF y .ODG) para los que prefieren usar programas de ofimatica libres y gratis, por lo que es ideal para trabajar con alumnos de secundaria y bachillerato. Sólo tienes que copiar la etiqueta Embed, y pegarla en el editor de código HTML, es decir el mismo procedimiento que insertar un vídeo de YouTube u otros elementos similares. Para que podáis ver como queda en Blogger, os dejo después del salto de página un documento tipo Word que explica más detalles sobre como compartir documentos online gratis con este programa. Dentro del campo de la enseñanza esta herramienta y otras similares son muy útiles para generar nuevas actividades educativas online en la que se incluyan textos, imágenes, hojas de cálculo, etc.


& nbsp;& nbsp;
▲▼ Perzonalizar el pie de navegación a entradas más nuevas o antiguas en Blogger

El nuevo Blogger incorpora tanto en la página principal, etiquetas y entradas idividuales un pie de navegación, es decir, enlaces a “Entrada más reciente”, “Entradas antiguas” y “Página principal” sin formato y sin estilo. En este artículo te mostraremos como personalizarlo.

1 Entra a la pestaña “Plantilla” o también llamada “Diseño” desde el escritorio y después a la opción “Edición de HTML”.

       


2 Activa la opción “Expandir plantillas de artilugios” y en el campo de texto busca el siguiente código:

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

Este es el código encargado de mostrar los enlaces de navegación. Sí te das cuenta corresponden aca uno de los links:

<data:newerPageTitle/> – Corresponde al texto “Entrada más reciente”
<data:olderPageTitle/> – “Entradas antiguas”
<data:homeMsg/> – “Página principal”

3 Personalización:Cambiar el texto por otro. Para remplazar el texto por otro de nuestro agrado sólo remplazamos la etiqueta correspondiente a cada enlace por nuestro texto, por ejemplo, para el link de entradas recientes sustituimos completamente “<data:newerPageTitle/>” por “Artílos más recientes” directamente.Cambiar texto por imagen. Para sustituir el texto por una imagen podemos seguir metodología anterior y remplazar cada etiqueta por su imagen correspondiente. A continuación te damos un ejemplo creado por Blogyweb y que puedes usar libremente con sólo remplazar el código inicial con este:


<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'> <img alt='data:newerPageTitle' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYTnsLAp6MbMsN8WGeWq6Kac-nVargoq2m-5Zx3Fj2U7510TkDyTwN5B2Kz7RGEZ92Mt9WoyOCqP7x3lTUK4qBgb4cQLQZ4Hr7fF1OmCvv0e37vHCavn61NGAJMNzEtqTH-ZYDb2BF9B0/s1600/botong_atras.gif' /></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'> <img alt='data:olderPageTitle' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUsc8iWt3o5LvP7hq6cLlhurjUS-e6BuR-iRGvb04W4orJ26GC8gM3Pd0WD-519Lw3Hr_1N3_SyU1jT8yhcCPMwanTjwlgXGVgbax0M-ioraq7dO0dgKpgOvif9YWE-pyOPKQbTBPGTj8/s1600/botong_adelante.gif'/> </a>
</span>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'> 
<img alt='data:homeMsg' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZCNLqp_GwEmW2i3sqtb33yBti9Ey9TRyWkwiltx7C3XDVb1CSHy9_Wf2bUrVuwQzc0LaGaxP5rJ9svw08tDg9ocLIMs5hzCRkXRwWuB528tQBglsXMgmErBM2BPEzEd3og7v9EJOufyY/s1600/botong_home.gif'/> </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>

Dar formato a los links. Si lo único que quieres es darles un mejor formato a estos enlaces modifica los atributos de las siguientes clases:

#blog-pager-newer-link – Para “Entrada más reciente”
#blog-pager-older-link – Para “Entradas antiguas”
#home-link – Para “Página principal”
& nbsp;& nbsp;
▲▼ Poner separadores en los gadgets

Hace algún tiempo vimos cómo poner separadores en las entradas, y desde esa vez muchos han preguntado cómo poner separadores en los gadgets de la sidebar. La verdad es que es un procedimiento sumamente sencillo que no deberá quitarnos ni 3 minutos de tiempo.
Haremos algo similar como lo que hicimos para enmarcar entradas y gadgets sólo que aquí tendremos la opción de incluir una imagen como separador y así delimitar de forma estética el final de cada gadget.

Si usamos bordes tendremos un resultado como este.

        

Y si usamos imágenes podrá verse más o menos así.

        

Veremos cómo hacerlo para las plantillas antiguas de Blogger, y las hechas con el Diseñador de plantillas de Blogger. En cualquier de los dos casos entra en Diseño | Edición de HTML y luego...

Para plantillas hechas con el Diseñador de plantillas de Blogger

Si quieres que el separador sea un borde agrega antes de ]]></b:skin> lo siguiente:

.column-right-outer .widget, .column-left-outer .widget {
border-bottom:4px solid #000;
padding-bottom:20px;
}

Si quieres que el separador sea una imagen entonces en lugar de lo anterior agrega esto:

.column-right-outer .widget, .column-left-outer .widget {
background: url(URL de la imagen)no-repeat 50% 100%;
padding-bottom:70px;
border:0;
}

Para las Plantillas antiguas de Blogger


De igual manera agrega antes de ]]></b:skin> lo siguiente si quieres que el separador sea un borde:

.sidebar .widget { 
border-bottom:4px solid #000;
padding-bottom:20px;
}

O bien, si quieres que el separador de los gadgets sea una imagen entonces lo que deberás agregar será esto:

.sidebar .widget { 
background: url(URL de la imagen)no-repeat 50% 100%;
padding-bottom:70px;
border:0;
}


Agrega la URL de la imagen del separador donde se indica si es que te decidiste por el separador con imágenes. Si la imagen fuera muy alta cambia donde dice padding-bottom:70px; por una valor más grande hasta que la imagen se muestre por completo.

En el caso de los separadores con bordes puedes modificar el grosor, tipo y color del borde, eso se hace donde dice border-bottom:4px solid #000;
4px es el grosor, solid es el tipo de borde, puedes cambiarlo por dotted, dashed, double, groove, ridge, outset, o inset, y #000 es el color del borde.
En donde dice padding-bottom:20px; podemos controlar la distancia entre cada gadget.

Como dije antes, es un procedimiento bastante simple que quizá la parte más difícil será decidirnos por un estilo que nos guste.
& nbsp;& nbsp;
▲▼ Los Símbolos y caracteres más utilizados en la red social Facebook

Desde hace unos dias he estado recopilando todos los simbolos y caracteres mas utilizados en la red social facebook ,estos mismos los pueden usar en twitter y en muchos lugares mas  ,estos caracteres son muy populares por sus expreciones y muy facíl de implementar con solo copiar y pegarlo en donde quieras usarlo estos se obtienen mediante nuestro teclado si aprietas la tecla ALT numeros que quieras va a ver los simbolos todo depende de la variedad que hagas con los numeros ,pero yo se los voy a dejar aquí hoy si lo quieren mantener en su PC solo copien y pegenlo  en el notepad lo guardan y cada ves que van a usarlos solo lo copian desde su computadora y pegan en donde lo quieran y es todo es muy facíl  y le da un toque diferente a tu perfil .


        


A continuacion les dejo los caracteres y simbolos a su dispocicion.


█ ─ ─ ─ ─ █ ▀ ▀ █ ─ ▄ █ █ █ ▄ █ █ █ ▄ ─ █ ▀ ▀ ▀
█ ─ ─ ─ ─ █ ─ ─ █ ─ ▀ █ █ █ █ █ █ █ ▀ ─ █ ▄ ▄ ▄
█ ─ ─ ─ ─ █ ─ ─ █ ─ ─ ─ ▀ █ █ █ ▀ ─ ─ ─ █
▀ ▀ ▀ ▀ ─ ▀ ▀ ▀ ▀ ─ ─ ─ ─ ─ ▀ ─ ─ ─ ─ ─ ▀ ▀ ▀ ▀

          (`'•.¸♥*♥ ¸.•'´) ¸.•'´)  
          (¸.•'´ (¸.•'´♥*♥ `'•.¸)

            *♥*♥* Me Gusta *♥*♥*

        ☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆ 

         ▀██▀───▀██▀─▀██──██─▀██▀▀ ─
            ██─────██───██▄█▀───██▄█─ 
         ▄██▄▄█─▄██▄─▄██──██─▄██▄▄


        ღ☻ღ☻ღ☻ღ☻ღ☻ღ☻ღ☻ღ☻ღ☻ღ☻ღ☻ღ


๑•ิ.•ั๑ ๑۩۞۩๑ ♬✿.。.:* ★ ☆ εїз℡❣·۰•●○●ōゃ ♥ ♡๑۩ﺴ ☜ ☞ ☎ ☏♡ ⊙◎ ☺ ☻✖╄ஐﻬ ► ◄ ▧ ▨ ♨ ◐ ◑ ↔ ↕ ▪ ▫ ☼ ♦ ▀ ▄ █▌ ▐░ ▒ ▬♦ ◊ ◦ ☼ ♠♣ ▣ ▤ ▥ ▦ ▩ ◘ ◙ ◈ ♫ ♬ ♪ ♩ ♭ ♪ の ☆ → あ ぃ £ ❤# @ & * ❁ ❀ ✿ ✾ ❃ ✺ ❇ ❈ ❊ ❉ ✱ ✲ ✩ ✫ ✬ ✭ ✮ ✰ ☆ ★ ✪ ¤ ☼ ☀ ☽ ☾ ❤ ♡ ღ☻ ☺ ❂ ◕ ⊕ ☉ Θ o O ♋ ☯ ㊝ ⊙ ◎◑ ◐ ۰ • ● ▪ ▫ 。 ゚ ๑ ☜ ☞ ☂ ♨ ☎ ☏ × ÷ = ≠ ≒ ∞ ˇ ± √ ⊥▶ ▷ ◀ ◁ ☀ ☁ ☂ ☃ ☄ ★ ☆ ☇ ☈ ☉ ☊ ☋ ☌ ☍ ☑ ☒☢ ☸ ☹ ☺ ☻ ☼ ☽ ☾ ♠ ♡ ♢ ♣ ♤ ♥ ♦ ♧ ♨ ♩ ✙ ✈ ✉ ✌ ✁♝ ♞♯♩♪♫♬♭♮ ☎ ☏ ☪ ♈ ♨ ₪ ™ ♂✿ ♥ の ↑ ↓ ← → ↖ ↗ ↙ ↘ ㊣ ◎ ○ ● ⊕ ⊙ ○  △ ▲ ☆ ★ ◇ ◆ ■

□ ▽ ▼ § ¥ 〒 ¢ £ ※ ♀ ♂ &⁂ ℡ ↂ░ ▣ ▤ ▥ ▦ ▧ ✐✌✍✡✓✔✕✖ ♂ ♀ ♥ ♡ ☜ ☞ ☎ ☏ ⊙ ◎ ☺ ☻ ► ◄ ▧ ▨ ♨ ◐ ◑ ↔ ↕ ♥ ♡ ▪ ▫ ☼ ♦ ▀ ▄ █ ▌ ▐ ░ ▒ ▬ ♦ ◊ ◘ ◙ ◦ ☼ ♠ ♣ ▣ ▤ ▥ ▦ ▩ ◘ ◙ ◈ ♫ ♬ ♪ ♩ ♭ ♪ ✄☪☣☢☠░ ▒ ▬ ♦ ◊ ◦ ♠ ♣ ▣ ۰•● ❤ ●•۰► ◄ ▧ ▨ ♨ ◐ ◑ ↔ ↕ ▪ ▫ ☼ ♦♧♡♂♀♠♣♥❤☜☞☎☏⊙◎ ☺☻☼▧▨♨◐◑↔↕▪ ▒ ◊◦▣▤▥ ▦▩◘ ◈◇♬♪♩♭♪の★☆→あぃ£Ю〓§♤♥▶¤๑⊹⊱⋛⋌⋚⊰⊹ ๑۩۩.. ..۩۩๑ ๑۩۞۩๑ ✲ ❈ ✿ ✲ ❈ ➹ ~.~ ◕‿- ❣ ✚ ✪ ✣ ✤ ✥ ✦❉ ❥ ❦ ❧ ❃ ❂ ❁ ❀ ✄ ☪ ☣ ☢ ☠ ☭ღღღ ▶ ▷ ◀ ◁ ☀ ☁ ☂ ☃ ☄ ★ ☆ ☇ ☈ ⊙ ☊ ☋ ☌ ☍ⓛⓞⓥⓔ๑•ิ.•ั๑ ๑۩۞۩๑ ♬✿ ☉♡ ♢ ♣ ♤ ♥ ♦ ♧ ♨ ♩ ✙✈ ✉ ✌ ✁ ✎ ✐ ❀ ✰ ❁ ❤ ❥ ❦❧ ➳ ➽ εїз℡❣·۰•●○●ゃōゃ♥

♡๑۩ﺴ ☜ ☞ ☎ ☏♡ ⊙◎ ☺ ☻✖╄ஐﻬ ► ◄ ▧ ▨ ♨ ◐ ◑ ↔ ↕ ▪ ▫ ☼ ♦ ▀ ▄ █▌ ▐░ ▒ ▬♦ ◊ ◦ ☼ ♠♣ ▣ ▤ ▥ ▦ ▩ ◘ ◙ ◈ ♫ ♬ ♪ ♩ ♭ ♪ の ☆ → あ ぃ £ ❤ ❁ ❀ ✿ ✾ ❃ ✺ ❇ ❈ ❊ ❉ ✱ ✲ ✩ ✫ ✬ ✭ ✮ ✰ ☆ ★ ✪ ¤ ☼ ☀ ☽ ☾ ❤ ♡ ღ☻ ☺ ❂ ◕ ⊕ ☉ Θ o O ♋ ☯ ㊝ ⊙ ◎ ◑ ◐ ۰ • ● ▪ ▫ 。 ゚ ๑ ☜ ☞ ☂ ♨ ☎ ☏▶ ▷ ◀ ◁ ☀ ☁ ☂ ☃ ☄ ★ ☆ ☇ ☈ ☉ ☊ ☋ ☌ ☍ ☑ ☒☢ ☸ ☹ ☺ ☻ ☼ ☽ ☾ ♠ ♝ ♞♯♩♪♫♬♭♮ ☎ ☏ ☪ ♈ ♨ ºº ₪ ¤ 큐 « »™ ♂✿ ♥ の ↑ ↓ ← → ↖ ↗ ↙ ↘ ㊣ ◎ ○ ● ⊕ ⊙ ○  △ ▲ ☆ ★ ◇ ◆ ■ □ ▽ ▼ § ¥〒 ¢ £ ※ ♀ ♂ © ® ⁂ ℡ ↂ░ ▣ ▤ ▥ ▦ ▧ ✐✌✍✡✓✔✕✖ ♂ ♀ ♥ ♡ ☜ ☞ ☎ ☏ ⊙ ◎ ☺ ☻ ► ◄ ▧ ▨ ♨ ◐ ◑ ↔ ↕ ♥ ♡ ▪ ▫ ☼ ♦ ▀ ▄ █ ▌ ▐ ░ ▒ ▬ ♦ ◊ ◘ ◙ ◦ ☼ ♠ ♣ ▣ ▤ ▥ ▦ ▩ ◘ ◙ ◈ ♫ ♬ ♪ ♩ ♭ ♪ ✄☪☣☢☠㊊㊋㊌㊍㊎㊏ ㊐㊑㊒㊓㊔㊕㊖㊗㊘㊜㊝㊞㊟㊠㊡㊢ ㊣㊤㊥㊦㊧㊨㊩㊪㊫㊬㊭㊮㊯㊰

✗✘✚✪✣✤✥✦✧✩✫✬✭✮✯✰ ✱✲✳❃❂❁❀✿✾✽✼✻✺✹✸✷ ✶✵✴❄❅❆❇❈❉❊❋❖☀☂☁【】┱ ┲ ❣ ✪ ✣ ✤ ✥ ✦ ❉ ❥ ❦ ❧ ❃ ❂ ❁ ❀ ✄ ☪ ☣ ☢ ☠ ☭ ♈ ➸ ✓ ✔ ✕ ✖ .: ◢ ◣ ◥ ◤ ▽ ▧ ▨ ▣ ▤ ▥ ▦ ▩ ◘ ◙ ▓ ▒ ░ ™ ℡ 凸 の ๑۞๑ ๑۩ﺴ ﺴ۩๑ o(‧”’‧)o ❆ べò⊹⊱⋛⋋ ⋌⋚⊰⊹ ⓛⓞⓥⓔ ☀ ☼ ☜ ☞ ⊙® ◈ ♦ ◊ ◦ ◇ ◆ εїз❃❂❁❀✿✾✽✼✻✺✹✸✷ ✶✵✴❄❅❆❇❈❉ ❊❋❖❤❥❦❧↔ ↕ ▪ → ︷╅╊✿ (¯`•._.• •._.•´¯)(¯`•¸•´¯) ❤`•.¸¸.•´´¯`•• .¸¸.•´¯`•.•●•۰• ••.•´¯`•.•• ••.•´¯`•.••—¤÷(`[¤* *¤]´)÷¤——(•·÷[ ]÷·•)—
①②③④⑤⑥⑦⑧⑨⑩ ⑪⑫⑬⑭⑮⑯⑰⑱⑲⑳ ⒶⒷⒸⒹⒺⒻ ⒼⒽⒾⒿⓀⓁ ⓂⓃⓄⓅⓆⓇ ⓈⓉⓊⓋⓌⓍ ⓎⓏ ⓐⓑⓒⓓⓔⓕ ⓖⓗⓘⓙⓚⓛ ⓜⓝⓞⓟⓠⓡ ⓢⓣⓤⓥⓦⓧ ⓨⓩ(⊙▂⊙✖ )(づ  ̄ ³ ̄)づ ( c//”-}{-*\\x)(-’๏_๏’-)(◐ o ◑ )(⊙…⊙ )๏[-ิ_•ิ]๏(•ิ_•ิ)\(•ิ_•ิ\) (/•ิ_•ิ)(︶︹︺)


Interensante estos simbolos, se pueden hacer muchisimas cosas con ellos todo va en la imaginacion de cada cual .
& nbsp;& nbsp;
▲▼ Administrar la renovacion de un dominio comprado en blogger

Desde hace unos días he visto temas sobre como administrar los dominios que han sido comprado a través de Blogger,que pasa con esto quienes compran su dominio a través de Blogger la mayoría de las veces no hacen nada para configurarlo, pues Blogger,google lo hace de forma automática por nosotros, por lo que muchos ni se enteran cómo de como funciona todo despues y he ahí donde vienen luegos las preguntas de como pago la renovacion de mi dominio, como cambio la informacion de la tarjeta que use para la compra del dominio,etc......... y he ahí las precupaciones.

         

Pues bien, lo que les mostrare a continuación es información de como administrar nuestro dominio.Les aclaro que Blogger no es una compañia que se dedique a vender dominios, si bien se puede comprar el dominio desde la configuración del blog, no es Blogger o google quien nos lo vende, sino compañias como GoDaddy y eNom que son las que sí se dedican a la venta de dominios.

1-) Después de comprar tu dominio en Blogger, te debe llegar un correo de Google Apps que se titula "Confirmación de registro de dominios". Dentro de ese correo verás que dice algo como así "Si todavía no has creado una cuenta de administrador para tu dominio, haz clic en el enlace siguiente:

Para el que lo compro desde hace tiempo y nunca creo dicha cuenta de administrador a continuacion les brindo el enlace que debieron recibir en ese tiempo solo cambien lo que les voy a marcar.

https://www.google.com/a/cpanel/domain/setup/tudominio.com/faVaTzUBAAA.XIwV8hFMHakqUX6XOpxehA.zRb7NH0cAhQrSM8VDvpPVg?hl=es


2-)Una ves los haiga dirigido ese enlace, ahí podrán configurar una cuenta de correo personalizada de forma automática con el nombre de tu dominio seria algo así tunombre@tudominio.com Lo que elijan de nombre de usuario seria lo que dice tunombre(sin tener que ingresar registros en los DNS ni nada por el estilo), por ejemplo tunombre@tudominio.com   . Una vez creada la cuenta de correo vas a ingresar a

https://www.google.com/a/tudominio.com

Google Apps

3-)Ponen el nombre de usuario que escogieron tunombre y el password,contraseña.una ves dentro van a Domain settings luego a domain names y podran ver la opcion si quieren la renovacion del dominio automatica o no ,si no se quieren preocupar que si su dominio se va a expirar pues solo señalen donde dice Automatically renew my domain registration every year .le dan a save mas abajo y es todo aquí.

        


4-)Ahora para administrar lo que es la forma de pagos es decir con lo que van a pagar que es la tarjeta que va a estar para lo pagos automaticos cada años,nos dirigimos a :

Google Checkout

checkout.google.com

5-)Van a entrar con la misma cuenta de google ,ya dentro veran cuando compraron su dominio ,que tarjeta usaron y toda la informacion acerca de la compra si quieren pueden dejar esa misma tarjeta o pueden eliminar la informacion de esa y poner otra ,con la cual google va a pagar tu dominio cada año,si ya no quieren renovar el dominio comprado van a donde señalaron Automatically renew my domain registration every year lo deselecionan le dan a save y ya no estara automatico el pago y dejas que se venza .
& nbsp;& nbsp;
atras &nbsp;&&nbsp;inicio &nbsp;&&nbsp;siguiente