Blogger always implement new things [eg. Contact Form, Forum , gplus Follow button and more.] and now blogger introduce Google Plus Profile Widget (Author Box). It's very simple to implement into blogger blogs.
It's looks awesome and engage more people to your own blog.
It's looks awesome and engage more people to your own blog.
 |
| Author Box |
Before Adding this Author Widget
#1 Gplus Profile Id : First Go to your gplus profile id [eg. https://plus.google.com/+GhanshyamSinghd/about] and customise your Google Plus Profile Information[About Page].#2 Story : Go to story box and click on edit button then after pop up 'Google Plus Author' customise options.
#3 Introduction : Go to Introduction part, write something about your self and also blog too. You can also add your mail id and social profile id. [In Introduction Part , you can add link and customise text or paragraph in bold , italic, underline , ordered list, unordered list] and [make Public]
#4 Show Author Profile Below Post : Go to Blogger Dashboard >> Layout >> Edit Blog Post Layout >> Configure Blog Post Option>> Tick on radio button [Show Author Profile below Post].
If you want know more about Gplus Profile code then go to Digital Hub Inc Code Page.
How to Add this widget in Blogger
- Go To Blogger Dashboard >Template >Edit HTML.
- Now Search the following code: <div class='post-footer'> or <div class='post-footer-line post-footer-line-'/>
- copy and paste the below code , after <div class='post-footer'> or <div class='post-footer-line post-footer-line-'/> tag :
XML CODE :
<b:if cond='data:blog.pageType == "item"'><div class='dhi-authors' itemscope='itemscope' itemtype='http://schema.org/Person'><div class='dhi-author clearfix'><b:if cond='data:post.authorPhoto.url'><a expr:href='data:post.authorProfileUrl'><div class='author-image'><img class='avatar avatar-70 photo' expr:src='data:post.authorPhoto.url' height='70px' itemprop='image' width='70px'/></div></a></b:if><h3>Written by <a expr:href='data:post.authorProfileUrl' itemprop='url' rel='author' title='author profile'><span itemprop='name'><data:post.author/></span></a></h3><div class='author-title-line'><p class='description' itemprop='description'><data:post.authorAboutMe/></p></div></div></div></b:if>
After successfully adding XML Code -
- Now Search (CTRL + F) for this code: ]]></b:skin>
- Paste the below code just above ]]></b:skin>
/* Post Author Information */Save and All work done.
.dhi-author{
margin: 30px 0;
padding: 20px;
background-color: #777;
margin-bottom:20px;
}
.dhi-author .author-image {
float: left;
margin-right: 30px;
margin-top: 15px;
}
.dhi-author h3,.dhi-author a{
color: #fff;
font-size: 14px;
line-height: 2.0em;
}
.dhi-author p {
margin: 0;
color: #fff;
}
.dhi-authors {
float: left;
border-top: 1px solid #ddd;
margin-top: 15px;
}
.dhi-author { float:left; }
.dhi-author.clearfix h3 {
font-weight: bold;
text-transform: uppercase;
color: #fff!important;
margin: 0px;
margin-top: 10px;
}
.dhi-authors p {
font-size: 13px;
}
.avatar { display:block;width:100px;height:100px;margin:0 1em 2em 0;float:left;background-size:cover;background-repeat:no-repeat;background-position:center center;-webkit-border-radius:999em;-moz-border-radius:999em;border-radius:999em;border:2px solid #ddd;box-shadow:0 1px 1px rgba(0, 0, 0, 0.3)}
If you like this article , please share on social media and drop your valuable comment.
0 comments:
Post a Comment