Agregar una Imagen en el Titulo a la Plantilla Minima Black, Classic-Blogger

Classic Blogger, Personaliza Código, Plataformas, Título

La imagen pueden subirla a blogger o en cualquier otro host.

Aqui les dejo la Plantilla Minima Black con los cambios Ya realizados, para que la descarguen: Minima Black Imagen en el Titulo

Todo lo que esta entre ” ” es una explicacion que deben eliminar, la puse al lado de cada linea que se debe modificar para que quedara mas claro, si no entienden algo, dejen la pregunta en el comentario.

Este el codigo Inicial:

< View plain text >
css

  1. /* -----------------------Header ----------------------------------------------- */
  2. @media all {
  3. <!--EN ESTA PARTE AGREGAREMOS 3 LINEAS UNA CORRESPONDE AL LINK DE LA FOTO, OTRA ES PARA AJUSTAR EL ANCHO Y LA ULTIMA PARA CENTRAR LA IMAGEN-->
  4.   #header {
  5.     width:660px;
  6.     margin:0 auto 10px;
  7.     border:1px solid #333;   <!--ESTO CORRESPONDE AL BORDE MAS EXTERNO SI QUIEREN LO ELIMINAN-->
  8.     }
  9.   }
  10. @media handheld {
  11.   #header {
  12.     width:90%;
  13.     }
  14.   }
  15. #blog-title {
  16.   margin:5px 5px 0;
  17.   padding:20px 20px .25em;
  18.   border:1px solid #222;  <!--CON NONE ELIMINAMOS EL BORDE-->
  19.   border-width:1px 1px 0;
  20.   font-size:200%;
  21.   line-height:1.2em;
  22.   color:#ccc;
  23.   text-transform:uppercase;
  24.   letter-spacing:.2em;
  25.   }
  26. #blog-title a {
  27.   color:#ccc;
  28.   text-decoration:none;
  29.   }
  30. #blog-title a:hover {
  31.   color:#ad9;
  32.   }
  33. #description {
  34.   margin:0 5px 5px;
  35.   padding:0 20px 20px;
  36.   border:1px solid #222;  <!--CON NONE ELIMINAMOS EL BORDE-->
  37.   border-width:0 1px 1px;
  38.   font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
  39.   text-transform:uppercase;
  40.   letter-spacing:.2em;
  41.   color:#777;
  42.   }

Este el codigo Final:

< View plain text >
css

  1. /* -----------------------Header ----------------------------------------------- */
  2. @media all {
  3.   #header {
  4.     width:660px;
  5.     margin:0 auto 10px;
  6.     border:none; <!-- ASI ELIMINAN EL BORDE -->
  7.     background: #000 url( http://photos1.blogger.com/blogger/7875/3285/1600/Encabezado%20Pagina%201.jpg) no-repeat;  <!--ESTA ES LA URL DE LA IMAGEN #000 CORRESPONDE AL COLOR DE FONDO LO PUEDE CAMBIAR, REVISEN POST ANTERIORES-->
  8.     padding: 0 0 187px 0;  <!--CON ESTE PADDING PUEDEN AJUSTAR EL ANCHO SI SU FOTO ES MAS ANCHO CAMBIAN EL 187, POR UN VALOR MAYOR Y VICEVERSA-->
  9.     background-position: center; <!--ESTA ES PARA CENTRAR LA IMAGEN-->
  10.     }
  11.   }
  12. @media handheld {
  13.   #header {
  14.     width:90%;
  15.     }
  16.   }
  17. #blog-title {
  18.   margin:5px 5px 0;
  19.   padding:20px 20px .25em;
  20.   border:none; <!--ELIMINAMOS EL OTRO  BORDE -->
  21.   font-size:200%;
  22.   line-height:1.2em ;
  23.   color:#ccc;
  24.   text-transform:uppercase;
  25.   letter-spacing:.2em;
  26.   }
  27. #blog-title a {
  28.   color:#ccc;
  29.   text-decoration:none;
  30.   }
  31. #blog-title a:hover {
  32.   color:#ad9;
  33.   }
  34. #description {
  35.   margin:0 5px 5px;
  36.   padding:0 20px 20px;
  37.   border:none; <!--ELIMINAMOS OTRO BORDE EL DE LA DESCRIPCION-->
  38.   font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
  39.   text-transform:uppercase;
  40.   letter-spacing:.2em;
  41.   color:#777;
  42.   }

Artículos Relacionados

  • Bloquea el boton derecho, Classic-Blogger Es muy util cuando no queres que te copien tu contenido!Solo debes copiar y pegar este codigo en tu plantilla, procura que sea despues de la etiqueta <head> Descargar Codigo
  • ¿Cómo subir un video de youtube a mi blog? Este Post es aplicable en cualquier plataforma de Blogs (Blogger, WordPress...) o Página web. Asi se llama este post que encontre en una seccion del blog de anita, super bien explicado […]
  • Plantillas Navideñas, Blogger Éste dato es para los que gustan cambiar su plantilla según la época del año en que estemos, aquí les dejo una linda plantilla navideña, solo haz click en la imagen y llegarán a la […]
  • Relojes_Digitales_Para_el_Blog (Reloj para el Blog) Hace poco alguien andaba buscando un reloj, así que aquí hay varios, gracias al gentil auspicio de Pekegifs, si tienen dudas de: "en donde deben pegar el código" pueden revisar el post
  • ULINKX Videos Para el Blog ULINKX Me parecio interesante para los que necesitan subir videos de Youtube, google, yahoo,IFilm. Ya que esta pagina te permite buscar videos en todos los servicios que mencione, y […]
  • Relojes para tu Blog (Blogger, WordPress, Web) Esta página ya la había mencionado anteriormente para que , ahora les muestro que también pueden agregar relojes, el procedimiento para agregar estos accesorios es el mismo que el del […]
patriram
Soy Blogger desde hace mucho tiempo. Inicialmente este blog se creó para entregar tutoriales paso a paso a las personas que estuvieran ingresando al mundo online. Muchos de mis tutoriales no requieren de conocimiento previo ni habilidades, la idea siempre fue tender una mano a los que usualmente no entienden nada. Como pueden ver estuvo bastante abandonado por varios años pero ahora lo retomaré con otro énfasis, explicación de herramientas mas complejas, y en la medida de lo posible se irán renovando los post que con el tiempo han quedado obsoletos.

About patriram

Soy Blogger desde hace mucho tiempo. Inicialmente este blog se creó para entregar tutoriales paso a paso a las personas que estuvieran ingresando al mundo online. Muchos de mis tutoriales no requieren de conocimiento previo ni habilidades, la idea siempre fue tender una mano a los que usualmente no entienden nada. Como pueden ver estuvo bastante abandonado por varios años pero ahora lo retomaré con otro énfasis, explicación de herramientas mas complejas, y en la medida de lo posible se irán renovando los post que con el tiempo han quedado obsoletos.

Leave a Reply

Your email address will not be published. Required fields are marked *