Mostrando entradas con la etiqueta Trucos. Mostrar todas las entradas
Mostrando entradas con la etiqueta Trucos. Mostrar todas las entradas

martes, 3 de abril de 2012

Abrir todos los enlaces en otra ventana (2)

Hemos visto cómo abrir todos los enlaces en otra ventana usando un script que deja a opción del lector si los enlaces se abren o no en una ventana nueva, y además usando otro método que es agregar en la plantilla el comando <base target='_blank'/> que hace que todos los enlaces de abran en otra pestaña.
Éste último parece ser la solución, sin embargo al agregarlo surge un problema, que si el lector hace click en las etiquetas, entradas antiguas, archivo del blog, etc. éstos también se abren en una ventana nueva, lo cual resulta bastante molesto.



Para solucionar esto Cartucho propone usar el atributo target='_parent' dentro de ciertas partes de la plantilla que harán que se force a que esos enlaces no se abran en otra ventana sino en la misma página. Este atributo hace lo contrario que el atributo target='_blank' es decir, indica que el enlace debe abrirse dentro de la misma página.


Empezamos primero poniendo debajo de la etiqueta <head> lo siguiente:
<base target='_blank'/>


Con esto ya se abren todos los enlaces en otra pestaña, ahora vamos a crear las "excepciones".



Entra a Diseño > Edición de HTML y marca la casilla Expandir plantillas de artilugios.

Busca los códigos que se mencionan y agrega lo que está en color rojo donde se indica.



Para el título de la entrada.

<b:if cond='data:post.url'>

<a expr:href='data:post.url' target='_parent'><data:post.title/></a>

<b:else/>

<data:post.title/>

</b:if>



Para el título del blog o la cabecera localiza los siguientes fragmentos, no están uno tras otro pero están cerca.

<data:title/>

<b:else/>

<a expr:href='data:blog.homepageUrl' target='_parent'><data:title/></a>

</b:if>

</b:includable>


<div id='header-inner'>

<a expr:href='data:blog.homepageUrl' style='display: block' target='_parent'>

<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>

</a>

</div>



Para el link de los comentarios debajo de las entradas.

<b:if cond='data:post.allowComments'>

<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' target='_parent'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>

</b:if>



Para las etiquetas de las entradas debajo del post.

<data:postLabelsLabel/>

<b:loop values='data:post.labels' var='label'>

<a expr:href='data:label.url' rel='tag' target='_parent'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>

</b:loop>

</b:if>



Para el enlace de enviar entrada por correo.

<!-- email post links -->

<b:if cond='data:post.emailPostUrl'>

<span class='item-action'>

<a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg' target='_parent'>



Para el leer más de Blogger.

<div class='jump-link'>

<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title' target='_parent'><data:post.jumpText/></a>

</div>



Para el gadget de Etiquetas.

<b:if cond='data:blog.url == data:label.url'>

<span expr:dir='data:blog.languageDirection'><data:label.name/></span>

<b:else/>

<a expr:dir='data:blog.languageDirection' expr:href='data:label.url' target='_parent'><data:label.name/></a>



Para el gadget de Archivos del blog localiza las siguientes tres partes, no están juntas pero sí dentro de la misma área.

<b:include data='i' name='toggle'/>

<a class='post-count-link' expr:href='data:i.url' target='_parent'><data:i.name/></a>


<li class='archivedate'>

<a expr:href='data:i.url' target='_parent'><data:i.name/></a> (<data:i.post-count/>)

</li>


<li><a expr:href='data:i.url' target='_parent'><data:i.title/></a></li>



Para los links de navegación (entradas antiguas, entradas más recientes)

<b:if cond='data:newerPageUrl'>

<span id='blog-pager-newer-link'>

<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle' target='_parent'><data:newerPageTitle/></a>

</span>

</b:if>



<b:if cond='data:olderPageUrl'>

<span id='blog-pager-older-link'>

<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle' target='_parent'><data:olderPageTitle/></a>

</span>

</b:if>



<a class='home-link' expr:href='data:blog.homepageUrl' target='_parent'><data:homeMsg/></a>

Para el gadget de páginas estáticas.

<li class='selected'><a expr:href='data:link.href' target='_parent'><data:link.title/></a></li>

<b:else/>

<li><a expr:href='data:link.href' target='_parent'><data:link.title/></a></li>



Esos son casi todos los enlaces dentro de Blogger que no queremos que se abran en otra ventana. Pero igual podemos aplicarlo para cualquier otro enlace, ya sea dentro de una entrada o un elemento HTML/Javascript, en cualquier caso sólo aplicamos el mismo atributo después de la URL del enlace:

<a href='URL del enlace' target='_parent'>Texto del enlace</a>


En caso de que quieras aplicar el mismo atributo a otro elemento dentro de la plantilla sólo revisa detenidamente el código y donde diga href= es el indicador de que hay un enlace, es al final de eso donde deberá ir el target='_parent'. Puedes guiarte en los ejemplos de esta misma entrada para poder identificar dónde y cómo poner el código.



Recuerda que debe haber un espacio en blanco antes de poner el atributo target='_parent' de lo contrario no funcionará.

lunes, 2 de abril de 2012

Coda Slider: Galería de imágenes con miniaturas

Al igual que el TriSlider desconozco si este sea el verdadero nombre de este slider, yo lo he llamado así porque el autor (CSS Tricks) ha dicho que usa el plugin Coda Slider, así que ha sido más sencillo nombrarlo de esta forma.


Pero el nombre es lo de menos, lo que gusta de este slider, es que muestra las miniaturas de las imágenes para poder navegar desde ellas, y el efecto deslizante con el que avanzan.




Para poner este slider de imágenes necesitaremos uso de jQuery, así como tres scripts más pero no te preocupes que no son tan pesados como parece.
Bien, primero descarga este archivo, descomprímelo, sube los archivos a un hosting y luego pega este código antes de </head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'/>

<script src='URL del archivo jquery-easing-1.3.pack.js'/>

<script src='URL del archivo jquery-easing-compatibility.1.2.pack.js'/>

<script src='URL del archivo coda-slider.1.1.1.pack.js'/>



<script type='text/javascript'>

//<![CDATA[

var theInt = null;

var $crosslink, $navthumb;

var curclicked = 0;



theInterval = function(cur){

clearInterval(theInt);



if( typeof cur != 'undefined' )

curclicked = cur;



$crosslink.removeClass("active-thumb");

$navthumb.eq(curclicked).parent().addClass("active-thumb");

$(".stripNav ul li a").eq(curclicked).trigger('click');

theInt = setInterval(function() {

$crosslink.removeClass("active-thumb");

$navthumb.eq(curclicked).parent().addClass("active-thumb");

$(".stripNav ul li a").eq(curclicked).trigger('click');

curclicked++;

if( 6 == curclicked )

curclicked = 0;



}, 3000);

};



// DOM Ready

$(function() {

$("#main-photo-slider").codaSlider();

$navthumb = $(".nav-thumb");

$crosslink = $(".cross-link");

$navthumb

.click(function() {

var $this = $(this);

theInterval($this.parent().attr('href').slice(1) - 1);

return false;

});



theInterval();

});

//]]>

</script>
Ahí agrega donde se indica las URLs de los archivos que subiste previamente.

Ahora antes de ]]></b:skin> pega los estilos:

/* Coda Slider

----------------------------------------------- */

#page-wrap {

width: 500px; /* Ancho del contenedor general */

min-height: 420px; /* Alto del contenedor general */

margin: 0 auto;

position: relative;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTuHSKpwRrvt0SoihzyPXdblmbFNfQPn5Up2CLPRc7HmtAlb7v02exVsBLABOi7wIZwaf1yBFCniw4RzluAq0puUgTftf2cltNIz3vIu5THqI9Vx6dCFb966qcBFLh_txs9PwdzZZOJug/s501/bg.png) top center no-repeat;

}

.slider-wrap {

width: 419px;

position: absolute;

top: 40px; left: 40px;

background:#DADADA;

}

.stripViewer .panelContainer

.panel ul { text-align: left; margin: 0 15px 0 30px; }

.stripViewer {

position: relative;

overflow: hidden;

width: 419px; /* Ancho del contenedor de las imágenes */

height: 285px; /* Alto del contenedor general */

margin-bottom:7px;

}

.stripViewer .panelContainer { position: relative; left: 0; top: 0; }

.stripViewer .panelContainer .panel { float: left; height: 100%; position: relative; width: 419px; }

.stripNavL, .stripNavR, .stripNav { display: none; }

.nav-thumb { border: 1px solid black; margin-right: 5px;}

#movers-row { margin: -39px 0 0 62px; }

#movers-row div { width: 20%; float: left; }

#movers-row div a.cross-link { float: right; }

.photo-meta-data {

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5FJC2wdmmGim0M2oqxayj-Jv-0ZJVNGNuxXEOgchIBPThZcCrzJt7TeqKat6RilefIN-LIU3xlKwFCzl5r-AgKHM-cWutVSfbBn83Tq7er73BN7Q4b3J4zkmpa1Hd2GgLDQ90b39_F08/s10/transpBlack.png);

padding: 10px;

height: 40px;

margin-top: -60px;

position: relative;

z-index: 100;

color: #FFF; /* Color del texto de las descripciones */

}

.photo-meta-data span { font-size: 13px; }

.cross-link { display: block; width: 62px; margin-top: -16px; position: relative; padding-top: 10px; z-index: 100; }

.active-thumb { background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwT2R0dH_PTEkdREKVrHcQH8zPx3jX-aM-U5WiImUo2_XzV-8WiaY6_k9KFGZkDHaEPoWu0WzDFXVgFwo28EHhOaQ5b9wgAmKJ2W9bKg1URykCfbMlL2AYu6RhMxvX1FPf_QaWKz8B5bQ/s14/icon-arrow.png) top center no-repeat; }
Después entra en Diseño | Elementos de la página | Añadir gadget | HTML/Javascript, si usas la nueva interfaz entra en Diseño | Añadir gadget | HTML/Javascript. Ahí pega la estructura del slider:

<div id='page-wrap'>

<div class='slider-wrap'>

<div class='csw' id='main-photo-slider'>

<div class='panelContainer'>



<div class='panel' title='Panel 1'>

<div class='wrapper'>

<a href='URL del enlace'><img height='285px' src='URL de la imagen UNO' width='419px'/></a>

<div class='photo-meta-data'>

Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>

<span>Nulla nisi lacus, pretium vitae mattis ac, mollis non neque.</span>



</div></div></div>





<div class='panel' title='Panel 2'>

<div class='wrapper'>

<a href='URL del enlace'><img height='285px' src='URL de la imagen DOS' width='419px'/></a>

<div class='photo-meta-data'>

Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>

<span>Nulla nisi lacus, pretium vitae mattis ac, mollis non neque.</span>



</div></div></div>





<div class='panel' title='Panel 3'>

<div class='wrapper'>

<a href='URL del enlace'><img height='285px' src='URL de la imagen TRES' width='419px'/></a>

<div class='photo-meta-data'>

Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>

<span>Nulla nisi lacus, pretium vitae mattis ac, mollis non neque.</span>



</div></div></div>





<div class='panel' title='Panel 4'>

<div class='wrapper'>

<a href='URL del enlace'><img height='285px' src='URL de la imagen CUATRO' width='419px'/></a>

<div class='photo-meta-data'>

Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>

<span>Nulla nisi lacus, pretium vitae mattis ac, mollis non neque.</span>



</div></div></div>





<div class='panel' title='Panel 5'>

<div class='wrapper'>

<a href='URL del enlace'><img height='285px' src='URL de la imagen CINCO' width='419px'/></a>

<div class='photo-meta-data'>

Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>

<span>Nulla nisi lacus, pretium vitae mattis ac, mollis non neque.</span>



</div></div></div>





<div class='panel' title='Panel 6'>

<div class='wrapper'>

<a href='URL del enlace'><img height='285px' src='URL de la imagen SEIS' width='419px'/></a>

<div class='photo-meta-data'>

Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>

<span>Nulla nisi lacus, pretium vitae mattis ac, mollis non neque.</span>



</div></div></div>





</div></div>

<!-- Estas son las MINIATURAS -->



<a class='cross-link active-thumb' href='#1'><img class='nav-thumb' height='40px' src='URL de la imagen UNO' width='60px'/></a>



<div id='movers-row'>



<div><a class='cross-link' href='#2'><img class='nav-thumb' height='40px' src='URL de la imagen DOS' width='60px'/></a></div>



<div><a class='cross-link' href='#3'><img class='nav-thumb' height='40px' src='URL de la imagen TRES' width='60px'/></a></div>



<div><a class='cross-link' href='#4'><img class='nav-thumb' height='40px' src='URL de la imagen CUATRO' width='60px'/></a></div>



<div><a class='cross-link' href='#5'><img class='nav-thumb' height='40px' src='URL de la imagen CINCO' width='60px'/></a></div>



<div><a class='cross-link' href='#6'><img class='nav-thumb' height='40px' src='URL de la imagen SEIS' width='60px'/></a></div>



</div>

</div></div>
Por último coloca las URLs de las imágenes donde se indica, así como la URL de los enlaces.
Puedes modificar la velocidad con la que cambian las imágenes en la parte marcada en color naranja, ahí pon el número en milisegundos, aunque la primera imagen siempre tardará un poco más en cambiar.
Al slider le caben seis imágenes, y aunque se podría ampliar, la recomendación es dejarlo como está, a menos claro que quieras trabajar mucho.


Como ves es un gadget llamativo, útil para mostrar contenido destacado o para una galería de imágenes, y arriba de las entradas quedará muy bien.

Galería de Videos con Coda Slider

La otra vez veíamos cómo poner una galería de imágenes con Coda Slider, y dado a las posibilidades que tiene el script pensé que podríamos hacer una galería de videos con este mismo slider sólo haciendo unas pequeñas modificaciones.


El resultado es una galería de videos con jQuery que permite pasar de un video a otro de forma deslizante haciendo click en las miniaturas que se encuentran debajo. A esta galería podemos añadirle hasta 7 videos con las medidas actuales que posee.




El procedimiento es similar al otro slider, primero descarga este archivo, descomprímelo, sube los archivos a un hosting y luego pega este código antes de </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'/>

<script src='URL del archivo jquery-easing-1.3.pack.js'/>

<script src='URL del archivo jquery-easing-compatibility.1.2.pack.js'/>

<script src='URL del archivo coda-slider.1.1.1.pack.js'/>



<script type='text/javascript'>

//<![CDATA[



$(function() {

$("#main-video-slider").codaSlider();

$navthumb = $(".nav-thumb");

$crosslink = $(".cross-link");

$navthumb

.click(function() {

var $this = $(this);

theInterval($this.parent().attr('href').slice(1) - 1);

return false;

});



theInterval();

});

//]]>

</script>
Ahí coloca donde se indica las URLs de los archivos que subiste previamente.

Luego antes de ]]></b:skin> coloca los estilos de la galería:

/* Coda Slider (Video)

----------------------------------------------- */

#page-wrap {

width: 490px; /* Ancho del contenedor general */

min-height: 354px; /* Alto del contenedor general */

margin: 0 auto;

position: relative;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgU1H9HhhXy7ubxYhlqZz4WXeLmChasHWyowmVtTnKTEtro4w8DFfWT5941Im2teteMKFN5PqYnTxFmmQfyVDO-WWhFOn0zYuzURSfXE0FNwgGCSMYvtqAwX7Vnatlh67ywc2ud-6_cC5A/s490/vid-bg.png) top center no-repeat;

}

.slider-wrap {

width: 450px;

position: absolute;

top: 20px;

left: 20px;

}

.stripViewer .panelContainer

.panel ul { text-align: left; margin: 0 15px 0 30px; }

.stripViewer {

position: relative;

overflow: hidden;

width: 450px; /* Ancho del contenedor de los videos */

height: 274px; /* Alto del contenedor de los videos */

margin-bottom:7px;

}

.stripViewer .panelContainer { position: relative; left: 0; top: 0; }

.stripViewer .panelContainer .panel { float: left; height: 100%; position: relative; width: 450px; }

.stripNavL, .stripNavR, .stripNav { display: none; }

.nav-thumb { border: 1px solid black; margin-right: 5px;}

#movers-row { margin: -39px 0 0 62px; }

#movers-row div { width: 16.6%; float: left; }

#movers-row div a.cross-link { float: right; }

.cross-link { display: block; width: 58px; margin-top: -10px; position: relative; padding-top: 3px; z-index: 100; }
El tercer paso es entrar en Diseño | Elementos de la página | Añadir gadget | HTML/Javascript (para la interfaz antigua), o Diseño | Añadir gadget | HTML/Javascript (para la interfaz nueva). Ahí pega este código:

<div id="page-wrap">

<div class="slider-wrap">

<div class="csw" id="main-video-slider">

<div class="panelContainer">



<div class="panel" title="Panel 1">

<div class="wrapper">

<iframe width="450" height="274" src="http://www.youtube.com/embed/ID_VIDEO_YOUTUBE_UNO" frameborder="0" allowfullscreen></iframe>



</div></div>





<div class="panel" title="Panel 2">

<div class="wrapper">

<iframe width="450" height="274" src="http://www.youtube.com/embed/ID_VIDEO_YOUTUBE_DOS" frameborder="0" allowfullscreen></iframe>



</div></div>





<div class="panel" title="Panel 3">

<div class="wrapper">

<iframe width="450" height="274" src="http://www.youtube.com/embed/ID_VIDEO_YOUTUBE_TRES" frameborder="0" allowfullscreen></iframe>



</div></div>





<div class="panel" title="Panel 4">

<div class="wrapper">

<iframe width="450" height="274" src="http://www.youtube.com/embed/ID_VIDEO_YOUTUBE_CUATRO" frameborder="0" allowfullscreen></iframe>



</div></div>





<div class="panel" title="Panel 5">

<div class="wrapper">

<iframe width="450" height="274" src="http://www.youtube.com/embed/ID_VIDEO_YOUTUBE_CINCO" frameborder="0" allowfullscreen></iframe>



</div></div>





<div class="panel" title="Panel 6">

<div class="wrapper">

<iframe width="450" height="274" src="http://www.youtube.com/embed/ID_VIDEO_YOUTUBE_SEIS" frameborder="0" allowfullscreen></iframe>



</div></div>





<div class="panel" title="Panel 7">

<div class="wrapper">

<iframe width="450" height="274" src="http://www.youtube.com/embed/ID_VIDEO_YOUTUBE_SIETE" frameborder="0" allowfullscreen></iframe>



</div></div>



</div></div>

<!-- Estas son las MINIATURAS de los videos -->



<a class='cross-link active-thumb' href='#1'><img class='nav-thumb' height='40px' src="http://img.youtube.com/vi/ID_VIDEO_YOUTUBE_UNO/1.jpg" width='58px'/></a>



<div id='movers-row'>



<div><a class='cross-link' href='#2'><img class='nav-thumb' height='40px' src="http://img.youtube.com/vi/ID_VIDEO_YOUTUBE_DOS/1.jpg" width='58px'/></a></div>



<div><a class='cross-link' href='#3'><img class='nav-thumb' height='40px' src="http://img.youtube.com/vi/ID_VIDEO_YOUTUBE_TRES/1.jpg" width='58px'/></a></div>



<div><a class='cross-link' href='#4'><img class='nav-thumb' height='40px' src="http://img.youtube.com/vi/ID_VIDEO_YOUTUBE_CUATRO/1.jpg" width='58px'/></a></div>



<div><a class='cross-link' href='#5'><img class='nav-thumb' height='40px' src="http://img.youtube.com/vi/ID_VIDEO_YOUTUBE_CINCO/1.jpg" width='58px'/></a></div>



<div><a class='cross-link' href='#6'><img class='nav-thumb' height='40px' src="http://img.youtube.com/vi/ID_VIDEO_YOUTUBE_SEIS/1.jpg" width='58px'/></a></div>



<div><a class='cross-link' href='#7'><img class='nav-thumb' height='40px' src="http://img.youtube.com/vi/ID_VIDEO_YOUTUBE_SIETE/1.jpg" width='58px'/></a></div>



</div>

</div></div>
Coloca donde se indica la ID del video de YouTube. La ID del video es toda esa serie de caracteres que aparecen al final de la URL del video, por ejemplo:


URL video



Como puedes ver, la ID del video debes colocarla dos veces, una es para el video, y otra para la imagen en miniatura del video.



También puedes poner videos de otros servicios, sólo debes eliminar un código como este:

<iframe width="450" height="274" src="http://www.youtube.com/embed/ID_VIDEO_YOUTUBE" frameborder="0" allowfullscreen></iframe>


Y en su lugar deberás poner el código de tu video, que deberá medir 450px de ancho y 274px de alto. También deberás cambiar la URL de la imagen de la miniatura:

<img class='nav-thumb' height='40px' src="URL de la imagen" width='58px'/>


Es una galería de videos sencilla pero que puede verse muy bien arriba de las entradas del blog, y si la usamos sólo para videos de YouTube entonces será menos complicado.

Coda Slider: Galería de imágenes con miniaturas

Al igual que el TriSlider desconozco si este sea el verdadero nombre de este slider, yo lo he llamado así porque el autor (CSS Tricks) ha dicho que usa el plugin Coda Slider, así que ha sido más sencillo nombrarlo de esta forma.


Pero el nombre es lo de menos, lo que gusta de este slider, es que muestra las miniaturas de las imágenes para poder navegar desde ellas, y el efecto deslizante con el que avanzan.




Para poner este slider de imágenes necesitaremos uso de jQuery, así como tres scripts más pero no te preocupes que no son tan pesados como parece.
Bien, primero descarga este archivo, descomprímelo, sube los archivos a un hosting y luego pega este código antes de </head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'/>

<script src='URL del archivo jquery-easing-1.3.pack.js'/>

<script src='URL del archivo jquery-easing-compatibility.1.2.pack.js'/>

<script src='URL del archivo coda-slider.1.1.1.pack.js'/>



<script type='text/javascript'>

//<![CDATA[

var theInt = null;

var $crosslink, $navthumb;

var curclicked = 0;



theInterval = function(cur){

clearInterval(theInt);



if( typeof cur != 'undefined' )

curclicked = cur;



$crosslink.removeClass("active-thumb");

$navthumb.eq(curclicked).parent().addClass("active-thumb");

$(".stripNav ul li a").eq(curclicked).trigger('click');

theInt = setInterval(function() {

$crosslink.removeClass("active-thumb");

$navthumb.eq(curclicked).parent().addClass("active-thumb");

$(".stripNav ul li a").eq(curclicked).trigger('click');

curclicked++;

if( 6 == curclicked )

curclicked = 0;



}, 3000);

};



// DOM Ready

$(function() {

$("#main-photo-slider").codaSlider();

$navthumb = $(".nav-thumb");

$crosslink = $(".cross-link");

$navthumb

.click(function() {

var $this = $(this);

theInterval($this.parent().attr('href').slice(1) - 1);

return false;

});



theInterval();

});

//]]>

</script>
Ahí agrega donde se indica las URLs de los archivos que subiste previamente.

Ahora antes de ]]></b:skin> pega los estilos:

/* Coda Slider

----------------------------------------------- */

#page-wrap {

width: 500px; /* Ancho del contenedor general */

min-height: 420px; /* Alto del contenedor general */

margin: 0 auto;

position: relative;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTuHSKpwRrvt0SoihzyPXdblmbFNfQPn5Up2CLPRc7HmtAlb7v02exVsBLABOi7wIZwaf1yBFCniw4RzluAq0puUgTftf2cltNIz3vIu5THqI9Vx6dCFb966qcBFLh_txs9PwdzZZOJug/s501/bg.png) top center no-repeat;

}

.slider-wrap {

width: 419px;

position: absolute;

top: 40px; left: 40px;

background:#DADADA;

}

.stripViewer .panelContainer

.panel ul { text-align: left; margin: 0 15px 0 30px; }

.stripViewer {

position: relative;

overflow: hidden;

width: 419px; /* Ancho del contenedor de las imágenes */

height: 285px; /* Alto del contenedor general */

margin-bottom:7px;

}

.stripViewer .panelContainer { position: relative; left: 0; top: 0; }

.stripViewer .panelContainer .panel { float: left; height: 100%; position: relative; width: 419px; }

.stripNavL, .stripNavR, .stripNav { display: none; }

.nav-thumb { border: 1px solid black; margin-right: 5px;}

#movers-row { margin: -39px 0 0 62px; }

#movers-row div { width: 20%; float: left; }

#movers-row div a.cross-link { float: right; }

.photo-meta-data {

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5FJC2wdmmGim0M2oqxayj-Jv-0ZJVNGNuxXEOgchIBPThZcCrzJt7TeqKat6RilefIN-LIU3xlKwFCzl5r-AgKHM-cWutVSfbBn83Tq7er73BN7Q4b3J4zkmpa1Hd2GgLDQ90b39_F08/s10/transpBlack.png);

padding: 10px;

height: 40px;

margin-top: -60px;

position: relative;

z-index: 100;

color: #FFF; /* Color del texto de las descripciones */

}

.photo-meta-data span { font-size: 13px; }

.cross-link { display: block; width: 62px; margin-top: -16px; position: relative; padding-top: 10px; z-index: 100; }

.active-thumb { background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwT2R0dH_PTEkdREKVrHcQH8zPx3jX-aM-U5WiImUo2_XzV-8WiaY6_k9KFGZkDHaEPoWu0WzDFXVgFwo28EHhOaQ5b9wgAmKJ2W9bKg1URykCfbMlL2AYu6RhMxvX1FPf_QaWKz8B5bQ/s14/icon-arrow.png) top center no-repeat; }
Después entra en Diseño | Elementos de la página | Añadir gadget | HTML/Javascript, si usas la nueva interfaz entra en Diseño | Añadir gadget | HTML/Javascript. Ahí pega la estructura del slider:

<div id='page-wrap'>

<div class='slider-wrap'>

<div class='csw' id='main-photo-slider'>

<div class='panelContainer'>



<div class='panel' title='Panel 1'>

<div class='wrapper'>

<a href='URL del enlace'><img height='285px' src='URL de la imagen UNO' width='419px'/></a>

<div class='photo-meta-data'>

Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>

<span>Nulla nisi lacus, pretium vitae mattis ac, mollis non neque.</span>



</div></div></div>





<div class='panel' title='Panel 2'>

<div class='wrapper'>

<a href='URL del enlace'><img height='285px' src='URL de la imagen DOS' width='419px'/></a>

<div class='photo-meta-data'>

Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>

<span>Nulla nisi lacus, pretium vitae mattis ac, mollis non neque.</span>



</div></div></div>





<div class='panel' title='Panel 3'>

<div class='wrapper'>

<a href='URL del enlace'><img height='285px' src='URL de la imagen TRES' width='419px'/></a>

<div class='photo-meta-data'>

Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>

<span>Nulla nisi lacus, pretium vitae mattis ac, mollis non neque.</span>



</div></div></div>





<div class='panel' title='Panel 4'>

<div class='wrapper'>

<a href='URL del enlace'><img height='285px' src='URL de la imagen CUATRO' width='419px'/></a>

<div class='photo-meta-data'>

Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>

<span>Nulla nisi lacus, pretium vitae mattis ac, mollis non neque.</span>



</div></div></div>





<div class='panel' title='Panel 5'>

<div class='wrapper'>

<a href='URL del enlace'><img height='285px' src='URL de la imagen CINCO' width='419px'/></a>

<div class='photo-meta-data'>

Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>

<span>Nulla nisi lacus, pretium vitae mattis ac, mollis non neque.</span>



</div></div></div>





<div class='panel' title='Panel 6'>

<div class='wrapper'>

<a href='URL del enlace'><img height='285px' src='URL de la imagen SEIS' width='419px'/></a>

<div class='photo-meta-data'>

Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>

<span>Nulla nisi lacus, pretium vitae mattis ac, mollis non neque.</span>



</div></div></div>





</div></div>

<!-- Estas son las MINIATURAS -->



<a class='cross-link active-thumb' href='#1'><img class='nav-thumb' height='40px' src='URL de la imagen UNO' width='60px'/></a>



<div id='movers-row'>



<div><a class='cross-link' href='#2'><img class='nav-thumb' height='40px' src='URL de la imagen DOS' width='60px'/></a></div>



<div><a class='cross-link' href='#3'><img class='nav-thumb' height='40px' src='URL de la imagen TRES' width='60px'/></a></div>



<div><a class='cross-link' href='#4'><img class='nav-thumb' height='40px' src='URL de la imagen CUATRO' width='60px'/></a></div>



<div><a class='cross-link' href='#5'><img class='nav-thumb' height='40px' src='URL de la imagen CINCO' width='60px'/></a></div>



<div><a class='cross-link' href='#6'><img class='nav-thumb' height='40px' src='URL de la imagen SEIS' width='60px'/></a></div>



</div>

</div></div>
Por último coloca las URLs de las imágenes donde se indica, así como la URL de los enlaces.
Puedes modificar la velocidad con la que cambian las imágenes en la parte marcada en color naranja, ahí pon el número en milisegundos, aunque la primera imagen siempre tardará un poco más en cambiar.
Al slider le caben seis imágenes, y aunque se podría ampliar, la recomendación es dejarlo como está, a menos claro que quieras trabajar mucho.


Como ves es un gadget llamativo, útil para mostrar contenido destacado o para una galería de imágenes, y arriba de las entradas quedará muy bien.

Hacer que un gadget sólo lo pueda ver el administrador del blog

Pues el título de la entrada lo dice todo. Hay gadgets que a veces queremos verlos sólo nosotros y no los lectores del blog, quizá una Encuesta que ya finalizó pero que queremos conservar, un contador de visitas, o cualquier gadget que mientras lo personalizamos no queremos que nadie más lo vea hasta que esté listo el resultado final.


El procedimiento es sencillo, sólo tenemos que agregar dos líneas a nuestro gadget que queremos ocultar.

Lo primero es entrar a la Edición HTML de la plantilla, marcar la casilla Expandir plantillas de artilugios y buscar el código del gadget que queremos ocultar. Será más fácil usando las teclas CTRL+F y localizando el nombre del gadget.
Por ejemplo, en un gadget HTML/Javascript verás un código como este:

<b:widget id='HTML1' locked='false' title='' type='HTML'>

<b:includable id='main'>

<span class='item-control blog-admin'>

<!-- only display title if it's non-empty -->

<b:if cond='data:title != &quot;&quot;'>

<h2 class='title'><data:title/></h2>

</b:if>

<div class='widget-content'>

<data:content/>

</div>



<b:include name='quickedit'/>

</span>

</b:includable>

</b:widget>
Lo único que tienes que hacer es agregar las partes en color rojo y listo. Si cierras la sesión y entras a tu blog no podrás ver el gadget que ocultaste, pero si inicias sesión verás que sí está visible para ti.


No todos los gadgets tienen la misma estructura como la del ejemplo, pero será fácil guiarte, sólo debes colocar el primer código rojo justo después de <b:includable id='main'>

Y el segundo código rojo exactamente antes de </b:includable>



Y con eso el gadget estará oculto para los lectores menos para ti.

Personalizar el gadget de LinkWithin



LinkWithin es un gadget que muestra las entradas relacionadas con una imagen en miniatura, y aunque no es un gadget nada nuevo, muchos no se animan a usarlo por su falta de personalización.
Así que en esta entrada vamos a ver cómo poner LinkWithin en el blog, y cómo personalizarlo.


Lo que le haremos al gadget será lo siguiente:


  • Cambiar la ubicación del gadget.
  • Agregarle un color de fondo.
  • Cambiar el texto "Quizás también le interese" por algún otro.
  • Pasarlo a castellano en caso de que esté en inglés.
  • Eliminar el enlace de LinkWithin.
  • Eliminar el borde que separa las entradas.
  • Poner las imágenes redondeadas.
  • Cambiar el color de fondo al pasar el cursor.
  • Cambiar el formato de los títulos de las entradas.




Empecemos. Primero que nada hay que instalar el gadget, para ello entra a la página de LinkWithin, ahí llena los datos que te pide.




Aunque nos ofrece la opción de seleccionar Blogger como plataforma, seleccionaremos Other, para poner el código directo en la plantilla y así poder manipularlo. En el número de entradas (stories) selecciona un número de acuerdo al ancho de tus entradas, es decir, si el ancho de tus entradas es muy reducido entonces elige un número pequeño.


Al dar click en Get widget nos dará el código que debemos usar, es un código como este:

<script>

var linkwithin_site_id = XXXXX;

</script>

<script src="http://www.linkwithin.com/widget.js"></script>

<a href="http://www.linkwithin.com/"><img src="http://www.linkwithin.com/pixel.png" alt="Related Posts Plugin for WordPress, Blogger..." style="border: 0" /></a>


Ese es el código básico, ahora entra a la Edición HTML de la plantilla, marca la casilla Expandir plantillas de artilugios, y pega el código debajo de:

<div class='post-footer'>


Al hacerlo eso ya tendrás el gadget de LinkWithin en tu blog, y el resultado será este.





Ahora será momento de comenzar a personalizarlo.
Si quieres que se vea sólo en las entradas individuales, encierra el código con una condicional.



Te darás cuenta que pongas donde pongas el código éste siempre se acomodará justo al terminar las entradas.
En las FAQ de la página de LinkWithin nos explican cómo solucionarlo, sólo hay que añadir, arriba del código que hemos pegado, esta línea:
<div class='linkwithin_div'/>
Eso hará que el gadget se muestre justo donde has colocado el código.

Aun cuando no quieras cambiar el gadget de lugar, agrega esa línea para poder personalizarlo como mencionaremos más adelante.



Algunas veces el gadget viene en inglés, o bien, el texto "Quizás también le interese" no es el que más nos gusta. Así que podemos cambiar ese texto por el que queramos, para ello agregaremos a nuestro código la parte que está en color rojo.
<div class='linkwithin_div'/>

<script>

var linkwithin_site_id = XXXX;

</script>

<script>linkwithin_text=' Entradas relacionadas: '</script>

<script src='http://www.linkwithin.com/widget.js'/>
Ahí podemos cambiar el texto por algún otro, en este caso hará que diga "Entradas relacionadas" en lugar de "Quizás también le interese".


El resto de la personalización la haremos con CSS, así que antes de ]]></b:skin> pegaremos lo siguiente:

/* LinkWithin personalizado

----------------------------------------------- */

.linkwithin_div {

background: #EFF8FB; /* Color de fondo */

padding: 0 10px;

}

.linkwithin_text {

font-size:18px; /* Tamaño del título del gadget */

color:#084B8A; /* Color del título del gadget */

}

a#linkwithin_logolink_0, a#linkwithin_logolink_1, a#linkwithin_logolink_2, a#linkwithin_logolink_3, a#linkwithin_logolink_4, a#linkwithin_logolink_5, a#linkwithin_logolink_6, a#linkwithin_logolink_7, a#linkwithin_logolink_8, a#linkwithin_logolink_9, a#linkwithin_logolink_10, a#linkwithin_logolink_11, a#linkwithin_logolink_12, a#linkwithin_logolink_13, a#linkwithin_logolink_14, a#linkwithin_logolink_15, a#linkwithin_logolink_16, a#linkwithin_logolink_17, a#linkwithin_logolink_18, a#linkwithin_logolink_19, a#linkwithin_logolink_20 {

display:none; /* Con esto quitamos el enlace */

}



.linkwithin_posts {

width: 500px !important; /* Ancho del gadget */

}



.linkwithin_posts a {

border: 0 !important;

padding-right: 10px !important;

}

.linkwithin_posts a:hover {

background: #819FF7 !important; /* Color de fondo al pasar el cursor */

-webkit-border-radius: 10px !important;

-moz-border-radius: 10px;

border-radius: 10px;

}

.linkwithin_img_0 div, div.linkwithin_img_0,

.linkwithin_img_1 div, div.linkwithin_img_1,

.linkwithin_img_2 div, div.linkwithin_img_2,

.linkwithin_img_3 div, div.linkwithin_img_3,

.linkwithin_img_4 div, div.linkwithin_img_4,

.linkwithin_img_5 div, div.linkwithin_img_5,

.linkwithin_img_6 div, div.linkwithin_img_6,

.linkwithin_img_7 div, div.linkwithin_img_7,

.linkwithin_img_8 div, div.linkwithin_img_8,

.linkwithin_img_9 div, div.linkwithin_img_9,

.linkwithin_img_10 div, div.linkwithin_img_10,

.linkwithin_img_11 div, div.linkwithin_img_11,

.linkwithin_img_12 div, div.linkwithin_img_12,

.linkwithin_img_13 div, div.linkwithin_img_13,

.linkwithin_img_14 div, div.linkwithin_img_14,

.linkwithin_img_15 div, div.linkwithin_img_15,

.linkwithin_img_16 div, div.linkwithin_img_16,

.linkwithin_img_17 div, div.linkwithin_img_17,

.linkwithin_img_18 div, div.linkwithin_img_18,

.linkwithin_img_19 div, div.linkwithin_img_19,

.linkwithin_img_20 div, div.linkwithin_img_20 { /* Bordes redondeados */

-webkit-border-radius: 10px !important;

-moz-border-radius: 10px;

border-radius: 10px;

border:0 !important;

}

.linkwithin_title {

color: #0431B4 !important; /* Color de los títulos de las entradas */

font-family: Verdana !important; /* Tipo de fuente de los títulos de las entradas */

font-size: 13px !important; /* Tamaño de los títulos de las entradas */

line-height: 14px !important;

text-align:center;

text-decoration: none;

}



.linkwithin_title:hover {

color: #000 !important; /* Color de los títulos al pasar el cursor */

font-weight: bold !important;

}
En color verde puedes ver a qué corresponde cada área que puedes personalizar, puedes agregar más estilos si lo deseas hasta obtener el diseño visual que más te guste.

El resultado será como este.





Como puedes ver, el resultado puede ser muy diferente al gadget original, y claro, puede adaptarse al diseño de cada plantilla y a los gustos personales de cada quien. De esta forma podrás ofrecerle a tus lectores entradas relacionadas al tema que están leyendo, y permanecerán más tiempo en tu blog.

lunes, 26 de marzo de 2012

Spoiler para ocultar y mostrar contenido en una entrada

Algunas veces tenemos mucho contenido que agregar en una entrada pero no queremos mostrarlo todo de un solo golpe, ya sea porque no queremos que la entrada se haga demasiado larga o porque queremos que el contenido se vaya descubriendo poco a poco.

Y sí, ya antes habíamos visto cómo expandir y contraer partes de una entrada usando Scriptaculous y que le da un efecto deslizante, pero como a muchos no les gusta usar Scriptaculous vamos a ver otra forma de hacerlo usando un simple javascript que aunque no tendrá efecto alguno cumple su función muy bien, que será la de mostrar y ocultar contenido.


Puedes ver un ejemplo haciendo click en el siguiente botón.












Podemos incluir dentro cualquier cosa que se nos ocurra, ya sea una tabla, una imagen, un reproductor de audio, un video, etc.














Para usarlo en tu blog sólo basta con poner este código en una entrada cada vez que lo quieras usar:

<div class="divspoiler">

<input type="button" value="Mostrar" onclick="if (this.parentNode.nextSibling.childNodes[0].style.display != '') { this.parentNode.nextSibling.childNodes[0].style.display = ''; this.value = 'Ocultar'; } else { this.parentNode.nextSibling.childNodes[0].style.display = 'none'; this.value = 'Mostrar'; }" />

</div><div><div class="spoiler" style="display: none;">

Aquí el contenido que queremos ocultar

</div></div>


Ahí sólo tienes que agregar donde se indica el contenido que quieres ocultar. Si el botón no te gusta mucho puedes leer esta entrada para saber cómo personalizar los botones.

O bien, puedes usar un enlace de texto en lugar de un botón










En ese caso el código a usar es este:

<div class="divspoiler">

<a href="javascript:void(0);" onclick="if (this.parentNode.nextSibling.childNodes[0].style.display != '') { this.parentNode.nextSibling.childNodes[0].style.display = ''; } else { this.parentNode.nextSibling.childNodes[0].style.display = 'none';}" >Mostrar / Ocultar &#9660;&#9650;</a>

</div><div><div class="spoiler" style="display: none;">

Aquí el contenido que queremos ocultar

</div></div>


O si lo prefieres también puedes usar una imagen.










Ahí el código sería este:

<div class="divspoiler">

<img src="URL de la imagen" onclick="if (this.parentNode.nextSibling.childNodes[0].style.display != '') { this.parentNode.nextSibling.childNodes[0].style.display = ''; } else { this.parentNode.nextSibling.childNodes[0].style.display = 'none';}" />

</div><div><div class="spoiler" style="display: none;">

Aquí el contenido que queremos ocultar

</div></div>


Bastante práctico y fácil de usar ¿no? Puedes agregar varios en la misma entrada sin necesidad de cambiar alguna ID ni nada de eso. Sólo procura no cambiar a la pestaña Redactar una vez que lo pongas y no modifiques los espacios del código para que funcione correctamente.

Cambiar el color a los botones INPUT

Aunque esto la mayoría lo sabe hacer, aun me siguen preguntando seguido cómo hacer para cambiar el color de los botones de algunos gadgets, por ejemplo el botón de Buscar, el de Suscribir, etc.
El código común de un botón es como este:

<input value="Buscar" name="button" type="submit"/>



Lo único que hay que hacer es agregarle un estilo para que tenga un color de fondo:

<input style="background-color: #FF9900" value="Buscar" name="button" type="submit"/>


También puedes modificar el color de la letra, para ello agregamos el estilo "color":

<input style="color: #FF0000" value="Buscar" name="button" type="submit"/>


O bien, puedes cambiar ambos:

<input style="color: #003366; background-color: #99CCFF" value="Buscar" name="button" type="submit"/>


O si lo prefieres, puedes usar una imagen de fondo:

<input style="color: #ffffff; background: url('URL de la imagen')" value="Buscar" name="button" type="submit">


Puedes también ponerle un borde al botón del grueso y el color que quieras:

<input style="border: #000 1px solid; background-color: #FF99FF" value="Buscar" name="button" type="submit">




Como ves, puedes hacer muchas variaciones para decorar tus botones, sólo es cuestión de que eches a andar tu creatividad y dejarás de tener los típicos botones grises.
Recuerda que donde dice value="Buscar" es el texto que aparece en el botón, también puedes jugar un poco con él y cambiar ese texto por otro.

Expandir y contraer partes de una entrada

Este truco permite esconder partes de una entrada y con la posibilidad de mostrarlos cuando el lector quiera. Se puede esconder texto, imágenes o video y sirve para ahorrar espacio cuando tenemos un elemento muy largo dentro de la entrada.
Este es un ejemplo con una imagen:

[+/-] Ver / Ocultar

Lo mismo se puede hacer para un texto:

[+/-] Ver / Ocultar

O incluso con un video:

[+/-] Ver / Ocultar

Primero vamos a Diseño > Edición de HTML y antes de </head> pegamos lo siguiente:
<!-- Prototype y Scriptaculous-->
<script src='http://www.google.com/jsapi'/>
<script>
google.load(&quot;prototype&quot;,&quot;1.6.0.3&quot;);
google.load(&quot;scriptaculous&quot;, &quot;1.8.2&quot;);
</script>
<!-- Prototype y Scriptaculous-->


Antes de pegar lo anterior verifica si tu plantilla ya lo tiene, de ser así omite ese paso.
Lo siguiente será usar el código que es el que ocultará las partes dentro de un post. Así que cuando quieras ocultar algún elemento de la entrada deberás usar este código:
<a href='#' onclick='Effect.toggle("expandir1","slide"); return false'>[+/-] Ver / Ocultar</a><div id='expandir1' style='display: none;'>Aquí va el contenido que se ocultará</div>

Toma en cuenta que donde dice expandir1 deberás cambiarlo cada vez que quieras usar este efecto, puedes modificarlos por expandir2, expandir3, etc. Lo que está en color rojo es el contenido que estará oculto, puede ser texto, imágenes, tablas, videos, etc. cualquier elemento que tengas dentro de un post podrás ocultarlo.

Leer más con imágenes en miniatura mejorado

Anteriormente vimos cómo tener el Leer más con imágenes en miniatura que hace que todas las entradas tengan un resumen de forma automática, sin tener que estar ingresando códigos extra cada vez que redactamos una entrada.
Si bien ese script funciona muy bien muchos han sido quienes han preguntado si es posible mostrar una imagen aun cuando la entrada no la tenga; y si había alguna forma para que las imágenes en miniatura no quedaran fuera de proporción, pues usualmente no subimos imágenes perfectamente cuadradas sino más bien rectangulares y al mostrarse en miniatura se deformaban.


Bien, después de un par de horas de pelearme con la computadora pude hacerle tres mejoras al script de modo que si una entrada no tiene una imagen podrá mostrar una imagen predeterminada para ilustrar el resumen.
Luego, las imágenes en miniatura ya no perderán su proporción, por lo que una imagen rectangular podrá verse más pequeña pero igualmente rectangular.
Y además, las imágenes en miniatura tendrán un enlace a la entrada, así que podrás acceder al post completo desde el link de Leer más, o desde el título de la entrada, o bien, haciendo click en la imagen en miniatura.






El procedimiento es el mismo, primero entramos en Diseño | Edición de HTML, marca la casilla Expandir plantillas de artilugios, y busca esta línea:
<data:post.body/>
Elimínala y en su lugar agrega esto:

<b:if cond='data:blog.pageType != &quot;item&quot;'>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

<div expr:id='&quot;summary&quot; + data:post.id' style='font-size:13px; text-align:justify;'><data:post.body/></div>

<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;,&quot;<data:post.url/>&quot;);</script>

<span class='rmlink' style='float:right'><a expr:href='data:post.url'>Leer más...</a></span>

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

<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>
Ahora antes de </head> pega lo siguiente:

<script type='text/javascript'>

summary_txt = 410;

img_thumb_width = 120;

</script>



<script type='text/javascript'>

//<![CDATA[

// Script original de Anhvo, modificado por ciudadblogger.com

function removeHtmlTag(strx,chop){

if(strx.indexOf("<")!=-1)

{

var s = strx.split("<");

for(var i=0;i<s.length;i++){

if(s[i].indexOf(">")!=-1){

s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);

}

}

strx = s.join("");

}

chop = (chop < strx.length-1) ? chop : strx.length-2;

while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;

strx = strx.substring(0,chop-1);

return strx+'...';

}

function createSummaryAndThumb(pID, pURL){

var div = document.getElementById(pID);

var imgtag = "";

var img = div.getElementsByTagName("img");

if(img.length<=0) {

imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><a href="'+ pURL +'"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyyPuhw5u0K-rAC0DdPV6R08aX2m9iAKfH-vN74cNfNQQcKy7eQ5dsjYDDeAePXq2S2eZKfDxlK1vUaTgpfP_7e6lCGYSTrWGEdnYlg2YduW8uux1fyhpP4Q7pHq1girQD-aITmOJZskI/" width="'+img_thumb_width+'px" /></a></span>';

summ = summary_txt;

}

if(img.length>=1) {

imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><a href="'+ pURL +'"><img src="'+img[0].src+'" width="'+img_thumb_width+'px"/></a></span>';

summ = summary_txt;

}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';

div.innerHTML = summary;

}

//]]>

</script>
Guarda los cambios y listo. Ahora veamos las modificaciones que se le puede hacer para personalizarlo.



En el primer código que hemos agregado, he puesto en negrita los estilos para el resumen, ahí se puede cambiar el tamaño de la letra, la alineación del texto, y se le pueden agregar más estilos como el color de la letra, color de fondo, etc.
En donde dice Leer más puedes cambiarlo por otro texto o bien, por una imagen, si ese es el caso entonces elimina ese texto y en su lugar agrega esto cambiando la URL de la imagen donde se indica:
<img src="URL de la imagen" border="0" />


En el segundo código que hemos agregado veremos al inicio dos variables:

summary_txt = 410; indica el número de caracteres que tendrá el resumen.

img_thumb_width = 120; es el ancho que tendrán las imágenes en miniatura.



Un poco más abajo está una URL en color azul, esa es la imagen que se mostrará en el resumen cuando la entrada no tenga una imagen, y será esta:





Esa imagen la puedes cambiar por cualquier otra que elijas, sólo cambia la URL en color azul por la de la imagen que quieres.
Como has podido notar los códigos son bastantes similares al método anterior sólo que con unas pequeñas modificaciones que aunque parecen insignificantes mejoran por mucho la funcionalidad del script.