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

  • BlogFlux Si lo que quieren es hacer un boton para su blog deben entrar aquí BlogFlux . Aquí encontrarán todas las partes del boton que pueden configurar. Como ven en la imagen donde dice "left […]
  • Cambios en el titulo parte I, Entendiendo las cosas basicas, Classic Blogger Generalmente dependiendo de la persona que realizó el diseño de tu blog, todo lo que sea título, se define como head, o encabezado (si se traduce) En mi blog este código que presento a […]
  • Responde Preguntas en Yahoo y lleva visitas a tu Blog Este es un pequeño dato, vasta con que ingresen al servicio de answers yahoo y respondan preguntas que estan relacionadas con el tema de sus blogs, entonces podrán dejar en el campo de […]
  • 3 plantillas con estilos verdes -Demo -Descargar -Demo -Descargar -Demo -Descargar Disfruta de estas 3 templates o plantillas de blogger, para instalarlas solo tienes que descargarlas y guardarlas en tu […]
  • Agrega en tu Blog tu Imagen de Gmail Este Post es aplicable en cualquier plataforma de Blogs (Blogger, WordPress...) o Página web. Solo debes ingresar a GSIG, escribir tu username de gmail, y listo tendras el codigo de las […]
  • El uso de Technorati Tags para generar visitas. Bueno, colaboro con este sitio despues de mucho tiempo... Segun Enrique Dans, blogger español el motor de busqueda de Technorati proporciona una utilidad mas que el etiquetado social, ya […]
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 *