How To Install Multiple Author Bio Box In Blogger - Gourab Design

How To Install Multiple Author Bio Box In Blogger


Any website is professional only when its walker works properly. Recognize him all He has a different identity.Like I have a different identity. I know everything Anyone who comes to my website is aware of me first.

But do you know the reason behind this? Probably will not know. So let me tell you now. So that you can find something new.I always try every new new tips. So that everyone can get help. So, think of writing a new article even today. My post is How To Install Multiple Author Bio Box In Blogger . 

That's why we move ahead while not talking too much. Well Google will find many websites in this regard where this tip is already available.But some of these works and nothing does. The one I use will share it with you. Which is perfect right.

Install multiple author bio box in blogger

Come to the right point now. Open any of my posts. Or, look at the post you are reading right now.

Now go to the last of the article. Now see my photo means blogger display post author And there will be something written about me. If you want to do this then Right below, read what I say. And then do it accordingly. Then you too will become a bio box like me in every one of your content.

Pyar Me India - The Famous Love Guru Website

How To Add Multiple Author Bio Box In Your Blogger Blog

✓ First you visit (means ur admin panel)

✓  now go to Theme option. Click it. Simply see the right side. EDIT HTML .

✓ also click this option.

✓ Search </style> 

✓paste the below code above of </style>

>>Code credited by :- MS Design ๐Ÿ‘ˆ

/* Author Bio Box by Gourab Design */ .authorboxwrap{Font-family: Open Sans;background:#fff;margin:10px auto 20px;padding:20px;overflow:hidden;border:1px solid #ccc;} .avatar-container {float:left;margin-right:20px;border: 1px solid silver;padding: 3px;} .avatar-container img{width:110px;height:auto;} .author_description_container h4{font-family:Open Sans; font-weight:700;font-size:16px;display:block;margin:0;margin-bottom:2px} .author_description_container h4 a{color:#ef4824} .author_description_container h4 a:hover{color:#404040} .author_description_container p{margin:0;color:#888;font-size:95%;margin-bottom:8px;font-family: Open Sans;} .authorsocial a{display:inline-block;text-align:center;margin-right:10px} .authorsocial a i{font-family:Fontawesome;width:20px;height:20px;line-height:20px;padding:5px;display:block;opacity:1;border-radius:50%;transition:all .3s;} .authorsocial a:nth-child(1) i {background:#2d609b;color:#fff;} .authorsocial a:nth-child(2) i {background:#19bfe5;color:#fff;} .authorsocial a:nth-child(3) i {background:#eb4026;color:#fff;} .authorsocial a:hover:nth-child(1) i,.authorsocial a:hover:nth-child(2) i,.authorsocial a:hover:nth-child(3) i {opacity:0.90;} 

 Finally 50% done. So now need to be HTML code Part....

✓ so nw above method searching the bellow Code.

<data: post.body/>

✓Now paste the below code right after <data: post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='authorboxwrap'> <div class='authorboxfull'> <div class='avatar-container'> <a href=''> <img class='author_avatar' expr:alt='' expr:src='data:post.authorPhoto.url' height='110' width='110'/> </a> </div> <div class='author_description_container'> <h4>Author: <a href='#' rel='author'><></a></h4> <p> <data:post.authorAboutMe/> </p> <div class='authorsocial'> <a class='img-circle1' href='#' rel='nofollow' target='_blank'><i class='fa fa-facebook'/></a> <a class='img-circle2' href='#' rel='nofollow' target='_blank'><i class='fa fa-twitter'/></a> <a class='img-circle3' href='#' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/></a> <div class='clr'/> </div> </div> </div> </div> <div style='clear:both'/> </b:if> 

 ✓ Please Note:- about blog author info box in all post 

Change all #tag into authorsocial div with your social id. The social icons are, Facebook, gplus or twitter icons.

Find this code
and remove it. And write your own bio on his place.

Save the theme. ๐Ÿ˜‰๐Ÿ‘ Done 100% .....

Heartily thank all of you for reading this article. How did you find our tips? Commenting to us. If it looks good, then share it with you. If there is a question in mind then definitely ask me. So far for the woman. take care of yourself.

No comments