Barra Liviana de Menu De Navegacion AZUL

News Tickers

Search



jueves, 4 de julio de 2013

Barra de navegacion glossy para blogger

Pon este codigo de css en plantilla busca este codio ]]</b:skin> y arriba de este pega el siguiente codigo.


/* El Codigo de CSS para el menu empieza aqui ciudadblogger.info */
.cbg_glossymenu1{
 position: relative;padding: 0 0 0 34px;margin: 0 auto 0 auto;
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPoGpzHc7KR0Cy_4niuNWwznI7rXjxLulRRcYlTcsWtrYQARI1Q9JpE78Im3OX6HSziJnAf9pz15115puZnv8dk2UrLTmp-lc79b6t3GEvXqZXRCKjnqAeyIYcPUR3W8PDPAvZi_7jbR0/s1600/btrix_menupu_bg.gif) repeat-x;
 height: 46px;
 list-style: none;
}
.cbg_glossymenu1 li{
 float:left;
}
.cbg_glossymenu1 li a{
 float: left;display: block;color:#000;
 text-decoration: none;
 font-family: sans-serif;
 font-size: 13px;
 font-weight: bold;
 padding:0 0 0 16px;
 height: 46px;
 line-height: 46px;
 text-align: center;
 cursor: pointer;
}
.cbg_glossymenu1 li a b{
 float: left;display: block;padding: 0 24px 0 8px;
}
.cbg_glossymenu1 li.current a, .cbg_glossymenu1 li a:hover{
 color: #fff;
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3cNqQITnE4oymFWENa9yvH9m9jPwjf4a_ASwt6MWzJyYGTMrxJGrDymvuCcLb3E6A1hLDEICUO0MB7ULOz3RpxtbgxRzWLJMxEzO16YupuweLtycCgRM82FzRb1eGwubXveL0GBPMs5Y/s1600/btrix_menupu_hover_left.gif) no-repeat;
 background-position: left;
}
.cbg_glossymenu1 li.current a b, .cbg_glossymenu1 li a:hover b{
 color: #fff;
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjNU0-hR86e2ju1G-jPzfHEoTaorhgIuRlDY6kSf7smuntfS69VqWSma7rRIciPxny39BP9UQ81Ag-VttOpf-eTgE25vq6Tt5ZBQVq7hPh3LmH0oJ7OnVGIUP7gX-Q3JXrmJMEF2JU4dc/s1600/btrix_menupu_hover_right.gif) no-repeat right top;
}

Luego en Diseno >> Anade un gadget >>>Selecciona Html.Javascript y pega el siguiente codigo
 <ul class="cbg_glossymenu1">
 <li class="current"><a href="#"><b>Pagina Principal</b></a></li>
 <li><a href="#"><b>CSS</b></a></li>
 <li><a href="#"><b>Foros</b></a></li>
 <li><a href="#"><b>Herramientas</b></a></li>
 <li><a href="#"><b>JavaScript</b></a></li>
 <li><a href="#"><b>Contactenoss</b></a></li>
</ul>

 Ver ejemplo barra de navegacion co brillo:

jueves, 20 de junio de 2013

Flipboard Style Social Widget


lunes, 17 de junio de 2013

Background Deslizable Con JQuery Para Blog De Blogger

Interesante efecto con Jquery como insertar un background o fondo a tu pagina web que se desliza constantemente anade animacion y atrae a tus vistantes.Solo con unos simples escritos de Jquery.

1.Entra a tu cuenta de blogger dashboard--> Diseno- -> Editar HTML
2.Busca la eyiqueta en tu plantilla </head> .
3.Copia el cidgo de abajo ay pegalo antes de es </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
$(function(){

// ***
// Scrolling background
// ***

// height of background image in pixels
var backgroundheight = 4000;

// get the current minute/hour of the day
var now = new Date();
var hour = now.getHours();
var minute = now.getMinutes();

// work out how far through the day we are as a percentage - e.g. 6pm = 75%
var hourpercent = hour / 24 * 100;
var minutepercent = minute / 30 / 24 * 100;
var percentofday = Math.round(hourpercent + minutepercent);

// calculate which pixel row to start graphic from based on how far through the day we are
var offset = backgroundheight / 100 * percentofday;

// graphic starts at approx 6am, so adjust offset by 1/4
var offset = offset - (backgroundheight / 1);

function scrollbackground() {
// decrease the offset by 1, or if its less than 1 increase it by the background height minus 1
offset = (offset < 1) ? offset + (backgroundheight - 1) : offset - 1;
// apply the background position
$('body').css("background-position", "50% " + offset + "px");
// call self to continue animation
setTimeout(function() {
scrollbackground();
}, 70
);
}

// Start the animation
scrollbackground();
});
//]]>
</script>
 .
4.Ahora busca en tu plantilla este codigo :
body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
Nota:el codigo de arriba puede ser diferente en tu plantilla.Pero la parte importante es  body { .
5.Reemplace el codigo de arriba con el codigo de abajo:
body {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfVoWHFUPB2VeH2ZV1Gx8lwBVE5PSCFpu3hArG_A0e3IQVzTvBtkkG090T3zW1y8wQk8SiTSeHBk2WqCRzaoPmRtDwLsRqT-QAuCO1qA1GXOBtWWxwo4HzqlrsS_T5d_y2ZZuscZUJ44Wc/);
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
Nota: Puedes usar una imagen que sea mas oportuna en lugar de la imagen de arriba.
6.Click guardar plantilla y listo.
Enhanced by Zemanta

Simple Dezlizador Con JQuery Simple

- See more at: http://www.spiceupyourblog.com/2011/06/blogger-tip-jquery-featured-slider.html#sthash.MIlzpHUO.dpuf

Social Media Compartida Animada

  • Como Anadir Widget Cubo Hielo 3D Media Social A Tu Blog

    Esta vez traigo un widget que les encantara su diseno y atractivo y util en forma de bloque de hielo en 3D.

  • Coleccion Excelente De Tabs JQuery Para Blog De Blogger

    Con jQuery, podemos hacer las cosas mas fáciles que jQuery JavaScript.Esta, se ha convertido en la biblioteca más popular JavaScript en uso ultimos días En este artículo te voy a mostrar una excelente colección de Tabs jQuery que puedes usar para tu sitio web o blogs.Cuando vamos a un sitio web, podemos ver diferentes tipos de Tabs.Si se agrega una ficha o tab de jQuery a su sitio web, se ahorra mucho espacio en su paginas.Ademas le da un aspecto atractivo a tu blog.

  • Anadir Un Share Box Perfecto Para Blog de Blogger

    En este tutorial,te mostrare truco como anadir un share box a tu blog de blogger. Esta caja de compartir contiene boton oficial de Twitter,Facebook,Pinterest , Google Plus,Stmbleupon,Linkedin con contador, Boton de imprimiry boton de like de Facebook.He configurado estos botones para usarse en blog de blogger, para que puedes anadirlo facilmente.

  • Como Anadir/Instalar Google Analysis A Blog De Blogger

    En algunas ocasiones es interesarte chequear tu blog/website en linea por estadisticas de visitantes. Existen miles de herramientas en linea, y sitios web que son de ayuda con este asunto pero uno que es exacto con estadisticas de visitantes es el Google Analytics .

  • Slider Completamente Automatico Para Tu Blog De Blogger

    Les voy a dejar un widget que me encanta. Puedes anadir este slider a tu Barra del lado de tu pagina principal . Solo tienes que hacer una customizacion. Este es completamente automatico solo entraras a la direccion de tu blog y lo anades el slider o deslizador se mantendra actualizando las entrdas tales como Entradas Populares, Etiquetas, Cuadro de Me Gusta etc.