How To Display Author Info Box in Blog Posting blogspot? How To Display Author Info Box in Blog Posting blogspot? - The New Minded How To Display Author Info Box in Blog Posting blogspot? How To Display Author Info Box in Blog Posting blogspot? How To Display Author Info Box in Blog Posting blogspot? Langkau ke kandungan utama

Giveaway Selamat Tinggal Moratorium by Ct Cheery!

Klik banner untuk join ya.

How To Display Author Info Box in Blog Posting blogspot?

How To Display Author Info Box in Blog Posting blogspot?
Assalamualaikum and Good Evening readers,

Today I wil show you simple tutorial how to display author info box in blog posting blogspot?

This method can be apply at your blogspot template which I have been try on simple template that was provide by blogger.

This code I have been modified to make sure it can work properly on your blogspot template. Add on this code also free from malware.

Before I started show how to display author info box in blog, let ask one question..

Why you need to appear this author info box?

It must be a reasons right?

For me, at this section I would put simple bio about me with have my picture and my email so that it would easy to reader to know me in general before it click to page about me to know in detail about me.. haha..

At this section also I have put 2 social link which is to link in google plus and facebook.. So you can put your link facebook and your google plus here.

So, let start how to display author box info in blogspot..

Step 1 :
Adding style code
First step is to adding style code to make sure you author info box look nice and beautiful.
Go to template > edit html > ctrl+f > find this /* Comments

And paste this code (author style) >  above /* Comments  > and click save template.

//   Author Style below post          

.imgautor {
    float: left;
.author-position {
    font-size: 12px;
    font-style: italic;
    color: #888;
.author-describe {
    font-size: 14px;
    color: #000000;
.postedby h2 {
  background: transparent none repeat scroll 0 0;
  border: medium none;
  color: #333;
  float: left;
  font-family: Roboto;
  font-size: 14px;
  font-weight: 600;
  height: 30px;
  margin-top: 0;
  overflow: hidden;
  padding-left: 0;
  text-align: left;
  text-transform: uppercase;
  width: 70%;
.postedby p {
    color: #666;
    float: left;
    font-family: FontAwesome;
    font-size: 14px;
    letter-spacing: 0;
    margin-top: -13px;
    text-transform: none;
    width: 80%;
.postedby {
    border-bottom: 1px solid #ddd;
    border-top: 1px solid #ddd;
    float: left;
    margin: 0 auto;
    padding: 20px;
    width: 95%;
.postedby .author-image {
    display: block;
    float: left;
.postedby .author-image img {
    border-radius: 40%;
    margin-right: 10px;
    max-width: 90px;
    padding: 0;
.postedby .author-social {
    float: left;
.postedby .author-social a {
    color: #000;
    margin: 5px;
 Step 2 :
Post (Method 1)
 Step 2 is more complicated, there would be 2 method to do this you choose which one is the most simple method you think you can do.

At this step, the would be placing the code for display author info box in blog posting..

The best recommendation size entire blog is  1080px - 1090px. This you can edit at template > customize> adjust width > entire blog > 1080 px

Method 1 :

At this method you need to find post.. as shown in above picture and click expand to see all the code you have and paste this code before the  </b:includable>. 

Method 2 :

This method is easiest one, what you need to do is press ctrl+f > search data:post.authorAboutMe/ and paste this code before </b:includable>.

Method 2
 So the code is;

<!-- Author Bio Start -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='postedby'>

<div class='author-image'>
  <a href='' rel='nofollow' target='_blank'><img class='imgautor' src=''/><!--Your Image Url--> </a></div>

  <h6><p>About  <span class=''><></span></p> </h6>
  <p><span class='author-position'> Blogger</span></p>
<span class='author-describe'>&#8220;THERE IS NO OLD AGE. THERE IS, AS THERE ALWAYS WAS, JUST YOU.&#8221; ~ CAROL MATTHAU</span></p>
<p><span class='author-describe'> Untuk sebarang  pertanyaan mengenai review atau giveaway boleh emel di:-
 [email protected] </span></p>

<div class='author-social'>
  <a href=''><img src=''/></a>
<a href=''><img src=''/></a>

  <a href=''><img src=''/></a>

<!-- Author Bio End -->

 If you still not understand how to copy this code in templates you can watch this video tutorial that i have make.

video will appear soon.. in a few day....

So when you done doing this, it would be display like this :-


If You Enjoyed This, Take 3 Seconds To Share It..


  1. nice sharing!ooo macam tu rupanya..

    1. yup mcm ni... senang je nak buat.. ada dua langkah je perlu ikut.. selamat mencuba..

  2. terbaiklah..alhamdulillah...masa akan datang kalau kak PC tukar template yang ada macam ni boleh la rujuk entri ni..terima kasih ya.. :)

    1. Sama-sama.. Ni code guna dkt template yg siap sedia blogspot sediakan pun boleh...

  3. Nice sharing ... Boleh try nie ...saya blogwalking sini ye =)

    1. Terima kasih.. yup boleh cuba nanti ye.. :)

  4. wahhh mesti adik ni terror bab2 blog ni.. coding2 tu akak pening tgk dah.. hahahha..

    1. biasa2 je.. tiada la teror mana pun...

  5. Cool! Cam senang nanti boleh try :)

    1. yup senang je ni.. boleh2 nanti try la yer :)


Catat Komen


Enter your email address:

Delivered by FeedBurner