Stylish Author Boxes for Blogger


Customized Author Boxes for Blogger

Users of WordPress have been enjoying a feature called an Authors Box at the end of their posts , which is offered via a plugin.
Creating an Authors Box below your posts is a great way to post some brief info about yourself to let your readers know something about you and a great way of spicing up your Blog as well .

Wordpress users have been enjoying this feature for some time now, and it has become a must for nearly all bloggers of every blogging platform to incorporate one into their Theme [Blog ] as well. The Authors Box has now become somewhat of what one may deem: Blogger Etiquette , whereby , you are in essence : Introducing something about yourself to your fellow bloggers ( or, users ).

Wordpress users have been fortunate within the fact that everything they wish to implement into their blogs can usually be achieved via a simple plugin, and so is the case with the Authors Box. Though there are quite several elaborately designed Authors Boxes at the end of certain blogs, the greater degree of blogs usually dont have anything fancy aside from a colored div which contains the Authors gravatar image, a brief bio and possibly a link or two to their other social profiles.

For the greater part, this is great , as some users wish to keep it as simple as possible , and then there are users who simply dont possess any knowledge into CSS or HTML etc., by which to create something nice for themselves – which again : is fine.

Author Boxes just as Contact Forms, are great WordPress plugins which users of the mentioned platform have been enjoying for a long time , however : Blogger Platform users do not have plugins at their disposal ( aside from widgets ).

Which means : everything has to be coded and added manually, which is great if you have some insight into CSS , HTML & javascript – and are adept at reading code somewhat.

Adding simple enough features such as a contact form and an authors box for Wodpress users may not seem like such a great feat – however : for users of the Blogger Platform , who do not have the luxury of Plugins at their disposal , and whom may not be knowledgeable into CSS, XHTML, and javascript implementation , manual coding something into ones Theme Source can be overwhelming ( to say the least ).

As of late, many of you who frequent this blog, and several of you who have stumbled upon this blog for the first time – have contacted me via contact form, and have written me regarding many blog & design related issues. There were many of you who had wanted to know on how to go about implementing a Contact Form, such as the one used on this site. In response to those of you who had wanted to know how to go about implementing a contact form, we hope we have managed to answer your questions and that you have managed to install your contact forms – as well as having been able to Style them as you wanted.

For a while now , many of you have requested a Tut on how to create an Authors Box below your posts such as the ones which you have been seeing on WordPress powered blogs. Users on the Blogger Platform unfortunately do not have the added Luxury of a plugin such as the one available to WordPress users, and thus – if you are on the Blogger Platform, and you wish to incorporate an Authors Box under your posts, then you can view the [ 4 ] variations of Author Boxes created below and if they suit your needs, then by all means : we have submitted them here for you to employ as you deem suitable to your blog related needs.

We hope you will like them enough to use them , and if you wish to change the images used or any other thing you want to switch up – feel free to do so. Simply be aware of all the image size variations used, take into consideration such things as : padding & margin when altering anything within the CSS and within the HTML ( as these classes define a great deal of where your images are placed and aligned ! ) ; therefore , if you are considering making alterations keep in mind everything is controlled within your CSS !

Now , it is all very simple from here on end – you can view any of the styles and simply Copy & Paste your chosen style into your Blogger Theme Source – hit save and you are done ! The actual size of all the Author Boxes varies in width & height. If your wrapper is smaller than 620px , then I recommend using the Author Box Version B, which is suited to fit a wrapper no greater than 560px in width. If you have a wide wrapper ( check your source document before making any changes please ) ; then you can use any of the other Author Boxes below.

Also , please keep in mind : the boxes have been styled and coded on a different theme ( which is an advanced theme ), therefore – when you do apply these author boxes to your own theme – you may find that something may not be aligned properly ( as all themes are structured differently ) and will render results differently as well. If you have some insight into CSS , you will be able to overcome these minor issues – if you DO NOT know and encounter any issues , please feel free to contact us, we will help you set things right.

Lastly – after you have implemented your CSS ABOVE the </head>
tag, scroll down into your page source, and please look for the following line of code, it looks like this ☛

<div class=”post-footer”>. When you locate this line of code , please copy and paste all of the HTML precisely ABOVE it, which should be simple enough.

Again : if you do encounter any problems within attempting to implement this , feel free to contact us and we will try to assist you as soon as possible . If you use any of these Authors Boxes, we hope you enjoy them.

Please Note :

If you decide to use any of these Author boxes below, we advise you to copy and upload ALL of the images to your own Image Host provider and account – as these images may over exceed their bandwidth and all of the images may become null ( deleted ! ) – so…….. consider doing that if you like any of the images ( icons ) and backgrounds used to make these .

 

The sizes of the boxes depicted below can be re-sized image-wise, however: you will need to change all the parameters within the CSS as well.

 

The Light Versions have an link opacity hover state class , which means : the icons used on the Light Version Author Boxes, have Black letter Pressed Icons which look somewhat grey-ish . When a user hovers over them, they are black. Its a very subtle effect, but makes it look all that much better. These look much nicer when implemented so we hope you have fun using them on your Blogger Powered site/blog.

 

Stylish Author Boxes

Authors Box | B Version Light CSS

a.linkopacity img {
filter:alpha(opacity=30);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}
a.linkopacity:hover img {
filter:alpha(opacity=40);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }

.socialize{background:url(http://www.dezignmatterz.com/wp-content/uploads/2012/08/34023454.png)no-repeat;width:515px;height:55px;padding-top:7px;padding-bottom:5px;padding-left:80px;}
.authorbox{width:555px;height:175px;background:url(http://www.dezignmatterz.com/wp-content/uploads/2012/08/16237904.png)no-repeat;font-family:Arial Rounded MT Bold,verdana;font-size:13px;h3-font-size:15px;color:#121212;}

.left {
float:left;
height:100px;
margin-bottom:-5px;
margin-left:15px;
margin-right:25px;
margin-top:-10px;
padding-top:-55px;
width:200px;
}
.right {
float:right;
margin-top:-50px;
width:430px;
}

Authors Box | B Version Light HTML


<!-- Author Box -->

<div class="socialize">
<a class="linkopacity" rel="external nofollow" target="_blank"><img title="Digg this Article and Be Super Cool" src="http://www.dezignmatterz.com/wp-content/uploads/2012/08/digg-square.png" border="0" alt="DiggIt" /></a>

<a class="linkopacity" rel="external nofollow" target="_blank"><img title="Stumble this Article come on you know you want to !" src="http://www.dezignmatterz.com/wp-content/uploads/2012/08/stumbleupon-logo-square.png" border="0" alt="Stumble" /></a>

<a class="linkopacity" title="Tweet it on Twitter" target="_new"><img title="Tweet this Article and show your followers youre Super Cool" src="http://www.dezignmatterz.com/wp-content/uploads/2012/08/twitter-logo-square.png" border="0" alt="Twitter" /></a>

<a class="linkopacity" rel="external nofollow" target="_blank"><img title="Post this Article to Facebook and share with your friends" src="http://www.dezignmatterz.com/wp-content/uploads/2012/08/facebook-logo-square.png" border="0" alt="Facebook" /></a>

<a class="linkopacity" rel="external nofollow" target="_blank"><img title="Post this Article to Technorati and spread the Word!" src="http://www.dezignmatterz.com/wp-content/uploads/2012/08/technorati-logo.png" border="0" alt="technorati" /></a>

<a class="linkopacity" rel="external nofollow" target="_blank"><img title="Save to Delicious Bookmarks" src="http://www.dezignmatterz.com/wp-content/uploads/2012/08/delicious-3.png " border="0" alt="Delicious" /></a>

<a class="linkopacity" rel="external nofollow" target="_blank"><img title="Bump This Post" src="http://www.dezignmatterz.com/wp-content/uploads/2012/08/designbump-logo-square.png " border="0" alt="DesignBump" /></a>

<a class="linkopacity" href="mailto:mia@dezigndiva.com" target="_blank"><img src="http://www.dezignmatterz.com/wp-content/uploads/2012/08/mail-square.png" border="0" alt="EMail" /></a></div>

<div style="clear: both;">

<div class="authorbox">

<div class="left">

<h5>Author</h5>

<h3>David</h3>

<a href="http://www.dezigndiva.com"><img style="border: 0pt none; padding: 8px; background-color: #c3c3c3; width: 70px; height: 70px;" src="http://www.dezignmatterz.com/wp-content/uploads/2012/08/administrator.jpg" alt="" /></a></div>

<div class="right">

If you enjoyed this article or have any suggestions, then ⊱⊱
 Add your Comment, Fave It, Share It, and Spread the <img title="Spread the Love" src="http://www.dezignmatterz.com/wp-content/uploads/2012/08/heart-48x48.png" border="0" alt="Spread the Love" width="32" height="32" />

<a href="http://twitter.com/Vegagirl5" target="_blank"><img style="float: right; margin-top: -30px; padding-right: 50px; padding-bottom: 25px;" src="http://www.dezignmatterz.com/wp-content/uploads/2012/08/Bird-Alt-64.png" border="0" alt="Black_Twitter_Bird" />

<h4>Follow Me on Twitter !</h4>

</a></div>
</div>

<div style="clear: both;">

<!-- Author Box --></div>
</div>

Author Bio Box for Blogger

Authors Box | A Version Light CSS

a.linkopacity img {
filter:alpha(opacity=30);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}
a.linkopacity:hover img {
filter:alpha(opacity=40);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }

.authorbox{width:608px;height:208px;background:url(http://www.dezignmatterz.com/wp-content/uploads/2012/08/67358746.png)no-repeat;font-family:Arial Rounded MT Bold,verdana;font-size:13px;color:#121212;}

.left{float:left;width:100px;height:100px;margin:25px;margin-left:15px;margin-top:10px;}
.right{float:right;margin-top:50px;width:425px;}

Authors Box | A Version Light HTML


<!-- Author Box -->

<div class="authorbox">

<div class="left">

<h4>Author</h4>

<h3>David</h3>

<a href="http://www.dezigndiva.com"><img style="padding: 8px; background-color: #c3c3c3; width: 70px; height: 68px;" src="http://www.dezignmatterz.com/wp-content/uploads/2012/08/administrator.jpg" alt="" /></a></div>

<div class="right">

If you enjoyed this article or have any suggestions, then ⊱⊱
 Add your Comment, Fave It, Share It, and Spread the <img title="Spread the Love" src="http://www.dezignmatterz.com/wp-content/uploads/2012/08/heart-48x48.png" border="0" alt="Spread the Love" width="32" height="32" />

<a class="linkopacity" rel="external nofollow" target="_blank"><img title="Digg this Article and Be Super Cool" src="http://www.dezignmatterz.com/wp-content/uploads/2012/08/digg-square.png" border="0" alt="DiggIt" /></a>

<a class="linkopacity" rel="external nofollow" target="_blank"><img title="Stumble this Article come on you know you want to !" src="http://www.dezignmatterz.com/wp-content/uploads/2012/08/stumbleupon-logo-square.png" border="0" alt="Stumble" /></a>

<a class="linkopacity" title="Tweet it on Twitter" target="_new"><img title="Tweet this Article and show your followers youre Super Cool" src="http://www.dezignmatterz.com/wp-content/uploads/2012/08/twitter-logo-square.png" border="0" alt="Twitter" /></a>

<a class="linkopacity" rel="external nofollow" target="_blank"><img title="Post this Article to Facebook and share with your friends" src="http://www.dezignmatterz.com/wp-content/uploads/2012/08/facebook-logo-square.png" border="0" alt="Facebook" /></a>

<a class="linkopacity" rel="external nofollow" target="_blank"><img title="Post this Article to Technorati and spread the Word!" src="http://www.dezignmatterz.com/wp-content/uploads/2012/08/technorati-logo.png" border="0" alt="technorati" /></a>

<a class="linkopacity" rel="external nofollow" target="_blank"><img title="Save to Delicious Bookmarks" src="http://www.dezignmatterz.com/wp-content/uploads/2012/08/delicious-3.png " alt="Delicious" /></a>

<a class="linkopacity" rel="external nofollow" target="_blank"><img title="Bump This Post" src="http://www.dezignmatterz.com/wp-content/uploads/2012/08/designbump-logo-square.png " alt="DesignBump" /></a>

<a href="http://twitter.com/Vegagirl5" target="_blank"><img style="float: right; margin-top: -38px; padding-right: 30px; padding-bottom: 25px;" src="http://www.dezignmatterz.com/wp-content/uploads/2012/08/Bird-Alt-64.png" border="0" alt="Black_Twitter_Bird" />

<h4>Follow Me on Twitter !</h4>

</a></div>
</div>

<div style="clear: both;">

<!-- Author Box --></div>

Author Box

Authors Box | 2B Version Dark CSS

.socialize{background:url(http://www.dezignmatterz.com/wp-content/uploads/2012/08/1270446985_234.png)no-repeat;width:608px;height:55px;padding-top:4px;padding-bottom:5px;padding-left:130px;}
.authorbox{width:608px;height:208px;background:url(http://www.dezignmatterz.com/wp-content/uploads/2012/08/89118614.png)no-repeat;font-family:Arial Rounded MT Bold,verdana;font-size:13px;h3-font-size:15px;color:#121212;}

.left {
float:left;
height:100px;
margin-bottom:25px;
margin-left:15px;
margin-right:25px;
margin-top:-10px;
padding-top:10px;
width:200px;
}
.right {
float:right;
margin-top:-70px;
width:430px;
}

Authors Box | 2B Version Dark HTML


<!-- Author Box -->

<div class="socialize">
<a rel="external nofollow" target="_blank"><img title="Digg this Article and Be Super Cool" src="http://www.dezignmatterz.com/wp-content/uploads/2012/08/digg6.png" border="0" alt="DiggIt" width="42" height="42" /></a>

<a rel="external nofollow" target="_blank"><img title="Stumble this Article come on you know you want to !" src="http://www.dezignmatterz.com/wp-content/uploads/2012/08/stumbleupon5.png" border="0" alt="Stumble" width="42" height="42" /></a>

<a title="Tweet it on Twitter" target="_new"><img title="Tweet this Article and show your followers youre Super Cool" src="http://www.dezignmatterz.com/wp-content/uploads/2012/08/twitter-1.png" border="0" alt="Twitter" width="42" height="42" /></a>

<a rel="external nofollow" target="_blank"><img title="Post this Article to Facebook and share with your friends" src="http://www.dezignmatterz.com/wp-content/uploads/2012/08/facebook5.png" border="0" alt="Facebook" width="42" height="42" /></a>

<a rel="external nofollow" target="_blank"><img title="Post this Article to Technorati and spread the Word!" src="http://www.dezignmatterz.com/wp-content/uploads/2012/08/technorati.png" border="0" alt="technorati" width="42" height="42" /></a>

<a rel="external nofollow" target="_blank"><img title="Save to Delicious Bookmarks" src="http://www.dezignmatterz.com/wp-content/uploads/2012/08/delicious-1.png " alt="Delicious" width="42" height="42" /></a>

<a rel="external nofollow" target="_blank"><img title="Get The Feeds" src="http://www.dezignmatterz.com/wp-content/uploads/2012/08/rss.png " alt="RSS" width="42" height="42" /></a></div>

<div style="clear: both;">

<div class="authorbox">

<div class="left">

<h4><span style="color: #eaeaea;">Author</span></h4>

<h3><span style="color: #eaeaea;">David</span></h3>

<a href="http://www.dezigndiva.com"><img style="padding: 8px; background-color: #eaeaea; width: 70px; height: 68px;" src="http://www.dezignmatterz.com/wp-content/uploads/2012/08/administrator.jpg" alt="" /></a></div>

<div class="right">

<span style="color: #eaeaea;">If you enjoyed this article or have any suggestions, then ⊱⊱
 Add your Comment, Fave It, Share It, and Spread the </span><img title="Spread the Love" src="http://www.dezignmatterz.com/wp-content/uploads/2012/08/1620289818.png" border="0" alt="Spread the Love" width="32" height="32" />

<a href="http://twitter.com/Vegagirl5" target="_blank"><img style="float: right; margin-top: -8px; padding-right: 40px; padding-bottom: 25px; width: 62px; height: 62px;" src="http://www.dezignmatterz.com/wp-content/uploads/2012/08/6331764211202929640.png" border="0" alt="Silver_Twitter_Bird" /><span style="color: #99ccff;">

<h4>Follow Me on Twitter !</h4>

</span></a></div>
</div>

<div style="clear: both;">

<!-- Author Box --></div>
</div>

WORD OF NOTE

Please keep in mind that these are just Brief Bio Boxes , meaning : Keep it short & simple – do NOT attempt to write an Auto-Biographical account into these boxes – save it for your memoirs !  Ok, now good luck & enjoy – and as mentioned above : If you require any help in anything, contact us.

Also :

You can change the Icons which are included into these author boxes – just keep in mind not to use icons which exceed more than 32px x 32px . :) Change Info Links to your own & replace with your own words – USE !

Post Update

Several of you who have used the Author Boxes have contacted us, and are requesting a second tut on how to implement an Authors Box into your WordPress Platform Supported Themes. For those of you who want to implement an Authors Bio Box into your WP Theme ( without a plugin ) and furthermore you may want to tweak or style your own Authors box so that it matches your theme – ( and maybe even use any of the Author Styled Boxes provided here in this post ) – then what I will recommend for you is , to go over to Evolutionary Designs blog site , hosted by James Johnston.


James gives a detailed and simple code markup as well as clearly defined instructions on implementation. If you possess a bit of knowledge into CSS and PHP ( which is not that different than HTML ! ) you will not have a problem installing any of the above Author Bio Boxes or even creating / designing your own .

As mentioned : James Johnston’s blog clearly defines everything you need to do in order to get this feature to work properly on your own site & WITHOUT a Plugin ! Hope this helps everyone :)


Get Our Feeds Delivered To Your Inbox

Like This Post

  1 Like

AUTHOR INFO

Mia

Admin at Fontype
A Typegeek hooked on code & design.

@

Couldn't fetch latest tweet.

Feedback 20 Comments

  1. terry says:

    Thanks for sharing this information, i truly love your weblog. Keep this good work & enlighten us with your new post. Thanks.

  2. Maratos says:

    Outstanding web-site. A whole lot of invaluable material here. Keep it up Mia:)

  3. Great addon buddy, it has a great use for bloggers these days. BUt I have a small doubt here … What will happen if a guest blogger writes for a blog it might show the same dialog for the original blog author since we have kept it in the HTML code !?

    Hope you will help me in this matter …

    THank YOu in ADvance


Leave a Reply