Como insertar Widget / Gadget de perfil en Blogger / Widget profile con CSS

Fácil tutorial y ejemplos de widget / gadget de tu perfil de usuario de Blogger en tu blog.... ya de acuerdo sabemos que podemos agregar nuestro perfil de Blogger en nuestro blog haciendo uso de gadget por defecto pero ahora les he elaborado algunas ideas de como pueden personalizarlo y aplicarlo fácilmente a tu blog por tus propios medio :) bueno .... entonces comencemos:


1.- Ingresar a tu cuenta en www.blogger.com
2.- Selecciona el blog que deseas modificar
3.- Ir a Diseño

4.- Clic en la opción Añadir un Gadget

5.- Seleccione HTML/Javascript

6.- Configuramos nuestro Gadget

Algunos Ejemplos usando CSS

Información adicional:

Buscar y reemplazar las frases:

URL DE FOTO DE PERFIL AQUI
URL DE TU PERFIL AQUI

<style type="text/css">#perfil-blogger {width:300px;overflow:hidden;font-family: "Arial","Helvetica",sans-serif;font-size: 12px;background: #F7F3F3;-moz-border-radius:5px;-khtml-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;} #perfil-blogger .foto-de-perfil {float: left;background: #FAFAFA;border: 1px solid #BE0A0A;padding: 8px;margin-top: 0.5em;margin-bottom: 0.5em;margin-right: 0.5em;-moz-transform: rotate(5deg);-o-transform: rotate(5deg);-webkit-transform: rotate(5deg);-ms-transform: rotate(5deg);transform: rotate(5deg);-webkit-transition:all .3s ease-in-out;-moz-border-radius:5px;-khtml-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;} #perfil-blogger .intereses {text-align: left;border-top:0;border:1px solid #BE0A0A;padding:5px 11px;line-height: 1em;color:#000000;} #perfil-blogger .enlace-de-perfil {background: url(http://www.blogger.com/img/logo-16.png) no-repeat scroll 0 0 transparent;line-height: 1;padding: 0 3px 5px 20px;width: 60px;}</style> <div id="perfil-blogger"> <div class="intereses"> <img class="foto-de-perfil" width="80" height="80" src="URL DE FOTO DE PERFIL AQUI" alt="Mi foto"></img></a> <p> <b>Ubicación: Nicaragua y</br> en Blogger desde enero del 2006.</br> Intereses:</b> Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500</p> </br> <div class="enlace-de-perfil"> <a href="URL DE TU PERFIL AQUI" target='_blank'>[Ver perfil]</a></div> </div> </div>

Copia y pega el código anterior.

<style type="text/css">#perfil-blogger {width:300px;height:170px;overflow:hidden;-moz-box-shadow:inset 0px 1px 0px 0px #f5978e;-webkit-box-shadow:inset 0px 1px 0px 0px #f5978e;box-shadow:inset 0px 1px 0px 0px #f5978e;background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f24537), color-stop(1, #c62d1f) );background:-moz-linear-gradient( center top, #f24537 5%, #c62d1f 100% );filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f24537', endColorstr='#c62d1f');background-color:#f24537;-webkit-border-top-left-radius:15px;-moz-border-radius-topleft:15px;border-top-left-radius:15px;-webkit-border-top-right-radius:15px;-moz-border-radius-topright:15px;border-top-right-radius:15px;-webkit-border-bottom-right-radius:15px;-moz-border-radius-bottomright:15px;border-bottom-right-radius:15px;-webkit-border-bottom-left-radius:15px;-moz-border-radius-bottomleft:15px;border-bottom-left-radius:15px;text-indent:0;border:1px solid #d02718;display:inline-block;color:#ffffff;font-family:Arial;font-size:12px;line-height:1px;text-decoration:none;text-shadow:1px 1px 0px #810e05;} #perfil-blogger .foto-de-perfil {float: left;background: #FAFAFA;padding: 3px;margin-top: 0.5em;margin-bottom: 0.5em;margin-right: 0.5em;-moz-border-radius:60px;-khtml-border-radius:60px;-webkit-border-radius:60px;border-radius:60px;} #perfil-blogger .intereses {text-align: left;border-top:0;padding:5px 11px;line-height: 1em;color:#FFFFFF;} #perfil-blogger .enlace-de-perfil {background: url(http://www.blogger.com/img/logo-16.png) no-repeat scroll 0 0 transparent;line-height: 1;padding: 0 3px 5px 20px;width: 120px;}</style> <div id="perfil-blogger"> <div class="intereses"> <img class="foto-de-perfil" width="80" height="80" src="URL DE FOTO DE PERFIL AQUI" alt="Mi foto"></img></a> <p> <b>Ubicación: Nicaragua y</br> en Blogger desde enero del 2006.</br> Intereses:</b> Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500</p> </br> <div class="enlace-de-perfil"> <a href="URL DE TU PERFIL AQUI" target='_blank'>[Ver perfil]</a></div> </div> </div>

Copia y pega el código anterior.

<style type="text/css">#perfil-blogger {width:300px;overflow:hidden;font-family: "Arial","Helvetica",sans-serif;font-size: 12px;background: #8AB84B;border: 3px solid #BE0A0A;-moz-border-radius:5px;-khtml-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;} #perfil-blogger .foto-de-perfil {float: left;background: #FAFAFA;border: 1px solid #BE0A0A;padding: 3px;margin-top: 0.5em;margin-bottom: 0.5em;margin-right: 0.5em;-moz-border-radius:5px;-khtml-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;} #perfil-blogger .intereses {text-align: left;border-top:0;border:1px solid #BE0A0A;padding:5px 11px;line-height: 1em;color:#E2EBCE;} #perfil-blogger .enlace-de-perfil {background: url(http://www.blogger.com/img/logo-16.png) no-repeat scroll 0 0 transparent;line-height: 1;padding: 0 3px 5px 20px;width: 60px;}</style> <div id="perfil-blogger"> <div class="intereses"> <img class="foto-de-perfil" width="80" height="80" src="URL DE FOTO DE PERFIL AQUI" alt="Mi foto"></img></a> <p> <b>Ubicación: Nicaragua y</br> en Blogger desde enero del 2006.</br> Intereses:</b> Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500.</p> </br> <div class="enlace-de-perfil"> <a href="URL DE TU PERFIL AQUI" target='_blank'>[Ver perfil]</a></div> </div> </div>

Copia y pega el código anterior.

<style type="text/css">#perfil-blogger {width:300px;height:170px;overflow:hidden;-moz-box-shadow:inset 0px 1px 0px 0px #97c4fe;-webkit-box-shadow:inset 0px 1px 0px 0px #97c4fe;box-shadow:inset 0px 1px 0px 0px #97c4fe;background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #3d94f6), color-stop(1, #1e62d0) );background:-moz-linear-gradient( center top, #3d94f6 5%, #1e62d0 100% );filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3d94f6', endColorstr='#1e62d0');background-color:#3d94f6;-webkit-border-top-left-radius:15px;-moz-border-radius-topleft:15px;border-top-left-radius:15px;-webkit-border-top-right-radius:15px;-moz-border-radius-topright:15px;border-top-right-radius:15px;-webkit-border-bottom-right-radius:15px;-moz-border-radius-bottomright:15px;border-bottom-right-radius:15px;-webkit-border-bottom-left-radius:15px;-moz-border-radius-bottomleft:15px;border-bottom-left-radius:15px;text-indent:0;border:1px solid #337fed;display:inline-block;color:#ffffff;font-family:Arial;font-size:12px;line-height:1px;text-decoration:none;text-shadow:1px 1px 0px #1570cd;} #perfil-blogger .foto-de-perfil {float: left;background: #FAFAFA;border: 1px solid #7F8C8D;padding: 3px;margin-top: 0.5em;margin-bottom: 0.5em;margin-right: 0.5em;-moz-border-radius60px;-khtml-border-radius:60px;-webkit-border-radius:60px;border-radius:60px;} #perfil-blogger .intereses {text-align: left;border-top:0;border:1px solid #BE0A0A;padding:5px 11px;line-height: 1em;color:#E2EBCE;} #perfil-blogger .enlace-de-perfil {background: url(http://www.blogger.com/img/logo-16.png) no-repeat scroll 0 0 transparent;line-height: 1;padding: 0 3px 5px 20px;width: 60px;}</style> <div id="perfil-blogger"> <div class="intereses"> <img class="foto-de-perfil" width="80" height="80" src="URL DE FOTO DE PERFIL AQUI" alt="Mi foto"></img></a> <p> <b>Ubicación: Nicaragua y</br> en Blogger desde enero del 2006.</br> Intereses:</b> Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500.</p> </br> <div class="enlace-de-perfil"> <a href="URL DE TU PERFIL AQUI" target='_blank'>[Ver perfil]</a></div> </div> </div>

Copia y pega el código anterior.

<style type="text/css">#perfil-blogger {width:300px;overflow:hidden;font-family: "Arial","Helvetica",sans-serif;font-size: 12px;background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7fQgWP0dBgGvJoxbjxvU_azap9p3tE6dyyA2aqadmPxc5KNhLhGdqYTJUPqv6aVbq9b1Lks3Gy1i0RHpvVonwI2Vp0nJ7OkvpUUySykr-pCiyqQtQID5nEWiyhOAROePCPG1TKw/s1600/image4.png');-webkit-border-top-left-radius:0px;-moz-border-radius-topleft:0px;border-top-left-radius:0px;-webkit-border-top-right-radius:30px;-moz-border-radius-topright:30px;border-top-right-radius:30px;-webkit-border-bottom-right-radius:0px;-moz-border-radius-bottomright:0px;border-bottom-right-radius:0px;-webkit-border-bottom-left-radius:30px;-moz-border-radius-bottomleft:30px;border-bottom-left-radius:30px;border-top:5px solid #CCCCCC;border-right:5px solid tomato;border-bottom:5px solid #cccccc;border-left:5px solid tomato;} #perfil-blogger .foto-de-perfil {float: left;background: #CCCCCC;border: 1px solid #34495E;padding: 3px;margin-top: 0.5em;margin-bottom: 0.5em;margin-right: 0.5em;-moz-border-radius:5px;-khtml-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;} #perfil-blogger .intereses {text-align: left;border-top:0;border:1px solid #34495E;padding:5px 11px;line-height: 1em;color: #34495E;} #perfil-blogger .enlace-de-perfil {background: url(http://www.blogger.com/img/logo-16.png) no-repeat scroll 0 0 transparent;line-height: 1;padding: 0 3px 5px 20px;width: 60px;}</style> <div id="perfil-blogger"> <div class="intereses"> <img class="foto-de-perfil" width="80" height="80" src="URL DE FOTO DE PERFIL AQUI" alt="Mi foto"></img></a> <p> <b>Ubicación: Nicaragua y</br> en Blogger desde enero del 2006.</br> Intereses:</b> Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500</p> </br> <div class="enlace-de-perfil"> <a href="URL DE TU PERFIL AQUI" target='_blank'>[Ver perfil]</a></div> </div> </div>

Copia y pega el código anterior.

<style type="text/css">#perfil-blogger {width:300px;overflow:hidden;font-family: "Arial","Helvetica",sans-serif;font-size: 12px;background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4hG1m6nmvc7jzYniUKM2fBn6-5-4T1OIuFoG7z-rurw85yguUR4-VhME3oFpi3Rtsaq0SosTFch4XW3wgmRB560T2C3fmyE8-dFgGjEnJod6B6dC6WcojL-K5i7WY87cgxBt63w/s320/3783098647_fb208001b5.jpg');border-top:5px solid #CCCCCC;border-right:5px solid #2C3E50;border-bottom:5px solid #2C3E50;border-left:5px solid #CCCCCC;} #perfil-blogger .foto-de-perfil {float: left;background: #FAFAFA;border: 1px solid #000000;padding: 1px; margin-top: 0.5em;margin-bottom: 0.5em;margin-right: 0.5em;border-top:5px solid #CCCCCC;border-right:5px solid #2C3E50;border-bottom:5px solid #2C3E50;border-left:5px solid #CCCCCC;} #perfil-blogger .intereses {text-align: left;border-top:0;border:1px solid #000000;padding:5px 11px;line-height: 1em;color:#003333;} #perfil-blogger .enlace-de-perfil {background: url(http://www.blogger.com/img/logo-16.png) no-repeat scroll 0 0 transparent;line-height: 1;padding: 0 3px 5px 20px;width: 60px;}</style> <div id="perfil-blogger"> <div class="intereses"> <img class="foto-de-perfil" width="80" height="80" src="URL DE FOTO DE PERFIL AQUI" alt="Mi foto"></img></a> <p> <b>Ubicación: Nicaragua y</br> en Blogger desde enero del 2006.</br> Intereses:</b> Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500</p> </br> <div class="enlace-de-perfil"> <a href="URL DE TU PERFIL AQUI" target='_blank'>[Ver perfil]</a></div> </div> </div>

Copia y pega el código anterior.