0

Entradas expandibles en la página principal

Recuerda
que aunque yo pruebe los "trucos"
Antes de hacer ningún cambio
GUARDA SIEMPRE TU PLANTILLA
Nunca es seguro
que todo salga bien...
Hace tiempo habíamos visto la forma de lograr que, en las páginas de etiquetas se mostrasen solamente los títulos de las entradas, permitiendo que al pinchar sobre ellas se viesen completas.

Han sido varias personas las que me han preguntado sobre la forma de hacer esto mismo, pero en la página principal.


Esto lo he conseguido con una ligera modificación del código en el "truco" original, incluso pueden mostrarse sin problemas en ambas páginas al mismo tiempo.

Partiremos de la base de que no tenéis implementado el "truco" anterior que mostraba los títulos "recogidos" en las páginas de etiquetas.

[1] Nos descargamos el script que necesitamos para hacer funcionar el efecto y lo subimos a un alojamiento adecuado para obtener su url.

[2] Vamos a Edición de HTML de nuestro panel y marcamos la opción "Expandir las plantillas de artilugios" colocamos la url del script en este código y de esta manera que veis, antes de </head>:

<script src='URL_DEL_SCRIPT' type='text/javascript'></script>
<script type='text/javascript'>
function toggleIt(id) {
    post = document.getElementById(id);
    if (post.style.display != 'none') {
        post.style.display = 'none';
    } else {
        post.style.display = '';
    }
}
</script>
[3] Localizamos ahora el código que está escrito en color negro, y añadimos la parte del código que está escrita en color rojo, colocada tal cual se ve aquí, es decir, el código negro ya está en la plantilla y el código rojo es el que se añade:

<b:includable id='PeekABooPost' var='post'>
<div class='post uncustomized-post-template'>
<table><tr><td width='40px'>
<a expr:onclick='&quot;javascript:toggleIt(\&quot;&quot; + data:post.id + &quot;\&quot;);&quot;' href='javascript:void(0)' style='text-decoration:none' title='Desplegar esta entrada'>[+/-]</a></td>
<td><h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3></td></tr></table>
<div class='post-body' expr:id='data:post.id' style='display:none'>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
</div>
</b:includable>

<b:includable id='main' var='top'>
  <!-- posts -->
  <div id='blog-posts'>
    <b:loop values='data:posts' var='post'>
      <b:if cond='data:post.dateHeader'>
            <h2 class='date-header'><data:post.dateHeader/></h2>
      </b:if>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
     <b:if cond='data:blog.pageType != "item"'>
             <b:include data='post' name='PeekABooPost'/>
     <b:else/>
              <b:include data='post' name='post'/>
            </b:if>
      <b:else/>
<b:include data='post' name='post'/>
 </b:if>

[4] Usaremos la vista previa antes de guardar, pues ya deberían ser visibles solo los títulos de las entradas precedidos de un [+/-] en la página principal.

Si ya tenemos aplicado el "truco" en las páginas de etiquetas y queremos añadirlo también en la página principal del blog:

[1] Localizaremos esta parte del código:

<b:includable id='main' var='top'>
  <!-- posts -->
  <div id='blog-posts'>
    <b:loop values='data:posts' var='post'>
      <b:if cond='data:post.dateHeader'>
            <h2 class='date-header'><data:post.dateHeader/></h2>
      </b:if>

      <b:if cond='data:blog.homepageUrl != data:blog.url'>
     <b:if cond='data:blog.pageType != "item"'>
             <b:include data='post' name='PeekABooPost'/>
     <b:else/>
              <b:include data='post' name='post'/>
            </b:if>
      <b:else/>

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

      </b:if>

[2] Y añadiremos ahí la parte que está resaltada en color rojo:

<b:includable id='main' var='top'>
  <!-- posts -->
  <div id='blog-posts'>
    <b:loop values='data:posts' var='post'>
      <b:if cond='data:post.dateHeader'>
            <h2 class='date-header'><data:post.dateHeader/></h2>
      </b:if>

      <b:if cond='data:blog.homepageUrl != data:blog.url'>
     <b:if cond='data:blog.pageType != "item"'>
             <b:include data='post' name='PeekABooPost'/>
     <b:else/>
              <b:include data='post' name='post'/>
            </b:if>
      <b:else/>

<b:if cond='data:blog.homepageUrl == data:blog.url'>
     <b:if cond='data:blog.pageType != &quot;item&quot;'>
             <b:include data='post' name='PeekABooPost'/>
     <b:else/>
              <b:include data='post' name='post'/>
            </b:if>
      <b:else/>

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

      </b:if>
</b:if>

0

Random de imágenes como fondo del blog

O lo que es lo mismo grupo de imágenes que cambian al actualizar la página.
Las imágenes que debemos buscar deben ser de gran tamaño o de lo contrario no ocuparían todo el fondo ya que el código contiene no-repeat para que las imágenes que no alcanzan a ocupar todo el espacio no se repitan.
Con attachment:fixed las fijamos al fondo. En background añadimos el color que será el que se aprecie mientras carga la página. En Math.random añadimos la cantidad de imágenes (5*Math.random)
A más imágenes más líneas de código debemos añadir aumentando progresivamente el orden numérico al mismo tiempo que aumentamos el valor en Math.random.
¿Dónde lo añadimos? justo antes de la etiqueta </head>.


<script type='text/javascript'>
var banner= new Array()
banner[0]="URL-de-la-imagen"
banner[1]="URL-de-la-imagen"
banner[2]="URL-de-la-imagen"
banner[3]="URL-de-la-imagen"
banner[4]="URL-de-la-imagen"
var random=Math.floor(5*Math.random());
document.write("<style>");
document.write("body {");
document.write(' background: #000 url("' + banner[random] + '") no-repeat center top; background-attachment:fixed;');
document.write(" }");
document.write("</style>");
</script>

Comprueba si funciona actualizando la página con la tecla f5.
No es extraño que las imágenes aparezcan también como fondo en la plantilla de diseño.
Dejo unas imágenes de la prueba que hice.








0

Iconos en rosa

Una linda colección de iconos para el blog diseñados en color rosa y con forma circular, muy apropiados para blogs de chicas.

Podéis verla y descargarla en CSSTea.

La colección, a la que han llamado "Pinky" está formada por 45 iconos en formato PNG y tienen un tamaño de 32 pixeles.


Descargar la colección "Pinky"

0

Modificar el texto de 0 comentarios, 1 comentarios, comentarios.

Birdelo me pregunta algo que pensaba que había hablado en otra ocasión pero no consigo localizar la entrada, seguramente aparecerá duplicada o sencillamente no aparecerá.
Se trata de cambiar ese feo texto cuando no tenemos comentarios en una entrada "0 Comentarios" si es cero no existen comentarios y si hay comentarios no pueden ser cero.
Mejor explicamos como hacerlo.
Nos situamos en plantilla Edicción de HTML, marcamos para expandir la plantilla y buscamos lo siguiente:

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


Y lo sustituimos por:
<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 == 0'>
¿Algún comentario?
</b:if>
<b:if cond='data:post.numComments == 1'>
1 Comentario
</b:if>
<b:if cond='data:post.numComments > 1'>
<data:post.numComments/> Comentarios
</b:if>
</a>
</b:if>

Hasta ahí todo bien, la leyenda de "0 Comentarios" ha sido sustituida por ¿Algún comentario? si deseas cualquier otra frase puedes sustituirla sin problemas, así como modificar el texto de 1 Comentario y Comentarios.
Pero aún no terminamos porque Francisco de Blog and Web nos explica lo siguiente...
"Para que el nuevo texto aparezca en todas las páginas y no sólo en la principal ubicamos de nuevo"
<b:if cond='data:post.allowComments'>
<h4>
<b:if cond='data:post.numComments == 1'>
1 <data:commentLabel/>:
<b:else/>
<data:post.numComments/> <data:commentLabelPlural/>:
</b:if>
</h4>



Y lo sustituimos por:
<b:if cond='data:post.allowComments'>
<h4>
<b:if cond='data:post.numComments == 0'>
¿Algún comentario?
</b:if>
<b:if cond='data:post.numComments == 1'>
1 Comentario:
</b:if>
<b:if cond='data:post.numComments > 1'>
<data:post.numComments/> Comentarios:
</b:if>
</h4>



Ya perdimos de vista ese feo "0 Comentarios"


Si deseas añadir una imagen tipo icono mira esta entrada.


0

Ultimas entradas (Google Ajax)

Otra forma más de mostrar en el blog nuestras últimas entradas que nos ofrecen desde Google AJAX Feed API donde podéis ver un ejemplo en funcionamiento.
Siguiendo los pasos que allí nos indican, no es demasiado difícil conseguir la construcción de un widget que muestre las últimas entradas del blog de una forma muy original.
Yo os proporciono el código del mio, después solo tendréis que tratar de personalizarlo para adaptarlo a vuestro blog.

Ejemplo entradas Ajax

[1] Antes de comenzar tendremos que obtener nuestra API Key de Google.
Accedemos a la página de  Google Ajax Feed API donde obtendremos nuestra Key, para ello solo tenemos que marcar la casilla de "I have read and agree with the terms and conditions" e introducir la url de nuestro blog para después pinchar en el botón "Generate API Key":

Api Key

[2] Añadiremos ahora el código siguiente antes de </head> sin olvidarnos de sustituir en el código "TU_API_KEY" por la nueva Key que acabamos de obtener para nuestro blog:
<!-- API KEY Ultimas entradas-->
<script src='http://www.google.com/jsapi/?key=TU_API_KEY' type='text/javascript'/>
<script src='http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js' type='text/javascript'/>

<style type='text/css'>
@import url("http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.css");

#feedControl {
margin-top : 20px;
margin-left: auto;
margin-right: auto;
width : 95%;
font-size: 16px;
}
.gfg-title {
font-size: 18px;
padding-left: 10px;
color : #fffcc;
background-color: #6998CA;
}
.gfg-title a {
color : #fff;
}

.gfg-root {
border: 1px solid #6998CA;
font-family: "Georgia", sans-serif;

}
.gfg-listentry-highlight {
background-image : url("http://2.bp.blogspot.com/_8PJ-pgoBhWQ/SN1icxHvPXI/AAAAAAAAET4/_V1bKeYDeTk/s320-R/0036_bullet02.png");
background-repeat: no-repeat;
background-position : center left;
}
.gfg-listentry-odd {
background-color : #d7e5f0;
}
</style>
<script type='text/javascript'>
function load() {
var homeUrl = "<data:blog.homepageUrl/>";
var feed = homeUrl + "feeds/posts/default";
new GFdynamicFeedControl(feed, "feedControl");
 var options = {
    numResults : 10,
    displayTime : 5000
  }
  new GFdynamicFeedControl(feed, "feedControl", options);
}
google.load("feeds", "1");
google.setOnLoadCallback(load);
</script>

[3] Guardamos cambios y en el panel de "Diseño" pinchamos en añadir un nuevo Gadget de Html y pegamos dentro estas líneas de código:
<div id="feedControl">
<span style="color: #0066cc;">Cargando ultimas entradas...<img src="http://i201.photobucket.com/albums/aa306/picumoros/mozilla_blu.gif"/></span></div>

Personalización:
El widget funciona también colocado en las entradas, solo hay que añadir el último código dentro del editor en la entrada donde vayamos a mostrarlo.

El tamaño del widget lo he puesto en porcentaje (width: 95%;) de tal manera que ocupara ese espacio, el 95%, del contenedor donde sea colocado (widget o entrada), aunque también podemos usar pixeles.

La cantidad de entradas que se mostrarán puede cambiarse en donde dice "numResults:10;" cambiando "10" por el número de entradas a mostrar.

En displayTime : 5000 controlaremos la velocidad de desplazamiento de la flecha que marca los títulos, a mayor número más lentitud y viceversa, en el código está en 5000, pero en el ejemplo en funcionamiento el valor es de 2000.

En mi diseño he usado una pequeña flecha azul que va marcando cada título, podéis usar vuestro propio icono cambiando la url del mio por la url del nuevo (la parte destacada en negrita):

.gfg-listentry-highlight {
background-image : url("http://2.bp.blogspot.com/_8PJ-pgoBhWQ/SN1icxHvPXI/AAAAAAAAET4/_V1bKeYDeTk/s320-R/0036_bullet02.png");
background-repeat: no-repeat;
background-position : center left;
}

En Bullet Madness podéis encontrar unos iconitos muy adecuados para sustituir a mi flechita azul.

En el paso [3] también podéis usar una "imagen de carga" distinta a la mía, solo tenéis que cambiar la url de mi ejemplo por la de vuestra imagen.

En cuanto a los cambios de color, texto, tamaño de fuente, etc... lo haremos sin demasiado problema en la parte CSS del código, es decir, lo que está entre <style type='text/css> y </style>.

No os preocupéis si tarda un poco en empezar a funcionar...

¡Manos a la obra!

0

Gustos raros, casas raras

Y encima toda una vida pagando hipoteca...
Me preguntaba ¿cómo serán los inquilinos?









Village of Joy

0

YA1111.COM - Wallpapers

0

Acceso al panel de Blogger desde el blog

Una de las modificaciones más populares para los blogs de Blogger es, sin duda, la de ocultar la Navbar que Blogger coloca por defecto en la parte superior de nuestros blog.

Sin duda alguna, el blog queda mucho mejor sin este elemento, pero al mismo tiempo se pierde el acceso directo a nuestro panel de Blogger que la Navbar proporciona.

En Bloggingtips he visto la forma de crear un widget para administrar nuestro panel de Blogger desde el mismo blog, que será muy útil si estamos acostumbrados a usar la Navbar pero hemos decidido ocultarla.
Lo mejor de este widget es que solo el administrador del blog tendrá acceso, es decir, el widget no es visible para los visitantes del blog.

[1] Para crear el panel de control de administrador, tendremos que conocer antes el número de identificación de nuestro blog,  ya que cada blog posee un número propio que tendremos que colocar en los enlaces del panel.

Para saber cual es el número que identifica a nuestro blog tendremos que conectarnos a nuestro panel de Blogger y en cualquier página de nuestro panel nos fijaremos en la dirección que muestra nuestro navegador, y que será algo como esto:

 
Podemos anotarlo en el blog de notas, por ejemplo, para usarlo más tarde en la construcción de los enlaces.

[2] En este paso Amanda, la autora del artículo,  nos indica donde debemos colocar el código del widget dentro del html de nuestra plantilla, pero yo voy a recomendaros una forma más sencilla para incluirlo en el blog, ya que he notado en mis pruebas, que en alguna plantilla, el widget a pesar de no ser visible, si muestra el espacio que ocupa.

También he prescindido de ponerle título al elemento ya que no me parece ni muchos menos imprescindible, no obstante si alguno quisiera incluirlo, puede copiar el código en la página de la entrada original.
Este es el código que hemos de copiar y para después colocar nuestro Número de identificación del blog donde dice Idnumber:
<span class='item-control blog-admin'>
<img src="http://3.bp.blogspot.com/_8PJ-pgoBhWQ/SNmUcZtuboI/AAAAAAAAESU/9KpauxXah_o/s320-R/adminin.jpg" /><a href="http://blogger.com/home">Acceder</a>
|
<a href="http://www.blogger.com/post-create.g?blogID=Idnumber">Nueva Entrada</a>
|
<a href="http://draft.blogger.com/blog-options-basic.g?blogID=Idnumber">Configuración</a>
|
<a href="http://www.blogger.com/rearrange?blogID=Idnumber">Diseño</a>
|
<a href="http://www.blogger.com/html?blogID=Idnumber">Edición HTML</a>
|
<a href="http://www.blogger.com/logout.g">Salir</a>
</span>
He incluido el icono de las herramientas de Blogger al principio del widget, para eliminarlo bastará con borrar esta línea:

<img src="http://3.bp.blogspot.com/_8PJ-pgoBhWQ/SNmUcZtuboI/AAAAAAAAESU/9KpauxXah_o/s320-R/adminin.jpg" />

[3] Una vez tengamos el código listo para usar, podemos pegarlo en cualquier widget de nuestro blog, o incluso en uno que contenga cualquier otra cosa después del contenido que ya teníamos colocado en el previamente.

Aunque para vosotros no es visible, mi panel de control está situado justo al pie del blog y lo he incluido directamente debajo y en el mismo widget que los enlaces del pie del blog:

0

Número de comentarios en forma de burbuja


Lo vi, me llamó la atención y lo puse en práctica.
El efecto queda genial lo podéis ver en mi blog de pruebas, se trata de añadir una burbuja y en su interior el número de comentarios de cada entrada.
El artífice de este invento es nuestro querido amigo Pizcos, vamos a seguir sus explicaciones pero aún así recomiendo ver su blog porque seguro que más de uno quedara encantado con todo lo que nos enseña.
Como de costumbre ubicamos ]]></b:skin> y justo antes añadimos:

.numComments {
background: url(url-imagen) no-repeat top right;
float:right;
text-align: center;
padding: 10px 0 0 0;
font-size: 150%;
width: 50px;
height:50px;
color: #fff;
}

.numComments a:link{
color: #CODIGO HEXADECIMAL;
}
.numComments a:visited{
color: #CODIGO HEXADECIMAL;
}
.numComments a:hover{
color: #CODIGO HEXADECIMAL;
}


Guardamos los cambios y expandimos la plantilla de artilugios donde buscaremos:
<b:if cond='data:post.title'>
Justo después añadiremos:
<span class='numComments'><a expr:href='data:post.url'><data:post.numComments/></a></span>
Si deseamos que nuestra página abra por la página de los comentarios en lugar del anterior código añadiremos:
<span class='numComments'><a expr:href='data:post.addCommentUrl'><data:post.numComments/></a></span>

Veamos lo que según Pizcos podemos modificar:
.numComments {
background: url(url-imagen) no-repeat top right; Aquí definimos la imagen y su posición.
float:right; Posición de todo el elemento.
text-align: center; Alineamos el texto.
padding: 10px 0 0 0; Posicionamos el numero.
font-size: 150%; Tamaño del número.
width: 50px; Ancho del conjunto, la imagen es de 50*50 pixeles.
height:50px; Alto del conjunto.
color: #fff; Color de la fuente.
.numComments a:link Color del número.
.numComments a:visited Color del link una vez visitado.
.numComments a:hover Color al pasar el mouse.

Colores hexadecimales.

Pizcos proporciona un zip conteniendo las imágenes que son las siguientes y también podéis guardar desde aquí.
Como veréis hay colores para todos los gustos y combinables con cualquier blog sea cual sea el color que tengamos, aún así Pizcos se ha ofrecido para crear globos de comentarios en otros colores, si este es tu caso no dudes en ponerte en contacto con él.



0

Personalizando la widebar con pestañas

Lo prometido es deuda y aquí algunas ideas para personalizar la widebar con pestañas.
En realidad los cambios no son cosa del otro mundo pero es cierto que el aspecto cambia considerablemente,  para aligerar un poco el trabajo voy a explicar donde podéis hacer las modificaciones.
Ubicamos en la plantilla el código correspondiente a los estilos que añadimos en la CSS:


/*--------Widetabt------------------*/
#tabsidebar-wrapper{width: 400px;float: right;border: 1px none #CCC;margin-bottom: 15px;}
.tabberlive .tabbertabhide {display:none;}
.tabber {display:none;}
.tabberlive {margin-top:1em;}
.tabber h2 {border-bottom:2px solid #5B0;margin-bottom: .3em;padding: 0;line-height:1.2em;}
.tabber .widget {margin-bottom: 1em;}
.tabber .widget-content {margin: 0 5px;}
ul.tabbernav{margin:0;padding: 8px 0;border-bottom: 1px solid #CCC;}
ul.tabbernav li{list-style: none;margin: 0;display: inline;}
ul.tabbernav li a{padding: 8px 0.5em;margin-right:2px;border: 1px solid #CCC;border-bottom: none;background: #EEE;text-decoration: none;}
ul.tabbernav li a:link { color:#369;}
ul.tabbernav li a:visited { color: #369;}
ul.tabbernav li a:hover{color:#00F; background: #CCC; border-color: #CCC;}
ul.tabbernav li.tabberactive a{background-color: #FFF;color: #369;border-bottom: 1px solid #FFF;}
ul.tabbernav li.tabberactive a:hover{color: #369;background: #FFF;border-bottom: 1px solid #FFF;}
.tabberlive .tabbertab {background: #FFF;padding:5px;border:1px solid #CCC;border-top:0;}
.tabberlive .tabbertab h2 {display:none;}
.tabberlive .tabbertab h3 {display:none;}
  Añadir color de fondo a pestañas
Comenzaremos con el color de las solapas o pestañas, todos sabemos que para modificar un fondo lo hacemos en background así que buscamos en nuestro código:
ul.tabbernav li a{padding: 8px 0.5em;margin-right:2px;border: 1px solid #CCC;border-bottom: none;background: #EEE;text-decoration: none;}
Modificando background: #EEE; por otro color estamos modificando el color de las pestañas 2 y 3
Para cambiar el color de la pestaña 1 lo haremos en:
ul.tabbernav li.tabberactive a{background-color: #FFF;color: #369;border-bottom: 1px solid #FFF;}

Color de fondo en contenido
Vamos a darle color a ese fondo que es la continuación de las pestañas, donde añadimos el contenido y para ello buscamos:
 .tabberlive .tabbertab {background: #FFF;padding:5px;border:1px solid #CCC;border-top:0;}
De esta forma cambiamos el color de fondo que precede a las pestañas 1, 2 y 3

Añadir imagen de fondo a contenido
Ahora vamos ir un poco más lejos y los atrevidos pueden añadir una "imagen de fondo" en lugar de color.
Sustituimos background: #FFF; por background:url('aquí la url de tu imagen de fondo');
.tabberlive .tabbertab {background: #FFF;padding:5px;border:1px solid #CCC;border-top:0;}
Quedaría algo así:
.tabberlive .tabbertab {background:url('aquí la url de tu imagen de fondo'); padding:5px;border:1px solid #CCC;border-top:0;}

Color del texto.
Si modificamos el color de las pestañas puede que el texto pase desapercibido o no resalte lo suficiente para ser legible así que cambiamos el color del texto en:
ul.tabbernav li a:link { color:#369;}
ul.tabbernav li a:visited { color: #369;}
ul.tabbernav li.tabberactive a{background-color: #FFF;color: #369;border-bottom: 1px solid #FFF;}
En esas tres líneas cambiaremos color:#369; por el color escogido.

Bordes.
Ahora vamos con los bordes, ya sabemos que en border podemos modificar el borde.
Donde solid es el tipo de borde y con px (pixels) determina el grosor del borde. Al mismo tiempo cambiaremos el color en #453135;
Borde superior de la caja:
ul.tabbernav{margin:0;padding: 8px 0;border-bottom: 1px solid #453135;}
Borde que rodea las pestañas:
ul.tabbernav li a{padding: 8px 0.5em;margin-right:2px;border: 1px solid #CCC;border-bottom: none;background: #EEE;text-decoration: none;}
Borde que rodea el contenido de las pestañas:
.tabberlive .tabbertab {background: #FFF;padding:5px;border:1px solid #CCC;border-top:0;}

Efecto Hover.
Las pestañas viene con efecto hover, dicho efecto nos permite definir su aspecto, nos daremos cuenta porque al pasar el puntero sobre las pestañas cambian de color.
Efecto hover de la pestaña 1 modificamos el color en:
ul.tabbernav li.tabberactive a:hover{color: #369;background: #FFF;border-bottom: 1px solid #FFF;}
Efecto hover de las pestañas 2 y 3
ul.tabbernav li a:hover{color:#00F; background: #CCC; border-color: #CCC;}