Page Title

Standard page title for a single Blogger post is BLOG TITLE: POST TITLE. You can improve SEO by changing the title tags to POST TITLE | BLOG TITLE. Find this code in your XML template,

<title><data:blog.pageTitle/></title>

replace with this code,

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

You can also add some keywords to homepage title, for example

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<title><data:blog.pageName/> | <data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/> | TV Episode Guide | TV Show Info</title>
</b:if>

Meta Keywords and Description

Some blogger expert have written tutorials about how to add meta keywords and description. It is very easy, you need to add this code after title tag above or before <b:skin><![CDATA[/*

For example,

<meta name="description" content="SeasonEpisode TV News - TV Episode Guide" />
<meta name="keywords" content="tv news, season episode, episode guide, tv listing" />

But, this code add same meta keywords & description to all posts. It is not good because you will find a warning at Google Webmaster Tools because duplicate meta keywords & description are detected. So, it is better if you only add meta keywords & description to the homepage. For example, you can add this code,

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta name="description" content="SeasonEpisode TV News - TV Episode Guide " />
<meta name="keywords" content="tv news, season episode, episode guide, tv listing" />
</b:if>

Heading

Heading Tag (H1, H2, H3, H4, H5) is also important for SEO. All of Blogger widgets (gadgets) title use H2 tags.  But, Minima Template use H3 tag for post title and many blogger templates use H2 tag for post title. To improve SEO, you need to use H1 tag for post title. For example, find this code,

<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

This example shows that your template use H3 tag for post title (If you don't find it, your template may use H2 tag for post title). Replace H3 (or H2) at this code with H1, for example,

<b:if cond='data:post.title'>
<h1 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h1>
</b:if>

And you need to change post title font size by adding this code before ]]></b:skin>

h1.post-title, .post h1 #Blog1 h1, #Blog2 h1 { font-size:1.5em; }

For example, i use 1.5em font size. You can change it if you want.

Social Bookmarking

This year, community is the king! Adding social bookmarking links can help you build your community and improve SEO. For example, i use Sociable icons (I’ll write tutorial later). I have written similar tutorial here.

Breadcrumb

You can use breadcrumb to provide “easy” navigation for your visitor. You can find the tutorial here.

Related Posts

Some blogger expert have written tutorials about how to add related posts hack. All of them use JSON javascript code. Read the best related posts hack here…

Auto-Readmore Link

Auto-Readmore link doesn’t have direct relationship with SEO. But, you can use it to improve user interfaces for your visitors. Make your visitors enjoy your blog, get more traffic, and SEO will follow There are two type of ReadMore hacks. They are CSS Javascript hack based. You can find the tutorial here (CSS) and here (Javascript).

Hi!

Quick question:

What plugin are you using for those beautiful big Social Bookmarking buttons at the bottom of your Indomagz worpress page? (Stumble, Delicious, Technorati, etc)

I like the fact that they are big as opposed to the other tiny ones you find on the web.

Thanks!
Gabi.

I don’t use any WordPress plugins for this. If i can do it without a plugin, then i’ll not use any plugin.

Beautiful Big Social Bookmarking Buttons

This is a short tutorial for you, with detail instruction, for both WordPress and Blogger

WordPress

First, you have to download the images and upload them to the /images folder in your current theme.

[download id="6"]

Edit your theme files, single.php and/or page.php and/or index.php . Copy and paste the code below after <?php the_content('Read more &raquo;'); ?>

<div style="clear:both; ">
<div style="width:60px; float:left;">
<script type="text/javascript">
digg_url = '<?php the_permalink() ?>';
</script>
<script src="http://digg.com/tools/diggthis.js" type="text/javascript"></script>
</div>
<div style="width:60px; float:left;">
<script type="text/javascript" src="http://d.yimg.com/ds/badge2.js" badgetype="square"><?php the_permalink() ?></script>
</div>
<div style="width:65px; float:left;">
<a href="http://www.stumbleupon.com/submit?url=<?php the_permalink() ?>&amp;title=<?php the_title(); ?>" target="_blank" rel="external nofollow"><img src="<?php echo bloginfo(stylesheet_directory) .'/images/'; ?>stumble.gif" style="padding:0;margin:0;border:none;" alt="Stumble" /></a>
</div>
<div style="width:65px; float:left;">
<a href="http://del.icio.us/post?url=<?php the_permalink() ?>&amp;title=<?php the_title(); ?>" target="_blank" rel="external nofollow"><img src="<?php echo bloginfo(stylesheet_directory) .'/images/'; ?>delicious.gif" style="padding:0;margin:0;border:none;" alt="Delicious" /></a>
</div>
<div style="width:65px; float:left;">
<a href="http://technorati.com/faves?add=<?php the_permalink() ?>" target="_blank" rel="external nofollow"><img src="<?php echo bloginfo(stylesheet_directory) .'/images/'; ?>technorati.gif" style="padding:0;margin:0;border:none;" alt="Technorati" /></a>
</div>
<div style="width:65px; float:left;">
<a href="http://twitthis.com/twit?url=<?php the_permalink() ?>" target="_blank" rel="external nofollow"><img src="<?php echo bloginfo(stylesheet_directory) .'/images/'; ?>twitter.gif" style="padding:0;margin:0;border:none;" alt="Twitter" /></a>
</div>
<div style="width:65px; float:left;">
<a href="http://www.facebook.com/sharer.php?u=<?php the_permalink() ?>&amp;t=<?php the_title(); ?>" target="_blank" rel="external nofollow"><img src="<?php echo bloginfo(stylesheet_directory) .'/images/'; ?>facebook.gif" style="padding:0;margin:0;border:none;" alt="Facebook" /></a>
</div>
</div>

Blogger

Go to Layout – Edit HTML, don’t forget to check “Expand Widget Templates”. Copy & paste the code below after <data:post.body/>

<div style='clear:both; '>
<div style='width:60px; float:left;'>
<script type='text/javascript'>
digg_url = &#39;<data:post.url/>&#39;;
</script>
<script src='http://digg.com/tools/diggthis.js' type='text/javascript'/>
</div>
<div style='width:60px; float:left;'>
<script badgetype='square' src='http://d.yimg.com/ds/badge2.js' type='text/javascript'><data:post.url/></script>
</div>
<div style='width:65px; float:left;'>
<a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Stumble' src='http://s310.photobucket.com/albums/kk426/magznetwork/socialbig/stumble.gif' style='padding:0;margin:0;border:none;'/></a>
</div>
<div style='width:65px; float:left;'>
<a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Delicious' src='http://s310.photobucket.com/albums/kk426/magznetwork/socialbig/delicious.gif' style='padding:0;margin:0;border:none;'/></a>
</div>
<div style='width:65px; float:left;'>
<a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url' rel='external nofollow' target='_blank'><img alt='Technorati' src='http://s310.photobucket.com/albums/kk426/magznetwork/socialbig/technorati.gif' style='padding:0;margin:0;border:none;'/></a>
</div>
<div style='width:65px; float:left;'>
<a expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url' rel='external nofollow' target='_blank'><img alt='Twitter' src='http://s310.photobucket.com/albums/kk426/magznetwork/socialbig/twitter.gif' style='padding:0;margin:0;border:none;'/></a>
</div>
<div style='width:65px; float:left;'>
<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Facebook' src='http://s310.photobucket.com/albums/kk426/magznetwork/socialbig/facebook.gif' style='padding:0;margin:0;border:none;'/></a>
</div>
</div>

SUPPORT & DISCUSSION

Go to MagzNetwork Support

What’s custom wordpress queries? I’ll use Indomagz 2 Premium WordPress Theme for the study case. Click here to open Indomagz 2 live demo.

Wordpress Custom Queries

You can see from the live demo that i use many custom wordpress queries to create “magazine” style for the frontpage. I’ll explain some of them. You can download Indomagz 2 Tutorial for complete explanation. There are five pages to explain how to configure homepage using different queries.

First of all, you have to copy the index.php to home.php . This “home.php” file is the template for the frontpage. Then you can edit home.php to create your own frontpage.

For an example, you can see Indomagz 2 Tutorial page 4. It shows the full code for the 1st custom wordpress query. The code below is the most importand part. I give you many possibilities to create your own frontpage. You can customize it easily by reading the comment in Indomagz 2 home.php file.

<?php // use this one to show the latest post for the headline. ?>
<?php $recent = new WP_Query("showposts=1"); ?>

<?php // use this one to show the latest post from a category for the headline,
uncomment if you want to use it ?>
<?php // change cat=1 with the category ID ?>
<?php // $recent = new WP_Query("cat=5&showposts=1"); ?>

<?php // use this one to show the latest post from tag for the headline, uncomment if
you want to use it ?>
<?php // change tag=headline with the tag name ?>
<?php // $recent = new WP_Query("tag=headline&showposts=1"); ?>

<?php // use this one to show a particular page for the headline, uncomment if you want to use it ?>
<?php // change page_id=2 with the page ID ?>
<?php // $recent = new WP_Query("page_id=2"); ?>

<?php // use this one to show a particular post for the headline, uncomment if you want to use it ?>
<?php // change p=1 with the post ID ?>
<?php // $recent = new WP_Query("p=1"); ?>

Note: For php newbie, “uncoment” means that you have to remove “//” to the query that you want to use it and give “//” to “comment” the active query.

Understand? You can show a post, a page, the latest posts, the latest posts from categories and tags. It’s easy, isn’t it? You can also control the number of displayed posts using showposts parameter.

For an example, this code show the full code for a wordpress custom query. It shows 3 latest post from the category with ID=1 (only the title in unordered list).

<?php $recent = new WP_Query("cat=1&showposts=3"); ?>
<?php if ($recent->have_posts()) :  ?>
<ul>
<?php while ($recent->have_posts()) : $recent->the_post(); ?>
<li>
<a href="<?php the_permalink() ?>" title="<?php _e('Permanent link to'); ?>
<?php the_title(); ?>"><?php the_title(); ?></a>
</li>
<?php endwhile;?>
</ul>
<?php endif;?>

You can read my Indomagz 2 Tutorial to get some inspirations for using custom wordpress queries.

Using OFFSET Parameter

I got a question from Alli

“Hello, awesome theme we love the look and feel of the theme.

Anywho, my PHP coding is very much at a novice level. What we would like to accomplish is:

Have the 4 most recent posts appear in the ?headline? area,

Have the 5th through 10th most recent posts appear in the ?big thumbnail area?

Then have the 11th through 16th posts appear in the ?small thumbnail area?”

For this case, you can use OFFSET parameter. So, the queries are,

The first custom wordpress query:

<?php $recent = new WP_Query("showposts=4"); ?>

The second custom wordpress query:

<?php $recent = new WP_Query("showposts=6&offset=4"); ?>

The third custom wordpress query:

<?php $recent = new WP_Query("showposts=6&offset=10"); ?>

Then, are you ready to create your own Premium WordPress Theme?

It’s a great work. And, it has same concept with my Revolution Pro Business Premium Blogger Template. I’ll show you the basic concept for creating a Premium Blogger Template, especially for “We Love Blogger” Premium Blogger Template.

Note: This is an intermediate-advanced level of Blogger template designer. If you’re only a beginner, you can read this post for your knowledge

There are three different page templates here.

We Love Blogger: Home Template

We Love Blogger: Category (Label) / Archive Template

We Love Blogger: Post Template

This simple illustration will explain the concept clearly.

Generally, there are only 1 Blog widget in a Blogger template (with id Blog1). But we can add many Blog widget directly to the code (you can’t add them using Page Elements feature). Give every Blog widget with different ID, for example Amanda gives id Blog1 for home template, Blog2 for label template, and Blog3 for post template.

You can use pageType tags to create conditional statements to make each template will be shown in the different conditions. There are three values of pageType tags. They are ‘item’, ‘archive’, or ‘index’.

This is a simple code to create conditional statement using pageType tags.

An Example: Conditional Code to create Premium Blogger Template

Are you ready to create your own Premium Blogger Template?