tutorial Tutoriales Tutorials

Widget simple sobre mí para Blogger

tongasoft

<

div id=»swtutos» style=»swtutos»>

Mostrar información sobre mí en su sitio web es la mejor manera de decirle a su visitante sobre usted o sobre el autor.Y la mayoría de la gente hace eso en sus sitios web, como puede ver en mi sitio web, también estoy usando el widget sobre mí para blogger que muestra una breve información sobre mí o el autor de esa publicación.

Y hoy, en este artículo, le proporcionaré el código mediante el cual también puede agregar este widget a su blog de Blogger.

El mejor lugar para agregar este widget en su blog de Blogger es después de su artículo o debajo de su artículo, como puede ver en mi sitio web.

Este widget está integrado con el perfil de blogger. A medida que obtiene datos o la descripción de su perfil del perfil de Blogger.

Este widget también funciona con tu perfil de Google Plus, pero como sabes que Google Plus ya no está disponible, por eso vamos a utilizar el perfil de Blogger.

Entonces, antes de agregar este widget a su blog de Blogger, primero debe configurar su perfil de Blogger. A continuación se muestra la lista completa de pasos que debe seguir para crear este widget y agregarlo a su sitio de blogger.

  1. Ir a Editar página de perfil de blogger
  2. Después de configurar el perfil completo Guarde la configuración de su perfil.
  3. Ahora ve a Panel de Blogger
  4. Ir a Sección de diseño luego haga clic Editar botón del widget principal y marca de verificación mostrar perfil de autor opción como se muestra a continuación.
    5. Widget simple sobre mí para Blogger

Ha creado con éxito su perfil de Blogger, ahora es el momento de agregarlo a Blogger para mostrarlo después de cada publicación. Por ejemplo, siga los pasos que se indican a continuación.

  1. Ahora ve a Panel de Blogger
  2. Ir a Sección de plantilla/tema y haga clic Editar HTML botón.
  3. Ahora busca

    4. Nota: Encontrará el código de arriba más de una vez, puede verificarlo usted mismo, cuál es el correcto para mí, fue el último.

  4. Ahora copie el código proporcionado a continuación y péguelo justo después etiqueta.
    5. <b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:post.authorAboutMe'>
<div class='author-profile' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<b:if cond='data:post.authorPhoto.url'>
<img alt='author profile' expr:src='data:post.authorPhoto.url' itemprop='image' title='author profile' width='90px'/>
</b:if>
<div>
<a class='g-profile' expr:href='data:post.authorProfileUrl' itemprop='url' rel='author' title='author profile'>
<span itemprop='name'><data:post.author/></span>
</a>
</div>
<span itemprop='description'><data:post.authorAboutMe/></span>
</div>
</b:if>
</b:if>
  5. Ahora copie el código provisto a continuación y péguelo arriba etiqueta.
    6. <b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
/* Author Profile */
.author-profile {
    overflow: hidden;
    margin: 30px 0;
    line-height: 1.5;
}
.author-profile img {
    border: none;
    float: left;
    margin-right: 15px;
    border-radius: 46px;
}
.author-profile > span {
    font-size: 14px;
    color: #888;
}
.author-profile a.g-profile {
    font-weight: 500;
    color: #444444;
    font-size: 18px;
    margin-bottom: 5px;
    display: inline-block;
}
.author-profile a.g-profile:hover {
    color: #49ACE1;
}
.author-profile a.g-profile:after {
    content: "f058";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    padding-right: 4px;
    color: #49ACE1;
}
</style>
</b:if>
  6. Salvar Tema/Plantilla

Como puede ver en el código anterior, hemos utilizado un icono de Biblioteca CSS Font-Awesome por eso tenemos que instalarlo. Para instalar Font-Awesome CSS Library simplemente copie el código proporcionado a continuación y péguelo justo arriba .

<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
//]]>
</script>

Ahora ha creado y agregado con éxito este widget en el blog de Blogger y si ha hecho todo de la manera correcta, estoy seguro de que funcionará bien.

Ahora que ha terminado, puede ir y obtener una vista previa de su sitio web si ha seguido los pasos que se enumeran y si todo está bien, verá el widget sobre mí en su blog de Blogger, pero si ha hecho algo mal, entonces no lo verá. me widget en su blog de blogger.

Conclusión:

Así que eso es todo en el artículo de hoy. Creo que puede haber entendido cómo puede agregar un widget sobre mí en su blog de blogger y, si tiene alguna dificultad, déjelo en la sección de comentarios.

Espero haberte ayudado. Si lo hizo suscríbase a los boletines de este blog.

//&lt;![CDATA[

/*! jQuery replaceText | v1.1.0 – https://benalman.com/projects/jquery-replacetext-plugin */
!function(e){e.fn.replaceText=function(n,t,i){return this.each(function(){var o,r,l=this.firstChild,u=[];if(l)do{3===l.nodeType&&(r=(o=l.nodeValue).replace(n,t))!==o&&(!i&&/</.test(r)?(e(l).before(r),u.push(l)):l.nodeValue=r)}while(l=l.nextSibling);u.length&&e(u).remove()})}}(jQuery);

/! Javascript Cookie | v1.5.1 – https://github.com/js-cookie/js-cookie */
!function(e){var n;if("function"==typeof define&&define.amd)define(["jquery"],e);else if("object"==typeof exports){try{n=require("jquery")}catch(e){}module.exports=e(n)}else{var o=window.Cookies,r=window.Cookies=e(window.jQuery);r.noConflict=function(){return window.Cookies=o,r}}}(function(e){var n=/+/g;function o(e){return u.raw?e:encodeURIComponent(e)}function r(e){return o(u.json?JSON.stringify(e):String(e))}function t(e,o){var r=u.raw?e:function(e){0===e.indexOf('"')&&(e=e.slice(1,-1).replace(/\"/g,'"').replace(/\/g,"\"));try{return e=decodeURIComponent(e.replace(n," ")),u.json?JSON.parse(e):e}catch(e){}}(e);return c(o)?o(r):r}function i(){for(var e,n,o=0,r={};o1&&!c(n)){if(«number»==typeof(f=i(u.defaults,f)).expires){var s=f.expires,a=f.expires=new Date;a.setMilliseconds(a.getMilliseconds()+864e5s)}return document.cookie=[o(e),»=»,r(n),f.expires?»; expires=»+f.expires.toUTCString():»»,f.path?»; path=»+f.path:»»,f.domain?»; domain=»+f.domain:»»,f.secure?»; secure»:»»].join(«»)}for(var d,p=e?void 0:{},l=document.cookie?document.cookie.split(«; «):[],m=0,v=l.length;m<v;m++){var g=l[m].split("="),w=(d=g.shift(),u.raw?d:decodeURIComponent(d)),j=g.join("=");if(e===w){p=t(j,n);break}e||void 0===(j=t(j))||(p[w]=j)}return p};return u.get=u.set=u,u.defaults={},u.remove=function(e,n){return u(e,"",i(n,{expires:-1})),!u(e)},e&&(e.cookie=u,e.removeCookie=u.remove),u});

/* Adsense Lazy Load Code */
!function(t,n,a,o){"use strict";var e=t(n),i=function(t,n){var a,o;return function(){var e=this,i=arguments,r=+new Date;a&&r li»).children(«a»),n=a.length,r=0;r<n;r++){var u=a.eq(r),i=u.text();if("_"!==i.charAt(0)&&"_"===a.eq(r+1).text().charAt(0)){var s=u.parent();s.append('

Entradas relacionadas

tutorial Tutoriales Tutorials

Descarga gratuita de la plantilla de blogger de fotografía Kalify

tongasoft
tutorial Tutoriales Tutorials

Código a imagen: herramientas para convertir fragmentos de código en imágenes

tongasoft

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *