-->

Articulo

Infobox & Ribbon CSS


Este es un diseño adaptado a blogger, el otro día lo encontre en internet y lo use en uno de mis blog, pero ahora lo comparto para mi circulo blogger. El infobox contiene un ribbon de color diferente que muestra el titulo o información general, y abajo para agregar o adjuntar algo.

Yo le puse unos iconos, pero es facil de borrarlos si no es de su agrado.

Empecemos a instalar este diseño en nuestros blogs.

1) primero vamos a nuestra plantilla y editaremos el HTML.


Buscamos la etiqueta </b:skin> y pegaremos el codigo CSS arriba de esa etiqueta.
.infobox-container {
position: relative;
display: inline-block;
margin: 0;
padding: 0;
width: auto;
}
.infobox {
width: 500px; /* Ancho del Infobox */
background: #424242; /* Color de Fondo */
padding: 10px 5px 5px 5px;
margin:10px;
color: #fff;
font-size: 90%;
}
.infobox h3 {
background: #3198dd;
width: 520px;
color: #fff; /* Color de Titulo */
padding: 10px 5px;
margin: 0;
font-size: 160%;
text-align: center; /* Ubicación del Titulo */
font-weight: bold;
}
.infobox h3 {
position: relative;
left: -15px;
}
.infobox-container .triangle-l {
border-color: transparent #2083c2 transparent transparent;
border-style:solid;
border-width:13px;
height:0;
width:0;
}
.infobox-container .triangle-r {
border-color: transparent transparent transparent #2083c2;
border-style:solid;
border-width:13px;
height:0;
width:0;
}
.infobox-container .triangle-l {
position: absolute;
left: -12px;
top: 45px;
}
.infobox-container .triangle-r {
position: absolute;
left: 266px;
top: 45px;
}
.infobox {
position: relative;
z-index: 90;
}
.infobox h3 {
position: relative;
z-index: 100;
}
.infobox-container .triangle-l {
z-index: 0; /* displayed under the infobox */
}
.infobox-container .triangle-r {
z-index: 0; /* displayed under the infobox */
}
.infobox {
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.55);
-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.55);
box-shadow: 0px 0px 3px rgba(0,0,0,0.55);
background-image: -webkit-gradient(linear, left top, left bottom, from(#6a6b6b), to(#424242));
background-image: -moz-linear-gradient(top,#6a6a6a,#424242);
}
.infobox h3 {
-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.55);
-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.55);
box-shadow: 0px 0px 3px rgba(0,0,0,0.55);
background-image: -webkit-gradient(linear, left top, left bottom, from(#33acfc), to(#3198dd));
background-image: -moz-linear-gradient(top,#33acfc,#3198dd);
text-shadow: #2187c8 0 -1px 1px;
}
.infobox a {
color: #35b0ff;
text-decoration: none;
border-bottom: 1px dotted transparent;
}
.infobox a:hover, .infobox a:focus {
text-decoration: none;
border-bottom: 1px dotted #35b0ff;
}
Y Guardamos nuestra plantilla.

2) En el segundo paso agregaremos el HTML a una entrada nueva.


Y vamos a redactar en HTML.



Ahora pegamos todo el siguiente codigo.
<center>
<div class="infobox-container">
<div class="triangle-l">
</div>
<div class="triangle-r">
</div>
<div class="infobox">
<h3>
  TITULO GENERAL</h3><br />
<span style="font-size: large;"><img height="16" src="https://lh6.googleusercontent.com/-S3jDNtu6UN4/U4vUyNy7HiI/AAAAAAAAA1w/4XnIs6j1JYQ/s16-no/engine.png" width="16"> <b>Engine:</b> Titulo 2 <br>
  <span style="font-size: large;"><img height="16" src="https://lh3.googleusercontent.com/-PsSygQ1C0sU/U4vUyAGhi_I/AAAAAAAAA1c/9YhUZcfTIUM/w15-h16-no/author.png" width="16"> <b>Autor:</b> Anonimo<br>
  <span style="font-size: large;"><img height="16" src="https://lh4.googleusercontent.com/-FD0Oo5VyQGY/U4vUywE-B5I/AAAAAAAAA1s/N9lcK8wYdjQ/w12-h16-no/more.png" width="12"> <b>Detalles:</b> Aqui entra el detalle completo de la entradal del blog.</center>
Ahora explicare algunas cosas del HTML.

VERDE: Es el titulo General que se encuentra en el Ribbon.
ROJO: Es el codigo de incersión de imagenes. Puedes insertar cualquier imagen, pero se autodimencionara en 16x16.
AZUL: Es el titulo antepuesto del texto a redactar.
MORADO: Este color es el texto despues de los titulos de las categorías.

Ahora la clasica demo:

TITULO GENERAL


Engine: Titulo 2
Autor: Anonimo
Detalles: Aqui entra el detalle completo de la entradal del blog.

0 Comentarios