ht,ml

-----------------------------------------------
Blogger Template Style
Name: Thisaway (Rose)
Designer: Dan Rubin
URL: www.superfluousbanter.org
Date: 29 Feb 2004
Updated by: Blogger Team
----------------------------------------------- */

/* Variable definitions
====================
type="color" default="#632035" value="#632035">
type="color" default="#feeef3" value="#feeef3">
type="color" default="#feeef3" value="#feeef3">
type="color" default="#ba476b" value="#ba476b">
type="color" default="#c88fa2" value="#c88fa2">
type="color" default="#bd8095" value="#bd8095">
type="color" default="#bf277e" value="#bf277e">
type="color" default="#96095a" value="#96095a">
type="color" default="#e25984" value="#e25984">
description="Sidebar Visited Link Color"
type="color" default="#b02c56" value="#b02c56">

type="font" default="normal normal 100% Helvetica,Arial,Verdana,'Trebuchet MS', Sans-serif" value="normal normal 100% Helvetica,Arial,Verdana,'Trebuchet MS', Sans-serif">
type="font"
default="normal bold 100% Helvetica,Arial,Verdana,'Trebuchet MS', Sans-serif" value="normal bold 100% Helvetica,Arial,Verdana,'Trebuchet MS', Sans-serif">
type="font"
default="normal bold 200% Helvetica,Arial,Verdana,'Trebuchet MS', Sans-serif" value="normal bold 200% Helvetica,Arial,Verdana,'Trebuchet MS', Sans-serif">
type="font"
default="normal normal 80% Helvetica,Arial,Verdana,'Trebuchet MS', Sans-serif" value="normal normal 80% Helvetica,Arial,Verdana,'Trebuchet MS', Sans-serif">
*/

/* global
----------------------------------------------- */
body {
margin: 0;
text-align: center;
min-width: 760px;
background: #ce436e url(http://www.blogblog.com/thisaway_rose/bg_body.gif) repeat-x left top;
color: $textColor;
font-size: small;
}

blockquote {
margin: 0;
padding: 0 10px 0 10px;
border-left: 6px solid #f7d8e2;
border-right: 6px solid #f7d8e2;
color: $postTitleColor;
}

code {
color: $postTitleColor;
}

hr {
display: none;
}


/* layout
----------------------------------------------- */
#outer-wrapper {
margin: 0 auto;
width: 760px;
text-align: left;
font: $bodyFont;
}

#header-wrapper {
padding-bottom: 15px;
background: url(http://www.blogblog.com/thisaway_rose/bg_header_bottom.gif) no-repeat left bottom;
}

#header {
background: #632035 url(http://www.blogblog.com/thisaway_rose/bg_header.gif) repeat-x left bottom;
}

#content-wrapper {
position: relative;
width: 760px;
background: #f7f0e9 url(http://www.blogblog.com/thisaway_rose/bg_main_wrapper.gif) repeat-y left top;
}

#main-wrapper {
display: inline; /* fixes a strange ie margin bug */
float: left;
margin: 0 0 0 3px;
padding: 0;
width: 483px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#main {
padding: 22px 8px 0 8px;
background: url(http://www.blogblog.com/thisaway_rose/bg_content.gif) repeat-x left top;
}

.post {
margin: 0 8px 14px 21px;
padding: 0;
border-bottom: 3px solid #f7d8e2;
}

#comments {
margin: 0 16px 14px 29px;
padding: 10px;
border: 1px solid #f0ced8;
background-color: #f5e4e9;
}

#sidebar-wrapper {
display: inline; /* fixes a strange ie margin bug */
float: right;
margin: 0 3px 0 0;
width: 269px;
color: $textColor;
line-height: 1.4em;
font-size: 90%;
background: url(http://www.blogblog.com/thisaway_rose/bg_sidebar.gif) repeat-x left top;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar {
padding: 7px 11px 0 14px;
background: url(http://www.blogblog.com/thisaway_rose/bg_sidebar_arrow.gif) repeat-y 179px 0;
}

#sidebar .widget {
margin-bottom: 20px;
}


#footer-wrapper {
padding-top: 15px;
background: url(http://www.blogblog.com/thisaway_rose/bg_footer_top.gif) no-repeat left top;
clear: both;
}

#footer {
background: #491525 url(http://www.blogblog.com/thisaway_rose/bg_footer.gif) repeat-x left top;
text-align: center;
min-height: 2em;
}

/* headings
----------------------------------------------- */

#header h1 {
margin: 0;
padding: 24px 0 0 84px;
background: url(http://www.blogblog.com/thisaway_rose/icon_header.gif) no-repeat 16px 26px;
}

h2.date-header {
margin: 0;
padding: 0 0 0 29px;
text-transform: uppercase;
color: $dateHeaderColor;
background: url(http://www.blogblog.com/thisaway_rose/icon_date.gif) no-repeat 13px 0;
font-size: 80%;
font-weight: normal;
}

.date-header span {
margin: 0 0 0 5px;
padding: 0 25px 0 25px;
background: url(http://www.blogblog.com/thisaway_rose/bg_date.gif) no-repeat 0 0;
}

.sidebar h2 {
padding: 1px 0 0 36px;
color: $sidebarHeaderColor;
background: url(http://www.blogblog.com/thisaway_rose/icon_sidebar_heading.gif) no-repeat 0 45%;
font: $headerFont;
}

.sidebar .Profile h2 {
color: #95526a;
background: url(http://www.blogblog.com/thisaway_rose/icon_sidebar_profileheading.gif) no-repeat 0 45%;
}

.post h3 {
margin: 13px 0 13px 0;
padding: 0;
color: $postTitleColor;
font-size: 140%;
}

.post h3 a, .post h3 a:visited {
color: $postTitleColor;
}

#comments h4 {
margin-top: 0;
font-size: 120%;
}


/* text
----------------------------------------------- */

#header h1 {
color: $blogTitleColor;
font: $pageTitleFont;
}

#header .description {
margin: 0;
padding: 7px 16px 0 84px;
color: $blogDescriptionColor;
font: $blogDescriptionFont;
}

.post-body p {
line-height: 1.4em;
/* Fix bug in IE5/Win with italics in posts */
margin: 0;
height: 1%;
overflow: visible;
}

.post-footer {
font-size: 80%;
color: $dateHeaderColor;
}

.uncustomized-post-template .post-footer {
text-align: right;
}

.uncustomized-post-template .post-footer .post-author,
.uncustomized-post-template .post-footer .post-timestamp {
display: block;
float: left;
text-align: left;
margin-right: 4px;
}

p.comment-author {
font-size: 83%;
}

.deleted-comment {
font-style:italic;
color:gray;
}

.comment-body p {
line-height: 1.4em;
}

.feed-links {
clear: both;
line-height: 2.5em;
margin-bottom: 0.5em;
margin-left: 29px;
}

#footer .widget {
margin: 0;
padding: 0 0 15px 55px;
color: #feeef3;
font-size: 90%;
line-height: 1.4em;
background: url(http://www.blogblog.com/thisaway_rose/icon_footer.gif) no-repeat 16px 0;
}


/* lists
----------------------------------------------- */

.post ul {
padding-left: 32px;
list-style-type: none;
line-height: 1.4em;
}

.post li {
padding: 0 0 4px 17px;
background: url(http://www.blogblog.com/thisaway_rose/icon_list_item.gif) no-repeat 0 3px;
}

#comments ul {
margin: 0;
padding: 0;
list-style-type: none;
}

#comments li {
padding: 0 0 1px 17px;
background: url(http://www.blogblog.com/thisaway_rose/icon_comment.gif) no-repeat 0 3px;
}

.sidebar ul {
padding: 0;
list-style-type: none;
line-height: 1.2em;
margin-left: 0;
}

.sidebar li {
padding: 0 0 4px 17px;
background: url(http://www.blogblog.com/thisaway_rose/icon_list_item.gif) no-repeat 0 3px;
}

#blog-pager-newer-link {
float: left;
margin-left: 29px;
}

#blog-pager-older-link {
float: right;
margin-right: 16px;
}

#blog-pager {
text-align: center;
}

/* links
----------------------------------------------- */
a {
color: $mainLinkColor;
font-weight: bold;
}

a:hover {
color: $mainVisitedLinkColor;
}

a.comment-link {
/* ie5.0/win doesn't apply padding to inline elements,
so we hide these two declarations from it */
background/* */:/**/url(http://www.blogblog.com/thisaway_rose/icon_comment.gif) no-repeat 0 45%;
padding-left: 14px;
}

html>body a.comment-link {
/* respecified, for ie5/mac's benefit */
background: url(http://www.blogblog.com/thisaway_rose/icon_comment.gif) no-repeat 0 45%;
padding-left: 14px;
}

.sidebar a {
color: $sidebarLinkColor;
}

.sidebar a:hover {
color: $sidebarVisitedLinkColor;
}


#header h1 a {
color: #feeef3;
text-decoration: none;
}

#header h1 a:hover {
color: #d9b4c1;
}

.post h3 a {
text-decoration: none;
}

a img {
border-width: 0;
}

.clear {
clear: both;
line-height: 0;
height: 0;
}

.profile-textblock {
clear: both;
margin-bottom: 10px;
margin-left: 0;
}

.profile-img {
float: left;
margin: 0 5px 5px 0;
padding: 3px;
border: 1px solid #ebbdcc;
}

.profile-link {
padding: 0 0 0 17px;
background: url(http://www.blogblog.com/thisaway_rose/icon_profile.gif) no-repeat 0 0;
}

/** Page structure tweaks for layout editor wireframe */

body#layout #main,
body#layout #sidebar {
padding: 0;
}
]]>

skip to main |
skip to sidebar

 

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 :) .