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

  • Como mostrar los Distintos rankings de mi Blog, Pagerank, Alexa, Technorati (Blogger, WordPress) Esto es aplicable en cualquier plataforma de Blogs o Paginas web. Este servicio Rankwidget nos permite mostrarle a nuestras visitas, que tan bien posicionados estamos. Simplemente […]
  • Miembros BLOGALAXIA TAGS yap...para una mejor busqueda de algunos buscadores de blogs, les comunico que se pueden agregar tags, por lo que se, estos son validos al menos para blogalaxia y para technorati.. Aqui […]
  • Que tan adictos? Un test para saber que tan adictos sos... Es muy bueno, mi resultado dio 21% (normal)xd... Prueben ustedes: Visita el Blog, que creo este test AQUI Bueno espero que les haya interesado Saludos
  • Como tener mas de una direccion para que accedan a vuestro blog ¿Cómo podéis crear un nuevo dominio para vuestro blog? Es muy muy fácil. El dominio será del tipo www.vuestroblog.es.mw. Si vuestro blog se llama "Locura primaveral", lo que tenéis que […]
  • ¿Cómo puedo modificar la fecha/hora de mi entrada? La opcion para cambiar la fecha y hora de las entradas se encuentra al final del campo en donde escribes la entrada, con el nombre de Opciones de entrada : Una vez que hayan hecho […]
  • Plantillas Navideñas, WordPress É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 […]
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 *