Hacker of the Web
Tus ideas en código!...y mas

[+/-]
Aumenta tus comentarios

Este truco consiste en donde dice el número de comentarios despues de cada post, salga el numero de comentarios seguido de un link que dice

12 comentarios Agrega el tuyo!

, bueno pues para esto tienes que buscar
el siguiente código y añadir el codigo rojo:


<span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<data:top.timestampLabel/>
<b:if cond='data:post.url'>
<a class='timestamp-link' expr:href='data:post.url' title='permanent link'><data:post.timestamp/></a>
</b:if>
</b:if>
</span>

<span class='post-comment-link'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<b:if cond='data:post.numComments == 0'><font color='#ff0000'><blink>Agrega tu comentario</blink></font><b:else/><data:post.numComments/><font color='#ff0000'> comentarios, <blink>agrega el tuyo!</blink></font></b:if></a>
</b:if>
</b:if>


</span>

<!-- backlinks -->
<span class='post-backlinks post-comment-link'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>


lo que este en el lugar de este codigo rojo sustituyelo.

[+/-]
DropCaps (Primera letra grande)

Dropcaps, este efecto siver para que la primera letra de algún post se vea mas grande que las otras y llame la atención de tus usuarios/lectores unicamente tienes que poner este código
CSS antes de ]]></b:skin>:

.dropcaps {
float:left;
color:#1B703A;
font-size:100px;
line-height:80px;
padding-top:1px;
padding-right:5px;
}


Despues de eso ya instalado el dropcaps y para aplicarlo puedes escribir el siguiente código:
<span class="dropcaps">A</span>qui inicia la entrada
Que dará como resultado:
Aqui inicia la entrada. Cuerpo de la entrada. Cuerpo de la entrada. Cuerpo de la entrada. Cuerpo de la entrada. Cuerpo de la entrada. Cuerpo de la entrada. Cuerpo de la entrada. Cuerpo de la entrada. Cuerpo de la entrada. Cuerpo de la entrada. Cuerpo de la entrada. Cuerpo de la entrada. Cuerpo de la entrada. Cuerpo de la entrada. Cuerpo de la entrada. Cuerpo de la entrada. Cuerpo de la entrada. Cuerpo de la entrada.
Para una mejor comodidad puedes entrar a configuración, del blog, luego haces clic en la oción formato, y hasta abajo esta el formato de las entradas ahi ingresas este código:
<span class="dropcaps">D</span>ropcaps
Esto servirá para que cada que quieras postear te salga automáticamente el código, así puedes ponerlo en cada entrada.

Espero haiga quedado claro el código, y que te haya servido.

[+/-]
Mensajes en cajas redondeadas

Este es un truco en CSS bastante bueno pues ya que se pueden hacer este tipo de efectos con imagenes y es bastante dificil subir imagenes, encontrar el color adecuado, para cambiar el color, etc..

Pero gracias a este código lo podemoas hacer sion imagenes, si tienen blogger podrás ya antes haber visto esto y si no es algo como esto

Tus cambios se han guardado correctamente

para obetner este efecto solo tienes que añadir al final de la plantilla CSS de blogger que esta antes de ]]></b:skin> el siguiente código:

.cajaredonda {
display:inline;
border:1px solid #ff0000;
background-color:#ffffff;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
color:#cecece;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
padding: 4px;
}


una vez hecho esto, solo pones esto otro en donde quieras ver la caja de mensaje redonda:
<span class="cajaredonda">Tus cambios se han guardado correctamente</span>

Nota: Si quieres ver un mensaje de una linea, es decir un renglón o como lo llames, añades el código de arriba pero si el mensaje es mayor a una linea solo añades:

style="display:block;width:220px;" en :
<span class="cajaredonda">Tus cambios se han guardado correctamente</span>
Y quedará asi:
<span class="cajaredonda" style="display:block;width:220px;" >Tus cambios se han guardado correctamente</span>

si no haces esto y el texto es mayor a una linea se verá asi:
.cajaredonda {
display:inline;
border:1px solid #ff0000;
background-color:#ffffff;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
color:#cecece;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
padding: 4px;
}

[+/-]
Cajas de texto

Con un simple código, escribir, y entender, se pueden lograr cosas fantásticas, como la que les voy a presentar.

Es una caja de Texto, como ya las conocerán de diferentes partes, pues aqui les dejo
unas simples letras que hará volar la imaginación, y tambien puedes hacercon ellas lo que sea, como el formato, colores, las barras de desplazamiento aqui verán eso, el código es el siguiente:





img<div align="center"><div style="BORDER-RIGHT: border-style: ridge; border-color: red; BORDER-TOP: border-width: 4px; border-style: ridge; border-color: red; BORDER-LEFT: border-width: 4px; border-style: ridge; border-color: red; WIDTH: 100%;BORDER-BOTTOM: border-width: 4px; border-style: ridge; border-color: red; SCROLLBAR-FACE-COLOR: black; SCROLLBAR-HIGHLIGHT-COLOR: black; OVERFLOW: scroll;SCROLLBAR-SHADOW-COLOR: white; COLOR: #ff88e7; SCROLLBAR-3DLIGHT-COLOR: #ddaaff; SCROLLBAR-ARROW-COLOR: #99cc33; SCROLLBAR-DARKSHADOW-COLOR: white; HEIGHT: 130px; BACKGROUND-COLOR: white"> <span style="span-family:tahoma;span-size:85%;color:#99cc33;"> <strong> <p align="center"> </p> </strong> </span> </div></div>






[Modificaciones]

<div align="center">

Esta linea hará que el texto se centre.

Pueden colocarse tambien:
Left, Rigth.



BORDER-RIGHT: border-style: ridge; border-color: red;

Borde de la derecha.

Pueden colocarse tambien:
colores en ingles




BORDER-TOP: border-width: 4px; border-style: ridge; border-color: red;

Borde de arriva.

Pueden colocarse tambien:
colores en ingles y puede modificarse el grosor


BORDER-LEFT: border-width: 4px; border-style: ridge; border-color: red;

Borde de la izquierda.

Pueden colocarse tambien:
colores en ingles y puede modificarse el grosor



WIDTH: 85%;

Ancho de la caja

Pueden colocarse tambien:
pueden colocarse de 0 a 100% o de 0px hasta el grosor deseado



BORDER-BOTTOM: border-width: 4px; border-style: ridge; border-color: red;

Borde de abajo.

Pueden colocarse tambien:
colores en ingles y pueden colocarse el grosor



SCROLLBAR-FACE-COLOR: black;

color de barras de desplazamiento.

Pueden colocarse tambien:
colores en ingles



SCROLLBAR-HIGHLIGHT-COLOR: black;

color de barras de desplazamiento(haciento clic en ellas).

Pueden colocarse tambien:
colores en ingles



SCROLLBAR-SHADOW-COLOR: white;

color de brillo de barras de desplazamiento.

Pueden colocarse tambien:
colores en ingles



COLOR: #ff88e7;

color de texto.

Pueden colocarse tambien:
colores en ingles



SCROLLBAR-3DLIGHT-COLOR: #ddaaff;

color de fondo de barras de desplazamiento.

Pueden colocarse tambien:
colores en ingles




SCROLLBAR-ARROW-COLOR: #99cc33;
color de flecha de barras de desplazamiento.

Pueden colocarse tambien:
colores en ingles



SCROLLBAR-DARKSHADOW-COLOR: white;

color de sombra de barras de desplazamiento.

Pueden colocarse tambien:
colores en ingles



HEIGHT: 100px;


Largo de la caja
Pueden colocarse tambien:
pueden colocarse de 0 a 100% o de 0px hasta el largo deseado



BACKGROUND-COLOR: white

Color de fondo de caja

Pueden colocarse tambien:
colores en ingles



<span style="span-family:tahoma;span-size:85%;color:#99cc33;">

Tamaño de texto y color

Pueden colocarse tambien:
pueden colocarse de 0 a 100% o de 0px hasta el grosor deseado y colores en ingles



<strong>

hace que el texto este en negrita

en este no se puede hacer nada, si no mas que borralo si se desea.

[+/-]
Redirección

Script para redireccionar el blog.

/!\ En esta entrada se asume que tienes conocimientos de como editar la plantilla. Si no sabes como o donde se modifica, revisa esta entrada: Donde editar el código HTML de nuestra plantilla.



Este script lo puedes utilizar para cuando añadas algo a tu blog/página, este se desordene o se desplome. Bueno, pues para esto esta este script, solo entras en Edicion de HTML y sin expandir la plantilla de artilugios, añades
este código despues de <body>.

Y lo redireccionas a una página, web, o blog con un mensaje de "en construcción" o un mensaje que te guste para exlicarlo.

<script>
location.href='http://URL DEL BLOG SECUNDARIO';
</script>



Esto hará que cuando entren a tu blog el navegador les lleve directamente al blog en "Construcción".
Mientras tu sigues como siempre arreglado el blog "real", eso si, acuérdate de retirar el script cuando termines el trabajo en tu blog "real".

Entradas más recientes Entradas antiguas Página Principal
Arriba