La fecha tipo calendario es una forma más de cambiar nuestra plantilla de una manera más personal.
La que he implementado en mi blog es sencilla sin fondo, aunque ponerle uno es también muy fácil.
1. En Configuración > Formato > Formato de hora cambiamos el formato de la siguiente forma:
3. Expandimos la plantilla y buscamos el siguiente código:
<div class="post hentry uncustomized-post-template">
y justo debajo añadimos:
<div class='date'>
<script type='text/javascript'>
var timestamp = "<data:post.timestamp/>";
if (timestamp != '') {
var timesplit = timestamp.split(",");
var date_yyyy = timesplit[2];
var timesplit = timesplit[1].split(" ");
var date_dd = timesplit[2];
var date_mmm = timesplit[1].substring(0, 3);
if (date_dd.substring(0,1) == "0") {
var date_dd=date_dd.substr(1,1);}
}
</script>
<div class='date_d'><script type='text/javascript'>document.write(date_dd);</script></div>
<div class='date_m'><script type='text/javascript'>document.write(date_mmm);</script></div>
<div class='date_y'><script type='text/javascript'>document.write(date_yyyy);</script></div>
</div>
4. Antes de ]]></b:skin> añadimos el css:
En url('la imagen de fondo') ponemos la dirección url de la imagen de fondo previamente alojada en nuestro alojamiento habitual.
.date { width: 60px;
height: 48px;
float: left;
background: url('la imagen de fondo') no-repeat;
}
.date_d {color: #919E7A;
font-family: Times New Roman;
letter-spacing: -2px;
display:block;
margin-top:0px;
text-align: center; font-size: 26px;
}
.date_m { display:block;
margin-top: -9px;
color: #CFCB96;
text-align:center;
font-size: 15px;
}
.date_y { display:block;
margin-top: -2px;
color: #FCAC4B;
text-align:center; font-size: 12px;
}
|
Fecha tipo calendario en blogger |
|
|
Resumen de entrada con imagen y "leer más" |
Se trata de mostrar el inicio de nuestras entradas con una imagen y el "leer más".
A diferencia del "leer más" habitual, en este caso se incorporará automáticamente a todas las entradas del blog con una imagen que será la primera que hayamos incorporado.
Así mismo al pulsar en "leer más" nos abrirá la entrada completa con los comentarios de la misma forma que ocurre al pulsar en el título de la entrada.
1. Expandimos la plantilla y localizamos <data:post.body/> , lo cambiamos por este código:
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'> Leer más...</a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
2. Ahora colocamos el script. Antes de </head> pegamos:
<script type='text/javascript'>
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script src='http://vietwebguide2.googlepages.com/summary-post-v20-test.js' type='text/javascript'/>
summary_img es el número de caracteres a mostrar en el resumen de la entrada, si hay imagen.
img_thumb_height es el alto de la imagen.
img_thumb_width es el ancho de la imagen.
El script está alojado originalmente en Google Pages. Como se sabe Google Pages dejará de funcionar, así que lo más recomendable sería descargar el script y subirlo a nuestro alojamiento habitual.
3. Si queremos adaptarlo al aspecto de nuestro blog añadimos las etiquetas que lo controlan (antes de ]]></b:skin>).
.rmlink{ /* propiedades generales */
...
}
.rmlink a{ /* Propiedades del enlace a simple vista */
...
}
.rmlink a:hover{ /*Propiedades del enlace al pasar el ratón sobre él */
...
}
Visto en Google Adsense for Vietnames
|
|
Expand/Collapse, Mostrar/Ocultar (2) |
Esta es otra forma de Ocultar/Mostrar, ya vimos otra forma en esta entrada.
Sólo se requiere poner en la entrada, widget, etc. el siguiente código:
<div class="pre-spoiler">
<span style="float: left; padding-top: 2px;"></span>
<input id="xs" value="Ver más" style="margin-left: 50px; padding: 0px;
width: 80px; font-size: 14px; font-family: trebuchet ms;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';this.innerText = ''; this.value = 'Ocultar'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.value = 'Ver más';}" type="button"> </div>
<div>
<div class="spoiler" style="display: none;">
COLOCAMOS AQUI LA PARTE A OCULTAR
</div>
</div>
</span>
Cambios en el código del botón:
margin-left: 50px; Distancia del botón al borde de la entrada desde la izquierda.
width: 80px; Ancho del botón. Si el texto es más largo hay que aumentar su tamaño aquí.
font-size: 14px; Tamaño de la letra del texto.
font-family: trebuchet ms; Tipo de letra del texto.
Añadir CSS
Para adaptar el botón al diseño de nuestro blog, añadiremos unas líneas en el código CSS de la plantilla antes de ]]>
#boton{
background: #fea502;
color: #000;
padding: 1px;
margin: 0px 0px 0px 3px;
border: 2px solid #6a8e20;
}
background: #fea502; Aquí cambiamos el color de fondo del botón.
color: #000; Aquí cambiamos el color del texto del botón.
border: 2px solid #6a8e20; Aquí cambiamos el grosor, tipo y color del borde del botón.
Fuentes: Trucos Key y El escaparate de Rosa.
|
|
Fecha en todas las entradas en Blogger |
Desde hace mucho tiempo buscaba la posibilidad de poner la fecha en todas las entradas de un mismo día y no lo encontraba. Jmiur nos enseña como hacerlo.
Buscamos esto en la plantilla (expandida):
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
Y lo sustituimos por:
<b:if cond='data:post.dateHeader'>
<script>
var ultimaFecha='<data:post.dateHeader/>';
</script>
<h2 class='date-header'><data:post.dateHeader/></h2>
<b:else/>
<h2 class='date-header'>
<script>document.write(ultimaFecha);</script>
</h2>
</b:if>
|
|
Scrolls o barras de desplazamiento |
Las scrollbars se usan para subir y bajar por una página web. También podemos usarlas en algunas partes de nuestro blog.
Scrollbars en todos los widgets del blog
Añadimos justo debajo de /* Sidebar Content :
.sidebar .widget{
height:200px;
overflow:auto;
}
También lo colocaremos debajo de /* Sidebar Content . Localizamos el nombre de nuestras sidebares, normalmente suele ser sidebar una de ellas, la otra será newsidebar, sidebarleft, sidebarrigth...Vamos a suponer que se llaman "sidebar1" y "sidebar2", si queremos colocar las scrollbars en "sidebar1" pegaremos esta pieza de código:
#sidebar1 .widget{
height:200px;
overflow:auto;
}
#sidebar2 .widget{
height:200px;
overflow:auto;
}
Localizamos en la plantilla el "id" o nombre del elemento al que queremos añadir las scrollbars.
En nuestra plantilla ->Edición HTML sin expandir los elementos veremos algo como esto:
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='LinkList1' locked='false' title='MIS AMIGOS' type='LinkList'/>
<b:widget id='Archivelist' locked='false' title='' type='ArchiveL'/>
<b:widget id='Label1' locked='false' title='Label' type='Label'/>
</b:section>
</div>
#LinkList1 ul{
height:200px;
overflow:auto;
}
Localizamos en el HTML de la plantilla: .post { y justo debajo colocar el código para mostrar las barras:
.post {
height:200px;
overflow:auto;
}
Insertamos esta pieza de código en el CSS de la plantilla, en la que especificaremos el alto (height) y el ancho (width) de la caja de scroll:
.scrollbox {
height:100px;
width:300px;
overflow:auto;
}
<div class="scrollbox">TEXTO O IMAGEN/ES QUE VAMOS A INCLUIR EN LA CAJA DE SCROLL</div>
|
|
Breadcrums o "Estás en: " |
Sirven para indicar el camino realizado desde Inicio a la entrada que estamos leyendo.
Buscamos esta línea de código:
<b:widget id="Blog1" locked="false" title="Blog Posts" type="Blog">
Unas líneas de código más abajo, encontraremos el main principal:
<b:includable id='main' var='top'>
Justo encima de esto añadimos este código:
<b:includable id='breadcrumbs' var='post'>
<!-- Breadcrumbs hack. By Hoctro 9/11/2006 http://hoctro.blogspot.com -->
<b:if cond='data:blog.pageType == "item"'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:post.labels'>
Estas en:
<a expr:href='data:blog.homepageUrl' rel='tag'>Inicio</a> >
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'>
<a expr:href='data:label.url' rel='tag'> <data:label.name/></a>
</b:if>
</b:loop>
<b:if cond='data:post.title'>
> <b><data:post.title/></b>
</b:if>
</b:if>
</span>
</p>
</b:if>
<!-- End of Breadcrums Hack -->
</b:includable>
Buscamos esta otra línea de código en la plantilla, estará unas líneas más abajo del código que acabamos de incluir:
<b:if cond='data:post.dateHeader'>
Pegamos esto, justo encima de la línea anterior:
<b:include data='post' name='breadcrumbs'/>
Finalmente añadimos el código necesario en el CSS, como suelo deciros, ante la duda lo colocamos justo antes de ]]></b:skin>:
.breadcrumbs {
border-bottom:1px dotted #000;
margin:2em 0 0.5em;
padding:0 0 0.5em;
}
Visto en: Hoctro´s
|
|
Entradas relacionadas |
Con este script mostramos las entradas relacionadas con la que estamos leyendo, como un nuevo elemento del pie de los post y se mostrará solamente en las páginas individuales, no en la principal.
1. Justo debajo de la etiqueta ]]></b:skin>agregamos el siguiente script. Hemos de colocarlo exactamente ahí ya que para que funcione correctamente, debe estar antes que cualquier otro script que hayamos colocado:
<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var cuantosPosts = 0;
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
var dirURL = document.URL;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
if (relatedUrls[r] != dirURL) {
document.write('<li><a href="' + relatedUrls[r] + '" title="Post relacionado: '
+ relatedTitles[r] + '">' + relatedTitles[r] + '</a></li>');
}
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
cuantosPosts++;
if (cuantosPosts == 3) {
break;
}
}
document.write('</ul>');
}
//]]>
</script>
En relatedTitles.length && i < 20), se ponen los posts que se verán según los caracteres que formen su título.
En if (cuantosPosts == 3) aumentamos la cantidad de posts a mostrar.
2. Buscamos ahora esta parte del código y añadimos lo que he marcado en azul:
<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 != "true"'>,</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name +
"?alt=json-in-script&callback=related_results_labels&max-results=10"'
type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
En max-results=10 ponemos la cantidad máxima de posts que se mostrarán, es conveniente poner un valor bajo para evitar que la página tarde mucho en cargarse.
3. Una vez hecho esto, buscamos esta línea de código:
<p class='post-footer-line post-footer-line-3'/>
Y colocaremos nuestro nuevo código justo a continuación:
<div class='post-footer-line post-footer-line-4'>
<b:if cond='data:blog.pageType == "item"'>
<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>
</b:if>
</div>
Visto en El Escaparate de Rosa.
|
|
Mostrar - ocultar |
Lo que vamos a hacer será reducir el código del menú desplegable de manera que clicando en una imagen o texto mostrará los botones que a simple vista estarán ocultos lo que ahorrará espacio y dará un aspecto más despejado a la sidebar.
Comenzaremos situándonos en Plantilla/Edición HTML y justo después de <head> añadiremos lo siguiente:
Comenzaremos situándonos en Plantilla/Edición HTML y justo después de <head> añadiremos lo siguiente:
<!-- desplegable -->
<style type="text/css">.texthidden {display:inline}.shown {display:block}</style><script type="text/javascript">document.write('<style>.texthidden {display:none} </style>');</script><script type="text/Javascript">function expandcollapse (postid) {whichpost = document.getElementById(postid);if (whichpost.className=="shown") {whichpost.className="texthidden";}else {whichpost.className="shown";}}</script>
<!--desplegable -->
Guardamos los cambios y nos situamos en Plantilla/Añadir un elemento de página/HTML/Javascript para añadir lo siguiente:
<a href="javascript:void(0);" onclick="expandcollapse('Botones')"><img src="url-de-la-imagen"/></a>
<ul id="Botones" class="texthidden">
<a href="aquilaurldelapagina"><img src="aquilaurldelaimagen"/></a>
<a href="aquilaurldelapagina"><img src="aquilaurldelaimagen"/></a>
<a href="aquilaurldelapagina"><img src="aquilaurldelaimagen"/></a>
<a href="aquilaurldelapagina"><img src="aquilaurldelaimagen"/></a>
</ul>
Si deseamos añadir este efecto de mostrar-ocultar más de una vez en nuestro blog deberemos cambiar el nombre "id" para que no se repita. En el código yo le puse "botones" podéis añadir cualquier otro, da igual el que sea.
- Modificaremos las partes del código para añadir la url de la página y las imágenes.
- No hay límite para añadir enlaces o botones, bastará con repetir el código que contiene la url de la página y el-los enlaces.
- Cerraremos siempre el código del desplegable con la etiqueta </ul> de lo contrario se mostrará la parte oculta.
Para ocultar un texto en vez de un botón esta es la solución:
Añadimos el Script de la plantilla después de <head>
Luego editamos la entrada como de costumbre, escribimos la entrada hasta llegar al lugar que vamos a ocultar y añadimos lo siguiente:
<a href="javascript:void(0);" onclick="expandcollapse('cualquiercosa')">Ver ejemplo</a>
<ul id="cualquiercosa" class="texthidden">
Texto oculto-Texto oculto-Texto oculto
</ul>
Donde "cualquiercosa" es un nombre cualquiera que no deberemos repetir si agregamos este código más de una vez en nuestro blog. Podemos añadirlo cuantas veces deseamos pero con un nombre diferente.
Visto en Gem@ Blog
|
|
Caja contenedora de código |
Para poner una caja donde poner los códigos.
Para hacerlo agregaremos estilos CSS donde personalizaremos la caja, es decir background, color, margin, padding etc. Lo podemos hacer agregando las propiedades en la plantilla, antes de ]]></b:skin> y el código a añadir es el siguiente:
/* Caja de código */
pre {
background:transparent url(aquí la url de una imagen) no-repeat 0 0; /* Imagen Superior, si deseas cambiarla modifica lo que se encuentra dentro de url(AQUI) */
padding-top:22px; /* Relleno - para ajustar Fondo */
}
pre code {
overflow:auto; /* Determina si es necesario agregar barras de Scroll */
background-color:#E9E9E9; /* Color de Fondo en Hex */
border:1px solid #999999; /* Color de Borde en Hex */
color:#990000; /* Color de letra en Hex */
display:block; /* No tocar */
padding:8px; /* Relleno del cuadro */
white-space:pre; /* No tocar */
text-align:left; /* Alineacion del Texto , left=izquierda, center= centrado, right=derecha */su
min-height:63px; /* Altura minima del Cuadro */
}
/* Cuando pase el Mouse sobre la caja ocurrirá lo siguiente: */
code:hover {
background-color:##ffffff; /* Color de Fondo en Hex */
border:1px solid ##666666;/* Color de Borde en Hex */le
}
/* FIN Caja de código */
Donde dice aquí la url de una imagen es el lugar donde podemos añadir una imagen preferiblemente de la misma medida de nuestra caja para que no sobresalga.
Si preferimos no añadir imagen bastará con suprimir el texto entre paréntesis. El resto de los valores los podemos adecuar al tamaño según la media que deseamos para nuestra caja así como el lugar donde la añadiremos y los colores para personalizarla.
Una vez guardados los cambios nos situamos en la plantilla de entrada:Configuración/Formato/Plantilla de entrada donde añadiremos <pre><code></code></pre> y guardamos los cambios nuevamente.
Con este último paso lo que conseguimos es que al editar una entrada nos aparezcan automáticamente las etiquetas <pre><code></code></pre> evitándonos tener que copiar y pegar cada vez que vamos a necesitarla. Si no la necesitamos no es problema, la suprimimos de la entrada y listo.
Cuando tengamos que mostrar un código añadiremos dicho código dentro de las etiquetas, es decir: <pre><code>aquí el código</code></pre>
El resultado será más o menos como la caja contenedora de código de esta entrada.
Visitas
