People ask me a lot of questions related to blog designs. Sometimes they are the same questions, while other time they are unique in their own sense of ways. But this is a question that surprisingly no one has asked. But I am going to mention it anyways because I think it is important.

In my opinion, there are 3 main components in a blog design. Set up of your header, sidebar and how well it goes along with your content, and organization of the site.

Believe it or not, but you can actually use sidebar of your blog to display alot of things that you can’t display on the content area. Now I will list some of the must have features in the blog sidebar that you should know.

Must Have Features in a Blog Sidebar

1. Subscribe Area – Subscribe Area, or RSS Button should be the most prominent area of your sidebar. This should be placed towards the top if not the very top. Susbscribe button go well in the sidebar rather than any other parts of the design.
2. Categories – Categories is a most essential part that should go in the sidebar. The main reason is, because categories doesn’t work anywhere else prominent automatically. If you try placing them in header, you are limited with space. Also, you have to enter them manually, so the best place is the sidebar. You can’t put your categories in the footer because a lot of users like to view content through categories. It is easier for them to find the related topics that they are looking for. Also, you need to link to your categories, because some people don’t link to them at all on the page. This is one of the ways you tell the Search Engine, categories exist, so they can get some Pagerank as well.
3. Search Button – Search is another important feature that can potentially go in the sidebar, if you have no where else to put it. Search bar is necessary on all blogs because it allows users to find everything much quicker.
4. Recent Posts – Believe it or not, but I consider recent posts to be very important. Specially on blogs that are active, usually writes daily, if not multiple times a day. Because a good number of posts you should display on your blog is about 5 in my opinion. If you are writing more than one post a day, your post for this week will be on the second page within the week. You still want your readers to see that. Include the recent posts on your sidebar. Also, so for sites that doesn’t indexed very quickly, can have the bot see it at some point in time. Also, users who didn’t visit your blog for a few days because they were busy. Now they want to check out the posts, it is much easier by just looking at the titles of the post in recent posts to decide which one to read.
5. Blogroll / Links – Link to your other projects, your friends should usually go in the sidebar as well. Some people choose to put those in the footer. I don’t see why. Not many people will see them. If you want some of your other sites to get some exposure, then put it on the sidebar, so everyone can see it. Also, I am sure if you are selling those advertising space, your sponsors don’t want you to put those in the footer either.

Having said the above, I rest my list of the must have features. But you need to understand that sidebar can contain a lot more than that. It is a personal choice of what you put and which order you put it in. Different blogs have different features in their sidebar. There are so much more that you can incorporate into your sidebar.

Possible features for the sidebar

• Blog Ads
• Top commentators
• Recent Comments
• Popular Posts
• Donation Button
• Stats (Site validation, and more…)
• Photos from Flickr, or from your gallery.
• Polls
• Author Biography
• Wish list
• Your hot product (Like Pimp My Blog)
• Link to Wordpress and Other credentials
• Link to your social profiles
• Mybloglog recent readers

Entering the new era of websites, Web 2.0, we have a new challenge. What do our users do in the time when the site is loading. I can tell you one thing. My users just blink, and the site loads. What about you? What do your users do?

With the look on your faces right now, I think they go Kill a Giant Lion Turtle.

Seriously, if that is the case then you need some serious help. Well not particularly you, but your website. In this post, I will discuss my experience with the fast loading time of Balkhis getting me alot of new users since the new design has been implemented.

I noticed alot of things since the new site was implemented, one thing was that my IE 6 users were very happy because traffic of IE 6 users increased. The main thing I noticed though was that my Bounce Rate Decreased!!!

The reasons why I figure that is because the site was loading much faster, so my users didn’t close the window because they didn’t get the chance to. Now I actually have stats to compare my Load time:

My Past Design

Site Load Time – 1.24 Seconds
Page Size – 36.12 KB

Source – Enkayblog

New Design

Site Load Time - 0.25 seconds
Page Size – 45.54 KB

Do you see the difference? That is a huge difference. So not only that I decreased the site load time, but I also increase my page size. Want to know how?

1. Reduce Image Size – I realized that in the last design, I was using too many different images. They were optimized to an extent, but I was using too many of those. So I decided to make the design a bit more simpler, and started using the same image multiple times. I also reduced the image size a little bit also. It did decrease some what of the quality, but I can say it is barely noticeable. (Use GIMP, or Photoshop to play around with settings)
2. Optimize your CSS File – If you are using a wordpress blog, then you are using a CSS File. My suggestion is that you go in that file, and start making some editions. Get rids of extra classes and ids that have the same function. Get rid of extra lines and spaces. Because the smaller your file is, the better your site load time is.
3. Avoid External Javascripts – Are you using external javascripts on your site? If so find a different way to display that content because it slows your site down. Remember, I wrote about Kontera and site load time issues. Because they have external javascripts. One of the reasons, why I gave up on entrecard as well. A long article will be coming up regarding that as well. If you are using a peel away ad, use it from your own server. Not Adtoll’s because that also slows your site load time.
4. Optimize your Blog Page – Are you one of those who are displaying 15 blog posts on one page. Well if you are then I would recommend changing it. One thing is because the more images you use in those posts, the slower your site will be. Second, it will decrease your page views. So display around 5 – 10 posts on your blog page. Not any more than that. You will see a better site load time, and increase in page views as well.
5. Use WP-Super-Cache – Alot of bloggers underestimate the power of WP-Super Cache. That is one of the essentials for wordpress because it decreases your load time by a whole heck of alot. It simply lets your users cache your site, so it loads up quicker.

Now if you are still going slow, then it is not you it is your web host. I will say try out one of the better hosts. Look at my sidebar ad, to see which one I support the most

Now by following the things, I described above, I think you should be able to easily decrease your load time. Believe it or not, you will see a decrease in your bounce rate, and an increase in readers. Personally, I would prefer other blogs to load fast as well because I visit too many of them, and I don’t want to wait for the sites to load, so I can comment faster and save time because I understand that to most people, time is money.

So don’t let your users kill a Giant Lion Turtle while waiting for your site to load. Follow these tips and decrease your load time.

I have mentioned it atleast a hundred times on this blog that adding images to your blog just add life to your blog. Alot of people really loved my recent posts because I was adding some really good images. So I was getting alot of questions, Balkhis where are you getting all these images from?

Well I finally decided to answer that question. The sources for the images I use in my blog posts are Stock Photo Sites. Considering, I write posts daily, and if I were to buy images from istockphoto – I wouldn’t be getting a whole lot of profit from this site. Obviously I am using free stock photo sites.

Advantage of using these sites

1. You get Free Quality Photos
2. No Link Back required on most (Make sure you read individual image terms)
3. Your posts have life and for free
4. Did I mention free? What are you waiting for, start using them.

Even though they are not very hard to find. Simply google free stock photos, but I thought I should put down the list that I use often.

11 Amazing Free Stock Photo Sites

The list is in order from what I use the most to what I use the least.

1. SXC.hu – over 350,000 quality stock photos by more than 30,000 photographers.
2. Every Stock Photo – 4,331,819 free photos.
3. Stock Vault – 10820 Stock Photos.
4. Image Base – Don’t know the number, but they have some decent ones.
5. Open Photo – Don’t know the number but I check it just incase.
6. Morgue file – Decent collection here as well.
7. Free Range – Tons of cool Images.
8. Photo Rack – 27,881 Files in 149 Categories
9. Free Pixels – 3,297 Images in 37 Categories.
10. Free Foto – 121,099 images with 155 sections organized into 3,351 categories.
11. Woophy – 10820 Stock Photos.

Tips on how to use these images

• Always read the guidelines whether the author requires link back or not. (Most don’t but some do).
• Absolutely don’t redistribute these images or sell these images. Most let you use them on personal / commercial projects.
• Never use the image hosted on their server.
• Download the image, and customize it to fit your needs. Always save original and then modify the copy of original. (I have 3 (250GB) External HardDrives filled). How do you think that happened?
• Always use the right padding for your images.
• If author requires credit, then link back to them.
• Don’t overload your posts with images, use them moderately and just have fun.

Well I don’t think there is a whole lot to say there. Now you all know how I was getting alot of images for my posts. You can also get these images from these sites, and I am sure with relevant images, your posts will look a whole lot better. Enjoy and have fun.

I have mentioned it multiple times before on my posts that giving your users another way to subscribe will just increase your subscriber count. One of the extra ways other than just feed readers is to give your users an option to subscribe via email. If you want to increase your RSS Subscribers read the post.

This tutorial was requested by one of my loyal readers and a good online friend Nabil from Enkay Blog.

*Requirements:

Must know how to edit html and CSS. Photoshop skills are a plus.

Services

• Feedburner
• Feedblitz

You need to start burning your feeds. I am assuming that you are already doing that. If not please go and sign up with one of these services. Preferably Feedburner because this tutorial is using feedburner as an example.

So lets go into your Feedburner Account. Click on the Publicize Tab

Look on your left hand sidebar and you will see an option that says “Email Subscriptions”. Click on that and Activate that service. Once again make sure you activate this service. And then Copy and Paste the codes shown in the box below to the file you desired.

The next step is creating graphics in Photoshop or any other software. I will not show you how to do that because you can learn that on your own. But I am using an image which you can use. (This image doesn’t use any icons, everything was made in Photoshop by myself, so feel free to redistribute as long as the link back to this post is there).

If you want you can simply Download the file, and copy and paste from there.

CSS Requirements

Now you need to open your css file. Copy and Paste the following Code below.

Class Left will help your submit button to float left.

.left{float: left;}

Subbox is the class that wraps everything around for this box.

.subbox{
margin: 0;
padding: 0;
height: 136px;
width: 375px;
float: left;
}

Subscribe class contains the background image for the email box.

.subscribe{
float: left;
width: 303px;
height: 58px;
background: url(images/emailbg.png) no-repeat;
border: 0px solid #000;
}

Input Subscribe defines the css values for the input email form.

input.subscribe{
background: transparent;
border: 0px solid #000;
width: 285px;
text-align: left;
margin: 20px 10px 0 10px;
height: 19px;
color: #50699F;
}

HTML Codes

Open the file where you want to place the codes. Most likely it is sidebar.php but wherever you like. Then put the codes like the one below:

<div class="subbox">

<form style="margin: 0; padding: 0;" action="http://www.feedburner.com/fb/a/emailverify" method="post" target="popupwindow" onsubmit="window.open(‘http://www.feedburner.com/fb/a/emailverifySubmit?feedId=1631142′, ‘popupwindow’, ‘scrollbars=yes,width=550,height=520′);return true">

<div class="subscribe">
<input type="text" class="subscribe" name="email"/><input type="hidden" value="http://feeds.feedburner.com/~e?ffid=1631142" name="url"/><input type="hidden" value="Balkhis – Vision for Success" name="title"/><input type="hidden" name="loc" value="en_US"/>
</div>

<input type="image" value="Subscribe" src="http://www.balkhis.com/tutorials/emailsubscription/images/but.png" style="border: 0; margin: 0; padding: 0;" class="left" />

</form>

</div>

Whatever you do make sure you change the important information.

FeedID: 1631142 (This is mine) So find this number and change it with yours.
Title: Balkhis – Vision for Success (This is mine) So change it to the one you like.

Having done that, you are good to go.

This tutorial is over and you now have a email subscribe option on your blog.

Live Preview

Well if you don’t want to follow everything, I have prepared a file for you to download that contains all the codes, so you can copy and paste without making any errors.

Remember: These files are free for personal and commercial use. Don’t sell these. If you decided to redistribute, please use the download from Balkhis Server and make sure you put a link back to either this post, or Balkhis homepage.

When I created a custom date button on Zain’s Blog people really liked it. It was a well planned out design. Then I thought it would make a great post if I show you guys how to make a Customized Wordpress Date Button.

Why should you get a customized date button? Simple. It looks cool. It goes with some themes and doesn’t go with others. I think it just spice up some themes if used correctly. For this tutorial: I am assuming you can make your own graphics, if you are not using mine. You have little knowledge of html and css (I mean you know how the div tags and padding works). The final outcome of this tutorial should look like the image on your right.

This is a 3 step tutorial. First we will add the day of the month, then we will add the month, and then finally it will be the year.

We will be using the following image as our background:

First thing you want to do is make a class in your css file that is called .datebg and set your background image.

.datebg{
background: url(images/datebg.gif) no-repeat;
height: 150px;
width: 150px;
}

Than insert it in the appropriate wordpress file. Hint: index.php, single.php…

So right now your codes should be looking like this:

<div class="datebg">

</div>

Now you need to add another class and call it .day and set the appropriate margin and CSS. Choose your color and font-size. Insert that class inside your datebg class.

Within your .day class insert the following codes: <?php the_time(‘d’) ?>

This will allow you to display the date, so like today is the 22nd so thats what it will show you.

Now you need to go ahead and add another class in your css file and name it .month and add the appropriate margin and padding to it. Insert it right after your .day class in the template files.

Within this class you need to add: <?php the_time(‘M’) ?>

This will display the month of the year like in the picture shown below:

Then you will need to make another class and name it .year. Set the appropriate padding and margins. Insert it right after your month class.

Then within this class add the following codes: <?php the_time(‘Y’) ?>

This will display the year.

So in the end your template files should look like this:

<div class="datebg">
<div class="day"><?php the_time(‘d’) ?></div>
<div class="month"><?php the_time(‘M’) ?></div>
<div class="year"><?php the_time(‘Y’) ?></div>
</div>

Now you have your own customized wordpress date button. Feel free to use my image in this post. I made it 150 x 150px so people can make it smaller and not lose quality. If you are just wondering how the heck do I enter plain simple date like Balkhis have.

Then just plain enter <?php the_time(‘M j, Y’) ?>

This will give you an outcome like Aug 22, 2008.

Enjoy.

Note: Do not copy and paste codes. Type it down by looking at these.