How to add automatically ;Guest Author Box to the blog

One of the interesting features of Blogger is Guest Blogging. This blogging facility was not available early in Blogger. Later on, Blogger started this Guest Blogging System considering everyone. If you wish, you can take a number of guest blogs you like. As a result, you can take the popularity of your blog by posting a variety of posts. Also, when you do not have time, Guest Blogger will help you continue your blogging. But today's topic is not about Guest Blogging. I will show you how to automatically add Guest Author Box to your blog today. Automatically because the posting is not to add it to your post again and again. Only once, if you add to your blogger template, whoever posts a blog will automatically show it below all posts.

How to add Automatically Author Box:

  • First log in to your Blogger account.
  • Then click on Template> Edit HTML from the Blogger Dashboard.

  • Then press Ctrl + F to search ]]> </ b: skin>  section.
  • Copy the Css code below and paste it above ]]> </ b: skin>  section.


[code start]
<!-- Kawsar360 Guest Post Start -->
.kawsar360-guest img {
margin:0;
border:0;
}
.kawsar360-guest-about {
font-size:13px;
margin:0 auto;
padding:3px;
width:625px;
min-height:125px;
background:#EDF6FF;
margin:15px auto -10px -20px;
border:1px solid #F0F0F0;
}
.kawsar360-guest {
padding-top:15px;
margin:0;
font-size:12px;
float:left;
width:17%;
text-align:center;
border-right:#93C0F9 solid 1px;
}
.kawsar360-guest-text {
float:right;
width:80%;
padding:5px;
text-align:left;
font:13px/1.6em arial,sans-serif;
text-align:justify;
margin-top: -14px;
margin-bottom: -12px;
padding:0;
}
[code end]


  • Then search this code data:post.body This code may be found in more than one place on your blogger template. You can try it in the second try. If you do not work in the second try the 3rd or the 1st try. Then it will be
  • Copy and paste these below codes just below the data:post.body section.


[code start]
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:post.author == &quot;MD Abir Hasan&quot;'>
<div class='kawsar360-guest-about'>
<div class='kawsar360-guest'><img height='70' src='Guest Author Picture Url' width='80'/> Guest Author </div>
<div class='kawsar360-guest-text'>
<p><strong><font face='verdana'>About the Guest Author:</font></strong>
<br/> Write author Bio here <br/>
Follow her @ <a href='#' target='_blank'>Twitter</a> | <a href='#' target='_blank'>Facebook</a> | <a href='#' target='_blank'>Google+</a></p>
</div>
</div>
</b:if></b:if>
[code end]

  • If you have more than one Gust author on your blog, then paste the following code in the previous place without placing the above code.

[code start]
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:post.author == &quot;1st Guest Author Name&quot;'>
<div class='kawsar360-guest-about'>
<div class='kawsar360-guest'><img height='70' src='1st Guest Author Picture Url' width='80'/> Guest Author </div>
<div class='kawsar360-guest-text'>
<p><strong><font face='verdana'>About the Guest Author:</font></strong>
<br/> Write 1st author Bio here <br/>
Follow her @ <a href='#' target='_blank'>Twitter</a> | <a href='#' target='_blank'>Facebook</a> | <a href='#' target='_blank'>Google+</a></p>
</div>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:post.author == &quot;2nd Guest Author Name&quot;'>
<div class='kawsar360-guest-about'>
<div class='kawsar360-guest'><img height='70' src='2nd Guest Author Picture Url' width='80'/> Guest Author </div>
<div class='kawsar360-guest-text'>
<p><strong><font face='verdana'>About the Guest Author:</font></strong>
<br/> Write 2nd author Bio here <br/>
Follow her @ <a href='#' target='_blank'>Twitter</a> | <a href='#' target='_blank'>Facebook</a> | <a href='#' target='_blank'>Google+</a></p>
</div>
</div>
</b:if></b:if></b:if></b:if>
[code end]


  • Your name or Gust Author will be named in the top pinky color MD Abir Hasan / 1st Guest Author Name. The name must match the name of the post. Otherwise this author will not show the box. See the figure below -

  • In the red marked portion of the box above, you will have to give your Author's Picture Url.
  • Finally, click Save Template. That's All

Author Box Customization:

  • You can change the height, Width, Margin, Border, Background color of the Author box from the Css code in the first box above.
  • Also customizing these CSS codes can make many changes to the Author box.


No comments

If any problem, please comment us below the comment box.

Powered by Blogger.