Ocultar o Eliminar la atribución de blogger

Para Ocultar la Atribución de blogger, los créditos en las plantillas.

Ir a:

Diseño → Diseñador de plantillas → Avanzado → Añadir CSS

en el campo, para Añadir código CSS personalizado, agregamos el siguiente código:

/* Atribución de Blogger
----------------------*/
#Attribution1 {
display:none;
visibility:hidden;
}

Para Eliminar la atribución de blogger

Ir a:

Plantilla ► Editar HTML ► Click dentro del editor ► Ctrl+f ►

Buscamos

Attribution1

Nos localizara esta linea

<b:widget id='Attribution1' locked='true' title='' type='Attribution'>

cambiar true por false quedando de esta manera

<b:widget id='Attribution1' locked='false' title='' type='Attribution'>

►Guardamos plantilla.



Con este cambio habremos eliminado las limitaciones, habilitado la opción Eliminar el gadget.


Por ultimo vamos a:


Página principal ► Diseño ► Reconocimiento 

Veremos que tenemos la opción Eliminar el gadget.

Leer más »

Ocultar Entradas (Atom) en Blogger

Para poner Ocultar Entradas (Atom) en tu blog de blogger

Ve a

• Diseño
• Diseñador de plantillas
• Avanzado
• Añadir CSS, y ahí en el campo, para Añadir código CSS personalizado, agregamos el siguiente código:

/*Entradas (Atom)
-----------*/
.feed-links{
display:none
}

Leer más »

Avatares redondeados en comentarios

Avatares redondeados en comentarios
Ve a

• Diseño
• Diseñador de plantillas
• Avanzado
• Añadir CSS, y ahí en el campo, para añadir CSS personalizado, agregamos el siguiente código:

 .comments .avatar-image-container {
position:relative;
float: left;
overflow: hidden;
width: 50px ;
height: 50px;
max-height: 50px ;
margin: 0 0 0 -15px;
padding: 0px;
border: 2px solid #ff1493;
border-radius: 50px; }
.comments .avatar-image-container img {
width: 50px;
height: 50px;
max-width:50px;
border-radius:50px;}

►En border: 2 px solid #ff1493; se puede cambiar el ancho del borde y el color.

Leer más »

Cambiar avatar anónimo y sin imagen de los comentarios Blogger

Con este truco podremos cambiar las imágenes por defecto de los avatares de los comentaristas anónimos y la de los bloggeros sin imagen por defecto.

→ Para que el truco funcione se requiere jQuery (que ya viene incluido en el código), para aquellos que ya lo tengáis podéis eliminar la zona marcada en rojo (está dos veces).

►Hay que pegar antes de </body> el siguiente código:


<script src='http://code.jquery.com/jquery-latest.js'/>
<script> $("img[src='http://img1.blogblog.com/img/anon36.png']") .attr('src', 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE_j2kKkZXnXtQSh3VqPRi3R-_Yf4dNfRW6iK2V2q_iNc5Di3qVXA1tDxYZhN97UPWG3JQcuzlTWNzc3yqoC1isNSDCVeWT3ANehqBNFg6-fANTTwYqfDWid99A8_7kkuZBlwP8pbc2Mw/s1600/default_avatar.gif') .ssyby('blank') </script> <script src='http://code.jquery.com/jquery-latest.js'/> <script> $("img[src='http://img2.blogblog.com/img/b36-rounded.png']") .attr('src', 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkXLw7kQNqCX3J8pJmSmDIsl0HWupOYahaBmIF5ywtGGh0AUX0AgEFrKR3eZFjnI9oZ4HSYpRQWz-ZBilKLSyyMzVWmpE5uKMrnW4786jnYyx5Cupx-3oatqnUi6eoYQRchGviVMmG2Ac/s1600/blogger-user.png') .ssyby('blank') </script>

☼ La primera parte del código sustituye los avatares predeterminados de los comentarios anónimos de nuestro blog, podemos cambiar la imagen si cambiamos la url marcada en azul.

☼ La segunda parte del código sustituye los avatares predeterminados de los comentarios que hacen los bloggers con cuenta pero sin imagen. Se puede cambiar la imagen cambiando la url marcada en verde.
PD: También se puede notar que en la foto de la entrada hay los avatares redondeados.

Luego guardamos y listo.


Nota:

Este truco sólo afecta a las imágenes predeterminadas, cualquier otro estilo que se pueda ver en la imagen de esta entrada se puede encontrar en el blog.

Ver :Avatares redondeados en comentarios

Leer más »

Eliminar cabecera del blog

Blogger no nos deja eliminar nuestra cabecera debido a que no nos muestra el botón de eliminar y si queremos que no aparezca la cabecera de nuestro blog para tener una mejor estética, que el titulo del blog no se muestre o simplemente queremos poner un gadget en su lugar, esto se puede hacer editando la plantilla de nuestro blog.

1.- Entramos a Plantilla → Editar HTML


2.- Estando ahí veremos que hay un botón en la parte superior que dice "Ir al widget" damos clic a este botón y nos desplegara una lista con algunos de nuestros widgets y gadgets que tenemos en nuestra plantilla ahí elegimos el que dice "Header1"

veremos una linea así:

1	<b:widget id="Header1" locked="true" title="Nombre de tu Blog" type="Header"></b:widget>

en el cual cambiaremos el valor de locked='true' por el de locked='false' quedando así :

1	<b:widget id="Header1" locked="false" title="Nombre de tu Blog" type="Header"></b:widget>

4.- Damos clic a guardar cambios


5.- Nos vamos a Diseño y en el gadget llamado "Cabecera" o "Header" le damos clic a editar y nos aparecerá la opción de eliminar.

6.- Damos clic al botón eliminar y damos clic a Guardar Diseño

7.- Listo nuestra cabecera se ha ido

►Si no funciona

Prueba haciendo lo pasos del 1 al 3 y justo donde cambias los valores true por false en la parte de arriba veremos que dice

1	<b:section class="header" id="header" maxwidgets="1" showaddelement="no"></b:section>

ahí cambiaremos los valores no por yes y maxgidgets 1 (o el numero que tenga) y ponemos 8

seguido de eso continuamos con el paso 4 y seguimos todo como puse en la parte de arriba.

Para recuperar la cabecera

Si queremos recuperar nuestra cabecera entramos en a Diseño → Agregar Gadget y saldrá cabecera.

Leer más »

Scroll en una entrada del blog

El cuadro de Scroll es un cuadro que permite comprimir un texto, con una barra lateral (de desplazamiento).

Se puede utilizar cuando hay que poner un código o un texto extenso en una entrada con el fin de comprimirla sin modificar el código la plantilla.

Este permite seleccionar y copiar lo que esté en su interior.

En la entrada normalmente, incluir imágenes, enlaces, etc., una vez acabada  ir en la pestaña  HTML, y pongas este código al comienzo del texto que deseas comprimir

SCROLL
Lorem ipsum dolor sit amet, consectetur adipiscing elit . Quisque nec ligula a augue dictum facilisis. Proin eget tellus sed ipsum aliquam lobortis quis vitae quam. Sed lacinia metus erat, sit amet pellentesque tellus tempor sit amet. Donec vulputate eleifend orci, et dapibus sem. Proin orci velit, luctus a vehicula et, tincidunt ac mauris. Donec molestie pharetra nibh a pellentesque. Vivamus vitae varius nisi. Suspendisse id ligula consectetur, cursus lacus non, commodo purus. Curabitur semper sagittis tempus. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Quisque non pulvinar risus. Nunc suscipit volutpat lectus ac molestie. Quisque aliquam eros leo, at consectetur arcu sollicitudin sit amet. Praesent feugiat diam in tellus porttitor elementum. Aenean vulputate massa a lectus porttitor luctus. Suspendisse egestas molestie turpis, nec cursus neque ultricies pellentesque. Nunc non feugiat leo, quis varius velit. Integer vulputate pharetra nunc sit amet vestibulum. Sed accumsan orci non tempus tempor. Cras vehicula dapibus ante, a iaculis odio. Vivamus tristique nec metus nec tincidunt.
Nam tempus ipsum sit amet fringilla commodo. Sed dapibus turpis neque. Proin condimentum, mauris vitae ullamcorper tempor, nibh nisl faucibus leo, vehicula porta libero velit sed lectus. Aliquam porttitor feugiat mi. Nulla quis ultricies tortor. Donec hendrerit justo egestas odio eleifend volutpat. Phasellus bibendum leo massa, a fermentum sem viverra sit amet. Vivamus pulvinar gravida felis. Aliquam non quam vel dolor iaculis bibendum eget eu mi.

Este es el código:

<div align="center" style="background:#CCCCCC; border-bottom: #000000 1px dotted; border-left-color: #AFAFAF; border-left-style: outset; border-right-color: #AFAFAF; border-right-style: inset; border-top-color: #AFAFAF; border-top-style: groove; color: black; height: 100px; overflow: scroll; scrollbar-3dlight-color: #FFFFFF; scrollbar-arrow-color: #FFFFFF; scrollbar-darkshadow-color: #FFFFFF; scrollbar-face-color: #FFFFFF; scrollbar-highlight-color: #FFFFFF; scrollbar-shadow-color: #FFFFFF; width: auto;">

Para personalizarlo cambia lo que esta en rojo

align la alineación del texto.
background el color de fondo.
height se modifica la altura total que va a tener.
width: se modifica la ancho total que va a tener, al ponerle auto el cuadro ocupa toda el área del blog, ajustándose automáticamente.

Leer más »

Poner el Navbar de Blogger en la parte inferior

Para poner el Navbar de Blogger en la parte inferior

Ve a

• Diseño
• Diseñador de plantillas
• Avanzado
• Añadir CSS, y ahí en el campo, para añadir CSS personalizado, agregamos el siguiente código:

/*---Navbar de Blogger en la parte inferior----*/
#navbar-iframe {
right: 0px;
bottom: 0px;
left: 0px;
position: fixed;
}

Así tendrás el  Navbar de Blogger en la parte inferior dándole una estética diferente, sin quitarla o ocultarla.

Leer más »

Paginación en Blogger

Para añadir la Paginación al blogs de Blogger solo deben ir a:

• Escritorio Blogger. 
• Hacemos clic en Diseño. 
• Hacemos clic en HTML/JavaScript y lo ubicamos debajo de las entradas. 

El código que tienen que copiar y pegar es el siguiente:

<style type="text/css">
#blog-pager{
font-size:normal;
padding:10px 0;
clear:both;
}
.showpageArea{
font-family: verdana,arial,helvetica;
color:#000;
font-size:11px;
margin:10px;
}
.showpageArea a{
color:#000;
text-shadow:0 1px 2px #fff;
font-weight:700;
}
.showpageNum a{
padding:3px 8px;
margin:0 4px;
text-decoration:none;
border:1px solid #999;
-webkit-border-radius:3px;
-moz-border-radius:3px;
background:#ddd url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeWC16icamBAgZsOCfxgxX7lBzOVOStqM5KkDD5KvfiyPUloU5Enjv_Hyr_gCdOqOCe9NOmbeC8VSEbat6dagwfrT_UrgOPFDxkHUvVY4AzkJErkrHTDAwvDKGe1gfYaLKQs1VqFOo3Fg/s1600/wp1.jpg) 0 -50px repeat-x}
.showpageNum a:hover{
border:1px solid #888;
background:#ccc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeWC16icamBAgZsOCfxgxX7lBzOVOStqM5KkDD5KvfiyPUloU5Enjv_Hyr_gCdOqOCe9NOmbeC8VSEbat6dagwfrT_UrgOPFDxkHUvVY4AzkJErkrHTDAwvDKGe1gfYaLKQs1VqFOo3Fg/s1600/wp1.jpg) 0 -25px repeat-x}
.showpageOf{margin:0 4px 0 0}
.showpagePoint{
color:#fff;
text-shadow:0 1px 2px #333;
padding:3px 8px;
margin:2px;
font-weight:700;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border:1px solid #999;
background:#666 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeWC16icamBAgZsOCfxgxX7lBzOVOStqM5KkDD5KvfiyPUloU5Enjv_Hyr_gCdOqOCe9NOmbeC8VSEbat6dagwfrT_UrgOPFDxkHUvVY4AzkJErkrHTDAwvDKGe1gfYaLKQs1VqFOo3Fg/s1600/wp1.jpg) 0 0 repeat-x;
text-decoration:none;
}
</style><script style='text/javascript'>var numshowpage=7;var postperpage =7;var upPageWord="Anterior";var downPageWord="Siguiente";var home_page="/";var urlactivepage=location.href;</script> <script style='text/javascript' src='https://sites.google.com/site/ratosdeblogger/script/paginacionblogger.js?attredirects=0&d=1'></script>

Así de fácil tendrán la Paginación en Blogger.

Leer más »

Cómo personalizar el botón de imprimir de PrintFriendly

En esta entrada veremos Cómo personalizar y Cómo poner un botón distinto al que que ofrece PrintFriendly; ya que puede ser que no te guste ninguno de los botones de imprimir que te ofrece PrintFriendly, o quieres crear uno que se adapte mejor al diseño de tu plantilla.

A- Cómo personalizar PrintFriendly

Cuando creamos del gadget, encontramos una serie de campos en el apartado "Features". Estos parámetros nos permitirán personalizar algunas de las funcionalidades de PrintFriendly. 

1. Page header: Cabecera del documento, por defecto toma el icono del blog (favicon) y la URL del blog, podemos subir un icono y modificar el texto de visualización.
2. Click-to-delete: Activa/Desactiva la posibilidad de permitir eliminar texto del documento haciendo click (por defecto se permite).
3. Images: Indica si se mostrarán imágenes en el documento PrintFriendly (por defecto se muestran).
4. Image style: Permitir mostrar imágenes, aquí hay que optar por el tipo de alineación que tendrá: derecha, izquierda, ninguna o centrado en bloque.
5. Email: Activa/Desactiva la posibilidad de enviar por correo electrónico.
6. PDF: Activa/Desactiva la funcionalidad de generación de PDF.
7. Print: Activa/Desactiva la opción de imprimir.
8. Custom css url: URL que apunta hacia una hoja de estilos personalizada, donde podremos sobrescribir el comportamiento por defecto de los estilos de PrintFriendly.
9. Website protocol: Protocolo Web a utilizar: HTTP/HTTPS. En el caso de Blogger, la opción por defecto es la correcta: HTTP.

Custom css url:
Para ver como funciona este campo. Supongamos que queremos mostrar todas las cabeceras en #76a5af, cuando el lector opta por imprimir, hay que seguir los siguientes pasos :

• Abrimos cualquier editor de textos (Notepad)
• Copiamos el código CSS siguiente:

#printfriendly h1, #printfriendly h2, #printfriendly h3, #printfriendly h4 {
 color: #76a5af;
}

• Guardamos el archivo con el nombre "printfriendly.css"
• Subimos el archivo a cualquier servicio de alojamiento: Drive, hosting propio, etc. 
• Colocamos en el campo "Custom css url" la URL de donde subimos nuestro archivo.

Cuando realizamos este proceso y generamos el gadget, al pulsar el botón de imprimir aparecerán todas las cabeceras del color que hallamos elegido. Para ver todos los estilos CSS que puedes sobrescribir, puedes ir a la página de soporte de PrintFriendly.

B- Cómo poner un botón distinto al que ofrece PrintFriendly

• Buscamos un icono, para esto te recomiendo Iconfinder, una herramienta estupenda, donde podrás buscar prácticamente cualquier icono. Intenta buscarlos pequeños (24, 48, ...), puesto que si los eliges grandes pueden salirse de los márgenes máximos.
• Obtenemos la URL del nuevo icono. Para hacer esto debemos subir el icono a cualquier servicio de alojamiento y copiar la dirección (URL) en el que esté ubicado.
• Modificamos la URL del botón de PrintFriendly. Para persolnalizar el boton de PrintFriendly, vamos a Blogger > Diseño > localizamos y editamos el gadget de PrintFriendly, en el que aparecerá un texto como este:

<script>var pfHeaderImgUrl = '';var pfHeaderTagline = '';var pfdisableClickToDel = 0;var pfHideImages = 0;var pfImageDisplayStyle = 'right';var pfDisablePDF = 0;var pfDisableEmail = 0;var pfDisablePrint = 0;var pfCustomCSS = '';var pfBtVersion='1';(function(){var js, pf;pf = document.createElement('script');pf.type = 'text/javascript';if('https:' == document.location.protocol){js='https://pf-cdn.printfriendly.com/ssl/main.js'}else{js='http://cdn.printfriendly.com/printfriendly.js'}pf.src=js;document.getElementsByTagName('head')[0].appendChild(pf)})();</script><script type="text/javascript">var pfButtonHTML = '<a href="http://www.printfriendly.com" style="margin-top:0.5em; float:left;display:block; margin-right: 0.5em; color:#6D9F00; text-decoration:none;" class="printfriendly" onclick="window.print(); return false;" title="Printer Friendly and PDF"><img style="border:none;-webkit-box-shadow:none;box-shadow:none;" src="http://cdn.printfriendly.com/pf-button-both.gif" alt="Print Friendly and PDF"/></a>'; var pfBloggerJs; pfBloggerJs = document.createElement("script"); pfBloggerJs.type ="text/javascript"; js= "http://cdn.printfriendly.com/blogger.js"; pfBloggerJs.src=js; document.getElementsByTagName("head")[0].appendChild(pfBloggerJs);</script><span id="pf_locator"></span><script type="text/javascript">var f = document.getElementById("pf_locator");var c = f.parentNode.parentNode.childNodes;for (i=0;i<c.length;i++) { try { c[i].style.display = "none"; } catch (err) {}}</script>

• Localizamos el texto que aparece en color rojo y lo sustituimos por la URL que has obtenido anteriormente (Obtenemos la URL).
• Guarda el gadget y visualiza el blog, ya tienes el nuevo icono funcionando.

Como hemos visto si se quiere añadir un botón de imprimir al blog, PrintFriendly es una de las mejores opciones ya que es personalizable y practico, sin tener que editar el HTML de nuestra plantilla del blog en Blogger.

 

Leer más »

Cambiar de lugar datos del post-footer

Las plantillas por lo general tienen los datos del post-footer, debajo de las entradas. Estos datos son las etiquetas, el autor, la hora, el número de comentarios, etc.

Para cambiarlos de lugar estos datos.

► Diseño 
► Edición de HTML
► Ctrol+F busca esta línea:

<div class='post-footer'>

Debajo de ella estarán los códigos que vamos a trasladar, te recomiendo que lo hagas uno por uno, y por cada movimiento que hagas le des Vista previa para verificar que lo has hecho correctamente.



Autor

<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span>
</b:if>
</span>

Hora

<span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<data:top.timestampLabel/>
<b:if cond='data:post.url'>
<a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a>
</b:if>
</b:if>
</span>

Etiquetas

<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 != &quot;true&quot;'>,</b:if>
</b:loop>
</b:if>
</span>

Link de comentarios

<span class='post-comment-link'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</b:if>
</span>

Icono de Envío de entradas

<!-- email post links -->
<b:if cond='data:post.emailPostUrl'>
<span class='item-action'>
<a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
<img alt='' class='icon-action' height='13' src='//www.blogger.com/img/icon18_email.gif' width='18'/>
</a>
</span>
</b:if>

Enlaces a esta entrada

<span class='post-backlinks post-comment-link'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:post.showBacklinks'>
<a class='comment-link' expr:href='data:post.url + &quot;#links&quot;'><data:top.backlinkLabel/></a>
</b:if>
</b:if>
</b:if>
</span>

Todos los códigos los vamos a cortar y pegarlos debajo de esta línea:

<div class='post-header-line-1'>

Así abras cambiado de lugar los datos del post-footer.

Leer más »