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 »

Flechas de Ir arriba e Ir abajo con jQuery

Para poner en tu blog de blogger las Flechas de Ir arriba e Ir abajo con jQuery

  

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:

/* Flecha de Ir arriba e Ir abajo con jQuery
----------------------------------------------- */
.nav_up{
padding:7px; /* Distancia entre el borde y el ícono */
background-color:white;
border:1px solid #CCC; /* Color del borde */
position:fixed;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5vlx3JUleWUIbH9eYW_biIhD3ZMH6U7vWZyrV-8fCQpR0oGCz8eTPV4rwQJmW_YwNbRw_frrpJG2ciS_luthTUWM1h0yeeVXcSqReKMTYywdyd9Mh87G_o91Dx_k8XH5wlhNiIo3lty2k/w40-h40-p/1412275859_icon-ios7-arrow-up-64.png) no-repeat top left;
background-position:50% 50%;
width:20px; /* Ancho del botón */
height:20px; /* Alto del botón */
bottom:250px; /* Distancia desde abajo */
right:30px; /* Cambiar left por right si se quiere a la derecha */
white-space:nowrap;
cursor: pointer;
border-radius: 3px 3px 3px 3px;
opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
.nav_down{
padding:7px; /* Distancia entre el borde y el ícono */
background-color:white;
border:1px solid #CCC; /* Color del borde */
position:fixed;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSOJwgyBVSNTUyxVS10hTJHm-HpwfwlMEmid0GjvfBgnmJFJrH-w5urTaowksSfa-ZES_IvYTc0tXRw1rAumjeRG5gNtuSegCFhlbSPnSgcz9epCcmkVFqAXQdKZFaplpnp7Un-aDUnfWp/w40-h40-p/1412275877_icon-ios7-arrow-down-64.png) no-repeat top left;
background-position:50% 50%;
width:20px; /* Ancho del botón */
height:20px; /* Alto del botón */
bottom:250px;/* Distancia desde abajo */
right:70px; /* Cambiar left por right si se quiere a la derecha */
white-space:nowrap;
cursor: pointer;
border-radius: 3px 3px 3px 3px;
opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}

Luego ir a

Plantilla → Editar HTML → Crtl + f → buscamos </body> → pegar arriba de </body> el siguiente <script>

<div class='nav_up' id='nav_up' style='display:none;'/>
<div class='nav_down' id='nav_down' style='display:none;'/>
<script>
//<![CDATA[
(function(){var special=jQuery.event.special,uid1='D'+(+new Date()),uid2='D'+(+new Date()+1);special.scrollstart={setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}else{evt.type='scrollstart';jQuery.event.handle.apply(_self,_args)}timer=setTimeout(function(){timer=null},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid1,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid1))}};special.scrollstop={latency:300,setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}timer=setTimeout(function(){timer=null;evt.type='scrollstop';jQuery.event.handle.apply(_self,_args)},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid2,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid2))}}})();
$(function() {
var $elem = $('body');
$('#nav_up').fadeIn('slow');
$('#nav_down').fadeIn('slow');
$(window).bind('scrollstart', function(){
$('#nav_up,#nav_down').stop().animate({'opacity':'0.2'});
});
$(window).bind('scrollstop', function(){
$('#nav_up,#nav_down').stop().animate({'opacity':'1'});
});
$('#nav_down').click(
function (e) {
$('html, body').animate({scrollTop: $elem.height()}, 800);
} );
$('#nav_up').click(
function (e) {
$('html, body').animate({scrollTop: '0px'}, 800);
} );});
//]]></script>

Así tendremos nuestras Flechas de Ir arriba e Ir abajo con jQuery en nuestro blog

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 »

Poner botones compartir debajo del titulo

Para poner los botones de compartir debajo del titulo del post o entrada

Buscar

<div class='post-share-buttons goog-inline-block'>

nos mostrara 

<div class='post-share-buttons goog-inline-block'>
<b:if cond='data:post.sharePostUrl'>
<b:include data='post' name='shareButtons'/>
</b:if>
</div>

borramos todo el codigo y buscamos

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

Nota → Existen 2 lineas con el mismo código, prueba en ambas ya que para algunos resulta bajo la primera y en otros bajo la segunda.

después de esta linea pegar

<div class='post-share-buttons goog-inline-block'>
<b:if cond='data:post.sharePostUrl'>
<b:include data='post' name='shareButtons'/>
</b:if>
</div>

↑Es el predefinido por Blogger. 

o puedes poner ↓

<table border='0' cellpadding='0' style='float:left;'><tbody>
<tr><td><a class='twitter-share-button' data-count='horizontal' data-lang='es' expr:data-url='data:post.canonicalUrl' href='http://twitter.com/share' expr:data-text='data:post.title'></a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></td><td><g:plusone expr:href='data:post.url' size='medium'/></td>
<td><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?locale=es_ES&amp;href=&quot; + data:post.url+ &quot;&amp;layout=button_count&amp;show_faces=true&amp;share=true&amp;width=120&amp;height=21&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; height:21px'/>
</td>
</tr>
</tbody>
</table>

Así nuestros botones para compartir las entradas se encontraran debajo del titulo del post de nuestro blog en Blogger.

Leer más »

Writr Plantilla Blogger

Writr tiene diseñoresponsive minimalista, orientada a los contenidos blogger, perfecto tema para su blog personal. Pone el foco en su contenido. Writr Plantilla Blogger tiene 2 columna, barra lateral izquierda, el menú de navegación de varios niveles, botones de acción, las fuentes de Google y las fuentes de iconos.

Nombre de la plantilla: Writr
Autor / URL: NewBloggerThemes
Diseñador / URL: Automattic
Categorías: 1 Sidebar, 2 columnas, Adaptado de Wordpress, Negro, Elegante, Ancho fijo, fresco, verde, gris, barra lateral izquierda, Revista, minimalista,, esquinas redondeadas Responsive, barra de navegación superior, Web 2.0, Blanco,
Detalles avanzada: Newbloggerthemes

Leer más »

Wp Launcher Negro plantilla blogger

Wp Launcher negro es negro versión de Wp Launcher plantilla blogger, que es adecuado para "En construcción" blogs. Tiene un temporizador de cuenta atrás, botones de acción y una caja de suscripción de correo electrónico Feedburner para permitir a los usuarios mantenerse al día con su lanzamiento del sitio.

Nombre de la plantilla: Wp Launcher Negro
Autor / URL: NewBloggerThemes 
Diseñador / URL: Wparchive
Categorías: Adaptado de Wordpress, Negro, Elegante, Ancho fijo, Gris, Sin Sidebar, En construcción, la Web 2.0,
Detalles avanzada: Newbloggerthemes.com

Leer más »

Bittero Plantilla Blogger

Bittero Plantilla Blogger es una, SEO responsive , sencilla y elegante plantilla blogger para los blogs de Blogger. Bittero blogger tema ha figurado contenido deslizante, el menú de navegación sensible, botones de perfiles sociales, botones de correos, las fuentes de Google, puestos relacionados, clase a la zona de acción y más.

Nombre de la plantilla: Bittero
Autor / URL: NewBloggerThemes
Diseñador / URL: SimpleWpThemes 
Categorías: 1 Sidebar, 2 columnas, Adaptado de Wordpress, Negro, Elegante, Sección Destacados, Ancho fijo, fresco, Revista, minimalista, Sensible, barra lateral derecha, deslizante, Barra de navegación superior, Web 2.0, Blanco,
Detalles avanzada: Newbloggerthemes

Leer más »

Entradas aleatorias con imagen en miniatura

El siguiente gadget permite añadir en el sidebar de nuestro blog de blogger una lista de entradas aleatorias, elegidas al azar, con una imagen en miniatura como pueden ver en la imagen superior.

Para añadirlo a tu blog sigue el siguiente tutorial.

→ Paso 1

• Ir a Escritorio Blogger.
• Seleccionamos Plantilla.
• Hacemos clic en Editar HTML.

En el buscador de código pegamos lo siguiente:

]] ></b:skin>

Encima de este pegar el siguiente código:

#random-posts img {
float:left;
margin-right:10px;
border:1px solid #999;
background:#FFF;
width:70px;
height:70px;
padding:3px;
}
#random-posts li {
list-style-type: none;
}

→ Paso 2

• En el Escritorio Blogger 
• Diseño.
• Añadir un Gadget donde queramos poner el gadget.
• Seleccionamos HTML / JavaScript.

En él pegamos el siguiente código:


  <ul id='random-posts'> <script type='text/javaScript'> var rdp_numposts = 5; var rdp_snippet_length = 150; var rdp_info = 'yes'; var rdp_comment = 'Comentarios'; var rdp_disable = 'Comments Disabled'; var rdp_current = []; var rdp_total_posts = 0; var rdp_current = new Array(rdp_numposts); function totalposts(json) { rdp_total_posts = json.feed.openSearch$totalResults.$t } document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts\"><\/script>'); function getvalue() { for (var i = 0; i < rdp_numposts; i++) { var found = false; var rndValue = get_random(); for (var j = 0; j < rdp_current.length; j++) { if (rdp_current[j] == rndValue) { found = true; break } }; if (found) { i-- } else { rdp_current[i] = rndValue } } }; function get_random() { var ranNum = 1 + Math.round(Math.random() * (rdp_total_posts - 1)); return ranNum }; </script> <script type='text/javaScript'> function random_posts(json) { for (var i = 0; i < rdp_numposts; i++) { var entry = json.feed.entry[i]; var rdp_posttitle = entry.title.$t; if ('content' in entry) { var rdp_get_snippet = entry.content.$t } else { if ('summary' in entry) { var rdp_get_snippet = entry.summary.$t } else { var rdp_get_snippet = ""; } }; rdp_get_snippet = rdp_get_snippet.replace(/<[^>]*>/g, ""); if (rdp_get_snippet.length < rdp_snippet_length) { var rdp_snippet = rdp_get_snippet } else { rdp_get_snippet = rdp_get_snippet.substring(0, rdp_snippet_length); var space = rdp_get_snippet.lastIndexOf(" "); rdp_snippet = rdp_get_snippet.substring(0, space) + "…"; }; for (var j = 0; j < entry.link.length; j++) { if ('thr$total' in entry) { var rdp_commentsNum = entry.thr$total.$t + ' ' + rdp_comment } else { rdp_commentsNum = rdp_disable }; if (entry.link[j].rel == 'alternate') { var rdp_posturl = entry.link[j].href; var rdp_postdate = entry.published.$t; if ('media$thumbnail' in entry) { var rdp_thumb = entry.media$thumbnail.url } else { rdp_thumb = "URL de la Imagen" } } }; document.write('<li>'); document.write('<img alt="' + rdp_posttitle + '" src="' + rdp_thumb + '"/>'); document.write('<div> <a href="' + rdp_posturl + '" rel="nofollow" title="' + rdp_snippet + '">' + rdp_posttitle + '</a></div> '); if (rdp_info == 'yes') { document.write('<span>' + rdp_postdate.substring(8, 10) + '/' + rdp_postdate.substring(5, 7) + '/' + rdp_postdate.substring(0, 4) + ' - ' + rdp_commentsNum) + '</span>' } document.write('<div style="clear:both"> </div> </li> ') } }; getvalue(); for (var i = 0; i < rdp_numposts; i++) { document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index=' + rdp_current[i] + '&max-results=1&callback=random_posts\"><\/script>') }; </script> </ul>


rdp_thumb = poner URL de la imagen cuando el post no contenga
var rdp_numposts = 5; número de entradas que quieres mostrar. Se encuentra en la linea 3.

Leer más »

Buscador en la cabecera del blog

Para tener el buscador en la cabecera del blog


Diseño → Plantilla → Editar HTML → Crtl + f  

busca por el siguiente código:

<b:widget id='Header1' locked='true' title='*titulo* (cabecera)' type='Header'/> </b:section>

Ahora, debajo de </ b:section> pega esto:

<div style='position:absolute; top:60px;left:50px;'> <form action='/search' id='searchthis' method='get' style='display:inline;'> <input id='search-box' name='q' type='text'/> <input id='search-btn' type='submit' value='Buscar'/></form> </div>

Cambiando los valores del style {el top y el left}, cambias la posición del buscador dentro de la cabecera así lo acomodas a tu gusto.



►Personalizarlo


Debajo de <head> {copia y pega}

<style> #search-btn { background-color:#A9D0F5; color:#FFFFFF; margin:0; font:bold 14px Tahoma; border:0; } #search-btn:hover { cursor:pointer; background-color:#2E9AFE; } #search-box { color:#2E9AFE; margin:0; font:bold 12px Arial; border: 1px solid #CEE3F6; width:140px; } </style>

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 »