Simple About Me Widget For Blogger
close
Simple About Me Widget For Blogger

Simple About Me Widget For Blogger

Simple About Me Widget For Blogger

Displaying about me information on your website is the best way to tell your visitor's about yourself or about the author.

And most of the people do that on their websites, as you can see on my website I am also using about me widget for blogger which shows a brief information about me or the author of that post.

And today in this article I am going to provide you the code by which you can also add this widget into your blogger blog.

The best place to add this widget into your blogger blog is after your article or below your article as you can see on my website.

This widget is integrated with the blogger profile. As it gets data or your profile description from blogger profile.

This widget also works with your Google Plus profile but as you know that Google Plus is no longer available now that's why we are going to use blogger profile.

So before adding this widget into your blogger blog you have to set up your blogger profile first. So below is the complete list of steps that you have to follow to make this widget and add it into your blogger site.

  1. Go to Edit Profile Page of blogger
  2. After setting up complete profile Save your Profile settings.
  3. Now Go To Blogger Dashboard
  4. Go To Layout Section then click Edit button of main widget and check mark show author profile option as shown below.
  5. Simple About Me Widget For Blogger

You have successfully created your blogger profile now its time to add it into blogger to show it after each post. For instance follow the steps provided below.

  1. Now Go To Blogger Dashboard
  2. Go To Template/Theme Section and click Edit HTML button.
  3. Now search for <data:post.body/>
  4. Note: You will find the code above more then one time you can check that by yourself that which is the correct one for me it was last.
  5. Now copy the code provided below and paste it just after <data:post.body/> tag.
  6. <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>
  7. Now copy the code provided below and paste it above </head> tag.
  8. <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>
  9. Save Theme/Template

As you can see the code above we have used an icon from Font-Awesome CSS library that's why we have to install it. To install Font-Awesome CSS Library just copy the code provided below and paste it just above </head>.

<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>

Now you have successfully created and added this widget in blogger blog and if you have done everything in the right way i am sure that it will work fine.

Now you are all done now you can go and preview your website if you have follow the steps as there's listed and if everything is fine you will see about me widget in your blogger blog but if you have done anything wrong then you will not see about me widget into your blogger blog.

Conclusion:

So so that's it in today's article. I think you may have got how you can add about me widget into your blogger blog and if you have any difficulty an equation leave that in the comments section.

I hope It helped you. If it did subscribe to the newsletters of this blog.
Disqus Codes

No comments

Notifications

Disqus Logo