Barra lateral estática mas Look at Me (blog)

Hola mis retoños Lamento tanto la ausencia! aunque estoy de vacaciones de invierno tuve problemitas con el computador! bueno a lo que vine .-. Hoy les mostrare como dejar la barra lateral del blog sin movimientos es decir cuando bajas en el blog lo unico que se mueven son las entradas. Es un efecto muy visto en el tumblr pero poco visto en el blogger. un ejemplo es el blog de Joshua Peterson Bueno es algo parecido! Mostrare dos maneras de hacerlo. Para utilizar este tutorial debes de tener el área de las entradas separada de la columna lateral por lo tanto no funciona con la plantilla simple! pero si funciona con la plantilla travel (la que yo utilizo) y otras plantillas con la columna lateral separada. Este efectito es ideal para las personas que tienen pocos elementos en la barra lateral, pocos pero importantes. ATENCIÓN: Trabajaras con tu html y debes tener una copia guardada por si no funcione. Ve a editar html, preciona f3 y busca el codigo de tu barra lateral: si se encuentra del lado derecho: main-inner .column-right-outer Si se encuentra del lado izquierdo: main-inner .column-left-outer Todo lo que encuentres entre las } llaves deberás borrarlo y sustituirlo por: margin-top:-10px; margin-left: 550px; position:fixed; Debe quedarte asi: .main-inner .column-right-outer { margin-top:-10px; margin-left: 550px;position:fixed; } Debes de aumentar o disminuir los valores de: margin-top y margin-left: pues son los espacios de arriba y de la izquierda. cámbialos de acuerdo a tus gustos. si no encontraste los códigos puedes buscar: sidebar-wrapper y estre las llaves coloca el siguiente codigo: margin-top:-5px; margin-left: 640px; position:fixed; También debes disminuir o aumentar los valores de margin-top y margin-left Espero que os haya gustado mi consejo :D

Personalizar la data del blog + Backgrounds Tutorial

Hi! Hi! mis amores ^^, Hoy les traje un tuto super útil  he notado que esta bastante de moda personalizar la data con fondos coloridos así que cree un

tuto super sencillo y paso a paso para Dar un toquesito de orden y

diversión al blog anda animate y da click en lee mas.. 

    La data de la que les hablo es esta:

ves que bonita?   Tu puedes colocarle el fondo que desees,

asi que manos a la obra.. relajate.. preparate.. aqui vamos..

Ve a Diseño  Elementos de pagina y haz click en editar en el 

area de los post como muestra aqui:

Te saldrá como una cajita pequeña y en ella modifica la manera

en la que muestra la fecha de tu blog dejandola de esta manera

(hay que saber que la fecha cambia respecto al dia en que estes)

Guarda los cambios y ve a  Edición de HTML , presiona  F3 y busca:

h2.date-header {

 Estará mas o menos así:

Deberás borrar lo seleccionado en azul o lo que sea que este allí

(sin borrar la llave)

Y colocar en vez de eso esto:

margin-top: 3px; 

color: #ffffff;

float: top;

text-align: center;

background: url("Aqui el URL DE TU FONDO") repeat;

-webkit-border-radius: 5px 5px 0px 0px;

Debes de elegir el fondo que mas te guste y colocar su URL donde te pida el codigo de

arriba para que todo quede asi:

Remplaza con el URL visualiza y si todo esta en orden  guardalo!

Aqui les dejo algunos fonditos :

 

 

 

  

Tutorial:Columnas Duales Coloridas❤

 
Tu columna quedaría de esta manera dependiendo de los colores que elijas para ella:

Para ello precisas ir a DiseñoDiseñador de plantillasDiseño y:

Luego ve a  ajustar ancho y dejalo asi:

Guarda los cambios haciendo click en aplicar al blog! ahora haz click en  volver al blogger  edicion HTML  presiona f3 y busca esto si elegiste las columnas del lado derecho:

.main-inner .fauxcolumn-right-outer .fauxcolumn-inner {

y si las elegiste del lado izquierdo busca:

.main-inner .fauxcolumn-left-outer .fauxcolumn-inner {

 
Lo encontraras  algo asi:

 .main-inner .fauxcolumn-right-outer .fauxcolumn-inner {margin-right: $(content.padding);background:$(widget.outer.background.color) $(widget.outer.background.gradient) repeat scroll top left;}

Ahora sustituye lo que esta en rojo por:

 background: url("URL DE LA IMAGEM") repeat;

ahora donde dice URL DE LA IMAGEN reemplazalo por el url de el fondo de dos colores, yo hice algunas para ustedes:

Solo haz click derecho encima de la que deseas y presiona: copiar URL de la imagen para optener su URL. si quieres crear las tuyas hazlo y hospedalas en  http://photobucket.com/ u otro servidor

Tutorial:Letras Personales En La Barra Del Estado♥

Recuerdan que al ingresar a mi blog unas cuantas palabras de bienvenida

se movilizan en la barra de estado? para verlas ingresa Aqui! y para

aprender a hacerlo haz click en lee mas..

Como lo pueden ver aqui.. 

 

La verdad es muy sencillo de hacer..

debes ir a Diseño Añadir un Gadget   HTML/ Javascript 

y alli coloca:

<script type="text/javascript">
function tb8_makeArray(n){
this.length = n;
return this.length;
}
tb8_messages = new tb8_makeArray(3);
tb8_messages[0] = "Primer texto aqui";
tb8_messages[1] = "Segundo texto aqui";
tb8_messages[2] = "Tercer texto aqui";
tb8_rptType = 'infinite';
tb8_rptNbr = 5;
tb8_speed = 100;
tb8_delay = 2000;
var tb8_counter=1;
var tb8_currMsg=0;
var tb8_tekst ="";
var tb8_i=0;
var tb8_TID = null;
function tb8_pisi(){
tb8_tekst = tb8_tekst + tb8_messages[tb8_currMsg].substring(tb8_i, tb8_i+1);
document.title = tb8_tekst;
tb8_sp=tb8_speed;
tb8_i++;
if (tb8_i==tb8_messages[tb8_currMsg].length){
tb8_currMsg++; tb8_i=0; tb8_tekst="";tb8_sp=tb8_delay;
}
if (tb8_currMsg == tb8_messages.length){
if ((tb8_rptType == 'finite') && (tb8_counter==tb8_rptNbr)){
clearTimeout(tb8_TID);
return;
}
tb8_counter++;
tb8_currMsg = 0;
}
tb8_TID = setTimeout("tb8_pisi()", tb8_sp);
}
tb8_pisi()
</script>

Remplazan lo que les pide  que puede ser.. Bienvenido a mi blog o algo asi..y

 luego lo guardan.. no fue sencillo? :) espero les haya gustado..

Tutorial: Links Cutes En Tu Blog ♥

Hola mis cerecitas hoy les traigo un tuto super cute. les enseño a como colocar un fondito 

colorido en los links  como lo tengo yo aqui en el blog. así que sin mas preámbulos vamos a lo nuestro..

Es super simple y quedara muy mono en tu blog  para hacerlo ve a: mas opciones > plantilla> edicion de HTML> presiona f3 y busca:  ]]></b:skin>  encima de el coloca el siguiente codigo:

.post a:hover {background: url('URL DE LA IMAGEN');color: #4C4848;}

Reemplaza lo que esta en verde por el url de la imagen que elijas para el fondo. aqui les traje algunos temitas  para que saquen el url de ellos :

le dan click derecho y luego copiar url de la imagen y ya tienen el url <)