Blog is no longer just about information and sharing of ideas.Blog has evolved a lot.It connects you emotionally to your blog.Styling you blog requires lots of guts , knowledge and a bit of creativity.Readers like to know everything.They sometimes are more interested in the blogs history rather than the post.So many blog or many websites add a About page to their sites , so as to create a connectivity between themselves and the author.But as a reader it is not always convenient to navigate to the about us page.So the web master came up with a box , called as an Authors Box.Now there are several boxes available on the net ,but are they really that effective ? Today i am going to give you a code that will really amaze your readers with the compact about authors box .
Features
- Adapted from worpress
- Use of Social Media
- Author image included
- Flexible box to fit in all your info
Adding It To Blogger
- Go to Blogger
- Navigate to Blogger > Edit Html > Proceed > Tick Mark Expand Widgets
- Paste the code below <data:post.body>
<style type="text/css">
/* Code for the author box starts here yourpcgenie.net */
#postauthor { background: #eef7f8; border: 1px solid #c6d9ed; padding:10px; margin: 15px 0; width:95%;height:150px; font-family:Georgia, "Times New Roman", Times, serif; }
#author-info{float:left; width:410px; padding:0 15px 0 0; border-right:1px solid #ccc; }
#author-info img {background:#fff; border: 1px solid #ddd; float: left; margin-right:10px;padding: 5px;
box-shadow: 0 0 3px #CCC; padding:3px;}#author-info h6 { color: #666; font-size: 18px; font-family:Georgia, "Times New Roman", Times, serif; font:Georgia, "Times New Roman", Times, serif }
#author-info h5 {color:#666; text-transform:none; font-size:12px; letter-spacing:0; font-family: Georgia;}
#author-info p { color: #515151; font-size: 12px; line-height:16px; font-family: Georgia;}
* { margin:0; padding:0;}#author-connect{width:21%; float:right; margin-right:12px;margin-top:15px; }
a.gplus-s{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXpCqFIl4cuHn5LUox3SLQyEcnP2TOZeceAGMEH-z3BV2Izw-qAua3pM2m5wgSWcnya87MLoV1226CrbwEVx-qQvkDHVq8r8PjrL8u7sFC1T9r-PL_WNloiVegORwEzzZcosVNS_f1x0nf/s1600/gp-icon.png") no-repeat 0 0px; color: #666; font-weight: bold;margin: 5px 0px; padding: 0 20px;text-decoration: none;}
</style>
<b:if cond="data:blog.pageType == "item"">
<b:if cond="data:post.author == "Author Name"">
</b:if></b:if><br />
<div id="postauthor">
<div id="author-info">
<img alt="" height="140" src="http://sphotos-f.ak.fbcdn.net/hphotos-ak-ash4/396392_328745013811463_721561506_n.jpg" width="80" /><br />
<h6 style="font: Georgia;">
Article by <a expr:href="data:post.authorProfileUrl" href="" rel="author"><data:post .author=".author"></data:post></a></h6>
<h5>
<b>Tanmay Kapse</b></h5>
I am Tanmay Kapse a pro blogger and a tech enthusiast. I live in Mumbai , the dream city of India.Working with cracked softwares and games has always been my passion.I am just like you if you enjoying entering / copying cracks.</div>
<div id="author-connect">
<iframe allowtransparency="true" frameborder="0" scrolling="no" src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2Fgenieland&send=false&layout=button_count&width=120&show_faces=false&action=like&colorscheme=light&font&height=21&appId=230688610312045" style="border: none; height: 21px; overflow: hidden; width: 120px;"></iframe>
<br />
<a class="twitter-follow-button" data-show-count="false" data-size="small" href="https://twitter.com/shipsocker">Follow @shipsocker</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<br />
<a class="gplus-s" href="https://plus.google.com/103247805386384887313" rel="nofollo" target="_blank">Google</a></div>
</div>
Customizing The Box
- Change the respective links marked in blue
- Change the height of the box by changing the values marked in red
Written by Aman
We are Creative Blogger Theme Wavers which provides user friendly, effective and easy to use themes. Each support has free and providing HD support screen casting.
0 comments:
Post a Comment