Today in this article we are going to give an explanation for how you can add Beautiful Multiple Guest/Author Bio's Widget Box inner the blogger website. Multi-Author box will be seen simply at the cease of the article/posts or you can say simply above the put up the footer. Nowadays there are lot's of trick to deploy a couple of author gadget plugin in blogger template however we have tried our pleasant to make it as a whole lot simple as possible hope you guys will like it. Benefits of multi creator container widget are like if your website's or weblog have multiple author's admin's and they all write the content so that time we need a couple of writer field to show the Bio of the author.
How to Install Multiple Author Biography Widget in Blogger Templates
There Are the Following Steps:-
Step 1. Log in to your Blogger account and Go to your blogger dashboard.
Step 2. Now search for the following <data:post.body/> tag and copy the below code snippet and past it just after the <data:post.body/>tag.
<b:if cond='data:blog.pageType == "item"'><div class='bsd-author-box-wrap'><div class='bsd-author-box-full'><div class='boxbsd-avatar'><a href=''><img class='author-image' expr:alt='data:post.author' expr:src='data:post.authorPhoto.url' height='111' width='111'/></a></div><div class='author-des-bsd-cntr'><h4><a href='#' rel='author'><data:post.author/></a></h4><p><data:post.authorAboutMe/> </p><div class='authorsocialprofile'><a class='img1' href='#' rel='nofollow' target='_blank'><i class='fa fa-facebook'/></a><a class='img2' href='#' rel='nofollow' target='_blank'><i class='fa fa-twitter'/></a><a class='img3' 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>
Step 4. Now Search For the ]]></b:skin> or </style> and copy the below CSS code and paste it just Befor/Above.
/* Multiple Author Box CSS By www.BloggersStanD.com */.bsd-author-box-wrap{background:#fff;margin:0 auto 20px;padding:20px;overflow:hidden;border:1px solid #ccc;}.boxbsd-avatar {float:left;margin-right:20px;}.boxbsd-avatar img{width:110px;height:auto;}.author-des-bsd-cntr h4{font-weight:710;font-size:15px;display:block;margin:0;margin-bottom:1px}.author-des-bsd-cntr h4 a{color:#FF6600}.author-des-bsd-cntr h4 a:hover{color:#2C2C2C}.author-des-bsd-cntr p{margin:0;color:#5F5F5F;font-size:95%;margin-bottom:7px}.authorsocialprofile a{display:inline-block;text-align:center;margin-right:10px}.authorsocialprofile a i{font-family:Fontawesome;width:20px;height:20px;line-height:20px;padding:5px;display:block;opacity:1;border-radius:2px;transition:all .3s;}.authorsocialprofile a:nth-child(1) i {background:#2d609b;color:#fff;}.authorsocialprofile a:nth-child(2) i {background:#19bfe5;color:#fff;}.authorsocialprofile a:nth-child(3) i {background:#eb4026;color:#fff;}.authorsocialprofile a:hover:nth-child(1) i,.authorsocialprofile a:hover:nth-child(2) i,.authorsocialprofile a:hover:nth-child(3) i {opacity:0.90;}
Step 5. Now save you Template
How to Display Author Information / Description in Widgets
Step 1. Visit your google plus profile https://plus.google.com and that click on About Section and now click on add an introduction look below for example:
Step 2. Now if you have completed the above step, you need to proceed to step 2nd i.e is in your blogger. Open your blogger Dashboard->Layout then go to main area and check show author profile below posts look below for example:
Step 3. After Clicking on Show author profile below post save your widget...Done!
I hope you enjoy this post and the photos.
0 Comments: