Infolinks In Text Ads
Leer más automático es un truco muy útil para los blogs con entradas largas que decean reducirlas (Solo en la pagina principal), aquí mostrare como hacerlo con una imagen.
<data:post.body/>Sustituyelo por este otro código:
<b:if cond='data:blog.pageType != "item"'>Sustituye lo que esta en azul por la dirección donde se encuentra alojada la imagen.
<b:if cond='data:blog.pageType != "static_page"'>
<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'><img src="URL DE LA IMAGEN" /></a></span>
</b:if></b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>
Ahora pega antes de </head> lo siguiente:
<script type='text/javascript'>
summary_noimg = 400;
summary_img = 300;
img_thumb_height = 125;
img_thumb_width = 125;
</script>
<script type='text/javascript'>
//<![CDATA[
/******************************************
(C)2008 by Anhvo
visit http://en.vietwebguide.com to get more cool hacks
********************************************/
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){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
Configuracion:
Se puede cambiar el tamaño de las imagenes y el numero de caracteres en el resumen de las entradas, al inicio del código anterior y marcado en color rojo, explicacion:
summary_noimg = 400; Número de caracteres cuando la entrada no tiene una imagen.Guarda los cambios y listo, tus entradas tendrán "Leer más automotico con imagen en miniatura".
summary_img = 300; Número de caracteres cuando la entrada tiene una imagen.
img_thumb_height = 125; Altura de la imagen en miniatura.
img_thumb_width = 125; Ancho de la imagen en miniatura.
Te dejo un enlace con algunas imagenes con la URL, listas para empezar a utilizarlas, recuerda que se modifica el código marcado en azul (El que esta al inicio de esta entrada).
La fuen te original de este post es http://wixusblogger para respetar sus derechos de autos tendras que ir a su pagina para ver los link de imagenes Leer mas... en el siguiente link:
domingo, 23 de octubre de 2011
// //
0
comentarios
//
- Entradas al azar
- Intercambio depublicidad
- Avatares
- Buscador interno
- 7 consejos para no perder fans en facebook
- Lightboxing muy Simple y pequeño: Lightbox_me
- Genere trafico atraves de buscadores
- Pagerank
- Nieve real en tu pagina
- Iconos inspirados en google
- Incrustar varios videos de youtube
- Impresionante jQuery Image Viewer
- Gatgets
- Pagepeel tipo Banner
- Crea un bonito Banner
- Arrastrar y soltar imagenes
- Tránsito: transiciones de CSS3 y transforma con jQuery
- Post y entradas
- Plugins Sociales
- Galeria profeccional
- ¿Tienes tu diario en línea? ¡Cool! ¿Deseas más publicidad de tu blog?
- Galeria flash
- Mostrar notificasiones JQuery
- Horizontal acordeón para jQuery
- Sepa cuando sus amigoso clientes lo visitan!
- Crear una Encuesta rápida para tu web
- Crear iconos para comentarios
- Gana Publicando en su blog
- Fecha de JavaScript
- Traductores
- Marco de javaScript para crear mapas en linea
- Botones flotantes para compartir
- Buscador de imagenes gratuitas
- 60 iconos sociales
- Banners flotantes
- Crear nube de etiquetas
- Incluir entradas de un blog a distintas redes sociales y mas
- Herramientas Flash
- Mostrar entradas mas populares
- Botones Sociales
- 100.000 gadgets para tu web
- Iconos Sociales
- Flechas Deslizantes
- Sprite animaciones con jQuery: Spritely
- Top de tus comentaristas
- Insertar musica de fondo
- indicadores de actividad personalizable
- Los mejores contadores de visitas
- Biblioteca JavaScript para crear diagramas
- Reproductor en HML5 Y CSS3
- Crear un chat sencillo y rapido
- En forma de burbuja Tooltips con jQuery
- 40 iconos vectoriales
- Posicionamiento web
- Listones Diagonales para tu web
- 11 pinceles artísticos para Photoshop
- 40 temas WordPress De calidad
- Tours sitio web de función con jQuery - Joyride
- Templates para blogger
- animoto
- Templates en flash
- 30 iconos azules y grises
- Bloquear boton derecho del maus
- Lectura resumida con boton Leer mas..
- Crear alerta al salir del blog
- Buscador de iconos
- Boton de no Tocar
- Crear un boton *ENLAZANOS*
- Crear un Favicon
- Comentarios
- Plugin de jQuery para crear sliders
- Crear formulario de contacto
- Google Analytics
- La barra mas completa de herramientas
- 15 pinceles navideños
- PajaroTwitter
- Dominios Gratuitos
- Deja un comentario
- Responda con Lightbox jQuery
Seguidores
Sueños
Significado de los sueños es un blog sobre la interpretacion de Sueños.
Publicar un comentario