**No dudes en dejar comentarios o alguna sugerencia** El Blog de J.Guti.: accesorios
Mostrando entradas con la etiqueta accesorios. Mostrar todas las entradas
Mostrando entradas con la etiqueta accesorios. Mostrar todas las entradas

Roundpic

martes, 27 de noviembre de 2007

Roundpic es una herramienta que posibilita las opciones de redondear las esquinas de cualquier imagen y también
cambiar el tamaño de las mismas y el color de fondo.Las podemos subir desde nuestro PC o poniendo la URL de la imagen.Les muestro detalle de la página



Publicado por Guti en 20:09 0 comentarios  

Etiquetas: ,


Pulsar para oir post hablado

Accesorios

domingo, 11 de noviembre de 2007



Drop Caps




Contenido:
Es la primera letra de un párrafo más grande que el resto del texto, al estilo de los periódicos.Puede ser interesante para dar un aspecto diferente a los textos, que lo habitualmente visto hasta ahora. A continuación les detallo el correspondiente código para implantar en su plantilla.
Código:
Ir a plantilla edición HTML (no expandir artilugios) y agregas el siguiente código entre -<b:skin><![CDATA[ y ]]></b:skin>. , preferiblemente al final

.dropcaps {

float:left;

color: $headerBgColor;

font-size:100px;

line-height:80px;

padding-top:1px;

padding-right:5px;

}


Si no funciona con la parte de :$headerBgColor,lo cambias por $titlecolor .
Después sólo tienes que añadir en cada entrada el código:
<span class="dropcaps">D</span>


o para más comodidad dejarlo fijo en Opciones, Formato y pagarlo para que salga automaticamente en todas las entradas que creemos. Aceptamos y listo.En vista previa no es visible.



Leer más



Una manera de insertar la forma de ver en las entradas parte del texto escrito y que el resto del texto se vea cuando nosotros queramos, con el fin de que en textos largos no nos ocupe demasiado en cada entrada, de los muchos sistemas que hay, es que les muestro a continuación, que no resulta demasiado complicado de insertar.
Primeramente buscaremos en nuestra plantilla Edición HTML/Expandir plantilla de Artilugios las etiquetas:</b:skin> y </head>


y entre ellas pegamos el siguiente código:


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

<style type='text/css'>

.fullpost {display:inline;}

.summarypost {display:none;}

</style>

<b:else/>

<style type='text/css'>

.fullpost {display:none;}

.summarypost {display:inline;}

</style>

</b:if>



----------
Luego en cada post que deseemos que salga el "Leer más", aplicaremos este otro código
en cada entrada, donde detallaremos el texto que queremos que aparezca a simple vista y el que deseamos ocultar.
(Aquí escribimos el principio de la entrada )



<span class="summarypost">

<a href="link-de-la-entrada">Seguir Leyendo... </a>

</span>



<span class="fullpost">

( Aquí escribimos la parte de entrada que veremos extendida )

</span>



---------
Esta última parte también la podremos aplicar de forma permanente añadiando en Opciones/Formato/Plantilla de Entrada, para no tener que estar añadiéndolo en cada post, con lo cual resulta más cómodo.
Luego en la parte de "Seguir Leyendo", también se puede sus tituir por esto para que salga en su lugar una imagen:<img src="aquí-la-url-de-la-imagen" /></a>



Favicones




Contenido:
Para aplicar "favicones" (imagenes diminutas), a nuestro blog en los apartados de
Comentarios, Etiquetas, Autor o Secciones, basta añadir el siguiente código en la
parte del blog antes de :]]></b:skin>
A continuación añadiremos el código dependiendo de la parte donde queramos situarlo, según se indica:
"Imagen en Categoría o Etiquetas"



.post-labels

{ padding-left:20px;

padding-top:5px;

background: url(url_de_la_imagen) center left no-repeat; }



"Imagen en Comentarios"



.comment-link

{

padding-left:20px;

padding-top:5px;

background: url(url_de_la_imagen) center left no-repeat; }



"Imagen en (Publicado por) o Autor del blog"



.post-author

{

padding-left:20px;

padding-top:5px;

background: url(url_de_la_imagen) center left no-repeat; }








Publicado por Guti en 21:51 0 comentarios  

Etiquetas:


Pulsar para oir post hablado

Accesorios

lunes, 5 de noviembre de 2007


Efecto de -Ir Arriba-



Contenido:Aplicar imagen flotante con efecto indicación de -IR ARRIBA-
Añadimos en Edición HTML; expandir plantilla de artilugios, y colocamos entre la etiqueta -body-/body-, preferiblemente al final de -/body-, el siguiente código:
<a href="url-de-la-página"><img src="url-de-la-imagen" alt="ir arriba" border="0" style="position:fixed; bottom:0; right:0;" /></a>





**Imagen Flotante



Contenido:Si deseas añadir una imagen flotante en tu blog pega el siguiente código en tu blog ante de -/head-:
<a href='aquí-la-url-de-tu-blog' style='display:scroll;position:fixed;bottom:0px;right:0px;'>

<img src='aquí-la-url-de-tu-imagen'/></a>



**Entradas Expandibles




Contenido: Nos situamos en la plantilla -Edicion en HTML- , y buscamos el código -/head-, y a continuación añadimos:
-----
<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>



<script type='text/javascript'

src='http://forevergema.googlepages.com/hackosphere.js' />



--------
Ahora hay que buscar las partes que están en negro y añadir las que están en rojo
--------
<b:includable id='PeekABooPost' var='post'>

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

<table><tr>

<td width='40px'>

<a href='javascript:void(0)' title='Expand/collapse this post' style='text-decoration:none' expr:onclick='"javascript:toggleIt(\"" + data:post.id + "\");"'>[+/-]</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>



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

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

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

</b:if>

</b:if>

</b:loop>

</div
--------------
Esta aplicación ha sido posible gracias a la gentileza de gema@blog, que lo publica en su estupendo blog



Publicado por Guti en 18:06 0 comentarios  

Etiquetas:


Pulsar para oir post hablado

Suscribirse a: Entradas (Atom)
 
Comentarios