Crea Encuestas en tu Blog

Aquí de nuevo otro truco el cual uso en Exiliados del Olimpo

Básicamente es una forma de crear una "Encuesta", la cual pueden editar por completo ( colores y opciones ), hablo de Poll4You simplemente tienen que seguir unos simples pasos:

1. Poner la pregunta y seleccionar el numero de respuestas
2. Escribir las respuestas probables
3. Seleccionar los colores y poner su email ( para dar resultados )
4. Insertar el código en un Widget nuevo ( elemento de su blog, por medio de edición de Plantilla )

El código el cual tienen que insertar en el Widget debe de verse más o menos así:





Aquí un ejemplo de mi encuesta en Exiliados del Olimpo

Canciones de que Anime te gustaria oir en el Blog
Initial D
Rurouni Kenshin
Suffle!
Evangelion


Ver Resultados
powered by Poll4You!

la sidebar que baja con el scroll

Hola, pienso que todos ven el menu al lado de la sidebar que baja con el scroll, bueno, los que no veanlo, pasare a explicar el truco ahora :D :

1.- Nos dirigimos a nuestro HTML y antes del cierre b:skin pegamos el siguiente codigo:

#SmallIcon{
position:fixed;
text-align:left;
margin-top:100px;
margin-left:-28px;
}

* html #SmallIcon{ /*IE only*/
position:absolute;
}

#SmallIcon a img{
opacity:1;
-moz-opacity:1;
filter:alpha(Opacity=100);
}

#SmallIcon a:hover img{
opacity:0.8;
-moz-opacity:0.8;
filter:alpha(Opacity=80);
position:relative;top:0px;left:2px;
}

* html #SmallIcon a img{
filter:alpha(Opacity=100);
}

#SmallIcon img{
margin-bottom: -5px;
}

* html .SmallIcon{
margin-bottom: -3px;
}

2.- Ahora, en elementos de pagina añadimos un artilugio, un html con el siguiente codigo:

Bueno listo, creo que el widget es mas grande que el estilo :D .

05 mayo 2007

Hola, este truco sirve para reemplazar: Entardas Antiguas - Pagina Principal - Entradas Siguientes por unos iconos de navegacion muy cheveres, asi que a trabajar:

1.- En tu HTML expamdimos los artilugios y buscamos el siguiente codigo:

2.- Lo reemplazamos por el siguiente:

Y listo :) .

Poner imagen de fondo en el HTML.

Para poner una imagen de fondo en el html solo tienes que seguir los siguientes pasos:

1.- Nos dirigimos a vuestro HTML y buscamos el siguiente codigo:

code {

2.- Ahora reemplazamos el codigo anterior por este:

code {
display: block; /* fixes a strange ie margin bug */
font-family: Courier New;
font-size: 9pt;
overflow:auto;
background: #f0f0f0 url(http://chenkaie.googlepages.com/Code_BG.gif) left top repeat-y;
border: 1px solid #ccc;
padding: 5px 5px 5px 20px;
max-height:200px;
line-height: 1.2em;
margin: 5px 5px 0 15px;
}

Listo :) .

Publicado por Andres a las: 05:18 PM 1 comentarios

Etiquetas: Trucos

Poner iconos en las entradas.

Hola, este truco sirve para poner imagenes en las entradas de los blogs.

Post:

Para la fecha:

.date-header {
padding-left: 20px;
padding-top: 5px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqg0XareUSGvyM_3IgZ6d0OwC8SG1Np-1gxn5z9jyxhTrqgt15xRl1sXtij7oBYaoK2ZKvoUUV5ENPsxNLcAjsNXjfHMmZvPWar8Dma51pM-0VXBxX5b8zAjxN71gV1lbDWnfavVQhWoE/s1600/time.png) center left no-repeat;
}

Para las etiquetas:

.post-labels {
padding-left: 20px;
padding-top: 5px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB_xR9TMw5xKOOTEMBge0Dkk5TGEX88zK590TlBZuewZxGrUcaJXIzWRiS8ns6MLwwm4oyxdRBAp22zKGo-BeOhyphenhyphenE-WhIWQmcep6QD8S0ArGV0aalO4SPAX1VK5CrqWgFihpg0t9fBYzY/s1600/etiqueta_naranja.gif) center left no-repeat;
}

Para el autor:

.post-author {
padding-left: 20px;
padding-top: 5px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsKHFTmzvIjTbWIrKf8t6pGtPsvjGDazccu8yiF_AH52n6TQNdZ3dIKGn9t7D5gEWqCJrBWEymFBAqFyA3L7gdw7yvmfk7XyoLLfA6lz6JuPcBQTWORrI45CVEuginjDFzA75Y21X_W7I/s1600/autor.gif) center left no-repeat;
}

Para el titulo del post:

.post-title {
padding-left: 20px;
padding-top: 5px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGs0ED5kIat9tyI5cT_7QOe52VjDqFtzK1i4F4QLrtkUyofiKlgaifK1M2mY2-p5yGswMpqziQAcWTSeCIzBmShVpkIoE8ODP9jThe-fFWHeoz-0olZfOU5GS0rYejDfWBHiR7BoAue7w/s1600/icono-documento.gif) center left no-repeat;
}

Para la fecha de los comentarios:

.comment-timestamp {
padding-left: 20px;
padding-top: 5px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnayM81n-0IYr6NywI3N0AdaBmN7LbslMAGihacnCez_-trVwjjkjspwYGV3CxPLmuCfdnyo5I19b-_DANNmuWgguuuifLsTOdFmJ-XgzYS7b0NFt0obO4568RJ4-TzS_xdHLyhhYcVHo/s1600/icono-calendario.gif) center left no-repeat;
}

Para los comentarios:

.comment-link {
padding-left: 20px;
padding-top: 5px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKDI5wnEBdXdqKcO8FMdrMP2vWcRtLWqRf53OfV91gnp-f0NQc2r4qQwl7v-owHYvxaLiP0ZCR8iT-jWNuGuIhtDWYgUfmnrfZjCqYtgL_-oEgYWjse-GEPPA8U6f154MdIwYPHf2EMvA/s1600/icono-comentarios.gif) center left no-repeat;
}

Sidebar:

Para los links:

#LinkList1 ul, #LinkList2 ul {
list-style-type:none;
}

#LinkList1 li, #LinkList2 li {
padding-left: 20px;
padding-top: 5px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiN4fnxofPo_BMoO85KFtTg5D5bEoVe-7Joj5p9bZwDUs6mr7s92lLE7p4QGExSSXxDLGB9wn5S0T1hBiHrWgEDKiivOi6p36ZptalPNb4Njz5Rr0VQergNCjIAmvw0mGz2hxHYUn5iHRI/s1600/icono-links.gif) center left no-repeat;
}

Para los blacklinks:

#backlinks-container h4 {
padding-left: 20px;
padding-top: 5px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGeui38oZlhNc7vzu5gn6DgfjgE_ESrCXeoBA5ldt2VU-VfX2NSajyTVCqt8yYbmFPULkCuND9ycZsAWbiZSxZt3Gx_vd_2sA0YJLScVsstvW0UfjglEP3v9C1io-v1MLXbYL4qjP6gDQ/s1600/icono-backlinks.gif) center left no-repeat;
}

Para las etiquetas:

#Label1 ul, #Label2 ul {
list-style-type:none;
}

#Label1 li, #Label2 li {
padding-left: 20px;
padding-top: 5px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqbtzu2pyGlw8TEIXAZr9q5t5Xk7fVIQrLu7AO3nxHRjNUW8TtmqOKxIuCqzqScGNvWrZ9EwFLzFQFiS1cy0SbHrtqWBaXu3mid44Y11BEuSDFQDVhcbMBybdZNKPg4RewNkMraxgr-hY/s1600/icono-etiqueta-azul.gif) center left no-repeat;
}

Footer:

Para el feed:

.feed-links {
padding-left: 20px;
padding-top: 5px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBm2aglprSReUtloymJjNdcH9kOCBz9h8pp16PpU_ohLQfb7rCKEqPsU6XxUnNPn2Pg-E9-8qBOKqxqoq-nm8Lcr5MTAgh5QLZCnatULjgQnk1Y0NqosLCOJX0MdnXJ2u9NZp02yZxhYs/s1600/icono-feed.gif) center left no-repeat;
}

Listo :) .

Fecha estilo Wordpress.

Hola, al fin me he acordado de este truco, me lo tenia guardado, pero se me olvido y despues de unos meses me acorde haci que comenzemos:

1.- Nos dirigimos a Opciones-Formato y cambiamos la fecha por la que esta en la penultima opcion.
2.- Ahora en el HTML expandimos los artilugios y pegamos el siguiente codigo antes del /head:



3.- Ahora expandidos los artilugios buscamos el siguiente codigo:



4.- Y reemplazamos el codigo anterior por este:

5.- Si sos perezoso y no te quieres molestar en crear un estilo para la fecha usa este:

div#post-date {
display: block;
float:left; /* set this to right if you want it go to the right */
padding: 1em; /* to keep the text away from the edges */
background-color: #555555; /* you can change this to hold a picture, will make it look nicer */
border: 3px double gray; /* a border to make it look nice */
}

div#post-date span.theDate {
display: block; /* to put this in a different line */
font-size: 3em; /* to make the date stand out */
background-color: transparent; /* to let the background show through */
color: white;
}

div#post-date span.theMonth {
display: block;
font-size: 1em; /* smaller compared to the date */
background-color: transparent;
color: white;
}

div#post-date span.theYear {
display: block;
font-size: 1em; /* smaller compared to the date */
background-color: transparent;
color: white;
}
.....
eso es todo

...............
Buscador Interno (Actualizacion)
21 mayo 2007

Hola, volviendo a lo interesante y no cosas de principiante aprenderemos a añadir un buscador interno es facil solo sigan los siguientes pasos:

1.- Añdimos un widget Html/Javascript con el siguiente codigo:

2.- Y si quieres ponerle una imagen que remplaze el boton buscar:

3.- Buscador con texto en cuadro de texto; Incluye texto dentro del cuadro donde se coloca la palabra a buscar y el botón buscar:

4.- Y tambien Una imagen que reemplaze el boton buscar y una imagen dentro del textarea:

Y listo :) .