Homepage Super Trucos de Blogger: HTML

Mostrando las entradas con la etiqueta HTML. Mostrar todas las entradas

domingo, 30 de marzo de 2014

Como Añadir Bordes a Titulos de Articulos En Blogger

By andante77 12:19 p.m. Css, HTML, Templates, titulos blogger, tutoriales Leave a Comment

Añade Border al Tit Articulos En Blogger: En este tutorial de ciudad blogger estaremos jugando un poco con CSS para cambiar los bordes de articulos(Post) en Blogger.Tal vez habras notado que titulo de blog viene con "text-decoration:none" por defecto , en palabras sencillas no hay un estilo para los titulos de tus articulos en Blog. .

Chequea articulo como hacer rotar imagenes con css3

Pero no te preocupes podemos cambiar el titulo de los articulos y decorarlos con difrentes propiedades de CSS properties Ok aqui como aplicar el borde ! el cual puede ser "puntos" , "Solido" , "lineas" , ademas añadiremos color especifico y el numero de pixels.No te confundas es muy simple.

Como Añadir Borde a Titulo de Post (Articulos)

Entra en Blogger
Da Click en Plantilla
EDITAR HTML
Busca el siguiente codido post-title o .post o solamente "post"
Busca hasta que encuentres el selector "Post Title" como se muestra aqui abajo

Mira la imagen de arriba donde añadi la propiedad de borde Ejemplo: "border:groove 1px y color" Cambia estos valores por tu valores deseados y guarda la plantilla.Tambien puedes cambiar el color de el titulo de tus articulos o post simplemente cambiando el codigo de color o la propiedad de "COLOR" en el script.
No Obstante aqui he selecionado el color de borde Groove de color gris y un ancho 'width' de un 1pixel.
Eso es todo !!

Nota : En algunas Plantillas el Selector de POST TITLE es .post-title pero si no lo puedes encontrar o si el selector no estuviera disponible entonces deberas encontrar el selector exacto o igual ejemplo el selector que machea con la class o ID definido en las etiquetas de div !
Chequea Articulo Como Hacer Menu Iluminado con Css

Que sucede : Realmente este truco anadira un color gris al borde de todos los titulos de articulos de un 1 pixel de ancho ,esto hace que tu blog brille le doy 5 estrellas de elegancia y estilo a tu plantilla.Que lo disfrutes!

Como Mostrar Estado Tiempo En Blog De Blogger

By andante77 7:36 a.m. estado del tiempo, HTML, plantilla, scripts, tutoriales, Widget del Tiempo, widget del Weather forecast, widgets Leave a Comment

Hoy en Ciudad Blogger un widget del estado del tiempo para tu blog de Blogger pues creo que resultaria interesante para los visitantes. El widget del Weather forecast que muestra datos sobre el tiempo basado en el lugar o localizacion del visitante.En este post te mostrare como instalarlo en blog de blogger .

Chequea Articulo Añadir Efecto Luz en Blockquotes

Demostracion de este widget lo podras ver aqui.

Pasos para Instalar Widget de Pronostico Del Tiempo:

Paso 1:Entra en tu cuenta de blogger. Luego ve a Plantilla >> Editar HTML >> y busca por la siguiente etiqueta</ skin>, justo arriba de esta pega el siguiente codigo de CSS coding (puedes personalizar el codigo si asi lo deseas , pero estoy seguro que como esta es justo lo que necesitas).

 .MyWeatherDiv .centerContainer {

    width: 300px;

    text-align: left;

    margin-bottom: 200px;

}

.green {

    color: #a6e22d;

}

.teal {

    color: #66d9ef;

}

.purp {

    color: #ae81ff;

}

.pink {

    color: #f92772;

}

.yellow {

    color: #e6db74;

}

.white {

    color: #f8f8f2;

}

.grey {

    color: #616161;

}

.f12 {

    font-size: 12px;

}

.MyWeatherDiv img {

    height: 64px;

    width: 64px;

}

.weatherInfoRight {

    z-index: 999;

    position: fixed;

    top: 10px;

    right: 10px;

}

.weatherInfoLeft {

    z-index: 999;

    position: fixed;

    top: 10px;

    left: 10px;

}

.weatherInfoBottomRight {

    z-index: 999;

    position: fixed;

    bottom: 10px;

    right: 10px;

}

.weatherInfoBottomLeft {

    z-index: 999;

    position: fixed;

    bottom: 10px;

    left: 10px;

}

.MyWeatherDiv {

    display: none;

    background-color: #272822;

    padding: 5px;

    -webkit-border-radius: 10px;

    border-radius: 10px;

}

.MyWeatherInfo {

    text-align: center;

    font-family: 'Segoe UI',Tahoma,Helvetica,Sans-Serif;

    color: white;

    font-size: 14px;

}

#divMyImage {

    display: none;

}

.MyWeatherClose {

    font-family: 'Segoe UI',Tahoma,Helvetica,Sans-Serif;

    cursor: pointer;

    position: absolute;

    right: 10px;

    color: white;

    font-size: 20px;

}

.MWTemperature {

    display: block;

}

.MWPlace {

    display: block;

}

.MWIP {

    display: block;

}

#clear-day {

    display: none;

}

#clear-night {

    display: none;

}

#partly-cloudy-day {

    display: none;

}

#partly-cloudy-night {

    display: none;

}

#cloudy {

    display: none;

}

#rain {

    display: none;

}

#sleet {

    display: none;

}

#snow {

    display: none;

}

#wind {

    display: none;

}

#fog {

    display: none;

}

Paso2:Lo segundo que haremos es añadir el archivo de Javascript ( JavaScript file) que funciona de maravilla. Ahora dentro de la Plantilla de blogger busca por la etiqueta </head> y justo antes de la misma pega el siguiente Codigo de JS .

Chequea Articulo Como Añadir Pajarito Flash a tu blogger

(Te recomiendo que hospedes o alojes el script por ti mismo ya sea en Google Drive o en cualquier otro servicio debido a que nuestro script podria irse debido a la cantidad de bandwidth llena el hospedador del archivo).

 <script type="text/javascript" src="https://dl.dropboxusercontent.com/u/137869302/weather.js"></script>

Paso 3:Por ultimo, añade el siguiente archivo de estilo en javascript arriba o antes de la etiqueta </body> . Puedes cambiar la posicion de este gadget emplazando posicion: "right" (derecha) a left (Izquierda) o center (centro). Hay otras opciones para personalizarlo, cuales son utiles para machearlas con la configuracion de tu pagina o website.

 <script type="text/javascript">

$.MyWeather({

    position: "right",

    showpopup: true,

    temperature: "c",

    closeicon: true,

    showicon: true,

    showtemperature: true,

    showlocation: true,

    showip: true,

    size: 80,

    iconcolor: "white",

    fontcolor: "white",

}, function (e, f, g, a, d, b, c) {

    $("#txtCity").html(e);

    $("#txtCountry").html(f);

    $("#txtIP").html(g);

    $("#txtLatitude").html(a);

    $("#txtLongitude").html(d);

    $("#txtTemperature").html(b);

    $("#picTemp").attr("src", c)

});

</script>;

Espero que este tutorial te haya ayudado en aprender como mostrar un widget de estado del Tiempo (weather forecast) en tu blog de Blogger .

Como Añadir un Widget en la Cabecera En Blogger

By andante77 8:38 a.m. blogger tutoriales, Css, diseno, elementos html, HTML, tutoriales Leave a Comment

Como añadir un widget en la cabecera de pagina de blogger en la parte superior o cabecera del blog, uno de los formatos mas famoso es el anuncio de AdSense 468×60 – ejemplo:

Pero como añadir algo en la cabecera de blogger ,ya sea un anuncio de Adsense , una barra de busqueda, botones de social media o un widget? Pues sencillamente añadiendo una seccion en la cabecera. Primero que nada, añadir un espacio extra para acomodar el widget,para esto nuestra cabecera de blogger debe ser ampliada.
Ampliar la Cabecera de blogger
Paso1: Entrar en Panel de Blogger > Plantilla > Editar HTML y hacer una copia de seguridad o backup de tu plantilla
Paso 2: Da Click en cualquier area del codigo y abrir caja de busqueda usando teclas CTRL + F :

Paso 3: Buscar este pedazo de codigo:

/* Header
———————————————– */

Nota: Si no lo encuentras, busca solo por primera linea:

/* Header

Paso 4: Reemplacelo con este codigo:

/* Header
———————————————– */
.header-left{
display: inline-block;
height: 35px;
width: 350px;
float: left;
}
.header-right {
display:inline-block;
float:right;
}

Cambia los pixels en rojo por el alto y el ancho de la imagen de la cabecera de blogger y cambia float: left; por float: right;si deseas cambiar la posicion de tu logo.
Paso 5: Encuentra el siguiente codigo:

<b:section class=’header’ id=’header’ maxwidgets=’1′ showaddelement=’no’>

Paso 6: Reemplazalo con el siguiente codigo:

<b:section class=’header header-left’ id=’header’ maxwidgets=’1′ showaddelement=’no’>

Ahora “Preview” tu plantilla, notaras que el color de fondo de la cabecera de Blogger no es visible o no se encuentra. Para recuperarlo o reestablecerlo, necesitas añadir algunos codigos:
Paso 7. Encuentra el siguiente codigo:

</div>
</div>
<div class=’header-cap-bottom cap-bottom’>
<div class=’cap-left’/>

Paso 8. Ahora antes del codigo anterior, pega lo siguente:

<div style=’clear:both;’/>

Nota: Si no puedes hallar el codigo del paso 7, busca el siguiente en su lugar:

<b:include name=’description’/>
</div>
</b:if>
</b:includable>
</b:widget>
</b:section>

…y pega el codigo del paso 8 debajo de este.

Añadir una seccion extra para acomodar un gadget/widget a la Cabecera de Blogger
Let’s go one step forward and add an extra gadget section within Blogger header in new template designers.
Paso 9. Justo debajo del codigo del paso 8,pegue el siguiente codigo justo antes/arriba de este:

<b:section class=’header-right crosscol’ id=’header-right’ maxwidgets=’1′ showaddelement=’yes’/>

Paso 10. Ahora encuentra esta etiqueta:

]]></b:skin>

Paso 11. Pega arriba de ]]></b:skin> , este codigo de CSS :

.header-right {
display:inline-block;
float:right;
width:400px;
}

Cambia el ancho que esta marcado en color rojo.Aumenta o disminuye los pixels de acuerdo a tu necesidad y posicionamiento de la nueva seccion de la cabecera.
Paso 12. Guarda la Plantilla.
Paso 13. Luego todo lo que debes hacer es ir a Diseño y Añadir un Gadget a la nueva seccion de cabecera en Blogger.

Que te entretengas.

Barra de Navegacion Con Iconos Con Efecto Hover Para Blogger

By andante77 9:54 a.m. barra de navegacion, css3, css3 navegador, HTML, menus, tutoriales Leave a Comment

Diseñar una pagina web es un proceso de aprendizaje y en este articulo te mostrare como usar codigo Css3 especialmente una barra de navegacion con iconos con efecto hover sin la necesidad de usar JavaScript . El codigo de Css3 facilita el trabajo en la animacion de este.

Por otro lado la barra de Navigacion es importante para los bloggers. Podemos navegar cada pagina, categorias sin problemas.Hay beneficios al usar el codigo de Css3 en una barra de navegacion de Iconos con efecto hover,ayuda al visitante al navegar paginas importantes como contacto , Sobre Mi, Anuncios etc.

Chequea Articulo Añadir Menu Iluminado en Blogger

Para finalizar, es una barra de navegacion bastante elegante, lo que hara de tu pagina o blog uno mas elegante. Puedes darle un vistazo de demostracion en:http://fixcd.blogspot.com/

Para insertar este barra de navegacion de css3 solo sigue estos pasos:

1. Entra en tu cuenta de Blogger > Plantilla
2. Haga una copia de seguridad
3. Da Click en Editar HTML
4. Encuentre luego la etiqueta ]]></b:skin> y añade el codigo de abajo antes de ]]></b:skin>

/* El Codigo CSS del menu empieza aqui ciudadblogger */ #super-nav {margin: 100px auto;list-style: none;width: 632px;height: 87px;overflow-y: hidden;}
#super-nav li {float: left;}
#super-nav li a {display: block;color: white;width: 120px;height: 61px;margin-top: 24px;text-decoration: none;text-align: center;border-top: 1px solid #bbb;border-bottom: 1px solid #555;}
#super-nav li a span.aname {font: bold 17px/61px "Arial";color: #fff;text-transform: uppercase;cursor: pointer;position: relative;top: 0;transition: top .5s ease;text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);}
#super-nav li a img {position: relative;top: 0;transition: top .5s ease;}
#super-nav li a:hover {cursor: pointer;}
#super-nav li a:hover img {top: -85px;}
#super-nav li a:hover .aname {top: 85px;}
#super-nav li:nth-child(1) a {background: #3eb006;border-radius: 5px 0 0 5px;border-left: 1px solid #bbb;}
#super-nav li:nth-child(2) a {background: #9bc704;}
#super-nav li:nth-child(3) a {background: #0dc3ff;}
#super-nav li:nth-child(4) a {background: #51a2ec;}
#super-nav li:nth-child(5) a {background: #6e3cab;border-radius: 0 5px 5px 0;border-right: 1px solid #555;}

5. Entra en blogger y da click en Diseño
6. Da Click Añadir un Gadget y selecciona 'HTML/Javascript'
7. Pegue el codigo de abajo.

<div id="super-nav">
<li> <a href="#"><span class="aname">Home</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsB1apIak3JrhSxw0i6gfnBdMgr5D_Vom58-5A-NMFX4tD9CjOH5eQHJqLNyQTJzLnbBPkcYEzQu1-BaPfS66TY2cwigI4kEGKiF7a9acjt1p8AhPWCVNWux_K8MXG_2LBogfL02JxCDc/s1600/btrix-home.png" /> </a> </li>
<li> <a href="#"> <span class="aname">Download</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLrW2pIaJx76z2no8fnuDXZNesJm59X5AgUmOeZD8dAGfK5ZJyDis2_CNxthhicdKgWTjyjgDsXIhzhgMkiXk6BX64V5U3009oW2Zm-kH_jAQxLD3TqIjzbrD7kECBXEv-TVIXIm6eZt4/s1600/btrix-download.png" /> </a> </li>
<li> <a href="#"> <span class="aname"> MySql</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKew9uXtbYH2v7_J8DK-ofPFskYOpYm7nG4xIpRCT5qark4PUmKk2epICgNCeb4vbCaC4Ih3Eaepwm5k3bKuaQ1gzFK8nmqOKry_PYF_CwKzWXTfXi6d__sNB25SP4RPJZKp7FBd51fTE/s1600/btrix-mysql.png" /> </a> </li>
<li> <a href="#"> <span class="aname"> Html</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1_GflT_Om5L1O-9PPlsAdoMNhbFz8wuRx8qY0uIzwb8oTnLe8k8Miwk_2xaoFgZ6-xTdSXvWTmYa8500PWiiQPo7H5StZGKF_F9N36gFSDBH14XWa-NgDanRqE7xcOgt_k_pfQgoziD0/s1600/Btrix-html.png" /> </a> </li>
<li> <a href="#"> <span class="aname">Contact</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxd8BWMlP_MnE3On-et8Mj58qMiz0H_d9DPtiAV3MsFBJrOAJwv8mAezCwV67-lYWKnX2hOZsKpZqaBA8vFwOUqYADEeOjrY3r4gvCprZAutiIgJ5ZmC4POdVhSl3Aex0AiynCyBR7Ql8/s1600/btrix-contact.png" /> </a> </li> </div>

Reemplace # con tus enlaces.

8. Ahora guarda tu HTML/Javascript'.

Todo listo.

Como Añadir Una Linea Divisoria Entre las Entradas En Blogger

By andante77 11:21 a.m. Blogger (service), Css, diseño, HTML, imagenes, tutoriales Leave a Comment

En el dia de hoy te traigo otro interesante super truco para tu blog de Blogger titulado Como Añadir una Linea Divisoria Entre las Entradas.Añadiendo unj divisor entre los articulos no es nada mas que añadir una imagen cual clarifica tu articulo .

Divide los post facilmente.Realmente por defecto la plantilla Blogger tiene una Linea la cual divide el articulo pero no tiene ese atractivo especial. Pero si deseas hacerlo atractivo y creativo sigue estos pasos.

Chequea Como Añadir Efecto Nieve en Blogger

Lo primero que debes hacer es encontrar una imagen que desees utilizar como divisor divider Ejemplo la siguiente imagen .

Puedes hospedar tu imagen de divisoria en cualquier hospedador tales como tinpic o Photo Bucket etc.

Como Añadir Linea Divisoria Entre Entradas en Blogger

Entra cuenta de Blogger >> Plantilla >> Editar HTML
Busque el siguiente codigo

.post { margin:.5em 0 1.5em; border-bottom:1px dotted $bordercolor; padding-bottom:1.5em; }

Luego Reemplace el codigo de arriba con el Script de abajo y si estas interesado en Cambiar la imagen divisoria solo cambia la URL y siga este paso.

.post {
background: url(http://i36.tinypic.com/xqid55.jpg);
background-repeat: no-repeat;
background-position: bottom center;
margin:.5em 0 1.5em;
border-bottom:0px dotted $bordercolor;
padding-bottom:3.6em;
}

Reemplace la URL roja mencionada arriba con tu propia URL imagen divisoria
Si deseas cambiar el "Padding-Bottom" aumenta o baja el valor que esta en Bold Script negro.(padding-bottom:3.6em).

El 2nd Metodo para Añadir un Divisor entre entradas en Blogger

Si el metodo de arriba no trabaja en tu Plantilla,entonces utiliza este metodo el cual es facilisimo.

Entra en tu cuenta Blogger
Da Click en Plantilla
Editar HTML
Ahora busca el Script de abajo

<div class='post-footer-line post-footer-line-3'/>

Luego Copie el Script de abajo y añadelo arriba del Script de arriba

<center><img height='30' src='Url de Imagen Divisoria'/></center>

Nota:- Si deseas aumentar la altura del divisor Divider cambia el 30 por el valor deseado,y Añade la Url de Imagen Divisoria en el codigo y Listo!

Sin duda este es un super truco excelente,ideal para bloggers ,de seguro ayudara al lector a navegar el contenido de tu blog facilmente.
Chequea Articulo Como Añadir Descarga Lenta de Imagenes en Blogger

Atractivo Texto Anunciate Aquí con Efecto Hover en blogger

By andante77 9:38 a.m. Anuncios en blogger, banners, Css, HTML, JavaScript, tutoriales, widgets Leave a Comment

Te mostrare como añadir un Atractivo Texto Anunciate Aquí con Efecto Hover en blogger: Mantener a los afiliados y vendedores de enlaces atentos a un diseño llamativo.A los Visitantes les gusta mucho la creatividad y la genialidad de cualquier cosa en la Web , es un problema común en estos día para algunos blogeros que ponen anuncios aburridos.

Esta relación, ayudara a agregar un estilo significativo de Publicidad de un Banner que sin duda le ayudará a conseguir un poco de generosidad de los visitantes y obtendrá una gran cantidad de posibilidades de obtener publicidad de diferentes empresas.

Ejemplo:

⇝ Aqui un espacio disponible.
Contacte αdмїη para mas informacion⇜

Como Añadir un Atractivo texto" Anunciate Aqui" con efecto Hover

Entra en tu cuenta Blogger .
Da Click en Diseño
Da Click Añadir un Widget en la barra de la derecha
Un Cuadro emergente abrira
Selecciona HTML/JavaScript
Copia el Script de abajo y pegalo en el espacio provisto.

<style>#text{-moz-transform:rotate(-5deg);-o-transform:rotate(-5deg);-webkit-transform:rotate(-5deg);color:#FFF!important;font-family:arial;font-size:60px;font-weight:300;letter-spacing:-5.5px;line-height:45px;text-align:center;margin:20px 10px}#text a{color:#333;text-shadow:1px 1px #000, 3px 3px #EEEEEE, 5px 5px #DDDDDD, 7px 7px #AAAAAA, -1px -1px #000;text-transform:lowercase;-moz-transition:all .3s ease-in 0;-webkit-transition:all .3s ease-in 0;-o-transition:all .3s ease-in 0;-kmoz-transition:all .3s ease-in 0}#text a:hover{-moz-transition:all .3s ease-in 0;-webkit-transition:all .3s ease-in 0;-o-transition:all .3s ease-in 0;-kmoz-transition:all .3s ease-in 0;text-shadow:1px 1px #000, 3px 3px #EEEEEE, 5px 5px #DDDDDD, 7px 100px transparent, -1px -100px transparent;color:transparent}inf{color:#d2a}#text a:focus,#text a:active{color:#eee!important;-moz-transition:all 0 ease-in-out!important;-o-transition:all 0 ease-in-out!important;-kmoz-transition:all 0 ease-in-out!important;-webkit-transition:all 0 ease-in-out!important}</style><br />
<div class="rent" id="text">
<a href="http://www.blogger.com/URL" target="blank"><blink>⇝</blink> Aqui un espacio disponible.<br />Contacte <inf>αdмїη para mas informacion</inf><blink>⇜</blink></a></div>

Note: Cambia la "URL" por el enlace de la pagina donde deseas redirigir a los visitantes cuando den click al anuncio.Ahora presione Guardar html/javascript y eso es todo!

Como Encuadernar las Articulos Separadamente En Blogger

By andante77 8:42 a.m. Css, diseño css, HTML, super truco blogger, trucos css, tutoriales Leave a Comment

Te mostrare como encuadernar los articulos separadamente en blogger podras notar que en la mayoria de las plantillas ,los articulos no estan encuadernadas separadamente Realmente este truco puede ser aplicado usando CSS.

Aplicar este super truco mostrara un cuadro separado que cuando el visitante o lector apunte el mouse sobre el borde este cambiara de color .
Para aplicar este truco siga estos simples pasos:

Como Añadir un Cuadro Separado a cada entrada en blogger

Entra en tu cuenta de Blogger.com
Da Click en Plantilla
Luego da Click en Editar Html
Ahora Copia el codigo de abajo y pegalo antes de la siguiente etiqueta </b:skin>.

.post { background:#FFFFFF; border: 2px solid #000000; padding-right:7px; padding-left:7px; } .post:hover { border: 2px solid #FF0000; } .post:active { border: 2px solid #0004FF; }

Eso es todo ahora chequea tu blog en vivo.
Nota:Para Personalizarlo :-Si te interesa cambiar los colores por ejemplo para cambiar el color de fondo entonces reemplaza #FFFFFF con el codigo de color que desees,.Y si deseas cambiar el color del Borde entonces cambia #000000 #FF0000 #0004FF con el codigo de color que desees.

Atractiva Barra de Menu Vertical Para Blog De Blogger

By andante77 9:54 a.m. barra de navegacion, barra de navegacion vertical, Css, HTML, tutoriales, widgets Leave a Comment

Es fundamental añadir una barra de navegacion a cada sitio web o blog de blogger.Este widget se utiliza como ya hemos visto anterirmente para enlazar las paginas principales.Siendo asi de gran ayuda para los visitantes de tu pagina ,facilita la navegacion de tu sitio,los temas asociados y articulos concernientes.
Si a todo esto le añadimos una barra de menu que sea bien diseñada y atractiva claramente llamara la atencion y mas tiempo un lector estara en tu sitio para saber de los temas que incluye el mismo.

Barra Menu vertical para blog de blogger

Pues hoy te explicare como añadir una barra de menu vertical a tu blog.
Para ver ejemplo da click Demo
1. Entra en cuenta de blogger

2.Selecciona Plantilla

3. Ahora veras en blog en vivo , dale Click en boton EDITAR HTML"

5. Encuentra esta etiqueta ]]></b:skin> usando Ctrl+F

6. Pega el codigo de abajo antes de etiqueta ]]></b:skin>

/* El Codigo CSS para el menu comienza aqui ciudadblogger.info */

ul.svertical{
width: 200px; /* width of menu */
overflow: auto;
background:white;/* background of menu */
margin: 0;
padding: 0;
padding-top: 7px; /* top padding */
list-style-type: none;
}

ul.svertical li{
text-align: right; /* right align menu links */
}
ul.svertical li a{
position: relative;
display: inline-block;
text-indent: 5px;
overflow: hidden;
background:#35BEFF; /* initial background color of links */
font: bold 16px Germand;
text-decoration: none;
padding: 5px;
margin-bottom: 7px; /* spacing between links */
color: black;
-moz-box-shadow: inset -7px 0 5px rgba(114,114,114, 0.8); /* inner right shadow added to each link */
-webkit-box-shadow: inset -7px 0 5px rgba(114,114,114, 0.8);
box-shadow: inset -7px 0 5px rgba(114,114,114, 0.8);
-moz-transition: all 0.2s ease-in-out; /* CSS3 transition of hover properties */
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
ul.svertical li a:hover{
padding-right: 30px; /* add right padding to expand link horizontally to the left */
color: black;
background: #0B55F1;
-moz-box-shadow: inset -3px 0 2px rgba(114,114,114, 0.8); /* contract inner right shadow */
-webkit-box-shadow: inset -3px 0 5px rgba(114,114,114, 0.8);
box-shadow: inset -3px 0 5px rgba(114,114,114, 0.8);
}
ul.svertical li a:before{ /* CSS generated content: slanted right edge */
content: "";
position: absolute;
left: 0;
top: 0;
border-style: solid;
border-width: 70px 0 0 20px; /* Play around with 1st and 4th value to change slant degree */
border-color: transparent transparent transparent white; /* change black to match the background color of the menu UL */
}

7. Entra en blogger y da click en Diseño

8. Da Click Añadir un Gadget y selecciona 'HTML/Javascript

9. Pega el codigo de abajo.

<ul class="svertical">
<li><a href="http://www.ciudadblogger.info/">Home</a></li>
<li><a href="http://www.ciudadblogger.info/">CSS </a></li>
<li><a href="http://www.ciudadblogger.info/">JavaScript </a></li>
<li><a href="http://www.ciudadblogger.info/">HTML</a></li>
<li><a href="http://www.ciudadblogger.info/">Trucos</a></li>
<li><a href="http://www.ciudadblogger.info/">Tutoriales</a></li>
</ul>

10. Ahora Guarda HTML/Javascript'.

Listo..

Añadir Menu Sprite En blog de Blogger

By andante77 7:36 a.m. blogger menu, HTML, Menu bar, menu sprite, tutoriales Leave a Comment

En este tutorial te incluire una variedad de atractivos estilizados menu sprite,estos trabajan perfectamente con navegadores conocidos como Firefox 3.5, IE 7, Chrome 3.0 y Opera 9.02
Muy elegante en su diseño y en cuatro maneras que hara de tu blog uno mas apelativo y profesional. La caracteristica de estos es que son facil de añadir a blog de blogger.

Solo sigue estos simples pasos.

1. Entra en tu cuenta de blogger > Diseño >> Editar HTML

2.Encuentra este codigo usando Ctrl+F <div id='content-wrapper'>

4. Copie y pegue el codigo de abajo antes de <div id='content-wrapper'>

<div class="ciudadblogger-navi1">
  <ul>
    <li class="sm1"><a href="#"></a></li>
    <li class="sm2"><a href="#"></a></li>
    <li class="sm3"><a href="#"></a></li>
    <li class="sm4"><a href="#"></a></li>
    <li class="sm5"><a href="http://www.ciudadblogger.info/"></a></li>
  </ul>
</div>

*Reemplace # con tu URL

5. Encuentra la siguiente etiqueta ]]></b:skin> usando Ctrl+F

6. Pegue el codigo de abajo antes de la etiqueta ]]></b:skin> (escoge el estilo que te guste.)

Estilo 1

/*menubar ciudadblogger.info */
.ciudadblogger-navi1 {
    display:block;
    height:72px;
    margin:30px auto;
    position:relative;
    width:525px; }
.ciudadblogger-navi1 ul {
    float:none;
    list-style-image:none;
    list-style-type:none;
    margin:3px 0; }
.ciudadblogger-navi1 ul li {
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_h0qk4XxhQZ6zVxKdUVR6dljWSUMwcwWRwWnxnyuna3P25pChL0RjBCS9eZeQ7B5UIA4Rp9xW32eoEmo-MONMI0koQHsv4tMM9Bl75VUvOq4ffj6pSYcmn7CWPdRayRPhpetRivIgQsA/s1600/bloggertrix.com-tab-1.png);
    background-repeat:no-repeat;
    float:left;
    height:72px;
    margin:0px;
    padding-top:5px;
    position:absolute; }
.ciudadblogger-navi1 ul li a {
    display:block;
    height:100%;
    width:100%; }
.ciudadblogger-navi1 ul li.sm1 {
    background-position:0 0;
    left:0px;
    width:125px; }
.ciudadblogger-navi1 ul li.sm2 {
    background-position:-125px 0;
    left:100px;
    width:124px; }
.ciudadblogger-navi1 ul li.sm3 {
    background-position:-249px 0;
    left:200px;
    width:124px; }
.ciudadblogger-navi1 ul li.sm4 {
    background-position:-373px 0;
    left:300px;
    width:125px; }
.ciudadblogger-navi1 ul li.sm5 {
    background-position:-498px 0;
    left:400px;
    width:126px; }
.ciudadblogger-navi1 ul li:hover {
    z-index:1000; }
.ciudadblogger-navi1 ul li.sm1:hover {
    background-position:0 -75px; }
.ciudadblogger-navi1 ul li.sm2:hover {
    background-position:-125px -75px; }
.ciudadblogger-navi1 ul li.sm3:hover {
    background-position:-249px -75px; }
.ciudadblogger-navi1 ul li.sm4:hover {
    background-position:-373px -75px; }
.ciudadblogger-navi1 ul li.sm5:hover {
    background-position:-498px -75px; }
/*menubar por ciudadblogger.info */

Estilo 2

/*menubar ciudadblogger.info */
.ciudadblogger-navi1 {
    display:block;
    height:72px;
    margin:30px auto;
    position:relative;
    width:525px; }
.ciudadblogger-navi1 ul {
    float:none;
    list-style-image:none;
    list-style-type:none;
    margin:3px 0; }
.ciudadblogger-navi1 ul li {
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ9nN4YRacJ5RFilfNLasZk68MjhsZgjYjFvnfrZKfkVPmtxTDSdGsUZj5d6SJcD7opqw42pR2xtSe8q0aUvQLCYqHYHgzbhqkfXIabZHgtPj8Iv5DwuFCMJCbF0MHWwylvgPITLSazNo/s1600/tab-2.png);
    background-repeat:no-repeat;
    float:left;
    height:72px;
    margin:0px;
    padding-top:5px;
    position:absolute; }
.ciudadblogger-navi1 ul li a {
    display:block;
    height:100%;
    width:100%; }
.ciudadblogger-navi1 ul li.sm1 {
    background-position:0 0;
    left:0px;
    width:125px; }
.ciudadblogger-navi1 ul li.sm2 {
    background-position:-125px 0;
    left:100px;
    width:124px; }
.ciudadblogger-navi1 ul li.sm3 {
    background-position:-249px 0;
    left:200px;
    width:124px; }
.ciudadblogger-navi1 ul li.sm4 {
    background-position:-373px 0;
    left:300px;
    width:125px; }
.ciudadblogger-navi1 ul li.sm5 {
    background-position:-498px 0;
    left:400px;
    width:126px; }
.ciudadblogger-navi1 ul li:hover {
    z-index:1000; }
.ciudadblogger-navi1 ul li.sm1:hover {
    background-position:0 -75px; }
.ciudadblogger-navi1 ul li.sm2:hover {
    background-position:-125px -75px; }
.ciudadblogger-navi1 ul li.sm3:hover {
    background-position:-249px -75px; }
.ciudadblogger-navi1 ul li.sm4:hover {
    background-position:-373px -75px; }
.ciudadblogger-navi1 ul li.sm5:hover {
    background-position:-498px -75px; }
/*menubar ciudadblogger.info */

7. Para finalizar guarda la plantilla y listo.

Añade Widget Back to Top en Blog de Blogger

By andante77 10:58 a.m. back to top, blogger, HTML, tutoriales, widgets Leave a Comment

En este articulo te dejare unos botones de De Vuelta arriba (^) – podran haberlo visto en mi blog como el muchisimas sitios web una flecha en la parte de abajo de la pagina que cuando es presionada o das click en la misma te retorna al comienzo de la pagina. Esto es de gran utilidad al lector o visitante.

Por lo regular tendrias que darle a la barra para subir o bajar tomandote tiempo para llegar a la parte superior es la razon por la cual la gran matoria de sitios en la web lo utilizan.

Como Añadir el boton de Vuelta a la Parte Superior en blogger

Es muy sencillo añadir este boton en blogger solo sigue estos simples pasos-
1.Entra en tu cuenta de blogger
2.Selecciona el blog donde deseas Añadir el Widget
3.Ve a la opcion de Diseño
4. En la opcion de diseño escoje añadir un gadget (mira la imagen)

5.Despues de seleccionar Añadir un Gadget una ventana se abrira ( Ventana de Añadir un Gadget window ) (ver imagenes).

6. Luego selecciona el gadget “HTML/JavaScript”
Despues copia cualquiera de los codigos de abajo que desees añadir en tu blog y pegalo en caja de contenido de HTML/JAVA Script

Estilo 1

Codigo HTML para Estilo 2

<div style="position: fixed; z-index: 65535; right: 10px; bottom: 10px;">
<!—www.ciudadblogger.info-- >
<a href='#Top' title='Gp to Top'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7l3WYwpZUP0KQncNIzGLufgXjkyXBuUHWNayMvqZIT6aIT3ZOLYAxkVZ6TaFcZwwr0riJe1ud081dMhyphenhyphen5bXaHXeVJbbzj0DL_H0uAGdKil_240zExMfcFaMp4RXq_dxEnWB6bAVwv_tU/s1600/go+to+top+button.gif'alt=”go" to top image” /></a>
<!—www.ciudadblogger.info-- >

Estilo 2

Codigo HTML para Estilo 2

<div style="position: fixed; z-index: 65535; right: 10px; bottom: 10px;">
<!—www.ciudadblogger.info-- >
<a href='#Top' title='Gp to Top'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnkMYyGyZPcuLsGzcOC3AUzpltj1cz01wCxwsFru3OB51cW-jGzwBJGjnP6nJN2SdeYf1z54FsnSssnLSCxg4rtF3HlPQtgXncVmVdwXXZN0EWBZAU640zIuLygpvVsBQhTQZxhjyohQg/s1600/up+arrow+image.png'alt=”go" to top image” /></a>
<!—www.ciudadblogger.info-- >

Estilo 3

Codigo HTML para Estilo 3

<div style="position: fixed; z-index: 65535; right: 10px; bottom: 10px;">
<!—www.ciudadblogger.info-- >
<a href='#Top' title='Gp to Top'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEOqDzLH1OoTAJlk20fhD1w1hZ91IfWb5SL34NJsu_QmSIm5YOWiuwetwghTlRBV6sf4SbiSlt4XtXXCn6z7ipmGQ7vviDhBdrbjTubt28_TxWFsR4Cx9xbi0tWOvFtRFulzGdye4MjLI/s1600/go+to+top+button.jpg'alt=”go" to top image” /></a>
<!—www.ciudadblogger.info-- >

Nota:Puedes reemplazar "right" a "left" si deseas mostrar el boton al lado izquierdo.

Para finalizar guarda tu html/java y todo esta listo para utilizar el boton de regreso a tope de la pagina en tu blog de blogger.

Widget de Suscripcion Social Media Estilo Wordpress Para Blogger

By andante77 11:16 a.m. blogger diseño, Css, gadgets, HTML, Social media, suscriptores, widgets Leave a Comment

Los Widgets de Social Media son bastantes certeros y una forma interesante de mantener a los vistantes del blog queriendo ver o leer,o saber mas de las cosas de tu blog..He publicado el widget de suscripcion social media con barra de busqueda chequea el area de widgets de segura encontraras variedades.

Este widget incluye una imagen con efecto hover que le brinda un atractivo especial.Pero lo principal de este widget es que muestra el numero de suscriptores y puedes actualizar el numero cuando asi lo desees solo cambiando el numero.

La instalacion de este widget es sumamente facil solo copie y pegue el codigo,y actualiza el numero de
tus seguidores.
Como añadir este Gadget a tu Blogger?

1. Entra a la cuenta de Blogger > Diseño> Añadir un Gadget > HTML/Javascript.
2. Pega el codigo de abajo y guardalo.

<style> 
.rss-hb {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTjBz5Xogm6ffJpdTJ4Eq7g_aWAfRW4GXPJC2qmsFBSYtns5Hq2xPRvp4FOaaRLVOcFB-duJluyep4QkwbdbIYRWr-UKw6k3C-p_pATzbr7GrJqdc4vgZSBi0SQAL905zsx1KgrHwIcdQ/s1600/rss+sepia.png) no-repeat;
    height: 64px;
    padding: 0px 20px 0px 80px;
    margin-top: 5px;
}

.rss-hb:hover {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOXzppOmry7W4NHcIHLGVUwPBZJRJV4kePUNLU-HrxqZnBgK8WuZ7zVh4IThWLRcqd2DHpPikVq_gAu8iPoOE-MV6SxRMrg0tfXNyMDw_4JSzL5BTe52TuhagL_KwgVhoSB76tbpWST7c/s1600/rss.png) no-repeat;
}

.twitter-hb {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhH0gwdnscs9-7Tej-Ah6OWT4qK_6n5uqCRZrT_VfJgWb_vt7B_Z12bgTCcS21ioJs3wNb96GvdD8icP9qF8usJC8dQhtTAfAM8mL_TkW7rTDsLUxt8e9D0bs7yxMTda4YtRzkgvKHf9HY/s1600/twitter.png) no-repeat;
    height: 64px;
    padding: 0px 20px 0px 80px;
    margin-top: 10px;
}

.twitter-hb:hover {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPKzascz3pc8wVjOa48qVp5z-dQ2okOxhY7wTh2fxx6g1W8pX2NCYb8Wt2vHFV6FxvsTUojcI7f3GUjXDTdHnfvIMLW5L3C0kOyiVyBtke_g43AV9yYlt9ZerbR8iRzRf4j6xacNyjuNg/s1600/twitter.png) no-repeat;
}

.facebook-hb {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNhlAYnOj5W95RYVbv4KGYqMp_dpho3kVZE_5460969GzYyqwWXvZKC3n6e3j5ibRKwF1fcubuZVCzlsO8ZPfw9pv3bNhL7zA8NVpbk9ToD7d2fqpZY9Mpgcf_Ba5PK79kXY_9nMB3Flg/s1600/fb+sepia.png) no-repeat;
    height: 64px;
    padding: 0px 20px 0px 80px;
    margin-top: 10px;
}

.facebook-hb:hover {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgUbz_2mHc6axtxJ3Mn-PV4pMHC_5fFdu_X-ok8gD3W9uEXc5QszFi7kQB7KRzMVkfn9VeAHk6NtoSAu9mjBiw4fhdEG5IEN-q49FhPRHRr8XmCVm3_BBuKWfBn5Jy6HhPhATus3Tduwk/s1600/facebook-logo.png) no-repeat;
}

.follower-rss, .follower-twitter, .follower-facebook {
    font-family: Georgia,  sans-serif, Times;
    font-size: 1.5em;
    font-style: italic;
    color: #D3C5B1;
    padding-top: 05px;
    text-shadow: 1px 1px #B2A99D;
}

.follower-rss a, .follower-twitter a, .follower-facebook a {
    color: #AA9C89;
}

.follower-rss span {
    font-size: 2.2em;
    font-weight: bold;
    font-style: italic;
}

.follower-twitter span {
    font-size: 1.9em;
    font-weight: bold;
    font-style: italic;
}

.follower-facebook span {
    font-size: 1.9em;
    font-weight: bold;
    font-style: italic;
} 

</style> 

<div class='rss-hb'>
    <div class='follower-rss'>
        <span>
            <a href='http://feeds.feedburner.com/supertrucosdeblogger'>33</a>
        </span>loyal readers</div>
</div>
<div class='twitter-hb'>
    <div class='follower-twitter'>
        <span>
            <a href='http://twitter.com/andante772' rel="nofollow">270</a>
        </span>followers</div>
</div>
<div class='facebook-hb'>
    <div class='follower-facebook'>
        <span>
            <a href='http://www.facebook.com/ciudadblogger'>63</a>
        </span>fans</div>
</div>

Ahora reemplace http://feeds.feedburner.com/supertrucosdeblogger con tu URL de feedburner y reemplace el numero 33 con el numero de suscriptores de RSS (resaltado en Rojo )

Reemplace http://twitter.com/andante772 con tu URL de twitter y reemplace el numero 270 con el numero de seguidores. (resaltado en color i verde )

Reemplace http://www.facebook.com/ciudadblogger con tu URLde pagina de facebook y reemplace el numero 63 con el numero de fanaticos. (resaltado en color in Amarrillo )

Ahora guarda tu widget y todo esta finalizado.

Espero que este sencillo widget ayude en la belleza o diseño de tu blog.

Como Mostrar Imagen al Lado Del Titulo de Articulo en Blogger

By andante77 11:54 a.m. Css, HTML, imagen en blogger, Imagenes en articulos, tutoriales Leave a Comment

En este articulo te mostrare como añadir un foto de profile o logo de blog junto al titulo de el articulo en tu blog.Esto le da ese toque profesional a tu pagina de tu blogger.Ayuda definitivamente a construir un grupo de lectores, ganar confianza y reconocimiento.

Como Mostrar Imagen al Lado Del Titulo de Articulo

Cuando el visitante entra a tu blog,deben sentir que existe alguien detras de cada contenido de el articulo. Esto hace de tus articulos uno vivo y a todo color. Si añades una imagen de tu profile antes de el titulo del articulo sentiran la atraccion hacia ti y seguro se comunicaran contigo para cualquier pedidooretroalimentacion.Entonces veamos como añadir esa imagen o avatar antes del titulo de articulo en blogger.

Añadiendo Imagen Antes Titulo de Articulo

Solo sigue estos pasos:

Entra en tu cuenta de Blogger.
Ve a Plantilla >> Editar HTML
Haz una copia de tu plantilla. (Lea aqui: Como hacer Copia seguridad en blogger?)
Ahora presione Ctrl+F y busca .post h3 o .post h2
Encontraranaun codigo similar a esteÑ

.post h3 {
color: #7CA2C4;
font-size: 20px;
font-family: Arial, sans-serif;;
font-weight: normal;
margin: 0px;
padding: 0px 10px 0 47px;
}

Luego reemplace el codigo completo con el siguiente codigo

.post h3 {
background:url(Imagen URL) no-repeat top left;
color: #289728;
font-size: 20px;
font-family: Arial, sans-serif;;
font-weight: normal; height:45px;
margin: 0px;
padding: 0px 10px 0 47px;
line-height:1.1em;
}

Ahora reemplace Imagen URL con tu imagen o la icono URL.
Ahora da click en boton de Guardar Plantilla..
Listo!

Nota:
Use una imagen debajo de titulo de articulo de tamaño de 40px x 40px.Seria mejor si usaras una imagen con fondo blanco por que luce mas adecuado.

Como Añadir Widget de Anuncio Texto Personalizado En Blogger

By andante77 8:52 a.m. Anuncios en blogger, Css, Google AdSense, HTML, tutoriales, widgets Leave a Comment

En este articulo te mostrare como añadir un widget de Anuncio Cuadrado de Texto personalizado a tu blog de blogger.Muchos de nosotros hemos visto este tipo de anuncios parecidos a los de Anuncios de Google Adsense de texto en muchos sitios web o blogs en la red.

Lo particular de este widget es que puedes editar a tu gusto todo ejemplo los colores,el texto del titulo, la Descripcion, el proveedor del anuncio etc. etc. Digamos que tu vendes enlaces de texto en tu blog pues este widget te conviene.

Ejemplo:

Añadir este Widget

1.Entra en tu cuenta de blogger>Selecciona el blog > Diseño > A;adir un Widget >seleciona HTML/JavaScript. Pega el codigo de abajo en cuadro disponible.

<style>
#ads_ppc {text-align: left; width:280px; height:300px; padding:5px; margin:0px;border:1px solid #1a4d86}
</style>
<div id='ads_ppc'>
<a style="text-decoration: underline; padding: 15; font-size: 12px; color:blue;" href="http://www.tuenlaceaqui.com/" target="_blank" title="Tu Titulo"><strong>Nombre de Enlace Grande</strong></a><br />
<span style="font:11px verdana;">Tu Descripcion Aqui</span><br />
<a style="font-size: 9px;color:#b0130d;" href="http://www.rockingtemplates.com/" target="_blank" title="Titulo Enlace">Nombre Enlace Pequeño</a><br/><br/>

<a style="text-decoration: underline; padding: 15; font-size: 12px; color:blue;" href="http://www.tuenlacevaaqui.com/" target="_blank" title="YourTitle"><strong>Nombre Enlace Grande</strong></a><br />
<span style="font:11px verdana;">Tu Descripcion Aqui</span><br />
<a style="font-size: 9px;color:#b0130d;" href="http://www.rockingtemplates.com/" target="_blank" title="Titulo Enlace">Nombre Enlace Pequeño</a><br/><br/>

<a style="text-decoration: underline; padding: 15; font-size: 12px; color:blue;" href="http://www.tuenlace va aqui.com/" target="_blank" title="YourTitle"><strong>Nombre Enlace Grande</strong></a><br />
<span style="font:11px verdana;">Tu Descripcion Aqui</span><br />
<a style="font-size: 9px;color:#b0130d;" href="http://www.rockingtemplates.com/" target="_blank" title="Titulo Enlace">Nombre Enlace Pequeño</a><br/><br/>

<a style="text-decoration: none; padding: 15; font-size: 12px; float: right;color:#b0130d;" href="http://www.ciudadblogger.info/" target="_blank" title="Creators Link"><small>Anuncio por CBB</small></a><br />
</div>

Cambia los numeros en rojo segun el ancho de barra del lado. Cambia otras cosas como Enlaces, Titulo, Nombre de Enlace etc. con tu texto deseado.
Guarda el Widget y Guarda la Plantilla.

Todo listo. Ahora tu y tus visitantes podran ver este anuncio personalizado en tu blog de blogger.

Como Añadir Boton de Abrir/Cerrar En Blogger

By andante77 7:59 a.m. boton de Abrir y Cerrar en blogger, Css, HTML, tutoriales Leave a Comment

En el dia de hoy te mostrare como añadir un boton de Abrir/Cerrar a blogger. La idea es si tienes un archivo X escondido y para que el lector lo pueda ver debera dar click en el boton de Abrir/Cerrar. Este boton es de gran ayuda para proteger tu contenido de spammers, copiadores etc. Este boton esta hecho con los codigos de CSS y HTML.

Chequea Articulo Como Añadir el Widget Back to the Top

Tambien puedes cambiar el texto Abrir/Cerrar por el que te guste. Puedes esconder archivos tales como imagenes, codigos, archivos de audio, subir enlaces etc.con este boton. En este tutorial esta confeccionado con multiples elementos de CSS cuales recortaran las imagenes grandes. La demostracion esta aqui debajo.

Despues de haber añadido el HTML solo edite o añada tu contenido a esconder .

Añadiendo los codigos de HTML/CSS

Para añadir este boton a un articulo ve a la pestaña de HTML en el editor de Blogger y añade el codigo de abajo.

<div id="spoiler" style="display: none;">
Añadir Contenido Escondido Aqui
</div>
<button onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}" title="Click to show/hide" type="button">Abrir/Cerrar </button>
<br />

Configurar el boton

Cambie el texto Añadir Contenido Escondido Aqui con el contenido que deseas esconder con el boton Abrir/Cerrar .

Chequea Articulo Como Añadir Zoom Efect a las Imagenes

Cambie el texto Abrir/Cerrar con el texto que desees que aparezca en el boton.

Eso es todo. Todo esta listo Ahora tu contenido estara seguro para los lectores regulares.

domingo, 30 de marzo de 2014

Como Añadir Borde a Titulo de Post (Articulos)

martes, 25 de marzo de 2014

Pasos para Instalar Widget de Pronostico Del Tiempo:

sábado, 28 de diciembre de 2013

viernes, 4 de octubre de 2013

Para insertar este barra de navegacion de css3 solo sigue estos pasos:

jueves, 26 de septiembre de 2013

Como Añadir Linea Divisoria Entre Entradas en Blogger

El 2nd Metodo para Añadir un Divisor entre entradas en Blogger

martes, 24 de septiembre de 2013

Como Añadir un Atractivo texto" Anunciate Aqui" con efecto Hover

Como Añadir un Cuadro Separado a cada entrada en blogger

viernes, 20 de septiembre de 2013

jueves, 19 de septiembre de 2013

sábado, 14 de septiembre de 2013

viernes, 13 de septiembre de 2013

Añadiendo Imagen Antes Titulo de Articulo

jueves, 12 de septiembre de 2013

Añadir este Widget

Añadiendo los codigos de HTML/CSS

Configurar el boton

Search

Categorias

Popular Posts

Blogroll

Blog Archive