Gadget Perfil con botón seguir de Blogger
Nota: este tutorial esta dirigido a todos los blogs de Blogger que no utilizan la tecnología AMP
Puede ver su demostración en el sidebar del siguiente blog de demos
Empezamos
Tutorial completo
1.- Ingrese en Blogger.com
2.- Un clic en diseño
3.- Agregue el Gadget Perfil de Blogger, ubíquelo 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'><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><div class='boton-seguir'><a class='ancho-boton button-amp color-boton color-link' expr:href='"https://www.blogger.com/follow.g?blogID=" + data:blog.blogId' rel='nofollow' target='_blank'>Seguir</a></div><a class='profile-link' expr:href='data:userUrl' rel='author'><data:viewProfileMsg/></a></b:if></div><style>/* Perfil */.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:42px;height:42px;float:right;margin:5px 10px 5px 5px;border:1px solid #ddd;}.avatar-image-container img{width:42px;height:42px;}.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 */</style></div></b:includable></b:widget>
9.- 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
0 comments:
Publicar un comentario