Saturday, November 6, 2010

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.


Friday, November 5, 2010

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.

Wednesday, November 3, 2010

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.

Friday, August 13, 2010

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:

  1. Select the button from 3 available choice.

  2. 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.

  3. 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>

Friday, August 6, 2010

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.

Thursday, July 8, 2010

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.

Blogspot How to: Add the Official Share Buttons

Blogspot How to: Add the Official Share Buttons

Blogger has officially announced sharing buttons. These buttons let your readers share posts on social networks like Twitter, Facebook & Google Buzz. 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.

How to Add Share Buttons?


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

How to add Blogger share buttons in posts

What to Do If Share Buttons Doesn't 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, go to Design | Edit HTML and check Expand Widget Templates option. The page will automatically refresh. After that, 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>

Important: After that save your template and go to Page Elements tab. Click Edit on the Blog Posts widget. A new window will appear, in that window check the option which says Show Share Buttons. Save your changes and now you'll be able to see share buttons on your blog.

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.

Saturday, May 22, 2010

Blogger Templates: Simplicious

Simplicious Blogger Template

Simplicious is a minimal Blogger template with 2 sidebars. All the colors & fonts are totally customizable.

Features: 3 columns Blogger Templates, white , top menu, minimal Blogger template, 2 sidebars.


Tuesday, May 4, 2010

Blogger Templates: LightWord

LightWord Blogger Template

LightWord is a simply clever theme with 2 or 3 columns layout. It has a minimal look and covers the white space beautifully.

Features: 2 columns Blogger Template, grunge theme, white layout, rss, top menu, xml, 3 columns Blogspot template, search box, minimal Blogger template.


Saturday, April 24, 2010

Blogger Templates: Journic

Journic High Quality Premium Blogger Template

Journic is a colorful Blogger template with artistic design, perfect for a personal creative blog.

Features: 2 column Blogger templates, grunge templates, white theme, rss, top menu, email link, premium quality Blogger template.


Saturday, April 17, 2010

Blogger Templates: Neutral

Neutral Blogspot Blogger Template

Neutral is a fresh blogger template with modern and sleek design. This blogspot template can be fully customized through Fonts & Colors tab.

Features: 3 columns Blogger template, 2 columns blogspot template, minimal blogger template, simple blogger templates, rss, top menu, twitter.


Wednesday, March 31, 2010

Blogger Templates: Koi

Koi Premium Quality Blogger Blogspot Template

Koi is a premium quality Blogger template with amazing illustrations in the background. The theme is ideal for any personal or portfolio blog.

Features: 2 columns Blogger templates, premium Blogger templates, personal blog template, top menu, 3 columns footer.


Friday, March 26, 2010

Blogger Templates: Pixel

Pixel Premium Quality Dark 2-3 columns Blogger Template

Pixel is a gorgeous Blogger/Blogspot template with a 2/3 columns layout and dark background.

Features: 2 column Blogger templates, dark Blogger templates, 3 columns Blogger templates, black Blogger templates, top menu, 3 columns footer.


Thursday, March 25, 2010

Blogger Templates: Ink and Wash

Ink and Wash Beautiful Blogspot Template

Ink and Wash is a beautiful Blogger template with a taste of Chinese culture and characters.

Features: 2 columns Blogger templates, china style templates, personal Blogspot template, travel Blogger templates, nature Blogger templates, floral Blogger layout



Monday, March 22, 2010

Blogger Templates: Page Balloon

Page Balloon 2-column Blogger Template

Page Balloon is a cute & simple Blogger template with 2-column layout & beautifully illustrated background.

Features: 2 columns Blogger template, personal Blogger templates, diary Blogger templates, nature Blogger templates, top menu.



Sunday, March 21, 2010

Blogger Templates: Heartland

Heartland Beautiful Cute Girly Blogger XML Template

'Heartland' is a clean and playful land full of pink, hearts, and fun. This is especially suitable for personal blogs. Originally created by Intuitive Designs.

Features: pink Blogger templates, 2 columns templates, top menu, girly, personal Blogger template, rounded corners, nature Blogger template.



Wednesday, March 17, 2010

Blogger Templates: Belle

Belle Light Clean Blogger Template

Belle is a simple, light, clean web 2.0 Blogger template with 2-column layout. Originally created as a Wordpress theme by Grigoruta Adrian

Features: minimal Blogger templates, 2 columns Blogger template, top menu, clean Blogspot layout, web 2.0 Blogger templates.



Blogger Templates: Vikiworks Infinity

Vikiworks Infinity Premium Quality Blogger Template

Vikiworks Infinity is by far the most beautiful theme I've ever seen. It was originally released on Smashing Magazine as a freebie and converted to Blogger by me.

Features: black Blogger templates, 3 columns Blogger templates, top menu, dark Blogger templates, premium Blogger templates, portfolio Blogger templates.



Sunday, March 14, 2010

Blogger Templates: Greyzed

Greyzed Premium Quality Blogger Personal Template

Greyzed is an awesome grunge Blogger template with 3-column footer and awesome background graphics.

Features: 2 columns Blogger templates, top menu, grey, grunge Blogger templates, portfolio Blogger templates, left sidebar, 3 columns footer.



Thursday, March 11, 2010

Blogger Templates: Cupcake Mash

Cupcake Mash Cute Pink Blogger Template

Cupcake Mash is a cute & adorable Blogger template ideal for personal or feminine blogs. Originally created by Amour Chaleur as freebie and converted to Blogger by me.

Features: pink Blogger templates, 2 columns Blogger templates, girly Blogger templates, personal Blogger templates.



Blogger Templates: Js O4w

Js O4w Beautiful Orange White Blogger Template

Js O4w is a beautiful orange-white color Blogger template with 2-column layout and awesome background.

Features: 2 columns Blogger templates, orange Blogger templates, search, rss, graphical Blogger templates.



Wednesday, March 10, 2010

Blogger Templates: Retrograde

Retrograde Colorful Retro Vintage Blogger XML Template

Retrograde is a colorful, vintage & retro Blogger template originally created by a brilliant designer Jan at Dawghouse Design Studio and converted to Blogger by me.

Features: orange Blogger templates, 2 columns Blogger templates, red Blogger templates, rainbow, colorful Blogger templates, vintage Blogger templates.



Monday, March 8, 2010

Blogger Templates: Crafty Cart

Crafty Cart cute 2-column Blogger XML Template

Crafty Cart is a cute and adorable Blogger template with 2-Column layout, light color scheme & beautiful header area. It is an ideal theme for personal and kids related blogs.

Features: clean Blogger templates, 2 columns Blogger templates, colorful Blogger templates, top menu, rss, left sidebar, white Blogger templates.



Sunday, March 7, 2010

Blogger Templates: SketchyTheme

SketchyTheme Green 2-Column Blogger XML Template

SketchyTheme is a 2-Column Blogger template with a top menu and simple yet great color scheme.

Features: clean Blogger templates, 2 columns Blogger templates, top menu, white, nature Blogger templates.



Wednesday, March 3, 2010

Blogger Templates: Piano Black

Piano Black Blogger Template

Piano Black is a gorgeous & sexy dark theme with top menu, a beautiful header and 2 columns. Originally designed for Wordpress by mono-lab and converted to Blogger by me.

Features: premium Blogger templates, top menu, dark Blogger templates, black Blogger templates.



Friday, February 19, 2010

Blogger Templates: Simple China

Simple China Blogger Template

Simple China is a very beautiful theme by Alexander Tumanov. You can customize all fonts and colors by just going to "Fonts & Colors" tab.

Features: 2 columns, travel, china, rss, top menu, xml, blogspot.



Monday, February 15, 2010

Blogger Templates: Notepad

Notepad Blogger Template

Notepad is a very clean and neat template originally designed and coded for Wordpress by Nick La and I've just finished converting it to Blogger.

Features: 2 columns, premium, yellow, brown, rss, top menu, twitter, xml, blogspot, search, social bookmarking icons.