Blogger Template SEO Friendly

Blogger Templates: Versatility Lite

Versatility Lite Premium Quality 2 Columns Blogger XML Template

Versatility Lite is a 2 column Blogger template with a "Featured Post" section, CSS navigation menus & premium quality layout. [How to Setup]

Features: 2 columns, grunge theme, white layout, top menu, 3 columns, search box, minimal.

Live Demo

Download »

Blogspot How To: Center Post Title in New Blogger Templates

In this tutorial, I'll explain how you can change the alignment (position) of the post title. By default, post title aligns to left but you can change it to center as well. Currently, Blogger (Blogspot) offers 6 default templates in the Template Designer. This tutorial will work on all those templates.

Just open the Template tab -> Edit HTML button.

Then find (Ctrl + f) the following code:

]]></b:skin>

and REPLACE it with the following one:

h3.post-title { text-align:center; }

]]></b:skin>

Click the PREVIEW button and you'll see that the post title is now centered. After that save your template and enjoy :)

Help BetaTemplates!

You can help betatemplates.com by adding a link anywhere on your blog. The link code is available from the bottom of this page.

Blogspot How to: Make Images Not Clickable (No Enlarge)

By default, images in Blogger are linked to their full size which means if someone clicks on an image, the same image is opened in full size. This is confusing for blog visitors and it also takes the visitors away from your blog. If you want to make your uploaded images not click-able then I'll tell you a simple trick to do that.

Note: Before reading the tutorial, make sure you know the type of your post editor. If you don't know the type of your editor then simply go to Settings | Basic and at the end of the page, you can see the type of your post editor. Anyways, I'll explain the trick in both old and new post editors.

1- Make Images Not Clickable in Old Post Editor

Make sure you're working in Edit HTML of the old post editor. You can change the editing mode from top right of the post editor. So, upload your image as you normally do. After the image is uploaded, you'll see some code in the post editor. This code is actually the HTML of your uploaded image and it will look something like this:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheCF56_Nx5Hl3i5_M_urNoFqYHUdOkNB0mJFIPtGO25x_XXKsjdsAC4N88Za8edWg3bAMj5MpV9DQE1JiLlJIefzKdt84YmyUlT5vLT6Oi6SO3WOjGGluZS9MxdqMiQQDERvXrpKRitTE/s1600/This+is+an+Image.jpg"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 259px; height: 194px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheCF56_Nx5Hl3i5_M_urNoFqYHUdOkNB0mJFIPtGO25x_XXKsjdsAC4N88Za8edWg3bAMj5MpV9DQE1JiLlJIefzKdt84YmyUlT5vLT6Oi6SO3WOjGGluZS9MxdqMiQQDERvXrpKRitTE/s400/This+is+an+Image.jpg" alt="" id="BLOGGER_PHOTO_ID_5536049028840403346" border="0" /></a>

The code for my image is divided in Red and Green parts. The Red part is responsible for making the image a link and green part displays the image. So, you need to delete that part of your image which is marked red in my image and leave the Green part as it is.

1- Make Images Not Clickable in New Updated Post Editor

So, if you're using the new updated post editor then the code for uploaded image will be a little different. Just make sure you're working in the Edit HTML mode. In Edit HTML mode of the post editor, you'll see the code of the uploaded image instead of the image itself. So, upload an image and you'll see some code like this:

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUJ8sA5poEyj54xzH2yzBA9_D9OlsGHGhZlwm1MMTwgRH86OJtmJzIZ8rQRhnRB1X1tHWxtIxtBvm8Q1hdIlI-wr5MUsuEdvkrYsbQFkW2SOulcfBpTabb76hKrm_9BySOgVWk_HpRvlU/s1600/This+is+an+Image.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUJ8sA5poEyj54xzH2yzBA9_D9OlsGHGhZlwm1MMTwgRH86OJtmJzIZ8rQRhnRB1X1tHWxtIxtBvm8Q1hdIlI-wr5MUsuEdvkrYsbQFkW2SOulcfBpTabb76hKrm_9BySOgVWk_HpRvlU/s1600/This+is+an+Image.jpg" /></a></div>

As you can see that the code is divided in Red, Green and Blue parts. reen part displays the image, Red makes it a link and Blue is responsible for the alignment of the image. So, just delete the red part from your image and it will not be click-able.

Blogspot How To: Add the Official Twitter Tweet Buttons in Blogger

Blogspot How To: Use the Official Twitter Tweet Buttons

Twitter is the most popular social networking site on internet. People share links on Twitter which receive a lot of traffic. You can also add the official Twitter tweet button with or without counter. This button will enable your blog visitors to easily share useful links on their Twitter accounts.

Get the Button Code!

First of all go to http://twitter.com/goodies/tweetbutton. Now follow these steps to get the code:

Select the button from 3 available choice.
If you've a Twitter account then enter your username in the second field. By doing this, whenever someone will share your blog post on Twitter, your username will also be added to that tweet. If you don't have a Twitter account, I strongly recommend to make one but, for now, you can skip this option.
Copy the code from the box.

Add the Code in Your Blog!

Now we need to add the Twitter tweet button code in our Blogger blog. So, go to Design and then Edit HTML tab. Check Expand Widget Templates box. Search for this code:

<data:post.body/>

Place Twitter tweet button code immediately after the above code. You can also place the Twitter tweet button code immediately before the above code but then the Twitter button will appear between the post title and body.

Add Custom Text in the Twitter Tweet Button!

You can also add your own message in the Twitter button. For example if you want to add Hey, check it out: THE POST TITLE then you need to change expr:data-text='data:post.title' to expr:data-text='“Hey, check it out:“+data:post.title'.

Display Twitter Button Only on Post Pages!

If you want the tweet button to appear only on post pages then you need to change the button code. Now, your code will look something like this:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
Twitter Tweet Button Code HERE
</b:if>

Blogspot How To: Quickly Get Your Blog Indexed by Search Engines

This is the most commonly asked question by new blog owners. Everyone loves traffic and traffic comes from search engines so we must make sure that our blog is regularly indexed by search engines specially Google. Here are simple things you can do to make sure the search engines always keep an eye on your blog and its content.

1- Submit Your Blog URL to Search Engines!

This is the first and most important step. You have to submit the address or URL of your blog to search engines. Tell them you're here & ready to rock. Here is a tutorial:

Blogspot SEO: Submit Your Blog to Google, Yahoo and Bing Search Engines

2- Submit Your Blog Sitemap to Google!

After submitting your URL, you should also submit your sitemap to Google. Sitemap contains links to all of your posts so it will help search engines crawl deeply. Google offers a very convenient way to do that through Google Webmaster Tools. Here is a video tutorial to do that:

Blogspot Video Tutorial: Submit Blog Sitemap to Google via Google Webmaster Tools

3- Add a Followers Gadget & Encourage People to Follow You!

Blogger offers a fantastic gadget called Followers. It allows people to follow your blog which means whenever you'll publish a new post, it will appear on your followers' dashboard. For details see these links:

-> How do I add the Following gadget to my blog?

-> What is Following?

4- Link to Other Blogs!

Ask your friends or colleagues to add a link to your blog on their blogs. Make sure to avoid linking to spam or porn sites. Try linking to your older posts while writing new posts. For example, I've added links to previously written tutorials in this post.

5- Search Engines Love Fresh Content!

Make sure to add quality content and write often on your blog. Encourage comments and answer them regularly. Search Engines love updated content and will crawl your blog constantly. Don't copy from other blogs because duplicate content can result in severe punishments by search engines.

Final Words!

Nothing happens overnight. Don't be disappointed if you're not seeing any sudden changes in traffic. Changes can take at least a month or more depending on your blog's popularity and content quality. Install some tracking service (Google Analytics or SiteMeter) to keep an eye on your traffic and monitor the results. Feel free to ask any question or share anything good.

Blogspot Video Tutorial: Submit Blog Sitemap to Google via Google Webmaster Tools

This is a screen cast I've uploaded on YouTube. You can also subscribe to my YouTube channel for future video releases.

Note: Watch more Blogger related video tutorials at my YouTube channel.
http://www.youtube.com/user/BloggerEngineer

You can watch this video on YouTube by clicking the video. This Blogger-Blogspot video tutorial is also available in written form here.

How to Enable Official Share Buttons in Blogspot/Blogger Templates

Blogger has officially announced sharing buttons. These buttons let your readers share posts on social networks like Twitter, Facebook & Google Plus. These sites bring traffic and are important for search engine rankings. The great thing is that the share buttons automatically shortens post URL/address because Twitter allows only 160 characters per tweet. In this post, I'll explain how you can enable official share buttons.

First, Enable the Share Buttons!

Enabling share buttons under Blogger posts is very easy. Just go to Layout. Edit the Blog Posts gadget and enable Show Share Buttons option. Click the following image to see full size:

What to Do If Share Buttons Do Not Appear?

If you're using an old template then there is a chance that share buttons won't show up even if you've enabled them. So follow these steps:

Open the Template section.

Click the Edit HTML button.

A new window will open. Click the Proceed button to start editing.

Check Expand Widget Templates option. The page will automatically refresh.

find this code:

    <data:post.body/>

and REPLACE it with the following code:

    <data:post.body/>
<div class='post-share-buttons'>
<b:include data='post' name='shareButtons'/>
</div>

That's it. Click Preview button and you will see share buttons right under the post body. After that, save your template.

Important: After saving the template. Make sure that the buttons are enabled in Blog Posts widget as described in the previous section of this tutorial.

How to Show Share Buttons Only on Post Pages?

By default, share buttons will appear on all pages. It might look a little messy and some people might want share buttons to appear only on post pages. To do that, you need to add a simple if-else condition. Instead of the above code, add this code after <data:post.body/>:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='post-share-buttons'>
   <b:include data='post' name='shareButtons'/>
</div>
</b:if>

If you've any problem, feel free to leave me a comment.

Update! Share Buttons are Grey

Many of you guys are complaining that the share buttons are appearing in Grey color. Well, don't worry about that because that's how they should appear. I don't know any method (yet) to make them colored. By default, they are Grey and will only become colorful when you'll bring mouse over them.

Blogger Templates

These are some blogger templates I created in my free time. Most of the blog layouts work with New Blogger, please revert to Classic Template if you face any problems. I've provided links to the code for each blogger template, you are free to download and use them on your blog. Instructions on how to use the blogger layouts are given here. Let me know if you have any trouble using them on your blog and i'll see what I can do. Suggestions for new blogger templates are welcome.

If you are interested in monetizing your blog and profiting from your writings or just learning how to work with Google Blogger and customizing your blog layout here are some great reads.

If you are looking for anything in particular for your blog backgrounds leave a comment and I'll try my best to come up with a new blogger template or if you would like any of the existing blog templates to be customized furthur feel free to request.

REQUEST CUSTOM TEMPLATE

Don't have Winzip?
Use the free alternative JZIP to unzip the template file
*Follow on Twitter, Like on Facebook for latest updates

Christmas

Get 2 Column Template
Get 3 Column Template Get 3 Column Template

Get 2 Column Template Get 2 Column Template
Get 3 Column Template Get 3 Column Template

Amy Winehouse

Get 3 Column Template

Delta Goodrem

Template works with the latest version of Blogger!

Get 3 Column Template

Get 2 Column Template

Taipei 101

Layout works with the latest version of Blogger!

Get 3 Column Template

Get 2 Column Template

Splash

Template works with the latest version of Blogger!

Get 2 Column Template

Get 3 Column Template

Get 4 Column Template

Pure

Layout works with the latest version of Blogger!

Get 2 Column Template

Get 3 Column Template

Get 4 Column Template

Singapore Skyline

Template works with the latest version of Blogger!

Get 2 Column Template

Get 3 Column Template

Memories

Get 2 Column Template

Get 3 Column Template

Get 4 Column Template

The photos on the template can me customized and the color of the brown border can also be changed, just email the pictures to bloggerdesigns [at] gmail.com and let me know the color you prefer and I can change it for you for free, though any voluntary contributions are welcome.