El Blog de J.Guti.

Una opción bastante interesante puede ser la de tener en el blog la opción de poder imprimir los posts, para ello añadiremos un botón al princio o al final de cada post, eso depende de donde más nos guste, para ponerlo añadiremos el siguiente código en el post, al princio o fin del mismo:
Código:
<a href="javascript:print()">Imprimir</a>

Paro no tener que andar copiando y pegando dicho código cada vez que queramos insertarlo, podemos ponerlo fijo, yendo en la página a "configuración" y seguidamente a "formato" y al final en -plantilla de entrada-, lo insertaremos; damos -aceptar- y listos
Imprimir

Una forma de poner un texto o simplemente para poner un determinado titulo
y que se vea doble, es el código que publica hoy en el blog de Gem@
primeramente vamos a plantilla, editamos y añadimos el siguiente código justo antes de este:
]]></b:skin>
añadimos este otro:

h5{margin: 0;font-weight: normal;color: #e6cbdb;font-size: 2.1em;position: relative;}h6{margin: 0;display: inline;position: relative;top: -.5em;left: 1em;font-size: 1.5em;font-weight: normal;color: #6c1e4b;}

Doble título

Doble titulo

Esto será bastante util para poner una cajita de texto dentro de tu blog para que te puedan copiar el código y así te puedan enlazar el blog mediante una imagen y cajita de texto. Les muestro en el siguiente enlace un "generador de código para tus visitas":
Ver Ejemplo:

Link-Me

<br /><a href="http://reinosano.blogspot.com" target="_blank"><img border="0" src="http://i81.photobucket.com/albums/j219/jgutierrezs/mz_030209_10012407914.jpg"/></a><br />

Para modificar la imagen de fondo en las entradas o post añadiremos el siguiente código y esto hará que salga en todas las entradas.Nos situamos en plantilla edición HTML y buscamos este código:

.post-body {

clear: both;

padding-top: 10px;

}


una vez encontrado lo sustituimos por este otro:
.post-body {

background: url(url-de-la-imagen) top left;

clear: both;

padding-top: 10px;

}

Ahora bien si sólo queremos que el fondo del post aparezca sólamente en algunos,entonces aplicaremos este código solamente en las entradas que queramos:
<table background="url-de-la-imagen" border="0" bordercolor="#000000" cellpadding="0" cellspacing="0" height="100%" width="100%"><tbody><tr><td><p>texto-texto-texto-texto-texto</p><p></p></td></tr></tbody></table>

Solamente faltará añadir donde dice -URL-, poner el de nuestra imagen escogida.

Para escribir una entrada o post y la vez hacer un "pullquote" dentro del mismo texto en un lateral y que se vea el post de una manera diferente o simplemente para resaltar algo que pensemos merece la pena ponerlo de una manera especial, utilizaremos lo que llamamos un PULLQUOTE.
Para llevarlo a cabo utilizaremos el siguiente código que pondremos en la misma entrada donde queramos mostrarlo. El código es el siguiente :

Cómo resaltar y poner fondo de color a una parte de texto:

Para hacerlo pongan después de <style type="text/css"> y antes de </head>


span.highlight

{

background-color:#FFFF00

}


u cuando escriban una entrada el texto que quieran resaltar lo envuelven en este código:
<span class="highlight">texto que pintan</span>

Texto en movimiento de la barra de titulo.
-------------------------------------------------------
Para que salga el texto en movimiento en la barra del titulo inserta el siguiente código después de -head- :
<script language="javascript">

var titletext="Hola amiga, amigo...."; // TITLEBAR TEXT

var repeat=true; // SET TO true TO REPEAT, false TO "TYPE" OUT TITLE ONLY ONCE.

var index=0;

function scrolltitle(){

if(index<=titletext.length){

document.title=titletext.substring(0,index);

index++;

setTimeout('scrolltitle()', 200);

}else{

index=0;

if(repeat)setTimeout('scrolltitle()',1000);

}}

window.onload=function(){

if(!document.layers)setTimeout('scrolltitle()',1000);

}

</script>

Para borrar el cartelito de -Mostrar entradas con la etiqueta........-.
Desde diseño vamos a plantilla edición HTML, expandimos artilugios y buscamos este código:
<b:include data='top' name='status-message'/>


segfuidamente lo borramos y ya está. Yano aparecerá más el cartelito de "mostrar entradas"

Para añadir una pequeña imagen y que destaquen nuestras entradas, iremos a plantilla HTML, expandimos artilugios y buscamos el siguiente código:
<li><a expr:href='data:i.url'><data:i.title/></a></li>

bueno una vez buscado pones este otro , que es el mismo pero en medio va la dirección de la imagen:
<li><a expr:href='data:i.url'>ACA VA LA IMAGEN<data:i.title/></a></li>


Para la foto este:
img src='dirección de imagen....'/>

La imagen debe de ser pequeñita cómo cuando se crea un favicón

Para poner una página dentro de nuestro propio blog, basta con insertar el siguiente código, bien sea en una entrada o bien en nuestra -sidebar-, eso sí teniendo en cuenta en este último caso la anchura y modificándola a nuestro gusto:
<iframe src="http://www.juliobriga.blogspot.com"WIDTH="50%" HEIGHT="300"></iframe>

Según publica hoy el estupemdo blog de Gema@blog, este ejemplo de aplicación "Rollover", que cambia las imagenes al pasar el cursor.
Primeramente nos situamos en la plantilla edición HTML, y justo antes de -/head-, añadimos este código:
<script language="JavaScript" type="text/javascript">

imagenOn = new Image(300,300);

imagenOn.src = "images/avatar2.gif";

</script>

damos aceptar guardando los cambios y a continuación añadimos esto otro en el sitio que queramos ponerlo, bien sea una emtrada o en el sidebar;
<a href= "#" onclick="returnfalse;" onmouseover="document.ejemplo.src='url-imagen';" onmouseout="document.ejemplo.src='url-imagen';">

<IMG name="ejemplo" src="url-imagen-1ª" alt = "ejemplo de rollover"width="300" height="300" border= "0">

</a>

solamente sustituimos donde pone -url.imagen-, por la imagen nuestra: Ejemplo

Para poder poner un buscador interno en nuestro blog basta añadir este corto y sencillo código a nuestra página en la sección añadir un elemento de página -HTML-Javascript-, situándolo en la parte que queramos ponerlo.Aceptamos y listo.

[+/-]Buscador

Texto:


<form id="searchthis" action="/search" style="display:inline;" method="get"><input id="search-box" name="q" type="text"/><input id="search-btn" value="Buscar" type="submit"/></form>

Texto:
Observaciones:
Si queremos añadirle una imagen de -lupa-, cambiaremos la parte desde la que dice:
<input id="search-btn" value="Buscar" type="submit"/></form>


Texto:


por esta otra...:

<input border="0" alt="Buscar" src="http://img234.
imageshack.us/img234/5551/magnifyingglassec3.gif" type="image"/>

</form>

Para poder mostrar los textos en las entradas o post y que no se lea el texto completo, sino que una parte permanezca oculto y que se vea cuando nosotros queramos, o lo que es lo mismo el "siga leyendo...", empezaremos por seguir los siguientes pasos:

Siga leyendo

Código Seguir leyendo:

Observaciones:

Con esta aplicación podemos tener una tabla para mostrar los contenidos que deseemos, como por ejemplo un mapa del blog o cualquier otra cosa que se nos ocurra.
Primeramente pondremos lo siguiente antes de la etiqueta -/head-:


<link href='http://webjcp.googlepages.com/tabcontenido.css' rel='stylesheet' type='text/css'/>

<script src='http://webjcp.googlepages.com/tabcontenido.js' type='text/javascript'></script>


Contenido


seguidamente vamos a añadir un elemento de página -HTML-Javascript-, y pondremos el siguiente código:


[+/-]Abrir código



<ul id="maintab" class="shadetabs">

<li><a href="#" rel="tcontent1">Contenido 1</a></li>

<li><a href="#" rel="tcontent2">Contenido 2</a></li>

<li><a href="#" rel="tcontent3">Contenido 3</a></li>

<li class="selected"><a href="#" rel="tcontent4">Contenido 4</a></li>

<li><a href="#" rel="tcontent5">Contenido 5</a></li>

<li><a href="#" rel="tcontent6">Contenido 6</a></li>

</ul>

<div class="tabcontenidostyle">

<div id="tcontent1" class="tabcontent">

<br/>

Aca va el contenido 1

</div>

<div id="tcontent2" class="tabcontent">

<br/>

Aca va el contenido 2

</div>

<div id="tcontent3" class="tabcontent">

<br/>

Aca va el contenido 3

</div>

<div id="tcontent4" class="tabcontent">

<br/>

Aca va el contenido 4

</div>

<div id="tcontent5" class="tabcontent">

<br/>

Aca va el contenido 5

</div>

<div id="tcontent6" class="tabcontent">

<br/>

Aca va el contenido 6

</div>

</div>



<script type="text/javascript">

initializetabcontent("maintab")

</script>



Configuración:
<li><a href="#" rel="tcontent1">Contenido 1</a></li>

Aca lo único que le tenes que cambiar el el titulo



<li class="selected"><a href="#" rel="tcontent4">Contenido 4</a></li>

Aca verás que aparece algo nuevo "class="selected" es el contenido que se muestra cuando entran a tu blog.



<div id="tcontent1" class="tabcontent">

<br/>

Aca va el contenido 1

Codigo

[+/-]Barras de separación

Código:
Para añadir lineas de separación verticales dentro del blog, añadiremos lo siguiente:

Añadimos en #main-wrapper { el valor

border-left: solid #000000 1px; para conseguir una barra a la izquierda de la sidebar.

border-right: solid #000000 1px; para conseguir una barra a la derecha de la sidebar.

border-right:1px dashed #ffffff; la barra se verá punteada.



Si queremos incluir las entradas dentro de una caja,es decir, barra derecha-barra izquierda-barra arriba-barra abajo, añadimos en #main-wrapper { el valor border: solid #000000 1px;

Para verla punteada: border: dashed #000000 1px;

Si queremos que las esquinas de la caja se vean redondeadas, añadimos:



-moz-border-radius: 15px;

-webkit-border-radius: 15px;



Lo mismo puede hacerse en la sidebar, añadiendo esos valores en #sidebar-wrapper {

Observaciones:

*Si os parece que el texto de las entradas queda demasiado pegado al borde que acabamos de colocar, añadís el valor padding, por ejemplo asi: padding: 0 10px 0 10px; según se varie el valor de los pixeles (px) variará la distancia del texto al borde.

[+/-]Mensajes de Alerta

Con este truco podemos conseguir resaltar algo que no queramos que pase desapercibidopo.
Para eso insertaremos el siguiente código antes - ]]></b:skin>-.


/* alerta */



.alert {

background: #fff6bf url(http://img527.imageshack.us/img527/3821/exclamationfs0.png) 15px center no-repeat;

text-align: left;

padding: 5px 20px 5px 45px;

border-top: 2px solid #ffd324;

border-bottom: 2px solid #ffd324;

}



Después de aceptar y guardar podemos empezar a usarlo en cada entrada que queramos aplicarlo poniendo esto en cada entrada:
<p class="alert">ACA VA EL MENSAJE</p>

Para ello inserta el, siguiente código entre las etiquetas -head-/head-:
Código:


<style type='text/css'>



.commentbox{

background-color: #ececec;

width: 450px;

padding: 10px;

}



.commentfooter{

background: url(http://img.godlike.cl/images/fle.gif) 20px 0 no-repeat; /*20px 0 equals horizontal and vertical position of arrow. Adjust as desired (ie: 20px -5px).*/

padding-left: 58px;

padding-top: 1px;

margin-bottom: 2em;

font-size: 90%;

color: #4A4A4A;

}



</style>







Después de aceptar y guardar vas a elementois de página y en la sección de -HTML-Javascript-, insertas este código donde quieras situarlo:

<div class="commentfooter">

<div style=" "><span >

ACA VA LA FIRMA</span></div></div>

Podemos poner los Post escritos a doble columna, estilo periódico y quedan superchulos, y además le dá un aire de elegancia al blog. A continuación les muestro el código, que tendrán que añadir a un elemento de página -HTML-Javascript-
Abrir

Post Doble Columna

Ver todas las entradas

Efecto reflejo en Imagenes

Eliminar barra de Blogger

Titulo