Espera unos segundos se esta Cargando...
Inicio » Entradas. Gadget
Mostrando entradas con la etiqueta Gadget. Mostrar todas las entradas
Mostrando entradas con la etiqueta Gadget. Mostrar todas las entradas

Buscador Responsive en el blog

12 de septiembre de 2016



En un post anterior mostré como poner un Buscador personalizado para el blog, ahora explicare como añadir un buscador adaptable en el blog de blogger.
Buscador Responsive en el blog


Una de las mayores ventajas de este cuadro de búsqueda, es lo fácil que es de añadir y personalizar.

El editor de blogger tiene una opción. Abres el editor y vas a Diseño ▶ Añadir un Gadget ▶ HTML/Javascript y copias el código.



<div id='search-box'>
<form action='/search' id='search-form' method='get' target='_top'>
<input id='search-text' name='q' placeholder='Buscar...' type='text'/>
<button id='search-button' type='submit'><span><i class='fa fa-search'/></i></span></button>
</form>
</div>
<style>
.search-box{color:#ffffff;font-size:16px;line-height:normal;margin:0;text-align:center;text-transform:none;font-weight:400;width:100%}
#search-box{position:relative;margin:0 auto;border:1px solid #cccccc;padding:5px;border-radius:4px}
#search-form{height:40px;background:#ffffff;overflow:hidden}
#search-text{font-size:14px;color:#3b8686;border-width:0;background:transparent;line-height:15px}
#search-box input[type="text"]{width:90%;padding:10px 0 5px 1em;color:#333333;outline:none}
#search-button{position:absolute;top:5px;right:5px;height:40px;width:40px;color:#ffffff;text-align:center;border-width:0;background:#C10000;cursor:pointer;text-transform:uppercase;border-radius:3px;outline:0}
#search-button:hover{background:#3b8686}
</style>

Importante tienes que tener instalado en el HTML de la plantilla FontAwesome.

Si no lo tienes ir a la plantilla ► Editar HTML.
En el buscador ► Presionando CTRL+F pegar <head> debajo de el pegar :

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>



  • Para cambiar el color del botón de busquedad cambiar los siguiente codigos: background:#C10000 y background:#3b8686 
  • Ver tabla de colores hexadecimales.


Para terminar haz click en guardar y listo.


Leer más

Menú Vertical con efecto CSS en el blog

7 de marzo de 2016



 Para tener este menú vertical en tu blog  agregamos el siguiente código en un Gadget HTML/JavaScript

<style>
.menucpb{
background: #eeeeee;
font-family: Tahoma, Verdana, Segoe, sans-serif;/*Fuente*/
font-size:18px;/*Tamaño de la fuente*/
text-align: center;
text-transform: uppercase;/*Texto en mayúsculas*/
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
padding:2px 0px 2px 10px;
opacity: 1;
margin-bottom:4px;
border-right:0px solid #cccccc; /* Color del borde derecho */
border-left:40px solid #cccccc; /* Color del borde izquierdo */
}
.menucpb  :hover {
border-right:40px solid #cccccc; /* Color del borde derecho  hover */
border-left:0px solid #cccccc;  /* Color del borde izquierdo  hover */
}
.menucpb a {
color: #000000; /* Corlor del link */
text-decoration: none;
}
</style>
<div class="menucpb"><a href="link" >Enlace</a></div>
<div class="menucpb"><a href="link" >Enlace</a></div>
<div class="menucpb"><a href="link" >Enlace</a></div>
<div class="menucpb"><a href="link" >Enlace</a></div>





Leer más

Flecha subir en el blog con efecto hover

Tenemos que añadir un Gadget HTML/JavaScrip

dentro de el pegamos el siguiente código:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
jQuery(document).ready(function() {
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.back-to-top').fadeIn(duration);
} else {
jQuery('.back-to-top').fadeOut(duration);
}
});
jQuery('.back-to-top').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});
</script>
<style>
div#page {
   max-width: 900px;
   margin-left: auto;
   margin-right: auto;
   padding: 20px;
}
.back-to-top {
   position: fixed;
   bottom: 35px;
   right: 10px;
   text-decoration: none;
   width: 10px;
   height: 20px;
   background-color: #a991af ; /*color de fondo*/
   background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBAHAFEoTeQmAQgxNRi7Mp-9wrlMoRQ_Fmf2f0rglvnaX7QKWp3_RjV5ILfX8ZTl7bMEuec7uxooEnNs69H4jgW5sA6uJX9rcc0KdGFaOR3Udx12Cq6uX3cahJ0Kd1mW4ihslAqIFU6EU/w140-h140-p/up.png");
   background-repeat: no-repeat;
   background-position: 50% 50%;
   border-radius: 2px 2px 2px 2px;
   font-size: 12px;
   padding: 1em;
   display: none;
}
.back-to-top:hover {
   background-color:#ebb499;/*color de fondo al  presionar*/
   text-decoration: none;
}
</style>
<a href="#" class="back-to-top" title="Scroll to Top" /></a>

Así tendremos una flecha subir en el blog de blogger con efecto hover.

Para personalizar el color cambiar los códigos de  background-color

Leer más

Etiquetas con efecto hover en el blog




Blogger predefine el widget de etiquetas o categorías tipo lista, para darle estilo y dividirlo en dos columnas hay que:
  • Ir a Plantilla.
  • Personalizar y llegaremos hasta el 
  • Diseñador de Plantillas, una vez allí nos vamos abajo del todo en donde dice 
  • Avanzado, abajo del todo encontrarán una opción que dice 
  • Añadir código CSS personalizado, en el recuadro

/*- Etiquetas -*/
#Label1 ul li{
float: left;
width: 45%;
}
#Label1 li{list-style: none;
margin: 0px!important;
padding: 0px!important;
}
#Label1 li a{
display: block;
width: 100px; /* ANCHO DE LINKS */
background: #ccc; /* FONDO DE LINKS */
color: #000000; /* COLOR DE LINKS */
border-left: 0px solid #eee; /* BORDE DE LINKS */
margin-bottom: 3px;
font: 9px verdana;
padding: 7px;
padding-left: 5px;
text-transform: uppercase;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
text-decoration: none;
}
/* LINKS HOVERS */
#Label1 li a:hover{
background: #f4915f;
box-shadow: inset 0 0 16px #f0a882, 0 0 0px #f0a882;
border-left: 10px solid #f0a882; /* BORDE DE LINKS */
color: #000000; /* COLOR DE LINKS */
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
text-decoration: none;
letter-spacing: 0px;
}

Para  finalizar Aplicamos al blog

Este es el resultado









Leer más

Efecto de mostrar/ocultar la Navbar (Barra de Navegación) de Blogger

17 de diciembre de 2014


Para dejar la Navbar (Barra de Navegación) de Blogger y crear un efecto de mostrar/ocultar que se ejecute al pasar el mouse, logrando que la barra aparecerá y al quitarlo desaparecerá.

Para ello debemos ingresar a nuestro blog y luego

Plantilla ►Personalizar ►Diseñador de Plantillas ► Avanzado ► Añadir Código CSS Personalizado
pegamos el siguiente estilos css:


#navbar-iframe {
opacity:.0;
filter:alpha(Opacity=0,FinishedOpacity=0);
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
#navbar-iframe:hover {
opacity:1.0;
filter:alpha(Opacity=100,FinishedOpacity=100);
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
podemos agregarle color de fondo

#navbar-iframe {
background:#6CD1E7; /* Color de la navbar */
position:absolute;
top:-30px;
height:60px;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
#navbar-iframe:hover {
background:#F06969; /* Color al pasar el cursor */
top:0;
height:30px;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}


Puedes ver el truco funcionando en nuestro BLOG DE PRUEBAS


→ Para Quitar la barra de navegación de Blogger (Navbar)


Leer más

Menú Horizontal Despegable


Para insertar este Menú Horizontal Desplegable, con CSS en tu blog de blogger.


entramos en ▶ Diseño ▶ Añadir un Gadget ▶ HTML/Javascript y copias el siguiente código:



<style type="text/css">
/* Menú Horizontal Despegable
------------------------------------- */
#subnavbar {
background: #64343C;/*Color de fondo */
width: 873px;/*Ancho del menu si ponen width: 100%; ocupara el ancho total del blog.*/
height: 27px;/*Altura del menu */
font-weight: bold;
color: #FFFFFF;/*Color de la fuente */
margin: 0px;
padding: 0px;
font-family:"Trebuchet MS";/*Fuente */
}
#subnav {
margin: 0px;
padding: 0px;
}
#subnav ul {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}
#subnav li {
list-style: none;
margin: 0px;
padding: 0px;
}
#subnav li a, #subnav li a:link, #subnav li a:visited {
color: #FFFFFF;
display: block;
font-size: 11px;
text-transform: uppercase;
margin: 0px 0px 0px 0px;
padding: 5px 10px 5px 10px;
border-left: 1px solid #FFFFFF;
}
#subnav li a:hover, #subnav li a:active {
background: #999999;
color: #000000;
display: block;
text-decoration: none;
margin: 0px 0px 0px 0px;
padding: 5px 10px 5px 10px;
}
#subnav li li a, #subnav li li a:link, #subnav li li a:visited {
background: #64343C;
width: 120px;
heigth: 20px
float: none;
margin: 0px;
padding: 5px 10px 5px 10px;
border-bottom: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
}
#subnav li li a:hover, #subnav li li a:active {
background: #999999;
margin: 0px;
padding: 5px 10px 5px 10px;
}
#subnav li {
float: left;
padding: 0px;
}
#subnav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 160px;
margin: 0px;
padding: 0px;
}
#subnav li li {
}
#subnav li ul a {
width: 140px;
}
#subnav li ul a:hover, #subnav li ul a:active {
}
#subnav li ul ul {
margin: -25px 0 0 161px;
}
#subnav li:hover ul ul, #subnav li:hover ul ul ul, #subnav li.sfhover ul ul, #subnav li.sfhover ul ul ul {
left: -999em;
}
#subnav li:hover ul, #subnav li li:hover ul, #subnav li li li:hover ul, #subnav li.sfhover ul, #subnav li li.sfhover ul, #subnav li li li.sfhover ul {
left: auto;
}
#subnav li:hover, #subnav li.sfhover {
position: static;
}
</style>
<div id="subnavbar">
<ul id="subnav">
<li><a href="URL" title="Inicio">INICIO</a></li>
<li><a href="URL " title="">Enlace 1</a>
<ul>
<li><a href="URL " title="">SUB-Enlace 1.1</a></li>
<li><a href="URL" title="">SUB-Enlace 1.2</a></li>
<li><a href="URL" title="">SUB-Enlace 1.3</a></li>
</ul>
</li>
<li><a href="mailto:" title="Enviame un email">CONTACTO</a></li>
<li><a href="URL" title="">Enlace 2</a>
<ul>
<li><a href="URL" title="">SUB-Enlace 2.1</a></li>
<li><a href="URL" title="">SUB-Enlace 2.1</a></li>
<li><a href="URL" title="">SUB-Enlace 2.3</a></li>
</ul>
</li>
<li><a href="URL" title="">Enlace 3</a>
<ul>
<li><a href="URL" title="">SUB-Enlace 3.1</a></li>
<li><a href="URL" title="">SUB-Enlace 3.2</a></li>
</ul>
</li>
<li><a href="URL" title="">Enlace 4</a>
<ul>
<li><a href="URL" title="">SUB-Enlace 4.1</a></li>
<li><a href="URL" title="">SUB-Enlace 4.2</a></li>
</ul>
</li>
<li><a href="URL" title="">Enlace 5</a>
<ul>
<li><a href="URL" title="">SUB-Enlace 5.1</a></li>
<li><a href="URL" title="">SUB-Enlace 5.2</a></li>
<li><a href="URL" title="">SUB-Enlace 5.3</a></li>
<li><a href="URL" title="">SUB-Enlace 5.4</a></li>
</ul>
</li></ul></div>
Ver : Probador de códigos
Ver Tabla de colores hexadecimales.

►Personalizar el Menu 


  • Para personalizarlo cambiar lo que esta en color rojo.
  • Donde dice "URL" entre las comillas agregan la dirección donde quieren redireccionar.
  • Donde dice title "Inicio" entre las comillas agreguen una leyenda como por ejemplo en contacto "Enviame un email".
  • Donde dice mailto: poner su correo electrónico.
  • Donde dice Enlace 1 y SUB-Enlace 1.1 poner el nombre del enlace.

►Como agregar otra pestañas con mas submenus ejemplo:


Etiquetas es la pestaña principal y comienza con un <li>
→ luego para hacer las subpestañas comienze con un <ul>
→ luego como esta en el ejemplo de abajo cada subpestaña
comienza con un <li> y entre subpestañas se dividen con un </li>
→ para finalizar se cierran los submenus con un :
</ul>
</li>


Ejemplo:


<li><a href="URL" title="Categorías">Etiquetas</a>
<ul>
<li><a href="URL" title="">SUB-Etiqueta 1</a></li>
<li><a href="URL" title="">SUB-Etiqueta 2</a></li>
<li><a href="URL" title="">SUB-Etiqueta 3</a></li>
<li><a href="URL" title="">SUB-Etiqueta 4</a></li>
</ul>
</li>



Leer más

Menú Horizontal con efecto rotación

16 de diciembre de 2014



Para insertar este Menú Horizontal con efecto rotación en los enlaces, con CSS en tu blog.
entramos en ▶ Diseño ▶ Añadir un Gadget ▶ HTML/Javascript y copias el siguiente código:


<style>
#ccmenu {
padding: 0;
list-style-type: none;}
#ccmenu li {
display: inline;
}
#ccmenu li a {
color: #000000;
float: left;
font-family: Arial,Verdana,Times New Roman;/*Fuente */
font-size: 11px;
padding: 13px;
text-decoration: none;
text-transform: uppercase;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: #58acfa;/*Color de fondo */
}
#ccmenu li a:hover {
-moz-transform: rotate(-15deg);
-webkit-transform: rotate(-15deg);
-o-transform: rotate(-15deg);
-ms-transform: rotate(-15deg);
transform: rotate(-15deg);
}
</style>
<ul id="ccmenu">
<li><a href="#">Inicio</a></li>
<li><a href="#">Enlace</a></li>
<li><a href="#">Enlace</a></li>
<li><a href="#">Contacto</a></li>
</ul>







  • Se puede personalizar todo lo que esta en rojo
  • Para agregar más enlaces <li><a href="#">Enlace</a></li>
  • Ver Tabla de Colores
  • Para cambiar la fuente Google Fonts



Leer más

Personalizar los gadgets en Blogger

14 de diciembre de 2014



Para personalizar los gadgets en Blogger, podemos hacerlo de dos formas:


✒ Personalización individual de los gadgets del blog



Para proceder a personalizar cada uno los gadgets de la sidebar, individualmente, debemos saber identificarlos. Para esto vamos a Editar el HTML de nuestro blog de blogger:

Diseño ► Plantilla ► Editar HTML ► Click dentro del editor ► Ctrl+f ►

en el pegamos
<b:section-contents id='sidebar-right-1'>

Nos mostrara la sección donde se encuentran las identificaciones de los gadgets de la sidebar, cuyo código es como el siguiente:

<b:section-contents id='sidebar-right-1'>
<b:widget id='BlogArchive1' locked='false' title='Título del gadget' type='BlogArchive'/>
<b:widget id='Profile1' locked='false' title='Título del gadget' type='Profile'/>
<b:widget id='Image1' locked='false' title='Título del gadget' type='Image'/>
<b:widget id='Text1' locked='false' title='Título del gadget' type='Text'/>
<b:widget id='HTML1' locked='false' title='Título del gadget' type='HTML'/>
<b:widget id='NewsBar1' locked='false' title='Título del gadget' type='NewsBar'/>
</b:section-contents>

Este código corresponde a un blog con seis tipos de gadgets. Cada uno de los entrecomillados resaltados en rojo es como se identifica cada uno de los gadgets, es lo que debemos tener en cuenta para personalizarlos. Los entrecomillados resaltados en azul son los tipos de gadgtes.


Teniendo identificados los gadgets ir a:

  • Plantilla 
  • Personalizar 
  • Diseñador de Plantillas 
  • Avanzado 
  • Añadir Código CSS Personalizado,en el recuadro pegar el Código correspondiente. 
Ejemplo personalizar el titulo de BlogArchive1
#BlogArchive1 h2{
color: #0b3861; /* Color del título */
background: #58acfa; /* Color del fondo */
text-align: center; /* Título en el centro */
font-weight: bold; /* Título en negrilla */
font-family: Verdana; /* Tipo de fuente */
font-size: 12px; /* Tamaño de la fuente */
}
Podemos poner un ícono o imagen al título de un gadget

#BlogArchive1 h2{
color: #0b3861; /* Color del título */
background: url(URL de la imagen) center left no-repeat;
text-align: center; /* Título en el centro */
font-weight: bold; /* Título en negrilla */
font-family: Verdana; /* Tipo de fuente */
font-size: 12px; /* Tamaño de la fuente */
}

Para que la imagen quede a la derecha del título cambiamos left por right.

►La identificación de los gadgets la debemos poner exactamente igual a como están en los códigos de nuestra HTML, teniendo en cuenta mayúsculas y minúsculas, anteponiendo el símbolo #.

✒ Personalización del contenido del blog.

Teniendo en cuenta los Elementos de la plantilla de Blogger podemos personalizar gadgets o widget de nuestro blog

......widget-content{
color: #...; /* Color del texto */
background: #...; /* Color del fondo */
font-family: ....; /* Tipo de fuente */
font-size: ...px; /* Tamaño de la fuente */
}

Ir a para esto ir a:

  • Plantilla
  • Personalizar
  • Diseñador de Plantillas
  • Avanzado
  • Añadir Código CSS Personalizado,en el recuadro pegar el Código:
Ejemplo:

.sidebar .widget {
margin: 0 0 15px;
padding: 0 0 15px;
border-bottom: 2px solid #eee;
}
.sidebar .widget-content {
margin-top: 15px;
}
.sidebar .widget h2 {
border-bottom: 1px solid #eee;
padding-bottom: 5px;
text-align: center;
text-transform: uppercase;
}

Leer más

Menú Vertical CSS con efecto

13 de diciembre de 2014



Para poner este practico y vistoso menú vertical en  tu blog de blogger,lo primero que debemos hacer es agregar el estilo a la Plantilla.

Diseño ►Edición HTML ►Presionar Ctrl + F, en el buscador pegar

</head>
una vez seleccionado colocamos sobre la etiqueta </head> el siguiente código

 <!--  Menú Vertical-->
<style>
ul.mvertical{
width: 250px; /* ancho del menú ajústalo a la columna */
overflow: auto;
background: transparent; /* color del fondo del menú (puedes dejar black, etc)*/
margin: 0;
padding: 0;
padding-top: 7px;
list-style-type: none;
}
ul.mvertical li{
text-align: right; /* Alineación de los botones right, center, o left */
}
ul.mvertical li a{
position: relative;
display: inline-block;
text-indent: 5px; /* Ancho del botón*/
overflow: hidden;
background: rgb(0, 114, 198); /* Color RGB primario de los botones */
font: italic normal 18px Calibri; /* Fuente y tamaño, normal bold */
text-decoration: none;
padding: 5px; /* Altura del botón */
margin-bottom: 1px; /* Espacio entre los botones, puede ser un valor negativo */
color: white; /* Color del texto en el botón */
-moz-box-shadow: inset -7px 0 5px rgba(114,114,114, 0.0); /* Color de la sombra último valor 0.2 - 0.4 etc */
-webkit-box-shadow: inset -7px 0 5px rgba(114,114,114, 0.0);
-ms-box-shadow: inset -7px 0 5px rgba(114,114,114, 0.0);
box-shadow: inset -7px 0 5px rgba(114,114,114, 0.0);
-moz-transition: all 0.2s ease-in-out;
-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.mvertical li a:hover{
padding-right: 40px; /* Medida del movimiento del botón */
color: #FFFFFF; /* Color del texto en el botón */
background: rgb(0,81,186); /* Color del botón */
-moz-box-shadow: inset -3px 0 2px rgba(114,114,114, 0.0); /* Color de la sombra último valor 0.2 - 0.4 etc */
-webkit-box-shadow: inset -3px 0 5px rgba(114,114,114, 0.0);
-ms-box-shadow: inset -3px 0 5px rgba(114,114,114, 0.0);
box-shadow: inset -3px 0 5px rgba(114,114,114, 0.0);
}
ul.mvertical li a:before{
content: &quot;&quot;;
position: absolute;
left: 0;
top: 0;
border-style: solid;
border-width: 70px 0 0 20px;
border-color: transparent transparent transparent transparent; /* Cambia el último valor por black si dejaste un fondo de color, esto agrega un corte diagonal al final del botós */
}
</style>
<!-- fin Menú Vertical -->

Las partes que se pueden editar son las que tienen su explicación a la derecha.

Ahora entramos en ▶ Diseño ▶ Añadir un Gadget ▶ HTML/Javascript y copias el código.

<ul class="mvertical">
<li><a href="URL de la página">Enlace</a></li>
<li><a href="URL de la página">Enlace</a></li>
<li><a href="URL de la página">Enlace</a></li>
<li><a href="URL de la página">Enlace</a></li>
<li><a href="URL de la página">Enlace</a></li>
</ul>



En este ejemplo hay 5 enlaces, pero pueden agregar tantos como necesites





Si no quieren agregar el código en la plantilla lo pueden agregar en un gadget HTML-Javascript junto al código para el título de los botones y sus enlaces.

<!--  Menú Vertical-->
<style>
ul.mvertical{
width: 250px; /* ancho del menú ajústalo a la columna */
overflow: auto;
background: transparent; /* color del fondo del menú ( black, white,etc)*/
margin: 0;
padding: 0;
padding-top: 7px;
list-style-type: none;
}
ul.mvertical li{
text-align: right; /* Alineación de los botones right, center, o left */
}
ul.mvertical li a{
position: relative;
display: inline-block;
text-indent: 5px; /* Ancho del botón. */
overflow: hidden;
background: rgb(0, 114, 198); /* Color RGB primario de los botones */
font: italic normal 18px Calibri; /* Fuente y tamaño, normal bold */
text-decoration: none;
padding: 5px; /* Altura del botón */
margin-bottom: 1px; /* Espacio entre los botones, puede ser un valor negativo */
color: white; /* Color del texto en el botón */
-moz-box-shadow: inset -7px 0 5px rgba(114,114,114, 0.0); /* Color de la sombra último valor 0.2 - 0.4 etc */
-webkit-box-shadow: inset -7px 0 5px rgba(114,114,114, 0.0);
-ms-box-shadow: inset -7px 0 5px rgba(114,114,114, 0.0);
box-shadow: inset -7px 0 5px rgba(114,114,114, 0.0);
-moz-transition: all 0.2s ease-in-out;
-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.mvertical li a:hover{
padding-right: 40px; /* Medida del movimiento del botón */
color: #FFFFFF; /* Color del texto en el botón */
background: rgb(0,81,186); /* Color del botón */
-moz-box-shadow: inset -3px 0 2px rgba(114,114,114, 0.0); /* Color de la sombra último valor 0.2 - 0.4 etc */
-webkit-box-shadow: inset -3px 0 5px rgba(114,114,114, 0.0);
-ms-box-shadow: inset -3px 0 5px rgba(114,114,114, 0.0);
box-shadow: inset -3px 0 5px rgba(114,114,114, 0.0);
}
ul.mvertical li a:before{
content: &quot;&quot;;
position: absolute;
left: 0;
top: 0;
border-style: solid;
border-width: 70px 0 0 20px;
border-color: transparent transparent transparent transparent; /* Cambia el último valor por black si dejaste un fondo de color, esto agrega un corte diagonal al final del botón*/
}
</style>
<!-- fin Menú Vertical -->
<ul class="mvertical">
<li><a href="URL de la página">Enlace</a></li>
<li><a href="URL de la página">Enlace</a></li>
<li><a href="URL de la página">Enlace</a></li>
<li><a href="URL de la página">Enlace</a></li>
<li><a href="URL de la página">Enlace</a></li>
</ul>

Las partes que se pueden editar tienen su explicación a la derecha.







Leer más

Menu Vertical facil y sencillo con CSS para el Blog





Para insertar este Menu Vertical facil y sencillo con CSS para el Blog

entramos en ▶ Diseño ▶ Añadir un Gadget ▶ HTML/Javascript y copias el código.

<style type="text/css">
#menuborder a{
padding-left: 4px;
display: block;
font-size: 14px; /* Tamaño de texto */
text-transform: uppercase; /*Si queremos en minúscula ponemos lowercase */
width: 200px; /* Ancho*/
color: #000000;
text-decoration: none;
border-left: 4px solid #bbbbbb; /* Color borde */
border-bottom: 1px solid #bbbbbb; /* Color línea inferior */
}
#menuborder a:hover{
border-left: 3px solid #dddddd; /*Color de línea vertical */
background-color: #eeeeee; /* Color fondo*/
color: #2A211A; /* Color de letra seleccionada */
}
</style>
<div id="menuborder">
<a href="URL">Enlace 1</a>
<a href="URL">Enlace 2</a>
<a href="URL">Enlace 3</a>
<a href="URL">Enlace 4</a>
<a href="URL">Enlace 5</a>
<a href="URL">Enlace 6</a>
</div>


Como ven es muy sencillo y personalizable se pueden cambiar casi todo los valores



Ejemplo










Leer más

Menú Horizontal sencillo para el blog

12 de noviembre de 2014



El menú de tu blogs es un elemento que te permite ayudar a los usuarios con las secciones, páginas o artículos más importantes del blog.

Lo habitual es que el menú sea horizontal y colocarlo bajo de la cabecera, de forma que aparecerá una hilera de botones, pestañas o rectángulos.


Para insertarlo Gadgets entramos en ▶ Diseño ▶ Añadir un Gadget ▶ HTML/Javascript y copias el código.


 <style type='text/css'>
.cpmenu {
margin: 0;
padding: 0;
float: center;
width: 900px;
font-family: Tahoma;
font-size:13px;
font-weight: bold;
margin-top: 0px;
}
.cpmenu li {
display: inline;
}
.cpmenu li a, .solidblockmenu li a:visited {
float: left;
padding: 9px 11px;
text-decoration: none;
color: #204063;
border-right: 1px solid #204063;
outline: none;
}
.cpmenu li a:hover {
color: #FFFFFF !important;
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjha9B2A3Q71uRJJIn7aLOJ3JC8IqV8tKzAjPD78KFQTVAb0IgLSibg4VM7f9TZZdQGtWJhrhiFfBonnxHwfM05BOkXMqruzcuG0FXohaLSUk24qQRTU-yB52ha36JU3pW61eymtQABg4T/w132-h140-p/vertical+%25282%2529.gif) center center repeat-x;
outline: none;
}
</style><ul class="cpmenu">
<li><a href="Enlace" title="Cosas para el Blog">Inicio</a></li>
<li><a href="Enlace" title="">Quienes Somos</a></li>
<li><a href="Enlace" title="Ofertas para ti">Publicidad</a></li>
<li><a href="Enlace" title="Enterate">Novedades</a></li>
<li><a href="Enlace" title="Contactame">Contacto</a></li>
</ul>
<br style="clear: left"/>







Pueden añadir (o quitar) elementos de este tipo:

<li><a href="Enlace" title="Cosas para el Blog">Inicio</a></li>

  • Enlace es el enlace de destino. 
  • Inicio es el texto visible en ese botón. 
  • El campo entre comillas del title (Cosas para el Blog) es un texto opcional que se muestra al poner el cursor el mouse sobre el botón. Si no se deseara ningún texto se deja title="".

<li><a href="Enlace" title="">Quienes Somos</a></li>





Leer más

Texto en movimiento en el blog

11 de noviembre de 2014

Para poner texto en movimiento en una entrada de tu blog, de una forma fácil y sencilla, solo tienes que insertar este código HTML en en lugar que quieras, ya se en una entrada o en un Gadgets.

  1. Para insertarlo Gadgets entramos en ▶ Diseño, ▶ Añadir un Gadget y elegimos▶ HTML/Javascript y copias el código.
  2. Para insertarlo en tu blog: Crear nueva entrada ▶ Edición de HTML – y ahí pones el código con el texto que quieras.


De una forma fácil y sencilla ya tenemos un texto en movimiento.

El código es:

<marquee> Aquí el Texto Que Quieras </ marquee>

El resultado es este:

 Cosas para el Blog




Leer más

Gadget sin título en nuestro blog

10 de noviembre de 2014






Por defecto los GADGETS o WIDGETS  de blogger hay que ponerle un título sino da error al querer guardarlo, para tener un Gadget sin título en nuestro blog hay que borrar el título, y en su lugar escribir esto:
&nbsp;


Es una entidad carácter del HTML, en ingles non breaking space, significa espacio que no produce saltos de línea; por esta razón podemos utilizarla para ponerlo en el titulo de un GADGETS o WIDGETS, al que no queremos nombrar.



También se puede utilizar:

<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

o

<! -->

 Para que nuestro GADGET o WIDGET no lleve titulo en la casilla. 



Leer más

Dividir las etiquetas en dos columnas




Lo primero es saber que Blogger inserta automáticamente (por defecto), al añadir un gadget de etiquetas tipo lista (no nube).

Para dividir el widget de etiquetas o categorías de Blogger tipo lista, en dos columnas hay que:

  • Ir a Plantilla, 
  • Personalizar y llegaremos hasta el 
  • Diseñador de Plantillas, una vez allí nos vamos abajo del todo en donde dice 
  • Avanzado, abajo del todo encontrarán una opción que dice 
  • Añadir código CSS personalizado, en el recuadro


van a copiar y pegar siguiente código CSS

#Label1 ul li{
float: left;
width: 45%;
}
Sintaxis

width: es el ancho, que va a depende de las columnas que quieran, no siempre es exacto, ya que el widget de etiquetas hereda el padding de las listas de la sidebar (.sidebar ul li ).
Para dos columnas; para obtener 3 columnas utilizar 33%.
#Label1: es el selector puede variar. Por defecto, el widget de etiquetas (si tienes sólo uno), debiera ser Label1; pero, si tienes dos, tendrías un widget de ID Label1, y otro Label2.



Leer más

Buscador personalizado para el blog

18 de octubre de 2014



Incluir un cuadro de búsqueda personalizado, para facilitar al visitante la búsqueda de un tema determinado en el blog.

Para insertarlo en un Gadgets entramos en
  • Diseño ▶ Añadir un Gadget  ▶ HTML/Javascript y copias el código.


<style>
#search-box {
    position: relative;
    width: 100%;
    margin: 0;
}
#search-form {
    height: 30px;
    width: 190px;
    border: 1px solid #E6E4E5;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background-color: #ffffff;
    overflow: hidden;
}
#search-text {
    font-size: 14px;
    color: #ddd;
    border-width: 0;
    background: #FFFFFF;
}
#search-box input[type="text"] {
    width: 90%;
    padding: 11px 0 12px 1em;
    color: #000000;
    outline: none;
}
#search-button {
    position: absolute;
    top: -1px;
    right: 20px;
    height: 35px;
    width: 100px;
    font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
    font-size: 12px;
    font-syle: bold;
    color: #ffffff;
    text-align: center;
    line-height: 22px;
    border-width: 0;
    background: #F160A8;
    -webkit-border-radius: 10px 10px 10px 10px;
    -moz-border-radius: 10px 10px 10px 10px;
    border-radius: 10px 2px 10px 10px;
    cursor: pointer;
    border: 1px solid #000000;
}
</style>
<div id='search-box'>
  <form action='/search' id='search-form' method='get' target='_top'>
    <input id='search-text' name='q' placeholder='Search...' type='text'/>
    <button id='search-button' type='submit'><span></span>Buscar</button>
  </form>
</div>

Una de las mayores ventajas de este cuadro de búsqueda, es lo fácil que es de añadir y personalizar.

background: #F160A8: para cambiar el color de fondo del botón de buscar.

Ver tabla de colores hexadecimales.


Leer más

Traductor automático con banderas en el Blog

4 de octubre de 2014


La traducción de contenidos de nuestro Blog utilizando la tecnología de Google Translator puede hacerse de una manera sencilla, con la inserción de un código que a partir de las imágenes de banderas de distintos países, permita a tus usuarios seleccionar el idioma con el que desean leer tu Blog.
Cuando tus visitantes seleccionen la bandera deseada los dirigirá a Google Translator para que se traduzca la página que estén visualizando en ese momento.



Para insertarlo en el blog entramos en ▶ Diseño ▶ Añadir un Gadget elegimos▶ HTML/Javascript donde copias el código: 
 
<div align="center">  <a class="google_translate" href="#" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cen&hl=en'); return false;"><img alt="English" border="0" align="absbottom" title="English" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEyMUMyCkLPIYLtgfxEoAUXbGNJcCjfJOSj5VjAZq2_lGN9eYNBOpL5OYKcbuyWYpPbs3h2harqnEqjFrkt9f9Z0aZIzAAzDoTe9SeP_6IXkE50rS6kK1NHEDeN83sN39Qi3rU3g22m3U/s200/United+Kingdom(Great+Britain).png" style="cursor: pointer;margin-right:8px" width="24"/></a><a class="google_translate" href="#" target="_blank" rel="nofollow" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cfr&hl=en'); return false;"><img alt="French" border="0" align="absbottom" title="French" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRIs0EgR1iJEDWKEdQzb88ilxCK_We_mfR9ZbFVyNFUUacmY3-ak6gxN-SmGHbb_mDEtDqMBcqvoGdwX8tdJ5AtW8fOYglvvmut00ikEk1K2X-_xEZbS3glVGZJCIVSwPy0OkS7YctLVo/s200/France.png" style="cursor: pointer;margin-right:8px" width="24"/></a>  <a class="google_translate" href="#" target="_blank" rel="nofollow" title="German" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cde&hl=en'); return false;"><img alt="German" border="0" align="absbottom" title="German" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0Q_RBA22esph98KHZ77hZn-Xipa5NxU003BMf6mRJJq0P_3LTtXclevxzEJ4cKfEWli8I1gmlqWrF10IW-cgynXnHqR71_Xl52idHCveIOsxuTe2VBHxl2-wA4dcWKDp5NPvU9wg0iOA/s200/Germany.png" style="cursor: pointer;margin-right:8px" width="24"/></a>   <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Ces&hl=en'); return false;"><img alt="Spain" border="0" align="absbottom" title="Spain" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1MPGJZjTBv596me9QvckzgGmlH22DpQzD7XRJeEaKePzikZJy1P7wdy-tQFAznfBKgylgfCKWyBfwWkyoVkGGZCI_F6N871K-x6PkUh_4m5i3TzhkA15GNhXqEd8M6woiG0r6Wz1fXt8/s200/Spain.png" style="cursor: pointer;margin-right:8px" width="24"/></a>   <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cit&hl=en'); return false;"><img alt="Italian" border="0" align="absbottom" title="Italian" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgan928GX3hu2U-ihiHnoLzslAPhi6Hz3gsfB7cE6hQNG4-jkAQI9PtPP_22dI2N5W_3JvCvAwtRHFzAklr1XObgJfYLT4jbkRd_clHibkiUQfOcCjgyBxlP4J12rm6yoUfMxf6PnmgXdw/s200/Italy.png" style="cursor: pointer;margin-right:8px" width="24"/></a>  <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Dutch" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cnl&hl=en'); return false;"><img alt="Dutch" border="0" align="absbottom" title="Dutch" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDYIaD4uxERsWLgp3PG_E-GYcpd6hjzUH71LjfkjkD4atg3ehS9Yj4Sykgpp-TECR7T-LaLUv60yD2ZRrCsnEEhwMhCzf42xP6k3SLcEoTJNvNRaCaRmL5eTssGdVQovUuLYoKWljfh4Y/s200/Netherlands.png" style="cursor: pointer;margin-right:8px" width="24"/></a><a class="google_translate" href="#" target="_blank" rel="nofollow" title="Russian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cru&hl=en'); return false;"><img alt="Russian" border="0" align="absbottom" title="Russian" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7vAQS4QGqnO8AqvoHSGWNW4fAZKuPpYoz_DY_e0yNV4VSPc-sp78IcNkDlgD_mkMGK4cvk1ZwMJlt4t1n7piyJYUwK6lKdhOj96Xt9_dflYtN9cN1ZC-hzHz-cwd8wDA-_IY7FsI0U-8/s200/Russian+Federation.png" style="cursor: pointer;margin-right:8px" width="24"/></a>  <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Portuguese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cpt&hl=en'); return false;"><img alt="Portuguese" border="0" align="absbottom" title="Portuguese" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHKiaekqmRU4RMSydeQ7K_Q6xJT9ydWpqqJ-KVcUMgZHsfU7kuskHLdP80n39EGBz4OTyliX1efV_quUddqSRRydQ3wZ2KRf6PHgBXv0AtHR7Ip2jbm6VsUztMkMOSTa28Z-SxEqGFZ0A/s200/Brazil.png" style="cursor: pointer;margin-right:8px" width="24"/></a>  <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Japanese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cja&hl=en'); return false;"><img alt="Japanese" border="0" align="absbottom" title="Japanese" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjD3oO15o_t61LfHoxrTqz9i3QVXbRcTFGZ5xK2Bv56LtgPJY_vcqXtvBfHdlLr_qpDkriJlsd6PvNopFQ28PLEVDW7P0CNcJkKK1ZCr-lWyFukTFr6Y5cD5E63Y6J0r-aQtKHaSDMPbqo/s200/Japan.png" style="cursor: pointer;margin-right:8px" width="24"/></a>  <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Korean" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cko&hl=en'); return false;"><img alt="Korean" border="0" align="absbottom" title="Korean" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-QRxLvCNlKkrPf2vAR0sc-U3f_ZHwIq48u0EQctfBDTmRKVN9THBaCm327xh6ZtptUsZvNp_bjIdCgwtoLVaDx0AV0ZOqYi_glICA-0jwAqf6GCtAZ02TFVGOI_n_iKndZB5WCMeTVFw/s200/South+Korea.png" style="cursor: pointer;margin-right:8px" width="24"/></a>  <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Arabic" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Car&hl=en'); return false;"><img alt="Arabic" border="0" align="absbottom" title="Arabic" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiExIxNst096wpbL2DXpbiP5RYp_FuAQSYfrDXOi3T_DZ64M-T2WgiPY8l7oRamBPg8fzPonRhvXG3S5n0wieM6FmD3ecO4S-T8j3cblu1t4G9pMK3QAT5I-Vn4uJvcUt59_oPjVr4ON64/s200/Saudi+Arabia.png" style="cursor: pointer;margin-right:8px" width="24"/></a>  <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Chinese Simplified" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Czh-CN&hl=en'); return false;"><img alt="Chinese Simplified" border="0" align="absbottom" title="Chinese Simplified" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPijSRpCgPkFYjZFtReE2lcRcavTxQOPgoquADt88xOWL5LpxzKo6jy7dtBdrLNZqylt8SHVLBRgHJIuK1S0Z_jaDCYOp0oSWYcqqMScDxbo03VGAvx5zWi13HTBNSKtx8jzOJzhRw-NU/s200/China.png" style="cursor: pointer;margin-right:8px" width="24"/></a></div>
Así de fácil tendrán un traductor automático con banderas en el Blog



Leer más

Iconos Sociales con efecto Zoom

10 de agosto de 2014



Para agregar estos iconos a tu blog, para que vincules tus perfiles sociales con efecto zoom.



Ir a Diseño en "Añadir un gadget", seleccionar 'Html Javascript' y pegar el código que dejo abajo, solo hay que reemplazar lo que esta en en rojo por la URL correspondiente y guárdalo.

Este es el código:
<style>
.social-connect-widget img{
-webkit-transform:scale(0.9);
-moz-transform:scale(0.9);
-o-transform:scale(0.9);
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
-o-transition-duration: 0.2s;
}
.social-connect-widget img:hover{
-webkit-transform:scale(1.2);
-moz-transform:scale(1.2);
-o-transform:scale(1.2);
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
-o-transition-duration: 0.2s;
}
.social-connect-widget{text-align:right;margin:20px 20px ;}
.social-connect-widget img{vertical-align:middle} </style>
<div class="social-connect-widget">
<a href="TU PAGINA DE GOOGLE+" target="_blank"><img alt="Google+" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3-mkk5dT7g7cWmEqo9ALk3k9HpeaY_rINaUQvSyz1mJ6VM44unbIWx8WIMOd7W4I6DSEKuIv_AvGAeTGofOvKqXi4bm9zwCxVbgsqefvu4ef7lg8RjUL7WKns3mIo2IshGQV9ynKK-UE/s32/googleplus.png" title="Sigueme en Google+" /></a>
<a href="TU NOMBRE DE TWITTER" target="_blank"><img alt="Twitter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEHmTgE03MWMSG89qYERMgkBZmxH2evZny6963xCHoO2ESW0UWjJZ2rBaW2DRRUwuJAyUaNZ19T9BJInOBg9dpbnCUbLu1O8ewBMaZjh2kaXIfbYoaIbsDpVC8kz19it-YzG7nNjNbW10/s32/twitter.png" title="Sigueme en Twitter" /></a>
<a href="TU ID DE FACEBOOK" target="_blank"><img alt="Facebook" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizYkayC69PyRFjdCWdha1KInTK_-EMWhH4W4AkCnIN9VtfIngi5FcWsvGcxxUcV5V8w5h51lgxlb8vnimTBXIjbFvGTEzhx_8BH_NyueFSJuPXn7wAOADhykb7m2yyIhX4VlFNKNheP2Y/s32/facebook.png" title="Sigueme en Facebook" /></a>
<a href="TU ID YOUTUBE" target="_blank"><img alt="YouTube" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeCf14zoGxnm31ZsSJONvPhvTsicIkvAO7P3xFBnYGSYE3-Ip32i6ofEIcC3vElK-D8j8dveAKjtOtwLiDo3pfa77iM8QZ3WZpPikoTOIM7283EmVQJLWFeZYiIXVhBv3hbdz21nWESy4/s32/youtube.png" title="Sigueme en YouTube" /></a>
<a href="LA DIRECCION DE TU FEED RSS" target="_blank"><img alt="feed rss" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs8m3svP6OaS6jVeR-wfBbai2vsGE6HGnowtpa3g4vsOVPV1A50-QZt_ScPZg3ERsb9ZIbq1wvR7iwz778vjhLWNQq2uAsQG1XbA5Zu4uFUQTT2PBJUxbvt-tU3995E-rNphkHoE7Jj8Q/s32/rss.png" title="Suscribete por Email" /></a>
</div>







Leer más
Suscribirse a: Entradas (Atom)

Cosas para el Blog © Creative Commons 2014 | Plantilla Cosas para el Blog

creada por CPB | Con la tecnología de Blogger