Gracias por visitar mi pequeño Mundo.♥

martes, 18 de agosto de 2015

MiniTutorial: Como Personalizar Comentarios en Blogger


(h2) My Princess como están ;que Yo espero que bien ;amor 
Disculpen la ausencia pero ya saben (j) es que he estado  un tanto ocupadita, escuchando música;mus, leyendo libros ;q escribiendo entre otras cosas  así que tratare de no ausentarme tanto...
Hoy les quiero traer un tuto bastante útil, ya muchas de ustedes lo habrán hecho en sus blogs pero para las que se inician les sera de gran ayuda:lx 

Comenzamos: Para incluir este estilo de Comentarios personalizados en nuestro blog de Blogger asi como lo ven en la imagen, debemos de seguir los siguientes pasos:

:hi Diseño ►Edición HTML ►Presionar Ctrl + F, en el buscador y le damos a pegar la siguiente palabra

]]></b:skin>
:hi Y Arriba de  ]]></b:skin> pegamos el siguiente código:


 /* Caja del comentario
-----------------------*/
.comment-content{
background:#FF4848;
padding:13px;
border-radius:10px;
color:#FFFFFF; }
h4{/* Titulo "No hay comentarios/Nro Cometarios" */
border-radius: 10px;
background:#FF4848;
text-align:center;
color:#FFFFFF;
text-shadow: 0px 0px 3px #FFFFFF;
}
.user {/* Nombre del usuario */
background: #FAF1F1;
padding: 7px;
margin-left: 10px;
border-radius: 10px 10px 0 0;
}
.icon {
background: transparent;
}
.comment-block{/* Caja */
position:static !important; /* Mantiene el Avatar delante */
background:#FFBBBB ;/* Color de Fondo de la Caja */
padding:10px;
border-radius: 15px 15px 15px 15px;
}
.comment-block a{/* Links de la caja*/
font-weight: normal;
}
.avatar-image-container{/* Contorno de los avatares */
background:#FFBBBB;
padding:5px;
border-radius:50% 50% 0% 50%;
}
.avatar-image-container img{/* Avatares de comentarios */
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
border-radius:50%;
}
.avatar-image-container img:hover{/* Avatares de comentarios "HOVER" con rotacion*/
border-radius:50%;
transform: rotate(360deg) ;
-webkit-transform: rotate(360deg) ;
-moz-transform: rotate(360deg) ;
-o-transform: rotate(360deg) ;
-ms-transform: rotate(360deg) ;
}
.secondary-text a{/* Links Fecha/Responder/Eliminar */
color: #FF4848;
padding: 3px;
background:#FAF1F1;
float: center;
border-radius:5px;
text-shadow: none;
}
.comments .continue a {
background:#FF4848 !important;
color:#fff !important;
float:right!important ;
padding:2px 2px!important;
height:18px;
line-height:10px !important;
margin-top:-1px !important;
text-shadow:0 0 !important;
box-shadow:inset 0 1px 2px #fff;
}
.comments .continue a:hover {
font-style: normal !important;
color: #000 !important;
text-decoration: none;
}
:estTambién Puedes modificar los colores según tu gusto:est
:hi Al terminar le das a Guardar plantilla y Listo.

Nota: Este tuto no es mio, ha sido editado en su gran mayoría por mi; hace mucho que lo tengo guardado en mi PC ...pero si se que lo saque de la  Web.

Espero que les haya gustado y no olviden dejar sus lindos comentarios



1 comentario:

  1. Hola!! Gracias!! Estaba buscando este tuto y aparecían cosas taaann complicadas T-T pero este ya lo hice y esta genial!! Solo tengo que darle unos retoques a mi blog para que los comentarios combinen con el blog!! Gracias niña Jones (◕‿◕✿)

    ResponderEliminar

Holiiss (≧∀≦) Si deseas dejar tus comentarios azucarados; hazlo con palabras apropiadas, sin ofender ni criticar a nadie, me daría mucho gusto leer lo que opinas de mis entradas ... ( ̄ω ̄;) Kiss

(*^◎^*) o(≧v≦)o(︶ω︶) ↖(^ω^)↗ o(╯□╰)o (@^_^@)(¯﹃¯) ʕ•ᴥ•ʔ(>^ω^<)(◡‿◡✿) (⊙o⊙) ●ω● (。♥‿♥。)(╥_╥) (≧◡≦)(◕‿◕✿)\(^o^)/(~﹃~)~zZ (●*∩_∩*●) ♡(*´◡`​*) ♥(=^・ェ・^=)♥ (✿◠‿◠) (*^ -^*) (っ◔◡◔)っ ♥ ❤ ❥ ✿ ☂ ღ ツ ☼ ✿ εїз Ƹ̴Ӂ̴Ʒ ♂ ♀ ✔♚ ♛ ✝ ✉(•_•) (◐.̃◐)

(*・∀・)/Gracias por Tu Linda Visita ♡\(・∀・*)

ƸӜƷ Deja Tus Comentarios Azucarados ƸӜƷ