Recursos Blogger

Mostrando entradas con la etiqueta Personalizar. Mostrar todas las entradas

Buscador en la cabecera del blog

en 1:29 Etiquetas: Buscador, Personalizar 0 comentarios

Para tener el buscador en la cabecera del blog

Diseño → Plantilla → Editar HTML → Crtl + f

busca por el siguiente código:

Ahora, debajo de </ b:section> pega esto:

Cambiando los valores del style {el top y el left}, cambias la posición del buscador dentro de la cabecera así lo acomodas a tu gusto.

►Personalizarlo

Debajo de <head> {copia y pega}

Eliminar cabecera del blog

en 0:51 Etiquetas: Personalizar, Trucos 0 comentarios

Blogger no nos deja eliminar nuestra cabecera debido a que no nos muestra el botón de eliminar y si queremos que no aparezca la cabecera de nuestro blog para tener una mejor estética, que el titulo del blog no se muestre o simplemente queremos poner un gadget en su lugar, esto se puede hacer editando la plantilla de nuestro blog.

1.- Entramos a Plantilla → Editar HTML

2.- Estando ahí veremos que hay un botón en la parte superior que dice "Ir al widget" damos clic a este botón y nos desplegara una lista con algunos de nuestros widgets y gadgets que tenemos en nuestra plantilla ahí elegimos el que dice "Header1"

veremos una linea así:

<b:widget id="Header1" locked="true" title="Nombre de tu Blog" type="Header"></b:widget>

en el cual cambiaremos el valor de locked='true' por el de locked='false' quedando así :

<b:widget id="Header1" locked="false" title="Nombre de tu Blog" type="Header"></b:widget>

4.- Damos clic a guardar cambios

5.- Nos vamos a Diseño y en el gadget llamado "Cabecera" o "Header" le damos clic a editar y nos aparecerá la opción de eliminar.

6.- Damos clic al botón eliminar y damos clic a Guardar Diseño

7.- Listo nuestra cabecera se ha ido

►Si no funciona

Prueba haciendo lo pasos del 1 al 3 y justo donde cambias los valores true por false en la parte de arriba veremos que dice

<b:section class="header" id="header" maxwidgets="1" showaddelement="no"></b:section>

ahí cambiaremos los valores no por yes y maxgidgets 1 (o el numero que tenga) y ponemos 8

seguido de eso continuamos con el paso 4 y seguimos todo como puse en la parte de arriba.

Para recuperar la cabecera

Si queremos recuperar nuestra cabecera entramos en a Diseño → Agregar Gadget y saldrá cabecera.

Formulario de Contacto de Blogger personalizado utilizando CSS

en 17:44 Etiquetas: Formulario, Gadgets, Personalizar 0 comentarios

Para modificar el diseño del Gadget de Formulario de Contacto Oficial Blogger solo utilizaremos código CSS

Para instalar la primera lista de entradas seguir los siguientes pasos:

Nos dirigimos al Escritorio Blogger.

Hacemos clic en Diseño.
Hacemos clic en Añadir un Gadget de Formulario de contacto y lo ubicamos donde queramos poner el gadget.

Luego vamos a:

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

/* Formulario de Contacto
---------------------------*/
.contact-form-name, .contact-form-email, .contact-form-email-message {
max-width: 270px;
width: 100%;
font-weight:bold;
}

.contact-form-email:hover, .contact-form-name:hover, .contact-form-email-message:hover {
border: 1px solid rgb(221, 221, 221);
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1) inset;
}

.contact-form-name {
background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFU2SAV91PAocJJTGkzvc1w0PNJ5Y-OwY2wp-Aa3bex_X2ifg7-4r8zF4dOKVMgbiPBgjGr4XL95RHvFbYiXGEBGm8NcLrVHLVxF7FSw60KdbW9ks6_Q58E1_eQew-t_jL45MMBjpyyiD6/h120/user_12x16.png) no-repeat 2px 5px;
background-color: #FFF;
border: 1px solid #ddd;
box-sizing: border-box;
color: #A0A0A0;
display: inline-block;
font-family: Arial,sans-serif;
font-size: 12px;
font-weight:bold;
height: 24px;
margin: 0;
margin-top: 5px;
padding: 5px 15px 5px 28px;
border-radius: 3px;
vertical-align: top;
transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out; /* Firefox 4 */
-webkit-transition: all 0.2s ease-in-out; /* Safari and Chrome */
-o-transition: all 0.2s ease-in-outs;
}

input.contact-form-name:focus {
border: 1px solid rgba(82, 168, 236, 0.8);
outline: 0px none;
box-shadow: 0px 1px 1px #33aaff inset, 0px 0px 8px #33aaff;
border-radius: 3px;
}

input.contact-form-email:focus {
border: 1px solid rgba(82, 168, 236, 0.8);
outline: 0px none;
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset, 0px 0px 8px rgba(82, 168, 236, 0.6);
border-radius: 3px;
}

.contact-form-email {
background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3Y4e2r0hcXwArDVOFN5qohK4T-KOtdT4ltA3w8I2eRxUvw0bzd2ZZbXY8ba1XbKl0EWJwYClU96qe7MfPq9_0Zufp4Jq8pErM1TbF3AF1AX2nLCFk2sKP1LXF9e-8K5It34PaBZ5ZHlI/s1600/email.png) no-repeat 2px 5px;
background-color: #FFF;
border: 1px solid #ddd;
box-sizing: border-box;
color: #A0A0A0;
display: inline-block;
font-family: Arial,sans-serif;
font-size: 12px;
font-weight:bold;
height: 24px;
margin: 0;
margin-top: 5px;
padding: 5px 15px 5px 28px;
border-radius: 3px;
vertical-align: top;
transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out; /* Firefox 4 */
-webkit-transition: all 0.2s ease-in-out; /* Safari and Chrome */
-o-transition: all 0.2s ease-in-outs;
}

.contact-form-email-message {
background: #FFF;
background-color: #FFF;
border: 1px solid #ddd;
box-sizing: border-box;
color: #A0A0A0;
display: inline-block;
font-family: arial;
font-size: 12px;
margin: 0;
margin-top: 5px;
padding: 10px;
vertical-align: top;
max-width: 270px!important;
height: 110px;
border-radius:4px;
transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out; /* Firefox 4 */
-webkit-transition: all 0.2s ease-in-out; /* Safari and Chrome */
-o-transition: all 0.2s ease-in-outs;
}

.contact-form-email-message:focus {
border: 1px solid rgba(82, 168, 236, 0.8);
outline: 0px none;
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset, 0px 0px 8px rgba(82, 168, 236, 0.6);
}

.contact-form-button {
display: inline-block;
vertical-align: baseline;
margin: 8px 2px 0px;
height: 25px;
outline: medium none;
cursor: pointer;
text-align: center;
text-decoration: none;
font: 14px/100% Arial,Helvetica,sans-serif;
padding: 0.3em 2em 0.55em;
text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
border-radius: 0.5em;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
background: none repeat scroll 0% 0% #33aaff;
border: 1px solid #33aaff;
width: 250px;
}

input.reset-button {
display: inline-block;
vertical-align: baseline;
margin: 8px 2px 0px;
height: 28px;
outline: medium none;
cursor: pointer;
text-align: center;
text-decoration: none;
font: 14px/100% Arial,Helvetica,sans-serif;
padding: 0.3em 2em 0.55em;
text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
border-radius: 0.5em;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
background: none repeat scroll 0% 0% rgb(255, 126, 67);
border: 1px solid rgb(255, 126, 67);
width: 80px;
color: #FFF;
}
input.reset-button:hover {
text-decoration: none;
border: 1px solid #ff8942;
background: #ff8942;
}
input.reset-button:active {
position: relative;
top: 1px;
}

.contact-form-button:hover {
text-decoration: none;
border: 1px solid #ff8942;
background: #ff8942;
}
.contact-form-button:active {
position: relative;
top: 1px;
border: 1px solid #ff8942;
}

.contact-form-button-submit:focus, .contact-form-button-submit.focus {
border: 1px solid rgb(255, 137, 66);
background: none repeat scroll 0% 0% rgb(255, 137, 66);
}
.contact-form-button-submit:focus:hover, .contact-form-button-submit.focus:hover {
border: 1px solid #33aaff;
background: none repeat scroll 0% 0% #33aaff;
box-shadow: 0px 0px 0px 1px #ff8942 inset, 0px 1px 1px #33aaff;
}
/*for FireFox*/
input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner
{ border : 0px;} 
/*for IE8 */
input[type="reset"]:focus, input[type="button"]:focus
{ outline : none;}

Así tendrás el Formulario de Contacto personalizado en tu blog de Blogger

Personalizar los gadgets en Blogger

en 19:19 Etiquetas: Gadgets, Personalizar, Tutorial 0 comentarios

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

Personalización individual

Para proceder a personalizar cada uno los gadgets de la sidebar, individualmente, debemos saber identificarlos.

Vamos a Editar HTML:

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

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.

Personalización del título.

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 #.

Ejemplo:

#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 */
}

► Ver personalización de BlogArchive1

Podemos poner un ícono o imagen al título de un gadget. Para ponerle un ícono o imagen a un gadget del tipo HTML, vamos a:

Diseño ► Plantilla ► Editar HTML ► Click dentro del editor ► Ctrl+f ►en el buscador pegamos:

<b:widget id='HTML1' locked='false' title='Título del gadget' type='HTML'>

nos localizara un código como éste:

<b:widget id='HTML1' locked='false' title='Título del gadget' type='HTML'>
<b:includable id='main'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

Vamos a:

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

Ejemplo:

.post-title{
color: #000; /* Color del título */
background: url(URL de la imagen) center left no-repeat;
text-transform: uppercase;
font-size:16px !important;
text-align: center;
letter-spacing: 2px;
text-shadow: #999 1px -1px 1px;
border-top: 2px double #666;
border-bottom: 2px solid #666;
border-right: 0px double #666;
border-left: 0px double #666;
}

Así habremos puesto una imagen o ícono antes del título. Para que la imagen quede a la derecha del título cambiamos left por right.

!important funciona como una palabra clave para ignorar las reglas de cascada predefinida en la plantilla HTML. Cualquier definición que vaya acompañada de un !important tendrá mayor importancia que cualquier otra.

Ver personalización de post-title

Personalización del contenido.

Personalizaremos el contenido de un gadget del tipo Text , cuya ID es Text1 , utilizando la clase .widget-content .

Ir a:

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

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

Personalización general.

Podemos personalizar todos los gadgets de la sidebar.

......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:

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;
}

► Ver etiquetas personalizadas.

Scrollbar Personalizado en Blogger

en 17:11 Etiquetas: Personalizar, Scrollbar 0 comentarios

Para añadir este estilo de scrollbar personalizado en tu blog de Blogger ir a:

Plantilla
Personalizar
Diseñador de Plantillas
Avanzado
Añadir código CSS personalizado, en el recuadro pegar el siguiente código:

/* Scrollbar Personalizado
------------------------------------*/
::-webkit-scrollbar{
width: 16px;
background: #999;
}
::-webkit-scrollbar-track{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background:#eee;
}
::-webkit-scrollbar-thumb{
background: #ddd;
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}

Cambiar los valores que están en rojo para personalizar el color.

Páginas

Buscador en la cabecera del blog

Eliminar cabecera del blog

Para recuperar la cabecera

Formulario de Contacto de Blogger personalizado utilizando CSS

Personalizar los gadgets en Blogger

Personalización del título.

Personalización del contenido.

Personalización general.

Scrollbar Personalizado en Blogger

Entradas aleatorias

Archivo

Marcadores

Formulario de contacto