Modificar el widget perfil de Blogger versión para AMP html
Vamos a modificar el widget perfil de Blogger de una forma fácil y segura con
unos simples pasos.
Este widget funciona en las plantillas de Blogger que tengan el formato AMP
html
Necesita copiar el código y remplazarlo por el anterior código del widget
perfil, eso es todo lo que vamos a realizar en este tutorial creado para blogs
con la tecnología AMP Html de Blogger
Puede ver su demostración en el sidebar de este post
Empezamos
Tutorial completo
1.- Ingrese en Blogger.com
2.- Un clic en diseño
3.- Agregue el Gadget Perfil de Blogger, ubiquelo donde mejor le
parezca, si ya lo tiene instalado omita este paso
4.- Un clic en Tema
5.- Un clic en Editar HTML
6.- Busque el Gadget Profile 1
Ejemplo:
7.- Ahora debe eliminar toto el código del widget perfil a continuación
una imagen como ejemplo
8.- Una vez eliminado, deberá ingresar las siguientes lineas de código
<b:widget id='Profile1' locked='false' title='Autor' type='Profile' version='1'><b:widget-settings><b:widget-setting name='showaboutme'>true</b:widget-setting><b:widget-setting name='showlocation'>true</b:widget-setting></b:widget-settings><b:includable id='main'><b:if cond='data:title != ""'><h2><data:title/></h2></b:if><div class='widget-content'><div class='profile-info-container-wrapper'><div class='fondo-perfil-1'></div><b:if cond='data:team'> <!-- team blog profile --><ul><b:loop values='data:authors' var='i'><li><a class='profile-name-link g-profile' expr:href='data:i.userUrl' expr:style='"background-image: url(" + data:i.profileLogo + ");"'><data:i.display-name/></a></li></b:loop></ul><b:else/> <!-- normal blog profile --><div class='profile-info-top'><b:if cond='data:photo.url != ""'><a expr:href='data:userUrl'><amp-img class='profile-img' expr:alt='data:messages.myPhoto' expr:height='data:photo.height' expr:src='data:photo.url' expr:width='data:photo.width'/></a></b:if></div><dl class='profile-datablock'><dt class='profile-data'><a class='g-profile' expr:href='data:userUrl' rel='author nofollow'><data:displayname/></a><b:if cond='data:hasgoogleprofile'><br/><div class='g-follow' data-annotation='bubble' data-height='20' expr:data-href='data:userUrl'/></b:if></dt><b:if cond='data:showlocation'><dd class='profile-data'><div class='img-location'><svg id='Capa_1' style='enable-background:new 0 0 511.999 511.999;' version='1.1' viewBox='0 0 511.999 511.999' x='0px' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' y='0px'><g><path d='M511.879,475.685l-40.224-221.611c-0.401-2.212-1.773-4.128-3.739-5.221l-101.242-56.31 c-1.314-0.732-2.787-1.023-4.234-0.911l18.419,237.608l-0.617,0.276l121.164,54.357c0.986,0.441,2.034,0.659,3.077,0.659 c1.651,0,3.287-0.543,4.632-1.596C511.313,481.22,512.376,478.428,511.879,475.685z' style='fill:#44C868;'/><path d='M256,246.375l-103.545-53.931c-1.241-0.647-2.617-0.911-3.972-0.82 c0.359-0.022,0.72-0.02,1.078,0.008l-18.419,237.608l121.781,54.634c0.983,0.44,2.032,0.659,3.077,0.659l0,0V246.375z' style='fill:#44C868;'/></g><g><path d='M149.56,191.633c-1.447-0.112-2.92,0.179-4.234,0.91l-101.243,56.31 c-1.966,1.093-3.338,3.008-3.739,5.221L0.121,475.685c-0.498,2.742,0.566,5.534,2.763,7.252c1.347,1.053,2.982,1.596,4.632,1.596 c1.043,0,2.092-0.217,3.077-0.659l120.504-54.061L149.56,191.633z' style='fill:#4CE166;'/><path d='M362.439,191.628c-0.996,0.077-1.981,0.342-2.894,0.818L256,246.376v238.158c0,0,0,0,0.001,0 c1.045,0,2.095-0.218,3.077-0.659l121.781-54.634L362.439,191.628z' style='fill:#4CE166;'/></g><polygon points='28.154,321.233 19.983,366.252 140.977,302.346 143.786,266.107 144.252,260.097 ' style='fill:#FFDB56;'/><path d='M142.066,288.294l-1.089,14.052L19.983,366.252L0.121,475.685c-0.498,2.742,0.566,5.534,2.763,7.252 c1.347,1.053,2.982,1.596,4.632,1.596c1.043,0,2.092-0.217,3.077-0.659l120.504-54.061L142.066,288.294L142.066,288.294z' style='fill:#A8EEFC;'/><g><polygon points='256.03,276.08 144.252,260.097 140.977,302.346 256,477.025 256,413.507 187.363,305.429 256.03,313.642 ' style='fill:#FFBB24;'/><polygon points='459.946,244.421 411.311,217.37 365.269,228.128 365.845,235.564 368.119,264.898 ' style='fill:#FFBB24;'/></g><polygon points='372.202,317.576 367.842,261.327 367.842,261.327 365.269,228.128 256.03,276.08 256.03,313.642 327.386,282.612 ' style='fill:#FFDB56;'/><path d='M511.879,475.685l-10.103-55.666L368.119,264.898l4.084,52.678l137.07,165.221 C511.357,481.07,512.364,478.358,511.879,475.685z' style='fill:#FFBB24;'/><path d='M256.481,27.465c-57.963,0-105.12,47.118-105.12,105.034c0,35.826,17.009,74.29,50.556,114.322 c24.639,29.403,48.943,48.314,49.966,49.105c1.354,1.047,2.976,1.57,4.599,1.57c1.622,0,3.245-0.523,4.599-1.57 c1.022-0.791,25.327-19.702,49.966-49.105c33.547-40.032,50.556-78.495,50.556-114.322 C361.601,74.583,314.444,27.465,256.481,27.465z M295.411,132.498c0,21.482-17.43,38.898-38.93,38.898 c-21.5,0-38.93-17.415-38.93-38.898s17.43-38.898,38.93-38.898C277.981,93.6,295.411,111.016,295.411,132.498z' style='fill:#FF4A4A;'/><path d='M256.481,27.465c-4.594,0-9.119,0.298-13.559,0.872c51.583,6.667,91.562,50.836,91.562,104.162 c0,35.826-17.009,74.29-50.556,114.322c-15.845,18.908-31.54,33.467-41.005,41.669c5.254,4.552,8.596,7.154,8.96,7.436 c1.354,1.047,2.976,1.57,4.599,1.57c1.622,0,3.245-0.523,4.599-1.57c1.022-0.791,25.327-19.702,49.966-49.105 c33.547-40.032,50.556-78.495,50.556-114.322C361.601,74.583,314.444,27.465,256.481,27.465z' style='fill:#E7343F;'/><path d='M259.078,483.874l45.285-20.316L256,413.507v71.026c0,0,0,0,0.001,0 C257.046,484.533,258.095,484.316,259.078,483.874z' style='fill:#FFDB56;'/><g><path d='M471.654,254.074c-0.401-2.212-1.773-4.128-3.739-5.221l-7.97-4.433l-91.827,20.477l0,0 l133.656,155.121L471.654,254.074z' style='fill:#1EA4E9;'/><path d='M255.999,484.533C256,484.533,256,484.533,255.999,484.533v-7.508L140.977,302.346l-9.837,126.895 l121.781,54.634C253.904,484.316,254.953,484.533,255.999,484.533z' style='fill:#1EA4E9;'/></g></svg></div><data:location/></dd></b:if><b:if cond='data:aboutme != ""'><dd class='profile-textblock'><div class='img-aboutme-p'/><data:aboutme/></dd></b:if></dl><a class='profile-link' expr:href='data:userUrl' rel='author'><data:viewProfileMsg/></a></b:if></div></div></b:includable></b:widget>
9.- Busque el siguiente código
</style>
La siguiente imagen como ejemplo
10.- Ingrese las siguientes lineas de código CSS justo arriba del
código que encontró
/* CSS widget Perfil Blogger AMP html */.profile-info-container-wrapper {border: 1px solid #dadce0;border-radius: 8px;margin-top: 25px;}.fondo-perfil-1 {background-color: #2196F3;width: 100%;height: 120px;}.profile-info-top {height: 40px;position: relative;top: -42px;float: left;margin-left: 20px;}.profile-img {margin-bottom: 5px;padding: 4px;border: 1px solid #cccccc;border-radius: 100%;display: block;text-align: center;margin: 0 auto;float: none;background-color: #fff;background-position: bottom;background-repeat: no-repeat;box-shadow: rgb(0 0 0 / 20%) 0px 8px 17px 0px, rgb(0 0 0 / 19%) 0px 6px 20px 0px;margin-right: 10px;}.profile-datablock {position: relative;margin-bottom: 22px;}.profile-data:nth-child(1) {margin: 0;text-transform: uppercase;letter-spacing: .1em;font: normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif;color: #000000;font-weight: bold;line-height: 1.6em;font-size: 13px;margin-bottom: 22px;text-align: left;}.profile-data {margin: 0;text-transform: uppercase;letter-spacing: .1em;font: normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif;color: #000000;font-weight: bold;line-height: 1.6em;font-size: 13px;text-align: left;margin-bottom: 22px;}.img-location {width: 30px;height: 30px;float: left;margin-left: 16px;margin-right: 10px;margin-top: -9px;}.profile-textblock {margin: 0.5em 0;line-height: 1.2em;text-align: left;font-family: Noto Sans,system;font-size: 13px;font-weight: 400;color: #48525c;text-size-adjust: 100%;}.img-aboutme-p{width: 30px;height: 30px;float: left;margin-left: 16px;margin-right: 10px;margin-top: -9px;background-size: cover;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkaL9wk-QAn8_nX38bxX3f4zNFUs_DcjCaaucelQGhvMPP44d_CIvH3AUL5hW8nVvwYMbpZHNy2uR1a3mo21-AJ5ZXsaI5GNY0BGQD7LqDNGljrzr8U3d1q36sapfPsjKTRs8FCd4_5js/w200-h200/new-contact.png);}}.avatar-image-container{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglkToIP1CS7wBmaTMZLLcDKNsJU9iPNIa-JpNDiBZGMuGb93tvFGui6AnosbopXv5YtfYQIYHX67hvBi4L433bu2e1l_yowGRno0M4xoOQYWPHLyvK5kQTdmD45puHKePaE6zqjKDNrUjy/s0/comment-avatar.jpg);width:32px;height:32px;float:right;margin:5px 10px 5px 5px;border:1px solid #ddd;}.avatar-image-container img{width:32px;height:32px;}.profile-link {font: normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif;text-transform: uppercase;letter-spacing: .1em;margin: 0 auto;display: block;text-align: center;margin-bottom: 10px;}a.profile-link {color: #000;}.boton-seguir {margin-bottom: 10px;text-align: center;}.ancho-boton {padding: 8px;position: relative;}.button-amp {display: inline-flex;box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);text-transform: uppercase;color: #fff;background-color: #22a1c4;margin: 5px;text-shadow: none;transition: all 1s;font-size: 13px;font-weight: 700;padding: 8px 20px;cursor: pointer;border-radius: 4px;}.button-amp:hover {box-shadow: 0 8px 10px 1px rgb(0 0 0 / 14%), 0 3px 14px 2px rgb(0 0 0 / 12%), 0 5px 5px -3px rgb(0 0 0 / 30%);}a.color-link {color: #fff;}a.color-link:hover {color: #fff;}.color-boton{background-color: #e91e63;}/* END Perfil */
11.- Un clic en Guardar
Nota importante:
Si utilizas un tema de Blogger en AMP y realizaste la descarga desde mi sitio web Ayudadeblogger.com, el gadget perfil de Blogger viene con un estilo CSS, tendrá que eliminar el CSS asociado al Gadget de Perfil, puede buscar en la plantilla el siguiente CSS y eliminarlo por completo para que no genere inconvenientes en el diseño del Gadget Perfil
Busque el siguiente código CSS y elimínelo por completo:
/* Perfil */.profile-img {margin-bottom: 5px;padding: 4px;border: 1px solid #cccccc;border-radius: 100%;display: block;text-align: center;margin: 0 auto;}.profile-data{margin:0;text-transform:uppercase;letter-spacing:.1em;font:normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif;color:#000000;font-weight:bold;line-height:1.6em; text-align: center; font-size: 13px;}.profile-datablock{margin:.5em 0 .5em}.profile-textblock{margin:0.5em 0;line-height:1.6em;text-align: center;}.avatar-image-container{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglkToIP1CS7wBmaTMZLLcDKNsJU9iPNIa-JpNDiBZGMuGb93tvFGui6AnosbopXv5YtfYQIYHX67hvBi4L433bu2e1l_yowGRno0M4xoOQYWPHLyvK5kQTdmD45puHKePaE6zqjKDNrUjy/s0/comment-avatar.jpg);width:32px;height:32px;float:right;margin:5px 10px 5px 5px;border:1px solid #ddd;}.avatar-image-container img{width:32px;height:32px;}.profile-link {font: normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif;text-transform: uppercase;letter-spacing: .1em;margin: 0 auto;display: block;text-align: center;}a.profile-link {color: #000;}
Un clic en Guardar
Fácil verdad!
¿Necesitas ayuda?
Cualquier pregunta no dude en escribir
Recuerda suscribirte:
Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE
4 comentarios: