Blogger Templates: Versatility Lite

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/AVvXsEjy673m_qkdaTemflSE85rLPM4cbCMlX2Yu-7rVqFPWSyHqvfnkAjh09brmt2LH1fIiE1Dqf4k3w2GjCvK8N_l1xaztQfZcFgm0scBnDzaQOGZ3PkZXRNdC40wlug58hlk9Yt3kZjA6Vq0/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/AVvXsEjy673m_qkdaTemflSE85rLPM4cbCMlX2Yu-7rVqFPWSyHqvfnkAjh09brmt2LH1fIiE1Dqf4k3w2GjCvK8N_l1xaztQfZcFgm0scBnDzaQOGZ3PkZXRNdC40wlug58hlk9Yt3kZjA6Vq0/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/AVvXsEi3IFKxALXjk0XYR4ou-VSbmtNxI4jLV7jRz6JCDtz9H5XYdXWFv-IYwV-sSeX502N3pyWDlKUwYY59q2VwsMyf25ooiD3V1Z7cZO9eBtky2slVYYu8u78gf2aCJreW0gQWUjCVlYPVISA/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/AVvXsEi3IFKxALXjk0XYR4ou-VSbmtNxI4jLV7jRz6JCDtz9H5XYdXWFv-IYwV-sSeX502N3pyWDlKUwYY59q2VwsMyf25ooiD3V1Z7cZO9eBtky2slVYYu8u78gf2aCJreW0gQWUjCVlYPVISA/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.