Mostrar Gadgets sólo en las portadas del blog

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.

Mostrar gadgets solo en la portada del blog
El tiempo de carga de una página suele ser por lo general el mayor problema que muestran todos los blogs, pudiendo no solo hacer que los lectores dejen de visitarlos sino también dificultar el acceso al contenido publicado.

Los gadgets que instalamos en la sidebar o barra lateral son, la mayoría de veces, culpables.

Algunos son fundamentales por la información o las ventajas que ofrecen pero otros no hacen más que sobre cargar el sitio web. No queremos eliminarlos y por ello simplemente haremos que se muestren exclusivamente en la página principal o portada, evitando así que el visitante pueda verlos al acceder a una entrada de forma individual.

La explicación está basada en un gadget html-javascript aunque el mismo método puede aplicarse a cualquier otro (el de Seguidores o el de Lista de blogs, por ejemplo).

Diseño>Edición de HTML>expandimos artilugios



Busca el código del gadget y añade lo que resalto en color rojo:

<b:widget id='HTML2' locked='false' title='Visitas del blog' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

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

Tal y como puedes ver, la primera línea aparece justo después de <b:includable id='main'> y su correspondiente cierre justo antes de </b:includable>.

Con este par de aclaraciones no importará que el código sea distinto por tratarse de otro gadget dado que las líneas previamente citadas aparecerán siempre.

Recuerda que para encontrar el código de un gadget en tu plantilla con facilidad, bastará con incluirle antes de acceder al apartado de Diseño>Edición de HTML, un título único.

Posteriormente y haciendo uso del buscador de tu navegador (puede abrirse presionando las teclas Ctrl y F simultáneamente) escribiremos el título.

Aplicando el truco a varios gadgets lograremos que en la portada todos queden visibles, pero al abrir un artículo se ocultarán y quedarán visibles aquellos a los que no les hayas aplicado la modificación.

Guarda la plantilla y habrás terminado.

Cómo ocultar el bloque de las entradas en la portada del Blog

Artículo publicado en el blog El Balcón de Jaime,  ver la entrada en su blog original.

Ocultar el bloque de las entradas en la portada del blog
Ya hemos visto cómo mostrar un gadget sólo en la portada, así como sólo en las páginas de entradas individuales.

Todo esto se consigue gracias a las condicionales de blogger, que se encargan de indicar dónde se ejecuta algo y dónde no. También podemos aplicar condicionales al bloque de entradas (con los artículos incluidos) de tal forma que se muestre en todas partes excepto en la portada del blog.

Puede comprobarse el resultado accediendo a este blog de pruebas.

Diseño>Edición de HTML>sin expandir artilugios



Localizamos estas líneas de código:
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>
</b:section>

Añadimos la condicional resaltada en color rojo:
<b:if cond='data:blog.url != data:blog.homepageUrl'><b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>
</b:section></b:if>

De este modo, todos los gadgets que tengamos en la sidebar o en las columnas bajo la cabecera se mostrarán en la portada, mientras que las entradas se mantendrán ocultas.

Nota:
- Aunque este procedimiento es el más seguro, existe un método muy práctico que consiste en acceder al apartado de Configuración y en la pestaña Formato, donde dice 'Mostrar un máximo de...', insertar la cifra 0.
 

Útil y elegante menú flotante vertical

Artículo publicado en el Balcón de Jaime. Ver en su sitio original.

Estás leyendo Menú vertical flotante y desplegable para tu blog, en

Menú vertical flotante y desplegable para tu blog

Es probable que si tienes un blog y sueles añadirle complementos para personalizarlo a tu gusto te hayas preguntado alguna vez... ¿Dónde coloco esto?

En el caso de un menú, esta pregunta puede hacerse popular. Dado que la mayoría de los menús requieren un espacio bajo la cabecera o en la barra lateral para que sus enlaces sean mostrados con facilidad a los lectores, te encontrarás con un problema si en tu blog tienes cada elemento posicionado en el lugar idóneo y no deseas cambiarlo.

Llegado el caso de no saber como ofrecer a tus visitantes los enlaces que toda barra de navegación posee, te aconsejaría utilizar este maravilloso menú, creado a partir de una idea publicada con anterioridad.

Se compone por una simple franja que permanece fija en el lateral izquierdo del blog y que al hacer clic en ella, despliega un menú muy atractivo con tu lista de links.

Menú vertical flotante y desplegable para tu blog

Al pulsar la franja una vez haya sido desplegado el contenido, éste volverá a ocultarse. Puedes ver el menú en funcionamiento accediendo a este blog.


Diseño>Edición de HTML>expandimos artilugios



Busca la etiqueta ]]></b:skin> en tu plantilla y debajo añade este script:

<script type='text/javascript'>
//<![CDATA[

var bldespll;
var bldespll2=-200;

function blcnbotndesplegg() {
if (bldespll==2) { bldespll=-2} else {bldespll=2};
document.getElementById("blmenuflntdesplegab")
.style.top=parseInt(document.getElementById("blmenubt").style.top)+30+"px";
document.getElementById("blmenuflntdesplegab").style.visibility="visible";
blnlacc() }

function blnlacc(){
bldespll2=bldespll2+4*bldespll;
if(bldespll2 <- 200) {bldespll2=-200};
if(bldespll2 > 0) {bldespll2=0};
document.getElementById("blmenuflntdesplegab").style.left=bldespll2+"px";
if (bldespll2 <=-200 || bldespll2 >=0) {window.clearTimeout() } else {window.setTimeout("blnlacc();",50);} }

//]]>
</script>
<style>#blcnenlace{font-family:Arial,helvetica,sans-serif; font-size:12px; border-bottom:1px solid #CCCCCC;} #blcnenlace a{text-decoration: none; color: #333333;}#blcnenlace:hover{border-bottom: 1px solid #9D9D9D;}</style>

Ahora, justo encima de la etiqueta <body> incluye este código:

<div id='blmenubt' style='display:scroll;position:fixed;top:100px;left:0px;'>
<a href='javascript:void(0)' onclick='blcnbotndesplegg();' title='Desplegar Menú'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif-7BKxvbRMT7fAQJbI7ASb7KB-HtxZGVqbZELdhMxfec4iIfjFJa73n4f9nRpmZ1Nq804It8DQELzdDKfIT3ZwkAb_XuQUig0XQ4TRAmpUqus5Z9W_V9TiFx5SzZcv4lbPOpVzEUtE6w/s320/blmostrarmenu.png'/></a>
</div>

Una vez hecho esto, debajo de <body> añade esto otro:

<div id='blmenuflntdesplegab' style='position:fixed; visibility:hidden; background:url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZCCkXz7zG5NtUis_Ssp8cI_qIVBxqxpBnA-3R9Kb0dSgH9Iwb3PcBhBdMON7mxOqDhldIjFGUwEuB6ZWcQBH7gzwJ-QjLW5662zX5v2o2lplu49Vx91W5ZIWztG9MfHlzcq1sPf7SJK0/s400/BLMENUDSS.gif&quot;) no-repeat scroll 0 0 #eeeeee; z-index:1;'>
<table style='border:1px solid #9D9D9D; width:150px; text-align:center; padding:5px;'>
<tr><td id='blcnenlace' style='padding-top:28px;'><a href='DIRECCION'>TITULO</a></td></tr>

<tr><td id='blcnenlace'><a href='DIRECCION'>TITULO</a></td></tr>
<tr><td id='blcnenlace'><a href='DIRECCION'>TITULO</a></td></tr>
<tr><td id='blcnenlace'><a href='DIRECCION'>TITULO</a></td></tr>
<tr><td id='blcnenlace'><a href='DIRECCION'>TITULO</a></td></tr>
<tr><td id='blcnenlace'><a href='DIRECCION'>TITULO</a></td></tr>
</table>
</div>

Reemplaza en cada línea DIRECCION con la dirección de la página web, blog o artículo del enlace y TITULO por el texto que aparecerá en el menú.

Guarda la plantilla y habrás terminado. En caso de tener alguna duda escribe un comentario para que pueda ayudarte.

Como poner un mensaje de bienvenida en todas las entradas del blog

Artículo publicado originalmente en el blog: El balcón de Jaime: Visitar sitio.

Mensaje de bienvenida sobre las entradas de tu blog
En esta entrada aprenderemos a crear una nueva sección sobre las entradas que mostrará un elemento de página o gadget html-javascript con un mensaje de bienvenida sólo visible en la página principal o portada del blog.

Puede verse el resultado en la siguiente imagen:



Diseño>Edición de HTML>expandimos artilugios



Localizamos este código:
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>
</b:section>

Ahora, justo antes, añadimos el bloque que creará la nueva sección sobre las entradas:
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:section class='Mensajbljposjt' id='Mensajbljposjt' showaddelement='yes'>
<b:widget id='HTML68' locked='false' title='Mensaje de Bienvenida' type='HTML'/>
</b:section>
</b:if>

Buscamos la etiqueta ]]></b:skin> y justo antes incluimos el siguiente css:
/* Mensaje de bienvenida
----------------------------------------------- */
#Mensajbljposjt h3 {
color: #FFFFFF; /* Color del titulo (¡Bienvenid@! */
}
#Mensajbljposjt {
color:#333333; /* Color del texto */
background:#92DA8B; /* Color del fondo */
}

Puede modificarse el color de fondo (#92DA8B) en background:#92DA8B; haciendo uso de la tabla de colores. También se puede editar el color del texto, reemplazando #333333 o #FFFFFF por el código de otro color.

Ahora, antes de </head> agregamos esta línea:
<link href='https://sites.google.com/site/scriptsbalcon/b/Mensajbljjtepos.css' rel='stylesheet' type='text/css'/>

Guardamos la plantilla.

A continuación accedemos al apartado de Diseño > Elementos de la página y pulsamos sobre el enlace 'Editar' del gadget titulado 'Mensaje de Bienvenida'.

Insertamos este código en su interior:
<div id="Mensajbljposjt">
<h3>¡Bienvenid@!</h3>

<img src="URL DE TU IMAGEN"/>

<p>TEXTO PRIMERA LÍNEA</p>
<p>TEXTO SEGUNDA LÍNEA</p>
<p>TEXTO TERCERA LÍNEA</p>

<p>TEXTO CON ENLACE <a href="URL PAGINA">ESTE ES EL ENLACE</a></p>

</div>

Debe reemplazarse URL DE TU IMAGEN por la dirección de la miniatura de imagen a mostrar.

En TEXTO PRIMERA LÍNEA introduciremos el primer párrafo del mensaje de bienvenida y así sucesivamente.

En TEXTO CON ENLACE puede incluirse una frase que contenga un enlace de suscripción en su interior. La dirección del enlace (o feed) se insertará en URL PAGINA mientras que el texto que mostrará el link debe escribirse en donde dice ESTE ES EL ENLACE.

La única función de <p> y su cierre </p> es la de crear saltos de línea dejando un espacio en blanco. Para mostrar el texto sin saltos de línea bastará con eliminarlos.

Guarda el gadget para terminar.

Enlaces en una misma entrada del blog

Este artículo fue publicado por Jaime para el blog ElBalcóndeJaime. Para verlo en su sitio original pincha aqui

Crear vinculos dentro de una misma entrada o artículo
Los enlaces no sólo facilitan la navegación al lector sino que también pueden vincular apartados dentro de un artículo extenso en donde se crea un índice con los temas tratados.

Este índice permite acceder a cualquier apartado con un click, sin abandonar la entrada.


Supongamos que nuestro índice se compone por la siguiente estructura:
Primer apartado
Segundo apartado
Tercer apartado

El primer paso constará de crear la tabla de contenido. Para ello utilizamos el atributo href al que atribuímos un nombre único (en lugar de una URL):
<a href="#primero">Primer apartado</a>
<a href="#segundo">Segundo apartado</a>
<a href="#tercero">Tercer apartado</a>
Seguidamente y haciendo uso del atributo name especificamos el área a donde conducirá cada enlace.

Para el primer apartado emplearíamos lo siguiente:
<a name="primero">Primer apartado</a>

Este sería el contenido perteneciente al primer apartado del artículo, como podría ser la introducción.

Haremos lo mismo para los apartados restantes. Debe tenerse en cuenta que el nombre a utilizar en el enlace (primer paso) y posteriormente en el apartado (segundo paso) debe ser único.

Si lo repetimos en otro apartado, el enlace no conducirá al tema apropiado y acudirá al área en donde tenemos el nombre correcto.

Al poner cualquier código en la entrada, conviene hacerlo en la pestaña de 'Edición de HTML' y no en la de 'Redactar'.



En el ejemplo se presenta un artículo 'falso'. El truco ha sido utilizado para crear, por ejemplo, numerosos artículos acerca de los periquitos.

Crea ventanas modales o pequeñas galerías (miniaturas) para entradas o portada del blog.

Este artículo fue publicado en el Balcón de Jaime por Jaime Trujillo Escobedo. Para verlo en su blog original
visitar: http://elbalcondejaime.blogspot.com/2010/11/ventanas-modales-para-mostrar-cualquier.html

Este clon de Lightbox conocido como Shadowbox nos permite, a diferencia del primero, abrir en ventanas modales tanto imágenes como páginas web, vídeos e incluso archivos en flash (como juegos).

Una herramienta con un sin fin de usos y de fácil instalación con la que podrás presentar en tu blog cualquier cosa sin hacer que éste se retrase al cargar el contenido.

Diseño>Edición de HTML>expandimos artilugios



Busca la etiqueta </head> y justo encima añade estos scripts:

<!-- Ventana modal ShadowBox Balcn-->
<link href='https://sites.google.com/site/scriptsbalcon/b/blccbx.css' rel='stylesheet' type='text/css'/>
<script src='https://sites.google.com/site/scriptsbalcon/b/bljjShadowbx1.js' type='text/javascript'/>
<script type='text/javascript'>
Shadowbox.init({
overlayColor: "#000",
overlayOpacity: "0.6",
});
</script>

Si lo deseas, puedes descargar el script que hace funcionar la ventana modal (bljjShadowbx1.js), así como las propiedades css y alojarlo en tu propio hosting para, posteriormente, incluir la dirección del nuevo archivo subido en el código (borrando antes la actual).

Guarda la plantilla.

Con esto ya tendremos implementado lo necesario en nuestra plantilla. Ahora tan tendrás que incluir el código necesario para mostrar cada elemento en una entrada o en un gadget html-javascript del apartado de Diseño>Elementos de la página de tu blog.

Una imagen


<a title="TITULO" rel="shadowbox" href="URL DE LA IMAGEN"><img src="URL DE LA IMAGEN" style="width: 100px;"></a>


Una galería de imágenes


<a href="URL DE LA IMAGEN 1" rel="shadowbox[blgal1]" title="TITULO"><img style="width:100px;" src="URL DE LA IMAGEN 1"/></a>

<a href="URL DE LA IMAGEN 2" rel="shadowbox[blgal1]" title="TITULO"><img style="width:100px;" src="URL DE LA IMAGEN 2"/></a>

Un vídeo de YouTube


<a rel="shadowbox;width=405;height=340;" title="YouTube" href="http://www.youtube.com/v/XT6XPHXK4e4&rel=0&autoplay=1">Ver el vídeo</a>

Un archivo SWF (como un minijuego -archivos Flash-):


<a rel="shadowbox;width=400;height=300" title="SWF" href="URL DEL ARCHIVO SWF">TITULO DEL ENLACE</a>

Una página web:


<a rel="shadowbox;width=700;height=500" title="TITULO" href="URL DE LA PAGINA">TITULO DEL ENLACE</a>


Reemplaza cuando sea necesario:

URL DE LA IMAGEN por la dirección de tu imagen (imágenes si se trata de una galería), TITULO DEL ENLACE por el texto que aparecerá en el enlace que abre la ventana modal (puedes utilizar una imagen en lugar de texto incluyendo esta línea de código: <img src="URL DE TU IMAGEN"/> e insertando la dirección de la imagen en miniatura que actuará como botón).

Cuando vayas a incluir una galería en tu blog, ten en cuenta que el atributo rel="shadowbox[blgal1]" pertenece a una galería, blgal1, por lo que las nuevas imágenes que incluyas utilizando este nombre aparecerán junto a las anteriormente publicadas. Para evitarlo, edita blgal1 tantas veces como desees de manera que puedas agrupar imágenes por separado en una galería (blgal1) o en otra (blgal2).

Las cifras del vídeo de YouTube (XT6XPHXK4e4) deben sustituirse por los carácteres que aparecen al final de la dirección del vídeo que has escogido.

En URL DEL ARCHIVO SWF incluye la dirección del archivo .swf que obtendrás al haberlo alojado en tu propio hosting.

Agrega la dirección de cualquier página web en URL DE LA PAGINA (siempre con el http://).
Este artículo fue publicado en el Balcón de Jaime por Jaime Trujillo Escobedo. Para verlo en su blog original visitar: http://elbalcondejaime.blogspot.com/2010/11/ventanas-modales-para-mostrar-cualquier.html

Gracias por tu visita al Blogger Magazine, las últimas novedades de los mejores maestros bloggers.

Cómo crear un anuncio o aviso flotante para el blog

Aviso o anuncio flotante que permanece fijo al navegar por el blog

 
 
Artículo publicado en el blog, ya cerrado, El Balcón de Jaime (2007-2011) donde encontramos una gran variedad de trucos de mucha ayuda para los bloggers. Visitar el Balcón de Jaime.
 
ARTÍCULO
Aviso o anuncio flotante que permanece fijo al navegar por el blog

Tras haber visto cómo incluir en el blog un cartel o aviso automático al pie de todas las entradas, descubriremos este otro truco de sencillísima configuración. Se trata de un recuadro que permanece flotando en una esquina del blog y que puede cerrarse con un solo clic.

Puedes ver el resultado en este blog de pruebas, desplazándote a través de la entrada para comprobar que el anuncio "flota" sea cual sea la posición a la que llegues.


Diseño>añadir gadget (elemento de página)>html-javascript






Pega el script:

<div id="blanuncio">
<a href="" onclick="blcartel_cierra(); return false"><img title="Cerrar nota" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimwCC3znP6SNf2XyoidMdRpukB6C0zP5su-25ARLhq7bH04-e0WGEf2W22QKxaVkwKln1WT_DAwfq3fV5nIOj-pQygdOU9twh89lWdOQGAkjhyphenhyphen6wwcol0U2uGHzXl2_EbxGHxTCpY08fyk/s320/blcerra.png" border="0" /></a> CONTENIDO AQUI
</div>

<script type="text/javascript">
var blbtn_cerrar=1.1
var blcartl_1 = 30
var blcartl_3="fromtop"
var blcartl_2 = 5
function blcartl_Activo(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function blcartl_nuevo(llamo) {
var blcartel_aparien = llamo + "="
var blcartel_cam = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(blcartel_aparien)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
blcartel_cam=unescape(document.cookie.substring(offset, end))
}
}
return blcartel_cam;
}
function blcartel_cierra(){
if (blbtn_cerrar)
document.cookie="remainclosed=1"
document.getElementById("blanuncio").style.visibility="hidden"
}
function blcartel_posicion(){
barheight=document.getElementById("blanuncio").offsetHeight
var blcartel1 = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
var blcartt = document;
function blavis(id){
var bblaviso=blcartt.getElementById(id);
if (!blbtn_cerrar || blbtn_cerrar && blcartl_nuevo("remainclosed")=="")
bblaviso.style.visibility="visible"
if(blcartt.layers)bblaviso.style=bblaviso;
bblaviso.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";};
bblaviso.x = blcartl_1;
if (blcartl_3=="fromtop")
bblaviso.y = blcartl_2;
else{
bblaviso.y = blcartel1 ? pageYOffset + innerHeight : blcartl_Activo().scrollTop + blcartl_Activo().clientHeight;
bblaviso.y -= blcartl_2;
}
return bblaviso;
}
window.stayTopLeft=function(){
if (blcartl_3=="fromtop"){
var blcartel2 = blcartel1 ? pageYOffset : blcartl_Activo().scrollTop;
ftlObj.y += (blcartel2 + blcartl_2 - ftlObj.y)/8;
}
else{
var blcartel2 = blcartel1 ? pageYOffset + innerHeight - barheight: blcartl_Activo().scrollTop + blcartl_Activo().clientHeight - barheight;
ftlObj.y += (blcartel2 - blcartl_2 - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 6);
}

ftlObj = blavis("blanuncio");
stayTopLeft();
}
if (window.addEventListener)
window.addEventListener("load", blcartel_posicion, false)
else if (window.attachEvent)
window.attachEvent("onload", blcartel_posicion)
else if (document.getElementById)
window.onload=blcartel_posicion
</script>
<style type="text/css">
#blanuncio {
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2tuhlMvCJKAU7oI7JkjJJSycf9iZxH2oX10oUfrD7gVkPfnRj8BuISwsw-hyXvRAlH9eZEf_912JYYU4J3qovLvF506w5Mp4DN26vCT9bsWfDE3OfXurZiviZCAj7YKaKcvApwQSMD0m1/s320/blfondd.png") repeat scroll left top transparent;
border:1px solid #CCCCCC;
padding:2px;
position:absolute;
visibility:hidden;
width:576px;
z-index:100;}
#blanuncio img {margin-right: 8px;}
#blanuncio a:link, #blanuncio a:hover, #blanuncio a:visited {color: #000000;}</style>

Reemplaza CONTENIDO AQUI por el contenido (texto) que tendrá el anuncio.

Puedes personalizar el ancho que tendrá el recuadro del anuncio editando el valor 576px en la línea resaltada en verde, al final del código.

Para cambiar la imagen de fondo del aviso, borra la línea marcada en azul e inserta la dirección de tu imagen.

Finalmente, si deseas editar la imagen de cierre borra la primera URL del script (resaltada en verde) e introduce la URL de tu icono.

En caso de no saber el procedimiento para obtener la URL de una imagen, accede a esta entrada.

Una vez editados los parámetros, procederemos a guardar el gadget.

Fuente: http://elbalcondejaime.blogspot.com/2010/04/aviso-o-anuncio-flotante-que-permanece.html

Gracias por tu visita al Blogger Magazine, las últimas novedades de los mejores maestros bloggers.
Related Posts Plugin for WordPress, Blogger...