Bienvenido a VidaBlogger, un sitio dedicado a brindar Ayuda para Blogs.

Vas a poder encontrar trucos blogger, tutoriales y herramientas para blogs, aprenderás estrategias sobre SEO y posicionamiento web, y te daremos los mejores consejos para que lleves tu blog al máximo potencial!





6 may. 2010

Barra inferior personalizada

Barra inferior en tu blog

En Ayuda para Blogs nos encanta poder ofrecerte novedades a diario: plantillas blogger personalizadas, tutoriales, trucos, sugerencias etcétera.

Está en nosotros que tu blog sea cada día más vistoso y con mayor funcionalidad para tus lectores. En esta ocasión te presentamos la primera versión de nuestra barra inferior personalizable.

Hemos insertado en la barra una serie de botones útiles:
  • En la zona izquierda de la barra se encuentra nuestro link, no lo puedes borrar es la única condición que ponemos para que uses esta barra en tu sitio.
  • En el centro de la barra encontrarás los botones de cantidad de usuarios online, de suscripción al feed, para que te sigan en Twitter o para que puedan imprimir el contenido del blog.
  • Sobre el costado derecho hemos dejado limpio para que tu puedas insertar lo que te parezca, como por ejemplo publicidad: la venta de algún enlace bien vistoso o un banner (no muy alto height="24")
Para insertar esta barra deberás editar tu código html (haz una copia de seguridad antes) y antes de las etiquetas:
]]></b:skin> </head>
deberás insertar este código:

#taskbar{
height:25px;
width:100%;
margin:auto;

position: fixed;
bottom: 0;
z-index: 99;
}
#taskbar #container{
background-color:#E5E5E5;
border:1px solid #B5B5B5;
display:block;
margin-left:15px;
margin-right:15px;
height:25px;
}


/*------- blocks btns --------*/
#taskbar #container .block-left{
position:relative;
float: left;
width:10%;
height:25px;

border-right:1px solid #B5B5B5;
}
#taskbar #container .block-center{
position: relative;
float: left;
width: 50%;
height:25px;

border-right:1px solid #B5B5B5;
}
#taskbar #container .block-right{
position: relative;
float: left;
width: 25%;
height:25px;

border-right:1px solid #B5B5B5;
}
/*------- btns --------*/

#taskbar #container .btns{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
padding:3px;
display:inline-block;
vertical-align:middle;
line-height:14px;
}

#taskbar #container .btns:hover{
background-color:#F4F4F4;
cursor:pointer;
}

/* ---- align image -------*/
img.centered {
display: block;
margin-left: auto;
margin-right: auto;
}

img.alignright {
margin: 0 0 2px 5px;
display: inline;
}

img.alignleft {
margin: 0 5px 2px 0;
display: inline;
}

.alignright {
float: right;
}

.alignleft {
float: left;
}

Bien ahora buscas la etiqueta </body> e insertas este código:

<div id='taskbar'>
<!--Creado por Juan para Vida Blogger versión 1.0 - se permite su uso dejando el link inicial de Vida Blogger a forma de reconocimiento-->
<div id='container'>
<div class='block-left'>
<strong> <a class='btns' href='http://www.vidablogger.com.ar' title='Ayuda para Blogs'>Ayuda para Blogs</a></strong>
</div>

<div class='block-center'>

<script src='http://widgets.amung.us/classic.js' type='text/javascript'/><script type='text/javascript'>WAU_classic(&#39;fp0pgk72cozl&#39;)</script>
<a class='btns' href='http://www.vidablogger.com.ar/feed/'><img alt='Feed' class='alignleft' height='24' src='http://i44.tinypic.com/draxow.jpg' width='24'/>Suscríbete Gratis</a>
<a class='btns' href='http://www.twitter.com/vidablogger'><img alt='aplicacion' class='alignleft' src='http://i41.tinypic.com/sphn5e.jpg' height='24' width='24'/>Twitter</a>
<a class='btns' href='' onclick='Window.print();'>Imprimir</a>

</div>
<div class='block-right'>
<a class='btns' href='http://www.sitio.com'><img alt='publicidad' class='alignleft' height='24' src='http://i44.tinypic.com/draxow.jpg' width='24'/>Posible espacio publicitario</a>
</div>
</div>
</div>

Deberás modificar por el nombre de tu sitio, o el que corresponda, lo resaltado en rojo. Si tienes alguna sugerencia para añadirle a la barra, ¡dilo en los comentarios!

Si te ha gustado este post, no dudes en suscribirte al feed RSS de VidaBlogger - Ayuda para Blogs! para recibir todos los días la últimas novedades - (¿Que es RSS?)

0 comentarios :

Publicar un comentario

Lea las reglas:

Todos los comentarios serán leídos y moderados previamente.

Serán publicados aquellos comentarios que respeten las siguientes reglas:
- Su comentario debe estar relacionado al contenido del post.
- No se aceptan comentarios tipo SPAM.
- No incluya links No necesarios en el contenido de su comentario.
- Si quieres dejar la url de tu blog, hazlo utilizando la opción OpenID.
- La caja de comentarios no es el lugar para pedir intercambio de links (para ello ve a la página de contacto).
- Ofensan personales, amenazas o insultos NO serán permitidos.

OBS: Los comentarios de los lectores no reflejan las opiniones del blog.