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?

Sabtu, 28 Mei 2016

How To Display Author Info Box in Blog Posting blogspot?

10 comments

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='https://www.ahmadhasif.my/' rel='nofollow' target='_blank'><img class='imgautor' src='https://4.bp.blogspot.com/-kiQLJgC73pk/V0kpNQNxGwI/AAAAAAAADDs/lS4DucQCvB0lnWZtpUTGjAyO18YuPNN9gCLcB/s320/avatar.png'/><!--Your Image Url--> </a></div>

  <h6><p>About  <span class=''><data:post.author/></span></p> </h6>
  <p><span class='author-position'> Blogger</span></p>
 
<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='https://www.ahmadhasif.my/'><img src='https://2.bp.blogspot.com/-KODG4gV1NyQ/V0XGmcf8NfI/AAAAAAAADDY/mVr0QdpspoEkDaF_tG3YP8riRyTvPxEkgCLcB/s1600/home_1.png'/></a>
<a href=''><img src='https://3.bp.blogspot.com/-U5FPXxh9GsQ/V0XGma87flI/AAAAAAAADDU/GpHutEFfYFQ_n13Cybm4TVpE_Z-zsJbmACLcB/s1600/googleplus_1%2B%2528FILEminimizer%2529.png'/></a>

  <a href=''><img src='https://2.bp.blogspot.com/-_vAP1QjSub4/V0XGmarBWgI/AAAAAAAADDQ/8AQ_mJS0ebQ1deXIw6wW6fAAn0Vsi73jgCLcB/s1600/facebook_1.png'/></a>
</div>
  </div>
</b:if>

<!-- 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 :-

Result


If You Enjoyed This, Take 5 Seconds To Share It
SHARE

About Ahmad Hasif


Blogger


Berkongsi Mengenai : Teknik SEO | Info | Tutorial | Freebies |


Untuk sebarang pertanyaan mengenai review atau giveaway boleh emel di:-

[email protected]

10 ulasan :

  1. nice sharing!ooo macam tu rupanya..

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

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

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

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

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

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

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

      Padam
  5. Cool! Cam senang nanti boleh try :)

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

      Padam