Tuesday, August 23, 2016

How To Add Style Author Or, Guest Box In Blogger Below Every post?

Blogger is an interesting Mominul Gust Blogging. This was the beginning of bloggers Gust Blogging facility. After considering all these bloggers Gust Blogging system is introduced. If you wish, you can increase the number of your choice Gust Blogger.As a result, everyone can go to the top of the popularity of your blog post. Moreover when you have time on your hands, Then Guest Blogger will help you to continue blogging. Gust Blogging is not my topic today.

Today, I'll show how to add your blog Automatically Guest Author Box. Automatically post after repeatedly telling because it does not need to add to your post. Who might add to your Blogger template just once, and blog posts automatically post it below as this image shows.


In the following tutorial you are going to learn exactly how to add professional author box below every blog post in blogger. You can add an author box to the post footer in your Blogger blog by adding CSS + HTML code in your blogger template.

Professional Author Box Features:

  • Professional look
  • Fully responsive design 
  • Simple CSS Design
  • Very easy to use and customizable
  • Short code (doesn't affect on your blog loading speed)
  • Suits to your template 

Adding Professional Author Box In Blogger :

Note: To be on the safe side, I highly recommend you to back up your Blogger template before making changes.
  • Step 1
Go to your blogger dashboard >> Template >> Edit HTML:
  • Step 2
By pressing Ctrl+F Search for the following code ]]></b:skin>

Tutorial Gift
  • Step 3 
Now just before/above this code add the following piece of CSS code.
  /*Professional Author Box CSS Code*/
.about-author {
width : 750px;
overflow : hidden;
margin:10px 0px;
background: #f2f2ef;
margin: 0 0 30px 0;
padding: 10px;
border: 1px solid #EAEDEF;
overflow: hidden;
color: #333333;
font-size: 14px;
font-family: Georgia, Tahoma, Verdana;
line-height: 24px;
.about-author img {
display: block;
width: 90px;
height: 90px;
margin: 0 1.2em 0 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);
.about-author h3{
font-family:georgia !important;
font-size:18px !important;
margin:9px 0px !important;
color:#666 !important;
border-bottom:2px solid #666 !important;
border-top:0px !important;
.about-author p {
/*Professional Author Box CSS Code*/
  • Step 4
Next search for <data:post.body/>
  • Step 5
Now just after/below this code add the following piece of HTML code.
  /*Professional Author Box HTML Code*/ 
<div class="about-author">
<h3>About Author:</h3>
<img align="left" src="Paste Your Image URL Here"/><p>Write Something About Yourself</p><br/>
<p>Let's Get Connected: <a href="http://twitter.com/tutorialgift" rel="nofollow" target="_blank"><font color="#00aced">Twitter</font></a> | <a href="http://www.facebook.com/ tutorialgift " rel="nofollow" target="_blank"><font color="#3b5998">Facebook</font></a> | <a href="http://plus.google.com/ 117419154696287690391" rel="nofollow"><font color="#dd4b39">Google Plus</font>
/*Professional Author Box HTML Code*/

Customization :

  • Paste Your Image URL Here : Add Your Profile Picture
  • Write Something About Yourself 
  • http://twitter.com/shoutersclub : Replace with your Twitter page URL
  • http://www.facebook.com/shoutersclub : Replace with your Facebook page URL
  • http://plus.google.com/109208666606854207231 : Replace with your Google Plus page URL
    Step 6
      • Finally, Save your template and see the result.
      Previous Post
      Next Post

      Show Comments: OR

      1 comments: Post Yours! Read Comment Policy ▼
      Attention Please
      No comments that are not related to the post can be made. Do not share your blog link without any reason. Always try to give positive comments. We evaluate all opinions equally and try to answer them in due course.

      1. Why viewers still use to read news papers when in this technological world the whole thing is existing on web?


      Copyright © Poisa Click Registered Surf. Modified: PC Team, Server Hosted: GSE