Best Author Box Widget for Blogger Blogspot
After sharing to you my other simple Author Box Bio for Blogger Blogspot Blogs, Now I have here my best Author Box Bio design for Blogger yet. And it comes very handy to implement because it just contains HTML and CSS codes and It doesn't need to run with Jquery because I didn't make the design of this Author Box Bio to be Animated.This Author Box widget comes with the an image background, a socializer (facebook, twitter, and Google +), and your Photo. So now let's start for the tutorial on how to implement it on your own Blogger Blog.
Procedure on How to put Author Box Bio on Blogger Blogspot Blogs:
- First thing to do is to go to Templates > Edit HTML.
- Then paste the Below CSS code above ]]></b:skin>.
/*------ Author box by TronicFlow ---- */
.tronic-author-box {
float:left;
width:555px;
height:150px;
padding:15px;
border:1px solid #ccc;
margin-bottom:7px;
margin-top:15px;
background:url('http://i.imgur.com/VlyntQo.png');
color:#444444;
-webkit-box-shadow:0px 0px 10px rgba(0, 0, 0, .3);
-moz-box-shadow:0px 0px 10px rgba(0, 0, 0, .3);
box-shadow:0px 0px 10px rgba(0, 0, 0, .3);
}
.tronic-author-img {
float:left;
width: 125;
height: 135;
margin-top:7px;
margin-bottom: 7px;
margin-left: 2px;
margin-right: 10px;
padding-bottom: 7px;
}
.tronic-author-title {
color:#b6e026;
font-family:'Lemon';
font-weight:bold;
text-shadow:#64665b 0px 1px 1px;
font-size:20px;
margin-bottom:-6px;
float: center;
}
.tronic-author-indent {
text-indent: 1em;
margin-top: -4px;
}
.tronic-author-text {
text-indent: 1em;
margin-top: 10px;
font-size: 13px;
}
.tronic-author-social {
font:10px georgia;
float: right;
color:#ffffff;
background:#b6e026;
display:inline;
border-radius:5px;
padding:5px;
margin-right:30px;
}
.tronic-author-social-button {
float: right;
margin-left: -20px;
}
/*--------Closed - Author Box by TronicFlow--------*/
You are still not done yet. So after doing the steps above, Just follow the last step below and you're near to be done.
Adding our HTML Code for it to Appear:
- Find this code <div class='post-footer-line post-footer-line-1'>.
- Paste the below code just below <div class='post-footer-line post-footer-line-1'>.
<b:if cond='data:blog.pageType == "item"'>
<!--Google Adsense Ad Code (At the End of Posts)-->
<div class='tronic-author-box'>
<div class='tronic-author-img'>
<img alt='Justin Quitaleg' height='135' src='Your Profile Photo link' width='125'/></div>
<div class='tronic-author-title'><div class='tronic-author-indent'>About the Author</div></div>
<div class='tronic-author-text'><b>
<span style='color: #02839a;'>Justin</span> <span style='color: #ff8300;'>Quitaleg</span></b> is a 16 years old guy who wants to be a successful Blogger in the near Future. Aside from Blogging, He also loves to play with HTML, CSS, and Javascript. He's not a Pro on Blogging but He's still trying to deliver some great stuffs and tutorials for his Readers.</div>
<div class='tronic-author-social-button'>
<a href='http://fb.com/tronicflower'><img src='http://i.imgur.com/14G28qJ.png' title='Facebook' width='25'/></a>
<a href='http://twitter.com/tronicflow'> <img src='http://i.imgur.com/wIY3F0y.png' title='Twitter' width='25'/></a>
<a href='http://google.com/+justinquitalegz/'><img src='http://i.imgur.com/zxbYNYi.png' title='Google plus' width='25'/></a>
</div>
<div class='tronic-author-social'>Connect with Him on:</div>
<!-- tronicflow- author-box widget-->
</div>
</b:if>
Customizations:
-Your Profile Photo link - Change it with your own photo direct link.
-Green Highlight - Change the text with the green highlight with your own self description. :)
-Orange Highlight - Change it with your own Personal Social links.
Final Words:
This tutorial about Our Best Author Box widget is absolutely made by us. So if you want to share it in your Blog, You will need to give credits on this site for us to provide more cool widgets. If you enjoyed this post, or if you got problems about our widget, you can drop a comment below and we'll try to respond quick.
No comments:
Post a Comment