Como Añadir Imagen de Fondo a Barra del Lado en Blogger

Hoy te mostrare en super trucos como añadir una imagen a la barra del lado en Blogger . Este es un sencillo procedimiento  que hara que tu blog luzca estilizado.Cuando añadimos una imagen o un color de fondo en la barra del lado hace que llame la atencion del lector o visitante,seria ademas una oportunidad de añadir una imagen publicitaria y ganar asi dinero.

Es muy sencillo solo sigue estos pasos.

Paso #1 Ve a Blogger selecciona Editar HTML

Entra en panel de blogger >>Plantilla >> Editar HTML .Importante que hagas una copia de seguridad o backup antes de continuar  Una vez estes en  Editar HTML , busca el siguiente codigo:

#sidebar-wrapper {

Nota: Podrias encontrar otras versiones del ID para el Sidebar o barra del lado tales como (#sidbar o #sidebar-right etc)

Ahora una vez hayas encontrado el codigo de CSS de arriba para sidebar, simplemente pega el siguiente codigo debajo de esta.

background-image:url(‘EL URL de Imagen de Fondo‘);
background-repeat: repeat;
background-attachment: scroll;
background-position: right top;}

  Asi una vez añadida, el codigo lucira o se vera asi:

 #sidebar-wrapper {
.algun otro codigo…
.
.
background-image:url(‘EL URL de Imagen de Fondo‘);
background-repeat: repeat;
background-attachment: scroll;
background-position: right top;
}

Luego simplemente reemplaza EL URL de Imagen de Fondo con el enlace de la imagen de fondo para la barra del lado. Puedes buscar imagenes de fondo para el sidebar o barra del lado en Google,Yahoo ,etc

Read More

Como Distintos Estilos De Lineas Al Borde De Tus Articulos De Blogger

Como Anadir Lineas a los bordes con estilo a tu blog realmente te ayudara a llmar atencion de los visitantes,muchos lectores estan interesados en los consejos para mejorar sus blogs y la apariencia de sus paginas,  y anadir bordes a el alrededor del articulo brinda esa impresion de profesionalismo , en este articulo te mostrare la forma de hacerlo y algunas de las formas de las lineas que puedes anadir a los border de tu articulo.

Empecemos :

1.Entre a la Interface de blogger

2.Da Click en "Nuevo Post"

3. En el editor de entradas da click  a Editar HTML

4. Copie y pegue el codigo del cuadro de abajo donde deseas,que aparezca.

Usa el codigo de abajo para un borde de linea solida

<div style="border-style: solid;">
<span style="color: black; display: inline ! important; float: none; font-family: Georgia,'Times New Roman','Bitstream Charter',Times,serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 19px; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;">
Gracias por Visitar Ciudadblogger.info
<span class="Apple-converted-space">&nbsp;</span></span></div>
 

Use  el codigo de abajo para un borde de linea doble .

<div style="border-style: double; border-width: 3px">
   Gracias por Visitar Ciudadblogger.info </div>

Use el codigo de abajo para un borde de linea en puntitos.

<div style="border-style: dotted">
    <span style="color: rgb(0, 0, 0); font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 19px; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; display: inline !important; float: none; ">Gracias por Visitar Ciudadblogger.info .<span class="Apple-converted-space">&nbsp;</span></span></div>

Use el codigo de abajo para decorar la linea de abajo del borde

<div style="border-style: inset; border-width: 3px">
    Gracias por Visitar Ciudadblogger.info </div>

Use el codigo de abajo para decorar la parte de arriba del borde

<div style="border-style: outset; border-width: 3px">
    Inset</div>

Use el codigo de abajo parauna linea de Ridge .

<div style="border-style: ridge">
    Gracias por visitar ciudadblogger.info</div>

Use el codigo de abajo para linea de borde Groove .

<div style="border-style: groove">

   Gracias por visitar ciudadblogger.info</div>

Use el codigo de abajo por linea de borde entrecortadas .

<div style="border-style: dashed">
   Gracias por visitar ciudadblogger.info</div>

Espero te sirva este articulo, gracias.

Read More