Recursos y Diseño Web: trucos

Mostrando entradas con la etiqueta trucos. Mostrar todas las entradas

A veces vemos en los post de entradas, sobre todo cuando los textos son demasiados largos, la coletilla del "seguir leyendo", para que si lo creemos conveniente pulsemos y sigamos leyendo el resto del texto si nos interesa. Bien pues para aplicarlo basta seguir los siguientes pasos:

Primeramente buscamos la etiqueta -/head-, y a continuación pegamos lo siguiente:

Segundo paso es buscar en la plantilla, expandiendo artilugios primeramente este otro código:

<b:includable id='post' var='post'>

<div class='post uncustomized-post-template'

<a expr:name='data:post.id'/>

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

<h3 class='post-title'>

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

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

<b:else/>

<data:post.title/>

</b:if>

</h3>

</b:if>

<div class='post-header-line-1'/>

<div class='post-body'>

<p><data:post.body/></p>

<div style='clear: both;'/> 

</div>

y esto mismo los sustituimos por el siguiente código:

<b:includable id='post' var='post'>

<div class='post uncustomized-post-template' expr:id='"post-" + data:post.id'>

<a expr:name='data:post.id'/>

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

<h3 class='post-title'>

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

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

<b:else/>

<data:post.title/>

</b:if>

</h3>

</b:if>

<div class='post-header-line-1'/>

<div class='post-body'>

<b:if cond='data:blog.pageType == "item"'>

<p><data:post.body/></p>

<b:else/>

<style>#fullpost {display:none;}</style>

<p><data:post.body/></p>

<span id='showlink'>

<p><a href='javascript:void(0);' expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"'>SIGA LEYENDO</a></p>

</span>

<span id='hidelink' style='display:none'>

<p><a href='javascript:void(0);' expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"'>CERRAR NOTA</a></p>

</span>

<script type='text/javascript'>

checkFull("post-" + "<data:post.id/>");

</script>

</b:if>

<div style='clear: both;'/> 

</div>

Aceptamos y ya está listo. Solamente nos queda en cada entrada o post ir añadiento esto otro para que funcione:
texto

<span id="fullpost">

texto

</span>

Seguir Leyendo...[+/-]

[+/-]

Efecto ir arriba

[+/-]

Texto Doble

[+/-]

Imagen movible

Este es un truco para poder mover por toda la página a nuestro gusto todas las imagenes que queramos. Es interesante aunque en la práctica puede que no lo sea tanto,ya que dependerá de las aplicaciones que queramos darlo. No obstante este es el truco. Primeramente antes del cierre de -/Head- insertaremos el siguiente código:

Abrir Código



<!--arrastrar imagen-->

<style type='text/css'>



.drag{

position:relative;

cursor:hand;

z-index: 100;

}



</style>



<script type='text/javascript'>



/***********************************************

* Drag and Drop Script: &#169; Dynamic Drive (http://www.dynamicdrive.com)

* This notice MUST stay intact for legal use

* Visit http://www.dynamicdrive.com/ for this script and 100s more.

***********************************************/



var dragobject={

z: 0, x: 0, y: 0, offsetx : null, offsety : null, targetobj : null, dragapproved : 0,

initialize:function(){

document.onmousedown=this.drag

document.onmouseup=function(){this.dragapproved=0}

},

drag:function(e){

var evtobj=window.event? window.event : e

this.targetobj=window.event? event.srcElement : e.target

if (this.targetobj.className==&quot;drag&quot;){

this.dragapproved=1

if (isNaN(parseInt(this.targetobj.style.left))){this.targetobj.style.left=0}

if (isNaN(parseInt(this.targetobj.style.top))){this.targetobj.style.top=0}

this.offsetx=parseInt(this.targetobj.style.left)

this.offsety=parseInt(this.targetobj.style.top)

this.x=evtobj.clientX

this.y=evtobj.clientY

if (evtobj.preventDefault)

evtobj.preventDefault()

document.onmousemove=dragobject.moveit

}

},

moveit:function(e){

var evtobj=window.event? window.event : e

if (this.dragapproved==1){

this.targetobj.style.left=this.offsetx+evtobj.clientX-this.x+&quot;px&quot;

this.targetobj.style.top=this.offsety+evtobj.clientY-this.y+&quot;px&quot;

return false

}

}

}



dragobject.initialize()



</script>

<!--fin arrastrar imagen-->

Luego en cada imagen que queramos aplicarlo, tendremos que introducir la URL de la imagen dicha dentro de este otro código:
<img src=http://URL_IMAGEN" class="drag" />

Ejemplo: