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 != &quot;&quot;'>

      <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='&quot;background-image: url(&quot; + data:i.profileLogo + &quot;);&quot;'><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 != &quot;&quot;'>

        <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 != &quot;&quot;'><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% &#39;Trebuchet MS&#39;, 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% &#39;Trebuchet MS&#39;, 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% &#39;Trebuchet MS&#39;, 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% &#39;Trebuchet MS&#39;, 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% &#39;Trebuchet MS&#39;, 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

¿Te ha resultado útil este artículo, recomiendanos?

Si

TAGS: Amp en BloggerGadget Perfil BloggerWidgets para Blogger

Share:

Luis Chávez

Soy el fundador del sitio web Ayudadeblogger.com - Considerado un Pro Blogger profesional, Consultor SEO y desarrollador Web adicto, ejecuto una serie de sitios web desde mi Oficina Quito-Ecuador.