How To Change Author Box Dynamically Blogger

How To Change Author Box Dynamically in Blogger by meralesson

Every blogger wants to attach a bio author box to their blog and its lot of easier to carry your self and more relevant with the post article.



 And it's help readers to identify gain a level of trust with the author of the article, and also very important to show your self and associate with your visitor .

if you notice or not  there are many blogger out there who are managing their blog  with couple of authors. if you have multiple author or you wanted to add more author to your blog and you wish to add author box for each & every individual author, in Order to do that you have to change your author box dynamically .

Now you may be wondering how to do this in blogger blog because blogger dose not run php or any other server side scripting languages to work dynamically  .

before you start you have to know how to add author box to every blog post if you dose not  know then i strongly suggest you to see this post and get some idea what is going on .

if you have multiple author then its complicated to add author box for different author
Now you can dynamically change your author box , in this lesson i'll show you how to change author box dynamically yes you can change author box for multiple different author.

And also i will show you to how to add img to different author with the help of if and else condition in blogger

Frist of all
our first step will be to add author box to your blog if you does not have author box then i recommend you to go to this post and get some idea How to make Awesome Author Box for Every Blog post of Blogger.

What we are going to do
We will add if and else condition like below ,we are telling if author name is equal to name**** then do this.
<b:if cond='data:post.author == &quot;AUTHOR FULL NAME&quot;'>
  ..then show this author
</b:if>


Author box exploration  
below you will find normal author box without any if and else statements.If you want this then just click on this link Awesome author box for blogger
<!-- AUTHOR SECTION START -->
<div class='author-div'>
      <!-- WITHOUT ANY IF/ELSE-->
      <div class='author-inner'>
          <div class='author-img'>
              <img src='Your author img'/>
          </div>
          <div class='author-content'>
              <div class='author-heading'>
                  <h3>Author</h3><!--NOTE THIS IS JUST A HEADING-->
              </div>
              <div class='author-body'>
                  <p>Here you can write some thing about your self</p>
              </div>
          </div>
      </div>
      <div class='author-footer'>
          <ul>
              <li style='color:#fff;'>
               <a href='https://www.facebook.com/meralessondotcom' target='_blank'><i class='fa fa-facebook'/></a>
              </li>
              <li style='color:#fff;'>
                <a href='https://twitter.com/meralesson' target='_blank'><i class='fa fa-twitter'/></a>
              </li>
              <li style='color:#fff;'>
                <a href='https://plus.google.com/u/0/+MeraLesson' target='_blank'><i class='fa fa-google-plus'/></a>
              </li>
          </ul>
      </div>
</div>
<!-- AUTHOR SECTION ENDS -->

Finish Author Box
Now here is the finish Author box with If and else statements it will work dynamically if you ad multiple author to your blog you will just need to add your author name . If you want to add more then two authors then copy and paste <b:if cond=**> <div class="author-inner".....</b:if>
<!-- AUTHOR SECTION START -->
<div class='author-div'>
<!--AUTHOR 1-->                   <!--Author name ↓"-->
   <b:if cond='data:post.author == &quot;AUTHOR FULL NAME&quot;'><!--if and else condition"-->
      <div class='author-inner'>
          <div class='author-img'>
              <img src='Your author img'/>
          </div>
          <div class='author-content'>
              <div class='author-heading'>
                  <h3>Author</h3><!--NOTE THIS IS JUST A HEADING-->
              </div>
              <div class='author-body'>
                  <p>Here you can write some thing about your self</p>
              </div>
          </div>
      </div>
      <div class='author-footer'>
          <ul>
              <li style='color:#fff;'>
               <a href='https://www.facebook.com/meralessondotcom' target='_blank'><i class='fa fa-facebook'/></a>
              </li>
              <li style='color:#fff;'>
                <a href='https://twitter.com/meralesson' target='_blank'><i class='fa fa-twitter'/></a>
              </li>
              <li style='color:#fff;'>
                <a href='https://plus.google.com/u/0/+MeraLesson' target='_blank'><i class='fa fa-google-plus'/></a>
              </li>
          </ul>
      </div>
    </b:if><!--if else ends-->
<!--AUTHOR 2-->                   <!--Author2 name ↓"-->
   <b:if cond='data:post.author == &quot;AUTHOR FULL NAME&quot;'><!--Your author name"-->
      <div class='author-inner'>
          <div class='author-img'>
              <img src='Your author img'/>
          </div>
          <div class='author-content'>
              <div class='author-heading'>
                  <h3>Author</h3><!--NOTE THIS IS JUST A HEADING-->
              </div>
              <div class='author-body'>
                  <p>Here you can write some thing about your self</p>
              </div>
          </div>
      </div>
      <div class='author-footer'>
          <ul>
              <li style='color:#fff;'>
               <a href='https://www.facebook.com/meralessondotcom' target='_blank'><i class='fa fa-facebook'/></a>
              </li>
              <li style='color:#fff;'>
                <a href='https://twitter.com/meralesson' target='_blank'><i class='fa fa-twitter'/></a>
              </li>
              <li style='color:#fff;'>
                <a href='https://plus.google.com/u/0/+MeraLesson' target='_blank'><i class='fa fa-google-plus'/></a>
              </li>
          </ul>
      </div>
    </b:if><!--if else ends-->
</div>
<!-- AUTHOR SECTION ENDS -->

If you did not understand 
this is how its work you made up condition that if its equal to full name of the authors then add this div. to know the full name of the author you can easily find in your blogger  Settings>>Basic>>Blog authors from there you will get the full name of your authors. Below explain in a normal way for just your clarification
<b:if cond='data:post.author == &quot;Full name of the author&quot;'>
  <div>
    <img src="your author 1 img"/>
  </div>
  <p>your author 1 discription</p>
  <a>facebook</a>--your share profile links 
</b:if>

<b:if cond='data:post.author == &quot;Full name of the author&quot;'>
  <div>
    <img src="your author 2 img"/>
  </div>
  <p>your author 2 discription</p>
  <a>facebook</a>--your share profile links 
</b:if>
I hope you like it and if you find help full then please share it ,any question in your mind then don't hesitate to ask .Thank you :)

No one is going to hand me success. I must go out & get it myself. That’s why I’m here. To dominate. To conquer. Both the world, and myself.
— Unknown

Comments