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.

Author

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;
border: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 {
margin:0px;
text-align:justify;
color:#666;
}
/*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>
</a></p>
</div>
/*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

      0 comments: Post Yours! Read Comment Policy ▼
      লক্ষ্য করুনঃ
      পোষ্টের সাথে সম্পৃক্ত নয় এমন কোন কমেন্ট করা যাবে না। কোন কারণ ব্যতীত আপনার ব্লগের লিংক শেয়ার করতে যাবেন না। সবসময় গঠনমূলক মন্তব্য প্রদানের চেষ্টা করবেন। আমরা সবার মতামত সমানভাবে মূল্যায়ন করি এবং যথাসময়ে প্রতি উত্তর দেয়ার চেষ্টা করি।

      Post a Comment

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