DezignMatterz

If Web Design and the Arts are your passion, then let us fuel your Fire !
Consider registering. »

Contact »DezignMatterz.com

Member Login DezignMatterzUser Login

Lost your password?

Registration is closed

Sorry, you are not allowed to register by yourself on this site!

You must either be invited by one of our team member or request an invitation by email at Mia{at} DezignMatterz {dot} com.

JQuery Twitter Tooltip

Posted on 23 Sep 2010
JQuery Twitter Tooltip

The JQuery Twitter Tooltip enables you to display the latest tweets surrounding a certain topic via certain words or phrases which you use within your articles or posts .


{Read More}

Best New Up and Coming Web Designers

Posted on 06 May 2010
Best New Up and Coming Web Designers

Web designers are responsible for creating the look and feel of World Wide Web pages for a client’s Web site.


{Read More}

Super Heroes in Comic Illustration Art

Posted on 16 Apr 2010
Super Heroes in Comic Illustration Art

Since the debut of the prototypical superhero Superman in 1938, stories of Super Heroes—ranging from brief episodic adventures to continuing year-long sagas—have dominated American comic books and crossed over into other media.


{Read More}

Impressive V-Card Mini Site Themes

Posted on 11 Apr 2010
Impressive V-Card Mini Site Themes

One of the newest Web design trends in presenting your audience with your Online presence is by creating what is termed as a Mini Website , or a one page portfolio site .


{Read More}

Stylish Author Boxes for Blogger

Posted on 05 Apr 2010
Stylish Author Boxes for Blogger

Stylish Author Bio Boxes are a great way of introducing yourself to your readers at the end of every post & also a great way of sprucing up your page .


{Read More}

Exceptional Photo Manipulation Photography

Posted on 31 Mar 2010
Exceptional Photo Manipulation Photography

The art of Photo manipulation is the process of image editing techniques applied to photographs in order to create an illusion or deception (in contrast to mere enhancement or correction), through analog or digital means.


{Read More}

Stylish Author Boxes for Blogger

Posted on05 Apr 2010

Author Bio Boxes

Customized Author Boxes for

Users of 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 all platforms to incorporate one into their Theme [Blog ] also . The Authors Box has now become somewhat of a Blogger Etiquette , whereby , you are in essence : Introducing something about yourself to your fellow bloggers [ users ] .

WordPress users have been fortunate within the fact that everything they wish to implement into their blogs usually [ for the greater amount ] can be achieved via a simple plugin , and so is the case with the Authors Box . Though I have seen 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 set of divs or div. Which 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 , [ over a month now & counting..... ] 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 my contact form ( above ) and have written me regarding many blog & design related issues . There were many of you who had wanted to know about how to implement a Contact Form , such as the one I use on this site ( above ) . I hope that all of you who had wanted to know how to go about implementing a contact form have gotten your answer and 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 contacted me requesting 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 I have created below and if they suit your needs , then by all means : I have submitted them here for you to use .

I hope you will like them enough to use them , and if you wish to change the images used and any other thing you want to switch up – feel free to do so . Simply be aware of all the image sizes used , take into consideration such things as : padding & margin when altering anything within the CSS and in 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 . If you have a wide wrapper ( check your source document before making any changes please ) ; then you can use any of the Author Boxes below .

Also , please keep in mind : I have styled and coded these on my 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 are differently structured ) and will display certain things differently . 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 me , I will help you set things right :)

Lastly – after you have implemented your CSS ABOVE the
</head>
tag , and scroll down into your page source , 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 ! Now , that should be simple enough :)

Again : if you do encounter any problems within attempting to implement this , feel free to contact me and I will get back to you as soon as possible . If you use any of these Authors Boxes , I hope you enjoy them :)

Please Note :

If you decide to use any of these Author boxes below , I would advise you to copy and upload ALL of the images to your own Image Host provider and account – as mine may over exceed its 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 , is the actual size of the real Authors Box

Also , 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 .

Stylish Author Boxes


Authors Box | B Version Light CSS

View Code CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

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://i662.photobucket.com/albums/uu345/VEGA-5/Site%20Buttons/SOCIAL%20ICONS%202/Author_Box_Images/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://i662.photobucket.com/albums/uu345/VEGA-5/Site%20Buttons/SOCIAL%20ICONS%202/Author_Box_Images/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

View Code HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

<!-- Author Box -->
 
 
<div class="socialize">
<a class="linkopacity" rel="external nofollow" target="_blank"><img title="Digg this Article and Be Super Cool" src="http://i662.photobucket.com/albums/uu345/VEGA-5/Site%20Buttons/SOCIAL%20ICONS%202/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://i662.photobucket.com/albums/uu345/VEGA-5/Site%20Buttons/SOCIAL%20ICONS%202/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://i662.photobucket.com/albums/uu345/VEGA-5/Site%20Buttons/SOCIAL%20ICONS%202/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://i662.photobucket.com/albums/uu345/VEGA-5/Site%20Buttons/SOCIAL%20ICONS%202/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://i662.photobucket.com/albums/uu345/VEGA-5/Site%20Buttons/SOCIAL%20ICONS%202/technorati-logo.png" border="0" alt="technorati" /></a>
 
<a class="linkopacity" rel="external nofollow" target="_blank"><img title="Save to Delicious Bookmarks" src="http://i662.photobucket.com/albums/uu345/VEGA-5/Site%20Buttons/SOCIAL%20ICONS%202/delicious-3.png " border="0" alt="Delicious" /></a>
 
<a class="linkopacity" rel="external nofollow" target="_blank"><img title="Bump This Post" src="http://i662.photobucket.com/albums/uu345/VEGA-5/Site%20Buttons/SOCIAL%20ICONS%202/designbump-logo-square.png " border="0" alt="DesignBump" /></a>
 
<a class="linkopacity" href="mailto:mia@dezigndiva.com" target="_blank"><img src="http://i662.photobucket.com/albums/uu345/VEGA-5/Site%20Buttons/SOCIAL%20ICONS%202/Author_Box_Images/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://i662.photobucket.com/albums/uu345/VEGA-5/Site%20Buttons/SOCIAL%20ICONS%202/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://i662.photobucket.com/albums/uu345/VEGA-5/Site%20Buttons/SOCIAL%20ICONS%202/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://i662.photobucket.com/albums/uu345/VEGA-5/Site%20Buttons/SOCIAL%20ICONS%202/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>

http://dezigndiva2.blogspot.com/


Authors Box | A Version Light CSS

View Code CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

 
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://i662.photobucket.com/albums/uu345/VEGA-5/TYPOGRAPHY/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

View Code HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

<!-- 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://i662.photobucket.com/albums/uu345/VEGA-5/Site%20Buttons/SOCIAL%20ICONS%202/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://i662.photobucket.com/albums/uu345/VEGA-5/Site%20Buttons/SOCIAL%20ICONS%202/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://i662.photobucket.com/albums/uu345/VEGA-5/Site%20Buttons/SOCIAL%20ICONS%202/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://i662.photobucket.com/albums/uu345/VEGA-5/Site%20Buttons/SOCIAL%20ICONS%202/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://i662.photobucket.com/albums/uu345/VEGA-5/Site%20Buttons/SOCIAL%20ICONS%202/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://i662.photobucket.com/albums/uu345/VEGA-5/Site%20Buttons/SOCIAL%20ICONS%202/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://i662.photobucket.com/albums/uu345/VEGA-5/Site%20Buttons/SOCIAL%20ICONS%202/technorati-logo.png" border="0" alt="technorati" /></a>
 
<a class="linkopacity" rel="external nofollow" target="_blank"><img title="Save to Delicious Bookmarks" src="http://i662.photobucket.com/albums/uu345/VEGA-5/Site%20Buttons/SOCIAL%20ICONS%202/delicious-3.png " alt="Delicious" /></a>
 
<a class="linkopacity" rel="external nofollow" target="_blank"><img title="Bump This Post" src="http://i662.photobucket.com/albums/uu345/VEGA-5/Site%20Buttons/SOCIAL%20ICONS%202/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://i662.photobucket.com/albums/uu345/VEGA-5/Site%20Buttons/SOCIAL%20ICONS%202/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 | 2A Version Dark CSS

View Code CSS
1
2
3
4
5
6

 
.authorbox{width:608px;height:208px;background:url(http://i662.photobucket.com/albums/uu345/VEGA-5/Site%20Buttons/SOCIAL%20ICONS%202/Author_Box_Images/89118614.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:20px;width:425px;}
-->


Authors Box | 2A Version Dark HTML

View Code HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

<!-- Author Box -->
 
 
<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://i662.photobucket.com/albums/uu345/VEGA-5/Site%20Buttons/SOCIAL%20ICONS%202/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://i662.photobucket.com/albums/uu345/VEGA-5/Site%20Buttons/SOCIAL%20ICONS%202/Author_Box_Images/1620289818.png" border="0" alt="Spread the Love" width="32" height="32" />
 
 
<a rel="external nofollow" target="_blank"><img title="Digg this Article and Be Super Cool" src="http://i662.photobucket.com/albums/uu345/VEGA-5/Site%20Buttons/SOCIAL%20ICONS%202/Author_Box_Images/digg.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://i662.photobucket.com/albums/uu345/VEGA-5/Site%20Buttons/SOCIAL%20ICONS%202/Author_Box_Images/stumbleupon.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://i662.photobucket.com/albums/uu345/VEGA-5/Site%20Buttons/SOCIAL%20ICONS%202/Author_Box_Images/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://i662.photobucket.com/albums/uu345/VEGA-5/Site%20Buttons/SOCIAL%20ICONS%202/Author_Box_Images/facebook.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://i662.photobucket.com/albums/uu345/VEGA-5/Site%20Buttons/SOCIAL%20ICONS%202/Author_Box_Images/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://i662.photobucket.com/albums/uu345/VEGA-5/Site%20Buttons/SOCIAL%20ICONS%202/Author_Box_Images/delicious-1.png " alt="Delicious" width="42" height="42" /></a>
 
<a rel="external nofollow" target="_blank"><img title="Get The Feeds" src="http://i662.photobucket.com/albums/uu345/VEGA-5/Site%20Buttons/SOCIAL%20ICONS%202/Author_Box_Images/rss.png " alt="RSS" width="42" height="42" /></a>
 
 
 
<a href="http://twitter.com/Vegagirl5" target="_blank"><img style="float: right; margin-top: -38px; padding-right: 40px; padding-bottom: 25px; width: 62px; height: 62px;" src="http://i662.photobucket.com/albums/uu345/VEGA-5/Site%20Buttons/SOCIAL%20ICONS%202/Author_Box_Images/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>



Author Box


Authors Box | 2B Version Dark CSS

View Code CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

.socialize{background:url(http://i662.photobucket.com/albums/uu345/VEGA-5/Site%20Buttons/SOCIAL%20ICONS%202/Author_Box_Images/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://i662.photobucket.com/albums/uu345/VEGA-5/Site%20Buttons/SOCIAL%20ICONS%202/Author_Box_Images/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

View Code HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

<!-- Author Box -->
 
 
<div class="socialize">
<a rel="external nofollow" target="_blank"><img title="Digg this Article and Be Super Cool" src="http://i662.photobucket.com/albums/uu345/VEGA-5/Site%20Buttons/SOCIAL%20ICONS%202/Author_Box_Images/digg.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://i662.photobucket.com/albums/uu345/VEGA-5/Site%20Buttons/SOCIAL%20ICONS%202/Author_Box_Images/stumbleupon.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://i662.photobucket.com/albums/uu345/VEGA-5/Site%20Buttons/SOCIAL%20ICONS%202/Author_Box_Images/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://i662.photobucket.com/albums/uu345/VEGA-5/Site%20Buttons/SOCIAL%20ICONS%202/Author_Box_Images/facebook.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://i662.photobucket.com/albums/uu345/VEGA-5/Site%20Buttons/SOCIAL%20ICONS%202/Author_Box_Images/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://i662.photobucket.com/albums/uu345/VEGA-5/Site%20Buttons/SOCIAL%20ICONS%202/Author_Box_Images/delicious-1.png " alt="Delicious" width="42" height="42" /></a>
 
<a rel="external nofollow" target="_blank"><img title="Get The Feeds" src="http://i662.photobucket.com/albums/uu345/VEGA-5/Site%20Buttons/SOCIAL%20ICONS%202/Author_Box_Images/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://i662.photobucket.com/albums/uu345/VEGA-5/Site%20Buttons/SOCIAL%20ICONS%202/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://i662.photobucket.com/albums/uu345/VEGA-5/Site%20Buttons/SOCIAL%20ICONS%202/Author_Box_Images/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://i662.photobucket.com/albums/uu345/VEGA-5/Site%20Buttons/SOCIAL%20ICONS%202/Author_Box_Images/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 me .

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 me 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 ( andwithout a plugin ) and furthermore you may want to tweak or style your own Authors box so that it matches your theme – ( or 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 :)

M. 



DEVELOPMENT, WEB DESIGN, WORDPRESS
, ,




Facebook Delicious Stumbleupon Digg Technorati Design Bump Reditt



↪17 Comments on this post

  1. telugu songs free download
    telugu songs free download says
    Jul 10, 2010 |

    yeh.. it was really a good addon for blog owners and thanks for providing.. indeed very useful…!


  2. admin
    admin says
    Jul 10, 2010 |

    @telugu songs free download: Youre very welcome Telugu & thank you for stopping by . If you choose to use any of the bio boxes & require any help you can contact me & I will assist you :)


  3. movies online
    movies online
    Twitter:
    says
    Sep 10, 2010 |

    Cool website, I hadn’t noticed http://www.dezignmatterz.com previously in my searches!
    Carry on the good work!


  4. Marty
    Marty
    Twitter:
    says
    Sep 12, 2010 |

    Awesome blog I enjoyed reading your info ! Beautiful design & nicely written articles , great job you’ve done here :)


  5. NerElerietolo
    NerElerietolo
    Twitter:
    says
    Sep 12, 2010 |

    Hi People, i would just like to make an introduction to everyone at http://www.dezignmatterz.com

    Your site is fantastic! Usually when I visit blogs, I just come across rubbish, but this time I was really surprised, finding an informative blog containing brilliant information.

    Thanks jeezus at http://www.dezignmatterz.com and keep this superb effort up !!! :)


  6. gameboy
    gameboy
    Twitter:
    says
    Sep 13, 2010 |

    hey..very useful info..I will try on my blog


  7. Norman
    Norman says
    Sep 20, 2010 |

    ha, I will try out my thought, your post give me some good ideas, it’s truly awesome, thanks.

    - Norman


  8. Paul @ Social Icon Studio
    Paul @ Social Icon Studio says
    Nov 12, 2010 |

    Very nice thanks for the share…


  9. regcure
    regcure says
    Dec 25, 2010 |

    You made several nice points there. I did a search on the subject matter and found mainly persons will have the same opinion with your blog.


  10. Paul Santosh
    Paul Santosh
    Twitter:
    says
    Feb 17, 2011 |

    My blog has several authors, now how to use it???????????


  11. Mia
    Mia says
    Feb 18, 2011 |

    @Paul Santosh: Hey Paul , I had designed these for the Blogger Platfrom some time ago . They are meant to be implemented manually into your theme ; also – Blogger doesnt run on PHP and offers no such functions , therefore : There is no way that you can use these for multiple author bios for Blogger’s Platform, as one does for WordPress . Im sorry :(


  12. Card Print
    Card Print says
    Feb 24, 2011 |

    Very useful post. Going to have to try this. Author boxes are really useful, especially for sites with more than two updaters.


  13. MUXLIMO
    MUXLIMO
    Twitter:
    says
    Apr 5, 2011 |

    Hi M.. i love your blog design.. show me You are a real designer :D

    btw, i tried this tip. But.. the CSS code showed on the page header and the author box doesnt work properly…

    Ugh… i dunno why..


  14. george mali
    george mali
    Twitter:
    says
    Jun 22, 2011 |

    mia i would love to speak with u ,luved ur comment on bob marley,a legend forver and a prophet sent from themost high, THE VOICE OF THE DOWN TRODDEN AND THE VOICE OF ANYONE WHO HAS LOVE INSIDE THER SOUL.LOVE YA ONE LOVE AND PEACE AND PROSPERITY TO ALL..BOB WANTED ONE LOVE AND PEOPLE OF ALL NATIONS AND CREEDS AND ANYONE UNDER THER SUN..TO LIVE TOGETHER ..CARAMENTE.GIORGIO LUCIANO MALI


  15. Mia
    Mia says
    Jun 23, 2011 |

    Thank You Giorgio , albeit this post does not refer to Bob Marley :) , and I do not recall where I posted the comment on Bob , I thank you for your comment & surely , you can find me in cyberspace to continue the conversation on Bob Marley :)
    Stir it Up ;)


  16. Grace Sevilly
    Grace Sevilly says
    Aug 26, 2011 |

    Thanks for these wonderful information that you shared. The author boxes are really appealing to the eye and they look very neat. My favorite is that gray and black one, but I am not techie enough to try implementing that on my own =(


  17. Rabindra Lamsal
    Rabindra Lamsal
    Twitter:
    says
    Dec 21, 2011 |

    Great tutorial..Thanks!! I am using one of them in my blogger blog.


↪ Leave a Reply

Name (required)

Mail (required)

Website

Twitter ID No @ Symbol

Popular Articles

Popular Articles


Dezign Archives

Archives


Dezign Feeds

Stumbleupon

◆ About


About Welcome to DezignMatterz , where Design Matters a great deal . Delivering all things pertaining to Web & Design . Tune in for the latest Inspiration & Design news and articles on some of the best Web Designers inhabiting & recreating the www .






FeedbackLatest Comments

Great tutorial..Thanks!! I am using one of them in by Rabindra Lamsal on Stylish Author Boxes for Blogger

its a great work...its my favorite...may be you gu by Kumarjit Brahma on Web Fruits of Social Media Icons

JQuery RSS ATOM Feed Button make things easier jus by Silvana D. Potter on JQuery RSS ATOM Feed Button

I can't get enough of the caricatures here, surely by Grace Sevilly on The World of Caricature Art

This one is very useful tip by Mark on Enabling Your Firefox at Warp Speed

important and useful resources indeed, the design by Mercy@Nikenya.com on JQuery Twitter Tooltip

Linkage Linkage

Labels Tags

Advertising Andy-Warhol Animation ATOM Author-Boxes Blogger Browser-Speed CARICATURE-ART Comic-Illustration Contact-Forms Custom-Fonts Designers DEVELOPMENT Digital-Art DooID FEEDS Firefox FONT-EMBEDDING Font-Face Fonts FREEBIES Hacks ILLUSTRATION ILLUSTRATION-MASTERS Interior-Design Italian-Web-Design JQuery Linux PHOTOGRAPHY Photomanipulation RSS SOCIAL-ICONS Steampunk-Art Theme-Designers Themes Tooltip Twitter TYPOGRAPHY V-Card Wallpapers WEB-RESOURCES WEB DESIGN WORDPRESS WP-Admin-Branding Wufoo