Tutoriales Sobre Blogger: Botones CSS en la caja de comentarios

En este tutorial a pedido de un bloggers que me pidió sobre como agregar botones en la caja de comentarios de blogger.

En mi casa tengo 3 botones para los usuarios
Convertidor ComentariosColor HexadecimalFuera de Tema

Ya que este tutorial no lo he publicado, seguiremos con este tutorial a pedido.

La demostración la encontraras en mi blog:

Comencemos:

• 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

.engraved { background: rgba(0, 0, 0, .08); display: inline-block; padding: px; border-radius: 30px; -moz-border-radius: 30px; -webkit-border-radius: 30px; }
.engraved a { color: #fff; border: px solid rgba(0, 0, 0, .3); display: inline-block; padding: .2em 1em; position: relative; text-decoration: none; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); border-radius: 30px; -moz-border-radius: 30px; -webkit-border-radius: 30px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); }
.engraved a.red { background: #c60000; background: linear-gradient(top, #c60000 0%, #b20000 100%); background: -moz-linear-gradient(top, #c60000 0%, #b20000 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c60000), color-stop(100%, #b20000)); background: -webkit-linear-gradient(top, #c60000 0%, #b20000 100%); }
.engraved a.orange { background: #f99015; background: linear-gradient(top, #f99015 0%, #f76c0f 100%); background: -moz-linear-gradient(top, #f99015 0%, #f76c0f 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f99015), color-stop(100%,#f76c0f)); background: -webkit-linear-gradient(top, #f99015 0%,#f76c0f 100%); }
.engraved a.green { background: #30a146; background: linear-gradient(top, #30a146 0%, #249334 100%); background: -moz-linear-gradient(top, #30a146 0%, #249334 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #30a146), color-stop(100%, #249334)); background: -webkit-linear-gradient(top, #30a146 0%, #249334 100%); }
.engraved a.blue { background: #16a4c8; background: linear-gradient(top, #16a4c8 0%, #1086b6 100%); background: -moz-linear-gradient(top, #16a4c8 0%, #1086b6 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #16a4c8), color-stop(100%, #1086b6)); background: -webkit-linear-gradient(top, #16a4c8 0%, #1086b6 100%); }
.engraved a.gray { background: #c2c2c2; background: linear-gradient(top, #c2c2c2 0%, #aeaeae 100%); background: -moz-linear-gradient(top, #c2c2c2 0%, #aeaeae 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c2c2c2), color-stop(100%, #aeaeae)); background: -webkit-linear-gradient(top, #c2c2c2 0%, #aeaeae 100%); }
.engraved a.dark { background: #464646; background: linear-gradient(top, #464646 0%, #343434 100%); background: -moz-linear-gradient(top, #464646 0%, #343434 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #464646), color-stop(100%, #343434)); background: -webkit-linear-gradient(top, #464646 0%, #343434 100%); }
.engraved a:hover, .engraved:hover { color: #fff; opacity: .5 }

• Paso 4: Todavia en la plantilla buscamos la siguiente linea (Ctrol + F)

<p><data:blogCommentMessage/></p>

• Paso 5: Antes de la etiqueta de cierre </p> pegamos el siguiente código HTML.

<div class='engraved' gt='gt' span='span' style='text-align: center;'>
<a class='blue' href='http://www.tutoriales-blogger.info/p/convertidor-de-comentarios.html' target='_blank'> Convertidor Comentarios</a></div><div class='engraved' gt='gt' span='span' style='text-align: center;'>
<a class='blue' href='http://www.tutoriales-blogger.info/p/generador-de-color-exadecimal.html' target='_blank'> Color Hexadecimal</a></div>
<div class='engraved' gt='gt' span='span' style='text-align: center;'>
<a class='blue' href='http://www.tutoriales-blogger.info/p/fuera-de-tema-otro-tema.html' target='_blank'>Fuera de Tema</a></div>

Nota:-  Solo debemos cambiar lo que esta en Rojo por URL de tus enlaces

• Paso 6: Guardamos los cambios realizados 

<a class='blue' el blue lo puedes cambiar por los colores en ingles como red, green, orange