Destino Solutions

+91 9747866100

Multi Author Supported ‘About Author’ Widget for Blogger

February 21st, 2014

Multi Author Supported ‘About Author'(Author Bio) widget Add to blogger each post below.  Author Short Bio widget is a Short description about author, Once you applied  CSS/HTML code on your blogger blog It automatically Insert new author Profile image and a short Description on each post below.

Blogger-widget

Author Bio widget help for visitors know about your ,You are attached your personal social media account links in this widget so it will be help to boost your Social media  followers. it is a default blogger author profile widget but it is not  attractive, I think most bloggers are not know about it and how to customize so Today I’m sharing How to customize default ‘Author Profile’ on HTML/CSS.
   
Demo

Advantages

  • Multi Author Support
  • User friendly to  update Author Profile
  • Automatically insert new contributor-bio on Their each post below 
  • Easy to Edit your/their Profile Description on Google+
  • Easy to Edit your/their Profile Description include links on Google+
  • Added Awesome Profile Image hover effect

Multi Author Supportet 'About Author' Widget for Blogger

Follow Me:

Note: Backup Your blogger Template after Doing this 

1. Go to Blogger > Layout > Blog Posts-Edit > Show Author Profile Below Post (Enable)
2. Google+ > About > Story-Introduction (Add your Author Profile Description with links)



Go to blogger>  Template > Edit HTML >

3.  Find Following Code (Ctrl+F)

<img expr:src=’data:post.authorPhoto.url’ itemprop=’image’ width=’50px’/>

   
Replace with below code

<img expr:src=’data:post.authorPhoto.url’ itemprop=’image’ width=’80px’ height=’80’/>

4. Find Following Code

<a class=’g-profile’ expr:href=’data:post.authorProfileUrl’ itemprop=’url’ rel=’author’ title=’author profile’>

 
Searched code below you can view
on like following code    <span itemprop=’name’><data:post.author/></span>

Replace with below code

<span itemprop=’name’>Article Writed By <data:post.author/></span>

5.Find Following Code (Ctrl+F)

]]></b:skin>  

 Add  Following CSS code Above of  ]]></b:skin>

 .author-profile {
background: #deefff; /* Old browsers */
background: -moz-linear-gradient(top,  #deefff 0%, #a8c5dd 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#deefff), color-stop(100%,#a8c5dd)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #deefff 0%,#a8c5dd 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #deefff 0%,#a8c5dd 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #deefff 0%,#a8c5dd 100%); /* IE10+ */
background: linear-gradient(to bottom,  #deefff 0%,#a8c5dd 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#deefff’, endColorstr=’#a8c5dd’,GradientType=0 ); /* IE6-9 */
 border: 1px solid #989494;
border-radius: 3px;
padding: 8px 5px 0px 6px;
}
.author-profile img {
 border-radius: 6px;
padding: 5px;
 -webkit-filter: grayscale(0%);
 border: 2px solid #6b757d;
 -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}
.author-profile img:hover {
 padding: 5px;
  -webkit-filter: grayscale(60%);
border: 2px solid #6b757d;
  border-radius: 20%;
}
.author-profile span {
font-color: #a73903 !important;
font-size: 13px;
font-family: Tahoma, Verdana, Segoe, sans-serif;
}
.g-profile span{
font-color: #a73903 !important;
font-size: 16px !important;
font-family: Tahoma, Verdana, Segoe, sans-serif;
}

Save template. You are successfully fully finished.

You’ have Any problem faced please mentioned it below comment section.

Categories: BloggerBlogger Widget