2.2.14

Post footer de suscripcion como el mio -Tutorial-

13 comentarios :
kawaii
Hola corazon hoy vengo en respuesta a Grimmy que me pregunto por mi post footer 
anime girl

Bueno es muy facil lo que yo hago es colocar el codigo al fina de mi entrada en la opcion HTML 
<style>
.TBTpostauthorbox {
position: relative;
margin: 5px auto;
padding: 5px;
width:auto;
min-height: 105px;
font:12px tahoma;
text-align:justify;
text-shadow:1px 0 0 #fff;
color:#b3b3b3;
border: 1px solid #c4c4c4;
border-radius: 5px;
background:#F9F9F9;
-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 {
float: left;
height: 70px;
width:70px;
padding: 3px;
position: relative;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 100px;

}
.TBTpostauthoravatar img {
height: 85px;
width: 85px;
border-radius: 100px;
}
.TBTpostauthorlabel {
background: url("http://i.imgur.com/uiQtVsL.png") no-repeat center transparent;
display: block;
height: 25px;
position: absolute;
bottom: -30px;
width: 128px;
margin-left: -17px;
}
.TBTpostauthorcontent {
margin-left: 110px;
}
.TBTpostauthorhead {
border-bottom: 1px solid #c4c4c4;
margin-bottom: 5px;
padding: 0 0 5px 0;
position: relative;
}
.TBTpostauthorbox h5 {
font-family: Trebuchet MS;
color: #777;
font-size: 18px;
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: #777 !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: #FF2654 !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: 5px;
font:10px tahoma;
text-align:justify;
color:#777;
}
.TBTpostauthorbox p a {
color: #E65002;
}
.TBTpostauthorbox-footer{
padding:10px 0 10px;
}
</style>
<div class="TBTpostauthorbox">
<div class="TBTpostauthoravatar">
  <img  src="http://i.imgur.com/F0YK2jE.png"/>
<div class="TBTpostauthorlabel"></div>
</div>
<div class="TBTpostauthorcontent">
<div class="TBTpostauthorhead">
<h5>
  Escrita por:
                            <a href="url perfil o sobre mi " title="Katty">
                               ℓσvєly
                            </a>
</h5>
</div>
<div class="postAuthorbio">
  Te ha gustado esta entrada?
                          <b>
</b>
</div>
<div class="postauthorbox-footer">
<div style="float:left;text-align:left;">
 entonces sigueme y no te pierdas el siguiente
                            <a href="http://twitter.com/usuario" rel="nofollow" target="_blank">
                              Twitter
                            </a>
                            |
                            <a href="http://www.facebook.com/perfil" rel="nofollow" target="_blank">
                              Facebook
                            </a>
                            | 
                            <a href="http://plus.google.com/perfil" rel="nofollow" target="_blank">
                              Google Plus
                             </a>
                             |
                            </a>
  <a href="Tu feed" rel="nofollow" target="_blank">
                              Email
                            </a>
</div>
</div>
</div>
</div>

Que cambiar?
Rojo= imagen del autor e imagen que dice admin
Azul= link del perfil o lo que sea y un titulo y nombre
Naranja= un texto que quieras
Verde= los link y nombres de tus redes sociales

Bueno eso es todo si tienes alguna duda dejame un comentario o enviame un email a correodelsg@gmail.com

Besos y abrazos Lovelysweetgirl


anime girl
Escrita por: ℓσvєly

13 comentarios :

  1. Muy interesante tutorial. Muy útil.
    Por cierto, el diseño del blog está hermoso *3*
    Saludos!

    ResponderEliminar
  2. Gracias por tomarte las molestias :'3

    ResponderEliminar
  3. gracias !! estoy en mi nuevo diseño y lo haré :D

    ResponderEliminar
  4. Muy bueno el tuto gracias por comparirlo >-<

    ResponderEliminar
  5. Exelente gracias por el tutorial es muy util :)

    ResponderEliminar
  6. se agradece el tutorial :D

    ResponderEliminar
  7. Sorry~pero....donde coloco el codigo? En el codigo htlm?
    Es que yo no encuentro el termino "style"
    T__________T

    ResponderEliminar

Todo comentario es importante para el blog.
Pero por favor no escribas

✘INSULTOS