Ocultar Títulos de las paginas en Blogger

Cuando creamos una pagina en Blogger , se habrán dado cuenta que automáticamente el titulo se repite en la entrada de la pagina por ejemplo: creo una pagina y le pongo de nombre PELICULAS, redacto mi entrada y me doy con la sorpresa que el dichoso titulo tambien aparece en la entrada de la pagina, lo cual a mi parecer se nota anti estético en pocas pabaras ; se ve mal.

Hoy solucionaremos ese detalle  de Blogger en 2 pasos:

colocando un  código condicional en la Plantilla antes del </Head>  

1.:Nos vamos a : Plantilla / Editar HTML / Hacer clic sobre cualquier espacio al interior de la plantilla, y luego presionar las teclas Control + F o CTRL+G  para ejecutar el buscador en el cual escribimos </head> y una vez ubicado , pegan arriba de este el siguiente código:


<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<style type="text/css">
h3.post-title {
display:none;
}
</style>
</b:if>



2. Guardamos cambios y ya esta, no nos volverá a aparecer el titulo en las entradas de las paginas de vuestro Blog.

Si te sirvió Compártelo en tus Redes Sociales!

Mostrar la primera letra de la entrada con mas tamaño en tu blog

Este truco dará mayor realce a sus entradas ya que aplicando este código la letra inicial siempre sera mas grande que las demás,(tipo letra capital de Word).
Simplemente copiamos y pegamos el código al iniciar una entrada en HTML, Luego en Redactar continuamos con la entrada.Codigo a pegar:<span style="color:#000000; float: left; font-family: Times New Roman; font-size: 50px; line-height: 30px; padding-right: 5px; padding-top: 5px;"> E</span>
Hacerlo es muy sencillo pues nos permitirá mostrar la letra inicial con un tamaño y estilo distinto pudiendo modificar lo siguiente:Color, tamaño,estilo de fuente.



Cambiar lo siguiente según sus gustos:
1.- #000000: Color  
2.- font-size: 50px:Tamaño.
3.- Times New Roman: Tipo de Fuente
4.- E: Es la primera letra a mostrar.

Eliminar/Ocultar mensaje"Mostrando entradas con la Etiqueta ...... "

Seguro les a pasado que cuando están buscando una etiqueta del blog y usamos el método clásico de búsqueda en blogs"Las Etiquetas" y nos aparece un rectángulo con este mensaje un tanto molesto: 

Bueno manos a la obra y hacemos lo siguiente:

Opción 1 (Ocultar mensaje)

Abren su blog nos vamos a Plantilla / Edición de HTML y antes de ]]></b:skin>  copiamos y pegamos  esto:

.status-msg-wrap {visibility:hidden;display:none;}

Opción 2 (Eliminar mensaje)

Entran a Plantilla / Edición de HTML, CTRL +G para abrir el buscador  y ubica  este código:

<b:include data='top' name='status-message'/>

Lo eliminamos  y guardamos  los cambios, eso seria todo. El mensaje ya no volverá a aparecer, usando cualquiera de los dos trucos.

Quitar el fondo de las imágenes en Blogger

Seguro ya les ha pasado en Blogger,que han insertado una imagen sin fondo o mejor dicho con fondo transparente y cuando publican la entrada se dan con la sorpresa que nuestra imagen esta con un fondo.

Pues lo que pasa es que algún programador de  Blogger se le ocurrió dar ese efecto de borde de fondo medio sombreado a las imágenes  y bueno hoy les enseñare como librarnos de ese detalle en algunos casos molesto mas no en general. 

Hacemos lo siguiente cada vez que queramos obviar ese detalle:

Copiamos y pegamos lo siguiente: 

style="background-color: transparent; background-image: none; border: none; box-shadow: rgba(0, 0, 0, 0) 1px 1px 5px;"

Con esto le decimos a Blogger que no queremos en nuestra imagen borde ni nada.

justamente después de la URL de la imagen:
("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzKctyJnPvtcCFvvgMAGFKTHHRriaAuV1tn-VpsPwM3wPikR7jTfo5Wr7RGCl-NaGge3MqgIAFNdcdcf3ak_ZyQ4gGln-bht3Xd8aCSstxkOQPdX6NbwX8tzgJvdC2qitIfD94Hu1OOweC/s1600/juyt.png" justo aquí, tal como lo muestra la imagen:

Click para agrandar imagen

Habrán notado que el link nos sale dos veces,donde vamos a pegar lo siguiente es en el segundo exactamente donde esta separado con lápiz  azul ,el que esta resaltado con amarillo lo obviamos.

Ya habrán notado la diferencia la primera imagen esta con el truco y la segunda no.

Imagen flotante con opción de cerrar con una X en Blogger

En algunas ocasiones de seguro necesitaremos este truco en nuestro Blog, ya sea para publicitar algo, felicitar a alguien o simplemente saludar  a nuestros seguidores en días festivos como :Fiestas Patrias, Navidad, Fin de Año,etc,etc.Click aqui para ver el resultado en mi blog de intercambio.

Entonces manos a la obra : abrimos nuestra cuenta de Blogger y vamos a Plantilla / Edición HTML y  antes de <\head> copia y pega esto:

<script type='text/javascript'>
//<![CDATA[
var ftr_arr = new Array();
var ftr_clear = new Array();
function ftrFloat(ftr) {
ftr_arr[ftr_arr.length] = this;
var ftrpointer = eval(ftr_arr.length-1);
this.pagetop = 0;
this.cmode = (document.compatMode && document.compatMode!="BackCompat") ? document.documentElement : document.body;
this.ftrsrc = document.all? document.all[ftr] : document.getElementById(ftr);
this.ftrsrc.height = this.ftrsrc.offsetHeight;
this.ftrheight = this.cmode.clientHeight;
this.ftroffset = ftrGetOffsetY(ftr_arr[ftrpointer]);
var ftrbar = 'ftr_clear['+ftrpointer+'] = setInterval("ftrFloatInit(ftr_arr['+ftrpointer+'])",1);';
ftrbar = ftrbar;
eval(ftrbar);
}

function ftrGetOffsetY(ftr) {
var ftrTotOffset = parseInt(ftr.mtasrc.offsetTop);
var parentOffset = ftr.ftrsrc.offsetParent;
while ( parentOffset != null ) {
ftrTotOffset += parentOffset.offsetTop;
parentOffset = parentOffset.offsetParent;
}
return ftrTotOffset;
}
function ftrFloatInit(ftr) {
ftr.pagetop = ftr.cmode.scrollTop;
ftr.ftrsrc.style.top = ftr.pagetop - ftr.mtaoffset + "px";
}
function closeTopAds() {
document.getElementById("ftr_imagen").style.visibility = "hidden";
}
//]]>

</script>


Luego antes de </body> copia y pega lo siguiente: 
<a href="URL del enlace">
<div id='ftr_imagen'>
<img border='0' class='close' onClick='closeTopAds();return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjohKLvV_FbWiNSAi6hmQkts-AdBRABf_IyRpjWyIY7Dil0OClZpgPOBm2bAUAcNqRo6fbR-hpJfcwBwUIPXJtNG4bUGiZkWaVV28qS1SeL6K5Ep7drBWwhhZbfq_GCNvN4Y6nll14XTcE/s200/iconClose.gif'/>
</div>
</a>

Nota.- la primera  linea que esta de rojo y azul es opcional si quieren ponerle un vinculo a la imagen, si no lo desean simplemente la borran, de ser así también borren el cierre </a>

Para finalizar copiamos y pegamos lo siguiente : antes de   ]]></b:skin>

#ftr_imagen {
background: url(URL de la imagen flotante) no-repeat;
bottom: 0px;
right: 0px;
width: 128px;
height: 128px;
position: fixed;
}
.close {
float: right;
padding-right: 10px;
cursor: hand;
cursor: pointer;
}

Agregamos la URL de la imagen en la linea que esta de azul

Nota.- podras configurar lo siguiente:
Width= ancho
Height= alto
Right (derecha) o Left (izquierda)

También para que no se demoren localizando las etiquetas ejecuten el buscador: CTRL+G ,digitan  </head> y le dan Enter, y en instantes lo buscara por ustedes.

VENTANA FLOTANTE CON BOTÓN CERRAR

Esta vez les enseñare como crear una ventana flotante ,con opción de cerrar con una  (x).
Esto les servirá cuando quieran dejar una nota a sus seguidores, lectores en fin.
Solo bastara que copien y peguen el siguiente código en un GADGET HTML-JAVA Script:
Abren su cuenta , Diseño, Agregar un Gadget, Html - Java Script y pegan el código en el contenedor.

No es necesario poner un titulo.

<div id='ventana-flotante'>

   <a class='cerrar' href='javascript:void(0);' onclick='document.getElementById(&apos;ventana-flotante&apos;).className = &apos;oculto&apos;'>x</a>

   <div id='contenedor'>

       <div class='contenido'>

Aquí va el mensaje.

       </div>

   </div>

</div>

<style>
#ventana-flotante {
width: 360px;  /* Ancho de la ventana */
height: 90px;  /* Alto de la ventana */
background: #ceffad;  /* Color de fondo */
position: fixed;
top: 200px;
left: 50%;
margin-left: -180px;
border: 1px solid #adffad;  /* Borde de la ventana */
box-shadow: 0 5px 25px rgba(0,0,0,.1);  /* Sombra */
z-index:999;
}
#ventana-flotante #contenedor {
padding: 25px 10px 10px 10px;
}
#ventana-flotante .cerrar {
float: right;
border-bottom: 1px solid #bbb;
border-left: 1px solid #bbb;
color: #999;
background: white;
line-height: 17px;
text-decoration: none;
padding: 0px 14px;
font-family: Arial;
border-radius: 0 0 0 5px;
box-shadow: -1px 1px white;
font-size: 18px;
-webkit-transition: .3s;
-moz-transition: .3s;
-o-transition: .3s;
-ms-transition: .3s;
}
#ventana-flotante .cerrar:hover {
background: #ff6868;
color: white;
text-decoration: none;
text-shadow: -1px -1px red;
border-bottom: 1px solid red;
border-left: 1px solid red;
}
#ventana-flotante #contenedor .contenido {
padding: 15px;
box-shadow: inset 1px 1px white;
background: #deffc4;  /* Fondo del mensaje */
border: 1px solid #9eff9e;  /* Borde del mensaje */
font-size: 20px;  /* Tamaño del texto del mensaje */
color: #555;  /* Color del texto del mensaje */
text-shadow: 1px 1px white;
margin: 0 auto;
border-radius: 4px;
}
.oculto {-webkit-transition:1s;-moz-transition:1s;-o-transition:1s;-ms-transition:1s;opacity:0;-ms-opacity:0;-moz-opacity:0;visibility:hidden;}
</style>

<!--[if IE]>
<style>
.oculto {display:none}
</style>
<![endif]-->

En las partes del texto que esta con verde: ustedes configuran el fondo, borde, texto, color del texto, ancho de la ventana, alto de la ventana, la sombra.

En la parte que esta con azul ponen su mensaje.

Les quedara como el ejemplo de la pagina.

No se olviden de comentar o sugerir temas.

Imágenes de Prueba