Author Box for Blogger-How to add a Stylist Author Box to Blogger ?.Hi Friends in this post i am going to tell you how you can add the above 100% new unique and beautiful Author Box for your blogger website.You can use my below some simple steps to add this Author box to blogger below post.
- Login to Blogger > Click on drop down menu >then select "Template".
- Now you will see "EDIT HTML" Button ,Click on it >and then click on Proceed button .Now find code like this
<div class='post-footer-line post-footer-line-1'>
or
<div class='post-footer-line post-footer-line-2'/>
Note:-Above code may be differ According to template try to Find your below post code ,if you can send me your template to my mail.
Now After Finding your code ,Add the below Code
<b:if cond='data:blog.pageType == "item"'>
<div class="widget-content" style="background-color: #dfdfdf; color: #222222; font-family: Arial, Tahoma, 'Century gothic', sans-serif; font-size: 12px; margin: 0px; padding: 0px;">
<a href="https://plus.google.com/114310883525097681160" style="color: #555555; margin: 0px; outline: none; padding: 0px; text-decoration: initial;"><img alt="My Photo" class="profile-img" height="80" src="http://lh4.googleusercontent.com/-VOVWSnoUrnk/AAAAAAAAAAI/AAAAAAAAC1k/pTYb6gDCRXc/s512-c/photo.jpg" style="border: 1px solid rgb(204, 204, 204); float: left; margin: 0px 5px 5px 0px; padding: 4px;" width="80" /></a>
<br />
<dl class="profile-datablock" style="margin: 0.5em 0px; padding: 0px;">
<dt class="profile-data" style="color: #999999; font-family: 'Trebuchet MS', Trebuchet, Arial, Verdana, sans-serif; font-size: 9px; font-weight: bold; letter-spacing: 0.1em; line-height: 1.6em; margin: 0px; padding: 0px; text-transform: uppercase;"><a class="profile-name-link" href="https://plus.google.com/114310883525097681160" rel="author" style="background-image: url(http://www.google.com/images/icons/ui/gprofile_button-16.png); background-position: 0% 0%; background-repeat: no-repeat no-repeat; color: #555555; display: inline-block; margin: 0px; min-height: 20px; outline: none; padding: 0px 0px 0px 20px; text-decoration: initial;">VIKASH CHOUDHARY</a>
<a class="profile-name-link" href="http://www.facebook.com/sharp.vikash" rel="nofollow" style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCH3LCQ38v6DDw5jxXalMls5Scz6VPiQaUzDpvAQzRGV62-CRv3z3PXLtZ5WulTRIDH5zTHRUp1PHveZKDh23z8cj525O_7iyoU3BH10lUQmIsc_eTE-lxrAk15c19df7gn9Yca5g7mpU/s1600/facebook.png); background-position: 0% 0%; background-repeat: no-repeat no-repeat; color: #555555; display: inline-block; margin: 0px; min-height: 20px; outline: none; padding: 0px 0px 0px 20px; text-decoration: initial;">VIKASH CHOUDHARY</a>
<a class="profile-name-link" href="http://twitter.com/egytricks" rel="nofollow" style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTvM2hc3ZNaMrQMRD0ueklhWm0O71FxcjXt7lP4JyoPhyaFT2BC1ScLfcykpSgUXngV2hEeISxueFg6DABUepW8LX1EdttLr8gmUU3EvJbJHnkt_mlpEIQI9DzjdOhkH60XZ52IS1dzAI/s1600/Untitled.png); background-position: 0% 0%; background-repeat: no-repeat no-repeat; color: #555555; display: inline-block; margin: 0px; min-height: 20px; outline: none; padding: 0px 0px 0px 20px; text-decoration: initial;">VIKASH CHOUDHARY</a>
<a class="profile-name-link" href="http://www.egytricks.com/" style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhprDgbiPzvmynMtKW76sJ_6en9hpNmny-FVlwYNMeORxvRuiRzh-3Sj4HjFhry3KVAdtQlFN4Fw7FAkogiuxmZMuzc1WuQp-HQ_nxWycy_A9x7ZhyphenhyphengBImIhoz2JtHkhORkL6Yv58TOCJk/s1600/Untitled.png); background-position: 0% 0%; background-repeat: no-repeat no-repeat; color: #555555; display: inline-block; margin: 0px; min-height: 20px; outline: none; padding: 0px 0px 0px 20px; text-decoration: initial;">Visit My Site</a>
</dt>
<dd class="profile-textblock" style="line-height: 1.6em; margin: 0.5em 0px; padding: 0px;">Vikash is a about 18 year old young guy who is gifted with the art of Blogging,He love to Blog all the day ,He is a Professional SEO Consultant,Website Designer and a Certified Graphics Designer. He is blogging since 2010 and Still love to share bright ideas. </dd></dl>
</div>
</b:if>
<div class="widget-content" style="background-color: #dfdfdf; color: #222222; font-family: Arial, Tahoma, 'Century gothic', sans-serif; font-size: 12px; margin: 0px; padding: 0px;">
<a href="https://plus.google.com/114310883525097681160" style="color: #555555; margin: 0px; outline: none; padding: 0px; text-decoration: initial;"><img alt="My Photo" class="profile-img" height="80" src="http://lh4.googleusercontent.com/-VOVWSnoUrnk/AAAAAAAAAAI/AAAAAAAAC1k/pTYb6gDCRXc/s512-c/photo.jpg" style="border: 1px solid rgb(204, 204, 204); float: left; margin: 0px 5px 5px 0px; padding: 4px;" width="80" /></a>
<br />
<dl class="profile-datablock" style="margin: 0.5em 0px; padding: 0px;">
<dt class="profile-data" style="color: #999999; font-family: 'Trebuchet MS', Trebuchet, Arial, Verdana, sans-serif; font-size: 9px; font-weight: bold; letter-spacing: 0.1em; line-height: 1.6em; margin: 0px; padding: 0px; text-transform: uppercase;"><a class="profile-name-link" href="https://plus.google.com/114310883525097681160" rel="author" style="background-image: url(http://www.google.com/images/icons/ui/gprofile_button-16.png); background-position: 0% 0%; background-repeat: no-repeat no-repeat; color: #555555; display: inline-block; margin: 0px; min-height: 20px; outline: none; padding: 0px 0px 0px 20px; text-decoration: initial;">VIKASH CHOUDHARY</a>
<a class="profile-name-link" href="http://www.facebook.com/sharp.vikash" rel="nofollow" style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCH3LCQ38v6DDw5jxXalMls5Scz6VPiQaUzDpvAQzRGV62-CRv3z3PXLtZ5WulTRIDH5zTHRUp1PHveZKDh23z8cj525O_7iyoU3BH10lUQmIsc_eTE-lxrAk15c19df7gn9Yca5g7mpU/s1600/facebook.png); background-position: 0% 0%; background-repeat: no-repeat no-repeat; color: #555555; display: inline-block; margin: 0px; min-height: 20px; outline: none; padding: 0px 0px 0px 20px; text-decoration: initial;">VIKASH CHOUDHARY</a>
<a class="profile-name-link" href="http://twitter.com/egytricks" rel="nofollow" style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTvM2hc3ZNaMrQMRD0ueklhWm0O71FxcjXt7lP4JyoPhyaFT2BC1ScLfcykpSgUXngV2hEeISxueFg6DABUepW8LX1EdttLr8gmUU3EvJbJHnkt_mlpEIQI9DzjdOhkH60XZ52IS1dzAI/s1600/Untitled.png); background-position: 0% 0%; background-repeat: no-repeat no-repeat; color: #555555; display: inline-block; margin: 0px; min-height: 20px; outline: none; padding: 0px 0px 0px 20px; text-decoration: initial;">VIKASH CHOUDHARY</a>
<a class="profile-name-link" href="http://www.egytricks.com/" style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhprDgbiPzvmynMtKW76sJ_6en9hpNmny-FVlwYNMeORxvRuiRzh-3Sj4HjFhry3KVAdtQlFN4Fw7FAkogiuxmZMuzc1WuQp-HQ_nxWycy_A9x7ZhyphenhyphengBImIhoz2JtHkhORkL6Yv58TOCJk/s1600/Untitled.png); background-position: 0% 0%; background-repeat: no-repeat no-repeat; color: #555555; display: inline-block; margin: 0px; min-height: 20px; outline: none; padding: 0px 0px 0px 20px; text-decoration: initial;">Visit My Site</a>
</dt>
<dd class="profile-textblock" style="line-height: 1.6em; margin: 0.5em 0px; padding: 0px;">Vikash is a about 18 year old young guy who is gifted with the art of Blogging,He love to Blog all the day ,He is a Professional SEO Consultant,Website Designer and a Certified Graphics Designer. He is blogging since 2010 and Still love to share bright ideas. </dd></dl>
</div>
</b:if>
Replace highlighted http://www.egytricks.com
http://www.facebook.com/sharp.vikash
https://plus.google.com/114310883525097681160
http://twitter.com/egytricks
With your URL
NOTE:- You can also use above code direct in blog posts in HTML mode
Now all done if you have any Problem to this Blogger Author Box then Comment below.
Can you write a variable code for multiple authors? im trying to find help with this.
ReplyDeletewe will try in future .it is little difficult but not Impossible ..
Delete