Overview of a Blog Post

Introduction to a Blog Post

A blog post is the most important part of your blog. Your posts are the entries that take up at least 75% of the screen space on your blog's site. Blog posts appear in reverse chronological order, so your blog stays timely, fresh and meaningful to visitors. It's your current content (in the form of blog posts) that will keep readers coming back to your blog again and again to read what you have to say about your blog's topic.

The Blog Post Title:

The title of your post is basically a headline. It is meant to lure readers in and entice them to read more. At the same time, blog titles are a useful tool in terms of search engine optimization. Search engines value titles strongly in ranking results and using popular keywords in your blog titles can help drive traffic to your blog. Just be careful to use keywords that are relevant to your blog post's content else your title could be considered spam by search engines and negatively affect the traffic sent to your blog.

Blog Post Publication Date:

Since blogs are most successful when they are updated frequently and provide timely content, readers will check the publication dates of your posts to determine the value of your blog. Blog posts that are published erratically with long gaps of time between posts are typically considered to be less valuable than blogs that offer more current and consistent posts.

Blog Post Author Byline:

The blog post's author byline is important to identify who wrote each post and is particularly important for blogs that are written by multiple authors. Furthermore, the author byline typically provides a link to your About Me page, which provides additional promotion for you and your blog.

Images in Blog Posts:

Images provide more than just color and visual relief from text heavy web pages on a blog. They also act as another way you can drive traffic to your blog. Many people perform keyword searches through search engines for the purpose of finding images and pictures online. By strategically naming the images you use in your blog posts to match relevant keyword searches, you can drive some of that image search traffic to your blog. Just make sure the images you use enhance your blog rather than detract from your blog and confuse your readers.

Links and Trackbacks in Blog Posts:

Most blog posts include links within the content of the post. Those links are used for two purposes. First, links are used to cite an original source of information or an idea used in a blog post or to provide additional information beyond the scope of your post. Second, they provide a breadcrumb trail and a tap on the shoulder to bloggers whose posts you are linking to in the form of a trackback. A trackback generates a link on the blog you're linking to in your post, which acts as an additional source of traffic to your blog as readers on that blog are likely to click on the trackback link and find your blog.

Blog Post Comment Section:

Aside from your blog post content, blog comments are the most important part of your blog. Comments are where your readers have an opportunity to join the conversation. It's essential to the success of your blog that you respond to the comments left by your readers to show you value them and to further build the two-way conversation on your blog and the sense of community your blog creates.

15 Tips to Increase Blog Traffic

The blogosphere is a big and busy world with over 100 million blogs and growing. How do you attract visitors to your blog? Follow these simple tips to drive traffic to your blog.

1. Write Well and Write Often

Frequently updating your blog with useful content is the first step to building your blog's audience. The content you write is what will keep readers coming back for more. Make sure you have something meaningful to say to them and say it often to maintain their interest and keep them loyal.

Furthermore, post frequently to increase the number of chances you have for your blog's content to be noticed by search engines such as Google or Technorati.

2. Submit Your Blog to Search Engines

Get on the radar screen for the popular search engines such as Google and Yahoo! bysubmitting your blog's URL to them. Most search engines provide a 'Submit' link (or something similar) to notify the search engine of your new blog, so those search engines will crawl it and include your pages in their results.

It's important to understand that simply submitting your blog to search engines doesn't mean your pages will appear at the top of a Google search results screen, but at least your blog will be included and will have the chance of being picked up by a search engine.

3. Use and Update Your Blogroll

By adding links to sites you like in your blogroll, the owners of those blogs will find your blog and will be likely to add a reciprocal link in their blogrolls. It's an easy way to get the link to your blog in front of many readers on other blogs. The hope is that some of those readers will click on the link to your blog on the other blogs' blogrolls and find your content interesting and enjoyable turning them into loyal readers.

4. Harness the Power of Comments

Commenting is a simple and essential tool to increase your blog's traffic. First, respond to comments left on your blog to show your readers that you value their opinions and draw them into a two-way conversation. This will increase reader loyalty.

Second, leave comments on other blogs to drive new traffic. Make sure you leave your blog'sURL in your comment, so you create a link back to your own blog. Many people will read the comments left on a blog post. If they read a particularly interesting comment, they are highly likely to click on the link to visit the commentor's website. It's important to make sure you leave meaningful comments that are likely to invite people to click on your link to read more.

5. Syndicate Your Blog's Content with an RSS Feed

Setting up an RSS feed button on your blog makes it easy for your loyal readers to not just read your blog but also know when you publish new content.

6. Use Links and Trackbacks

Links are one of the most powerful parts of your blog. Not only are links noticed by search engines, but they also act as a tap on the shoulder to other bloggers who can easily identify who is linking to their sites. Linking helps to get you noticed by other bloggers who are likely to investigate the sites that are linking to them. This may lead them to become new readers of your blog or to add links to your blog from theirs.

You can take links to other blogs a step further by leaving a trackback on the other blog to let them know you've linked to them. Blogs that allow trackbacks will include a link back to your blog in the comments section of the post that you originally linked to. People do click on trackback links!

7. Tag Your Posts

It takes a few extra seconds to add tags to each of your blog posts, but it's worth the time in terms of the additional traffic tags can drive to your blog. Tags (like links) are easily noticed by search engines. They're also key to helping readers find your blog when they perform searches on popular blog search engines such as Technorati.

8. Submit Your Posts to Social Bookmarking Sites

Taking the time to submit your best posts to social bookmarking sites such as Digg,StumbleUpon, Reddit and more can be a simple way to quickly boost traffic to your blog.

9. Remember Search Engine Optimization

When you write your blog posts and pages, remember to optimize your pages for search engines to find them. Include relevant keywords and links but don't overload your posts with too many relevant keywords or completely irrelevant keywords. Doing so can be considered spamming and could have negative results such as your blog being removed from Google's search entirely.

10. Don't Forget Images

Images don't just make your blog look pretty, they also help people find you in search engine listings. People often use the image search options offered by Google, Yahoo! and other search engines, and naming your images with search engine optimization in mind can easily boost your traffic.

11. Consider Guest Blogging

Guest blogging can be done when you write a guest post on another blogger's blog or when another blogger writes a guest post on your blog. Both methods are likely to increase traffic as your blog will be exposed to the other blogger's audience. Many of the other blogger's readers will visit your blog to see what you have to say.

12. Join Forums, Web Rings or Online Groups

Find online forums, web rings, groups or social networking sites such as Facebook andLinkedIn where you can share ideas and ask questions of like-minded individuals. Add a link to your blog in your signature line or profile, so each time you post on a forum or participate in another online network, you're indirectly promoting your blog. Chances are many people will click on that link to learn more about you.

13. Promote Outside Your Blog

Promoting your blog shouldn't stop when you step outside the blogosphere. Add your blog's URL to your email signature and business cards. Talk about it in offline conversations. It's important to get your name and your blog's URL noticed offline, too.

14. Nominate Yourself and Other Blogs for Blog Awards

There are a number of blog awards given out throughout the year. Nominating yourself and other blogs and bloggers can draw attention to your blog and drive traffic to it.

15. Don't Be Shy

The most important part of the blogosphere is its community and much of your success as a blogger will be tied to your willingness to network with that community. Don't be afraid to ask questions, join conversations or just say hi and introduce yourself. Don't sit back and hope the online world will find you. Speak out and get yourself noticed. Let the blogosphere know you've arrived and have something to say!

How to Change the Title Tags in Blogger for More Search Engine Traffic

By default Blogger displays the blog title first, followed by the name of the post. As you might notice this is not good when it comes to SEO. It's important for the name of the post to come before the name of your blog, especially when it comes to google search results. Learn how to make your post title show up first so that you can reel in more traffic from the search engines.

WHY CHANGE THE TITLES?

It's quite important to have the Post Title + Blog Title arranged accordingly because this is how you would want your blog to be displayed on google's search results. This way more people will click on your link when searching google because the post title is more relevant than your post name.
Example Google Search Results:
You are most likely to click on the bottom image when searching google for the keywords "image reflection generator". The reason being is that your mind reads text from left to right. So it makes sense to have the more important title on the left.

HOW TO CHANGE THE TITLES:

1. Go to Layout>edit HTML in your Blogger dashboard.
2. Search for this tag: <title><data:blog.pageTitle/></title>
3. Replace this tag with the following code:

<b:if cond='data:blog.pageType == &quot;index&quot;'> <title><data:blog.title/></title> <b:else/> <title><data:blog.pageName/> | <data:blog.title/></title> </b:if>

4. Save your template and you should see the results in your web browser as depicted in the images below.
5. It may take a few days for the changes to show up on the google search results. I guarantee you that you will start receiving more traffic from google once you are re-indexed!

Most of the bloggers add more sidebar widgets to increase pageviews. You can find Recent Post, Popular Post and Related Post widgets in almost all blogs. Now lets see displaying Random Post widget in blogger sidebar. Its a very useful widget because it lets you to show all older posts randomly fashion.   

Abdul-Hakeem.com is powered by Blogger. I use many widgets to improve page impression. The number of posts links in Random post widget to be displayed can be controlled by the webmaster. Now getting back to our topic,

Steps to Show Random Posts in Blogger:

1. Login to Blogger Account.
2. Go to Design –>Add a Gadget, and select it as “HTML/JavaScript” widget.
3. Now Copy and Paste this code in to it:


<script type='text/javascript'>
var randarray = new Array();var l=0;var flag;
var numofpost=5;function randomposts(json){
var total = parseInt(json.feed.openSearch$totalResults.$t,10);
for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}
if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ul>');
for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];
for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>";
document.write(item);}}
 }document.write('</ul>');}
</script>
<script type='text/javascript' src='/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts'></script>
<span style='font-size: 80%'>Widget by <a href='http://www.bloggerehow.blogspot.com'>Blogger eHow </a></span>
Note:
If you which to change number of post displayed.Change the no 5 marked as red in this code numofpost=5
Credits:
This widget script was developed by Field of Dreams

Enjoy!

How to add subscription email form

A Subscription Email form is more important than a RSS feed Icon itself. People often love to receive your post Updates in their email inbox rather than in a reader. So make sure you make your Email From as eye appealing and eye catching as possible. So today we will again learn how to add an Email form, so lets get to work!

Follow these steps,

• Log into your feedburner account
• Click on the Publicize button and then click on Email Subscriptions link as shown below,

• Then drag down the page until you see a HTML code, as shown below

Copy the HTML code for the email form and paste it in a WordPad or Notepad. The code may look like the one below,

<form style="border:1px solid #ccc;padding:3px;text-align:center;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=TntByStc', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p>Enter your email address:</p><p><input type="text" style="width:140px" name="email"/></p><input type="hidden" value="TntByStc" name="uri"/><input type="hidden" name="loc" value="en_US"/><input type="submit" value="Subscribe" /><p>Delivered by <a href="http://feedburner.google.com" target="_blank">FeedBurner</a></p></form>


Please search for the Green and Red texts as shown above in the HTML code that you just pasted in a notepad or WordPad.

Note that the red text in your code will be something like this,

http://feedburner.google.com/fb/a/mailverify?uri=Your-FeeD-Title

The end part of the URL above will contain your feed title, so look carefully for this URL in the code that you pasted in notePad

Now Log into your Blogger account and go to Layout > Page Elements

Then Click on Add a Gadget

Then Choose HTML/JavaScript

Now Copy and paste the code below into HTML/JavaScript widget.

<div style="border: 1px solid DodgerBlue; padding: 5mm;">
<center><img src="URL of Email Icon"/></center>
<span style="font-weight: bold;font-size:small;">Subscribe by E-mail & receive free updates of these cool Blogger eHow straight to your inbox!</span>

<form action="http://feedburner.google.com/fb/a/mailverify" style="padding: 3px; text-align: center;" target="popupwindow" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=TntByStc', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><center style="font-weight: normal">Enter your email address:</center><p><center><input type="text" style="width:140px" name="email"/></p></center><center><input type="hidden" value="TntByStc" name="uri"/><input type="hidden" name="loc" value="en_US"/><input type="submit" value="Subscribe" /></form></center>

NT:- The Code in your notepad will be used only to get some info out of it. Our main code is the code above.

Please adjust the code according to your preferences in the following way,

1. DodgerBlue : This refers to the colour of the frame/outline surrounding the Email form, You can change it to any colour. For example, White, Black, Red , Green etc.
2. URL of Email Icon : This refers to the URL of your Email Icon. Please first choose a Email Icon of your choice by clicking here Once you have download your Email Icon, upload it to Photobucket and get the URL for it. Then simply replace the text URL of Email Icon with your Email Icon URL.
3. http://feedburner.google.com/fb/a/mailverify : Replace this text with a similar URL in your code that you had copied in a notepad.
4. http://feedburner.google.com/fb/a/mailverify?uri=TntByStc : Replace this URL with the URL in the notepad code.
5. The bolded Black Text refers to the text that appears below your Email Icon and above Email form. You can change it to anything that suits your blog topic.
6. TntByStc: Replace this text with your Feed Title. 
7. Subscribe : This is the text that appears on the Email button. You can change it to anything you like. For Instance: Submit, Hit Me!, Join Me! etc.

Once you have adjusted the code according to your preferences, simply click the Save button in the HTML/JavaScript Widget.

Now visit your blog to see a pro looking Subscription Email Form hanging on your sidebar :)

Just like the one below,

I hope it works for you. Enjoy!

How to make multi-tabbed widget for blogger

Tabbed content box or tab view is a great way to maximize the usage of precious screen real estate on your blog.

There are quite a few tutorials out there that show how to create tabs with CSS and jQuery. However, most of them require you to modify your blog template codes. On top of that you also have to manually add the content of each tab.
Fortunately, with this tutorial you don’t have to go to all that troubles. All you have to do is add our tabber code into a HTML/Javascript widget. Once added, it will transform your Blogger blog’s existing widgets into tabs, automatically!

See the demo here.

1. Below are some of the features of the tab content box:
2. Accommodates unlimited number of widgets.
3. Keeps the tabbed widgets’ original appearance.
4. Fully widgetized for ease of installation and removal. If you don’t like what it does, simply remove the HTML/Javascript gadget.

Installation

1. Go to Design > Page Elements and click Add A Gadget.
2. Select HTML/Javascript widget.
3. Leave the title box blank.
4. Copy the code below and paste it inside the content box.

<style type="text/css">
.tabber {
 padding: 0px !important;
 border: 0 solid #bbb;
}
.tabber h2 {
 float: left;
 margin: 0 1px 0 0;
 font-size: 12px;
 padding: 3px 5px;
 border: 1px solid #bbb;
 margin-bottom: -1px; /*--Pull tab down 1px--*/
 overflow: hidden;
 position: relative;
 background: #e0e0e0;
 cursor:pointer;
 -moz-border-radius:5px 5px 0 0;
 border-radius:5px 5px 0 0;
}
html .tabber h2.active {
 background: #fff;
 border-bottom: 1px solid #fff; /*--"Connect" active tab to its content--*/
}
.tabber .widget-content {
 border: 1px solid #bbb;
 padding: 10px;
 background: #fff;
 clear:both;
 margin:0;
}
.codewidget, #codeholder {
 display:none;
}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript" src="http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bloggertabs0.1_min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
 $('#codeholder').bloggerTabber ({
  tabCount : 3
 });
});
</script>

<!-- to make sure the widget works, do not alter the code below -->
<div id='codeholder'><p>Get this <a href="http://bloggerehow.blogspot.com/2011/06/how-to-make-multi-tabbed-widget-for.html" target="_blank">Widget </a></p></div>

• Red color line is for loading jQuery library. Remove this line if you’ve already loaded it somewhere else in your blog. Hint: If your blog has a slider, cycler or something with fading effect running, chances are it is powered by jQuery.
• Specify the number of widgets that you want to turn into tabs in Green color line.
• The default box background color is white (#fff). You can change it inBlue color line. Apply the same color for the active tab’s background and bottom border.

5. Position the HTML/Javascript gadget above the gadgets that you want to tabify.

6. Click Save and view your blog.

Post-installation

• Make sure you title each widget that you want to tabify. Tabber won’t work properly without widget titles.
• Reduce tab widths so that all tabs fit into a single row. This can be achieved by using short widget titles.
• You may need to reduce the widths of the tabified widgets to fit them into the box.
• Don’t forget to test in Internet Explorer. This widget may cause “Operation aborted” error in IE for some non-designer templates. If that’s the case, this widget is not for you :(

Enjoy!

Lesson 10: Margin and padding

In the previous lesson you were introduced to the box model. In this lesson, we will look at how you can change the presentation of elements by setting the margin and padding properties.

• Set the margin in an element
• Set the padding in an element

Set the margin in an element

An element has four sides: right, left, top and bottom. The margin is the distance from each side to the neighboring element (or the borders of the document). See also the diagram in lesson 9 for an illustration.

As the first example, we will look at how you define margins for the document itself i.e. for the element <body>. The illustration below shows how we want the margins in our pages to be.

The CSS code for this would look as follow:

       

        body {

               margin-top: 100px;

               margin-right: 40px;

               margin-bottom: 10px;

               margin-left: 70px;

        }

       

       

Or you could choose a more elegant compilation:

       

        body {

               margin: 100px 40px 10px 70px;

        }

       

       

·         Show example

You can set the margins in the same way on almost every element. For example, we can choose to define margins for all of our text paragraphs marked with <p>:

       

        body {

               margin: 100px 40px 10px 70px;

        }

        p {

               margin: 5px 50px 5px 50px;

        }

       

       

·         Show example

Set padding in an element

Padding can also be understood as "filling". This makes sense as padding does not affect the distance of the element to other elements but only defines the inner distance between the border and the content of the element.

The usage of padding can be illustrated by looking at a simple example where all headlines have background colors:

       

        h1 {

               background: yellow;

        }

        h2 {

               background: orange;

        }

       

       

·         Show example

By defining padding for the headlines, you change how much filling there will be around the text in each headline:

       

        h1 {

               background: yellow;

               padding: 20px 20px 20px 80px;

        }

        h2 {

               background: orange;

               padding-left:120px;

        }

       

       

·         Show example

Summary

You are now on your way to master the box model in CSS. In the next lesson, we will take a closer look at how to set borders in different colors and how to shape your elements.