Elegante caja de Administrador debajo de cada entrada
| Gambar Produk Anda | |
|---|---|
| Kode Barang | Kode produk taruh disini! |
| Harga | Rp 22,000.00 |
| Keterangan | Fitur produk! |
| Stok Barang | Stok barang anda! |
| Gambar Tambahan | Gambar Tambahan Produk |
.png)
Bueno bloggers antes que nada pido disculpas por el error garrafal que eh tenido con una entrada anterior denominada
Como siempre muestro una demostración del tutorial del que vamos a realizar y siempre encuentro un detalla para corregir pero en esta entrada no tuve tiempo recuerdo
y no realice la demostración para corregir errores que siempre salteo. Al no tener una demostración, no pude corregir este error que ustedes me indicaban. No lo hagamos mas largo y corrijamos este tutorial
y no realice la demostración para corregir errores que siempre salteo. Al no tener una demostración, no pude corregir este error que ustedes me indicaban. No lo hagamos mas largo y corrijamos este tutorial
- Paso 1: Vamos a Blogger>> Plantilla>> Edición HTML>>
- Paso 2: Buscamos la siguiente linea (Ctrol + F)
]]></b:skin>
- Paso 3: Justo por encima de ]]></b:skin> pegamos el siguiente código CSS
.TBTpostauthorbox {
position: relative;
margin: 5px auto;
padding: 15px;
width:auto;
min-height: 160px;
font:14px Trebuchet MS,sans-serif;
text-align:justify;
text-shadow:1px 0 0 #fff;
color:#111;
border: 2px solid #c4c4c4;
border-radius: 5px;
background-image:-moz-linear-gradient(top,#ffffff,#eeeeee);
background-image:-webkit-gradient(linear,left top,left bottom,from(#ffffff),to(#eeeeee));
filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff,endColorStr=#eeeeee);
background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#ffffff),color-stop(1,#eeeeee));
background:-moz-linear-gradient(center top,#fff 0,#eee 100%);
-pie-background:linear-gradient(270deg,#ffffff,#eeeeee);
-moz-box-shadow:0 0 0 4px rgba(100,100,100,0.1);
box-shadow:0 0 0 4px rgba(100,100,100,0.1);
-webkit-box-shadow:0 0 0 4px rgba(100,100,100,0.1);
}
.TBTpostauthoravatar {
background: #fff;
border: 1px solid #D3D3D3;
float: left;
height: 128px;
width: 128px;
padding: 5px;
position: relative;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 5px;
-webkit-box-shadow: 0 0 4px 0 #d9d9d9;
-moz-box-shadow: 0 0 4px 0 #d9d9d9;
box-shadow: 0 0 4px 0 #d9d9d9;
}
.TBTpostauthoravatar img {
height: 128px;
width: 128px;
border-radius: 5px;
opacity: 0.5;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.TBTpostauthoravatar:hover img {
opacity: 1;
}
.TBTpostauthorlabel {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJkF6PIY3wAGS9I12jqW4oVnr9GKRQEH0qRetshbRisSwhpXxcHAqcMfix6XXvYVP5uedb-a6aqjleqZnqz_YBDA3k-GS-hqKyCIlopFE_RZ5BIFIbR4LAvWib-4Q0ffIF3zPmmldlF0R_/h64/AdminTutorialesBlogger.info.png") no-repeat center transparent;
display: block;
height: 25px;
position: absolute;
bottom: -30px;
width: 128px;
}
.TBTpostauthorcontent {
margin-left: 160px;
}
.TBTpostauthorhead {
border-bottom: 1px solid #c4c4c4;
margin-bottom: 5px;
padding: 0 0 10px 0;
position: relative;
}
.TBTpostauthorbox h5 {
font-family: Trebuchet MS;
color: #302E29;
font-size: 25px;
font-weight: normal;
line-height: 30px;
margin: 0;
border: none;
text-transform: none;
text-decoration: none;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.TBTpostauthorbox h5 a {
color: #302E29 !important;
text-decoration: none;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.TBTpostauthorbox h5 a:hover {
color: #E65002 !important;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.TBTpostauthorbox p.postAuthorbio {
line-height: 18px;
font:14px Trebuchet MS,sans-serif;
text-align:justify;
color:#111;
}
.TBTpostauthorbox p a {
color: #E65002;
}
.TBTpostauthorbox-footer{
padding:10px 0 10px;
font:bold 12px Trebuchet MS;
}
- Paso 4: Todavia en la plantilla buscamos la siguiente linea (Ctrol + F)
<data:post.body/>
- Paso 5: Seguramente aparecerán mas de 3 <data:post.body/> debajo de todos los códigos a buscar pegamos el siguiente código HTML.
<div class="TBTpostauthorbox">
<div class="TBTpostauthoravatar">
<img alt="Fernando Salas" src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-ash3/c35.35.442.442/s160x160/6298_628527040491180_1971615314_n.png"/>
<div class="TBTpostauthorlabel"></div>
</div>
<div class="TBTpostauthorcontent">
<div class="TBTpostauthorhead">
<h5>
Creada por:
<a href="http://www.tutoriales-blogger.info/p/quienes-somos.html" title="Fernando Salas">
Fernando Salas
</a>
</h5>
</div>
<div class="postAuthorbio">
Fernando es un joven de 20 años de Buenos Aires, Argentina, desde la adolescencia le encanto el mundo de Blogger. A sus primeros 15 años comenzó a escribir en foros y web como autor sobre HTML y CSS. El 24 de Noviembre de 2012 llego su propio blog denominado Tutoriales-Blogger.info.
<b>
</b>
</div>
<div class="postauthorbox-footer">
<div style="float:left;text-align:left;">
Siguenos en:
<a href="https://twitter.com/TutorialesBlogg" rel="nofollow">
</a>
|
<a href="https://www.facebook.com/TutorialesBlogger" rel="nofollow" target="_blank">
</a>
|
<a href="https://plus.google.com/u/0/102309934171768207604/posts" rel="nofollow" target="_blank">
Google Plus
</a>
</div>
</div>
</div>
</div>
- Paso 6: Guardamos los cambios realizados en la plantilla.
Nota: Cambiamos la URL de tus Redes Sociales en Roja
Nota: Cambia las URL de las imagenes en rojo por las que tus quieras Roja
Nota: Cambia las URL de las imagenes en rojo por las que tus quieras Roja
.png)
1 comentarios:
Comentario
Publicar un comentario
Con dudas, Deja tu comentario
Antes de comentar recuerda;
-No se permite spam
-No permitimos un vocabulario inapropiado
-Se se lo mas especifico
Nota:
Para introducir el código, utilice la etiqueta <i rel="pre"> AQUÍ TU CÓDIGO ... </i>
Para insertar una imagen, utilice la etiqueta <i rel="image"> SU URL IMAGEN AQUÍ ... </i>
Para insertar un título, utilice la etiqueta <b rel="h3"> SU TÍTULO AQUÍ ... </b>
Para insertar una nota, utilice la etiqueta <b rel="quote"> NOTA QUE AQUÍ ... </b>
Para crear el efecto de un uso intensivo <b> SU TEXTO AQUÍ ... </b>
Para crear el efecto del uso de la etiqueta cursiva <I> SU TEXTO AQUÍ ... </i>
Para convertir tu comentario en HTML