By enabling the "show author profile below posts" option on your Blogger blog, the name, Google+ profile picture and a small description of the author of your posts will be displayed below the posts.
Once you enable the feature, it will only display on the desktop view of your blog and not on the mobile view. Nevertheless, you can make it to display on the mobile view of your blog with a little modification to your blog's template.
Enabling it on the mobile view of your blog, will definitely contribute to the increase in Google+ and followers of your blog authors.
How To Get Started
==> Ensure it's already displaying on the desktop view. If not, read the guide here.
==> Log in to your Blogger dashboard
==> Back up your template and go to "Template" > "Edit HTML"
==> Click inside the HTML and use CTRL F to find <b:if cond='data:top.showMobileShare'>
==> Carefully find the ending </div> as seen in the screenshot below:
==> There are three ending </div> as seen in the screenshot above
==> Directly below the third one, copy and paste the code below:
==> Save your template.
Check out the posts on the mobile view of your Blogger blog and you should notice the Author box been displayed below the posts.
I hope this works for you.
NB: I can fix this for you FREE if you're one of those that have purchased my blog template. Buy my template here.
Once you enable the feature, it will only display on the desktop view of your blog and not on the mobile view. Nevertheless, you can make it to display on the mobile view of your blog with a little modification to your blog's template.
Enabling it on the mobile view of your blog, will definitely contribute to the increase in Google+ and followers of your blog authors.
How To Get Started
==> Ensure it's already displaying on the desktop view. If not, read the guide here.
==> Log in to your Blogger dashboard
==> Back up your template and go to "Template" > "Edit HTML"
==> Click inside the HTML and use CTRL F to find <b:if cond='data:top.showMobileShare'>
==> Carefully find the ending </div> as seen in the screenshot below:
==> There are three ending </div> as seen in the screenshot above
==> Directly below the third one, copy and paste the code below:
<p style="font-size: 18px; border-bottom: 2px solid #333;">About Author</p>
<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 expr:src='data:post.authorPhoto.url' itemprop='image' width='50px'/>
</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>
==> Save your template.
Check out the posts on the mobile view of your Blogger blog and you should notice the Author box been displayed below the posts.
I hope this works for you.
NB: I can fix this for you FREE if you're one of those that have purchased my blog template. Buy my template here.
Nice one boss. Will give it a try
ReplyDeleteNice tutorial boss you rock
ReplyDeletehow did you add facebook, twitter etc link to your profile
ReplyDeleteWow, it worked for me. Thank you so much. But how can i hide it from home page?
ReplyDeleteThanks very much sir, your tutorial was very helpful
ReplyDeleteyou are the best, you got the most beautiful heart, thanks for the great information...God bless you.
ReplyDelete