Blogger Dummies

Designing Blogger Template : SEO Optimized Title Tag

admin — Fri, 10 Dec 2010 15:49:20 +0000

I have seen so many bloggers have been asking me for tutorials to design Blogger template. As you all know I have created this new blog, just for blogger users. I have decided to post the whole process required for designing a seo optimized blogger template. You would have noticed that many designers have been charging you to convert a wordpress template to blogger one or even to design a unique blogger template. So I have decided to explain you all the steps needed to design your own blogger template.

General Layout of a Blogger template

According to me, a blogger template can be divided into 6 parts :

Header
Navigation Menu
Main Container
Post
Sidebar
Footer

I will explain you each and every part of the blogger in detail in the forthcoming articles. For an example, I have taken a screen shot of my blog itself.

Blogger Header Section

In this section, we can see how to code the header section of the blogger template. The header section starts with tag.
Now Let me explain you the elements which need to be present in the header and will also explain you how to make it seo optimized as well.

General Code present under the header section is :




    Hello world!

Now in this I am going to concentrate mainly on the tag. In the future posts, i will explain much more on the header tags. The <title> tag defines the title of the document. The title element is required in all HTML/XHTML documents. The text inside <title> is not displayed in the document. However, most browsers will display the title at the top of the window. The title element: <ul> <li> defines a title in the browser toolbar</li> <li> provides a title for the page when it is added to favorites</li> <li>displays a title for the page in search-engine results</li> </ul> The default code present in the Blogger Template is : <pre class="html"><title><data:blog.pageTitle/>

The above code displays your default page Title. Now let’s see how to play with the above code.

Customize the Page title in Post pages

If you want to customize the above code and make it seo compatible, then follow the below steps.

Login to your Blogger account
Go to Design tab under your Blog
Navigate to EDIT HTML page

Now replace the above code with this one :


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

The above code will help you to show custom titles under post pages. By default, only the post titles will be shown under any post page. But with the above code, you can add few keywords of your blog along with the post titles. Just edit this code to show the important keywords of your blog in page titles alone.

In reverse, if you want to show a custom title in home page and the default Page title in all other posts, just like me, then you need to add the following code instead of the first one.


 <data:blog.pageName/> | <data:blog.title/> 
 
 Your Important Keywords First | <data:blog.title/>

Now you need to to place your important keywords of your blog first, then your blog title.

Show Custom Titles in Specific post pages

It’s an easy trick which allows you to show custom Page Title under specific post pages. This trick can help you to put important keywords of each post under the specific post pages.



    Custom Post Title!!

With the above code you can change the Page Title of any specific post.

Any suggestions?

I hope that the above trick would be useful for you to customize the page title. In the future posts i will explain more about adding seo optimized META tags and adding specific Description to specific Post pages.

How to create pages in Blogger Blogs

admin — Sun, 30 May 2010 19:26:14 +0000

As a blogger user for many years, I was looking for a feature just like wordpress to create pages in blogger. Though at that time, that feature was not available. But now recently blogger.com has enabled it for all blogger users. Now one can have their own pages like about us, contact , advertise , etc. And we can have our own custom templates/layouts on these pages too.

Creating pages in Blogger

In this tutorial we can see how to create and customize pages in blogger blogs.

step 1 : Pretty basic one indeed. Login to your blogger account and go to dashboard.

step 2 : Now Navigate to your blog and there you can see EDIT posts link. Click it.

Step 3 : A new window will open , in that you can see a new sub tab called ” Edit pages ” click it.

Step 4 : Now in that page you can see a link to create New page. Click that link.

Step 5 : That’s all. Now you can see page where you can add title and content for your new Page. After adding the content, click publish.

Now we have got one new Page in our blogger blog. The best thing is that you can create up to 10 pages in blogger. I hope blogger will definitely increase it in future.

Customizing the Blogger pages

In my next posts, I will explain how to customize the blogger pages. I will cover the following topics :

Adding New custom layout for Blogger pages
Learning to enable or disable comments in Pages
How to create a professional Contact us page
Creating a navigation Top menu to list all pages automatically in a list

I hope there is still lot more to customize. If you want to know about the above topics , then keep reading bloggerdummies.com.

Adding Multiple Authors to Blogger blogs

admin — Sat, 08 May 2010 14:25:42 +0000

The technique of having Multiple authors to manage a Blog is getting popular these days. Though this feature was already available in wordpress , recently Blogger too has enabled this feature. So now Blogger Users can have upto 100 multiple Authors or co-Authors for their blogs. So this new Team Blogging feature has enabled multiple authors to manage a single Blog. Although the owner of the blog will be the admin by default and all new authors he invites will be given co-author account. They can only EDIT their posts and they won’t have the feature to edit / delete others posts. However the admin can change the privileges of the co-authors anytime.

Adding Multiple Authors to Blogger Blogs

In this tutorial , I will explain how to Add more co-authors or guest authors to your Blogger Blog. Just follow these simple steps to enable this feature in Blogger.

Sign in to Blogger
Go to the Settings page of your blog. Click the link for Permissions.
Click the “Add Authors” button to add one or more new authors to the list of people who can write posts for your blog.

After adding the authors email id , click ” invite ” button.

Blogger sends an email invitation to each person you listed in Step 4. If they agree to participate in writing the blog, they respond to the email affirmatively. Blogger does the rest for you.

Changing the permissions of the author

Once the author accepts your invitation , he can start writing in your blog. But he can only edit or delete posts written by him. He can’t delete posts written by others.

If you want anyone of the author to edit others post , then you need to grant him admin privileges. For granting Admin privileges , go to Settings page of your blog and navigate to Permissions subtab. Beside the author name you will see a button ” grant admin privileges “.

Click that button and you are done. Now your partner can edit or delete any posts. But one thing you must be very careful before giving someone the admin privileges is that once you grant someone admin privileges he has the power to remove you from the blog.

Screen resolution CSS hack for web designers

admin — Tue, 11 Aug 2009 17:21:00 +0000

Most of us might have noticed that our sites may look different in different screen resolutions. Though I have already posted one article on making website layout cross browser compatible , but its also necessary to make your site compatible for different screen resolutions. The visitors of your site will not have same screen resolution your are using. So it’s mandatory to make your site compatible for different screen resolutions. For example, In lower screen resolutions like 800×600 px the website layout will be perfect. But when you look at your site at a higher screen resolution like 1024×768 px or even higher , the website header or sidebar may be aligned to either right or left. It’s all because the designer might have designed the site for a particular screen resolution. In the screen resolution he was working , the site may look perfect. But when it comes to higher screen resolution , the theme may be misaligned.

what is the best screen resolution settings?

One can’t design a website for a particular screen resolution, because visitors will have different screen resolutions. According to me , the best screen resolution on which the designer should be concentrating on should be higher than 1024px. For example if you take techieblogger’s last month stats , most of my visitors are using higher screen resolution.

Some of the web designers use JavaScript to control the screen resolution compatibility. But it will reduce the site loading time.Instead of using JavaScript , I will explain how to make your site higher screen resolution compatible by making changes in CSS codes.

CSS controlling the alignment of the layout

Before explaining the original hack, first let me describe about the css code which controls the layout alignment.

margin: auto;

The simple margin tag in CSS controls the alignment of the site layout in different screen resolutions. I have selected auto to change the layout alignment in accordance with the visitors screen resolution.

Screen resolution compatible CSS – Blogger users

In order to make changes to your CSS code in blogger blogs , follow the below steps.

step 1 : First go to Layout section of your blog.
step2 : Then navigate to EDIT HTML page

Now add the margin: auto; tag in the css codes of the following sections.

Header

Outer wrapper

content wrapper

wrapper

Footer

If one more sections are missing in your style sheet , then insert that code in the respective div sections used in your blogger template.

Screen resolution compatible CSS – WordPress Users

To edit the css code in your wordpress blogs, follow the below steps.

first go to appearance option in your wordpress dashboard. Then go to EDITOR page. In that page , add the css code margin: auto; in the following css sections.

Header

Outer wrapper

content wrapper

wrapper

single entry
Footer

how to change screen resolution

For checking your site compatibility with different screen resolutions do any one of the below steps.

how to get a higher screen resolution on windows vista/XP

To change the screen resolution of your PC , do the following steps.Right click on your desktop , then click the option “Properties” there.A new window will open. Now navigate to “settings ” tab. There you can see a slider to change the screen resolution. With that slider you can either increase or decrease. After you chose a particular screen resolution , click apply. It will give you a warning message click “ok”.

Now open the browser and visit your site for compatibility.

how to set screen resolution using keyboard hotkey

You can also check the compatibility of your site with different screen resolutions with simple keyboard short keys.
First go to your blog and do the following :
To reduce the screen resolution , press “ctrl” and scroll down the mouse roller.
Or
press ” ctrl ” button and press “-” button.

To increase the screen resolution, click “ctrl” and “+” button or else press ” ctrl ” and scroll up the mouse roller.

With the above keyboards hotkeys , you can check the screen resolution compatibility of your site.

Hope this article will be useful for all web designers who want to create wordpress themes or blogger templates which are higher screen resolution compatible. If you have any problem with your website layout alignment, then please email me about the issue.

Magic House Blogger Template

admin — Fri, 19 Jun 2009 07:26:49 +0000

Magic House Blogger template is a three column xml blogger template which is ripped from wordpress theme. As I told in my last post itself , If you request any theme conversion I will do that. One of my blog reader requested me to rip magic house wordpress theme to blogger template. So I have ripped this wordpress theme for him. If you want your favourite wordpress theme to blogger template , then send me your requests.

Features of Magic House Blogger Template

Top navigation menu
Search box in right of navigation menu
Two sidebars with one sidebar in each side
socialbar script at bottom of the post
Read More hack with automatic thumbnail creator script
Yahoo Smileys hack included
Cross browser Compatible
Supports All screen resolution

Template Modifications

Top Navigation Menu

To set up Navigation menu , go to EDIT HTML page of your blogger Template.There you will find the following code :

Edit the links and title to suit your Blogger template.

Remove Top Blogger Navbar

#navbar-iframe {
height : 0;
visibility : hidden;
display : none;
}

Donate if you like my work

if you like my work and want to encourage me to rip more wordpress themes to blogger templates , Then please help us by donating something you can.

So if you want any wordpress theme to be converted to blogger xml template , then request in the comment section. I am always ready to rip.

If you Guys need any modification or any other hack in this template , then please contact here or email me to mohamedrias1103gmail.com. I will modify this template to your wish.

P.S: I have hosted all images in my own database. So there won’t be any bandwidth problem. But still i appreciate you to upload the images to photobucket and take backup.

Converting WordPress themes to Blogger Templates

admin — Sat, 13 Jun 2009 12:26:00 +0000

It’s being longtime I have ripped a WordPress theme to use in Blogger Beta. Many users ask me for wordpress theme conversion in Google talk. I thought it would be great to open a thread in Techie blogger itself , so that all my readers can give me suggestions. I can rip any existing wordpress theme to blogger template or I can customize your existing Blogger template.

Some Blogger use to demand money to rip wordpress themes to blogger templates , But I am going to do this for free. So No need to pay 10$ for any site to get your desired wordpress theme to use in Blogger. You can request conversion of any wordpress theme here via comments. If more users recommend the same theme or if I feel it to be a professional one, I will rip that wordpress theme to Blogger Beta Template.

Customizing Blogger Templates

If you have any errors in Blogger templates , then you can contact me via gtalk. I can help you to fix errors online itself.

You can contact me via Google Talk for any of these services :

Ripping WordPress themes to Blogger templates

Fixing errors in Blogger Templates

Making your CSS code compatible for all browsers

Fixing XML or CSS errors

SEO tips

Show Adsense ads below post title

admin — Sat, 16 May 2009 13:07:00 +0000

In this tutorial I will explain how to place Adsense ads below post title in Blogger Blogs with lots of customization tips. You might have noticed that most of the bloggers show Google adsense ads below title to increase their Click through rate and earnings.

According to Google adsense help pages ” Where to place adsense ads ?“. Placing adsense ads below title and above article content can bring high ctr and performance.

This “heat map” illustrates the ideal placing on a sample page layout. The colors fade from dark orange (strongest performance) to light yellow (weakest performance). So it’s clear from the heat map that the adsense ads below post title can bring high ctr.

How to add Adsense ads below post title ?

It’s really very easy to add adsense ads below post title in blogger. Inorder to add adsense ads below post title ,just follow the below steps.

Before adding the adsense ads to blogger templates , we need to encode our adsense ads code.If you add the adsense code without encoding then you can’t see any adsense ads below post title.

Encoding Adsense Ad Code ?

To encode adsense ads, first create an adsense ad and then visit centricle website to encode. In centricle web page , you need to paste your adsense code in the text area and then click ” Encode “. Copy the encoded code. Now your adsense code is ready to be added to blogger template.

Adding adsense ad code to blogger template

step 1 : Go to layout section of your blogger template and then navigate to EDIT HTML sub tab. There check the “Expand Widget Templates “.

step2 : Look up the following tag :

and paste the encoded adsense ad code above that tag.

Then click save. That’s it Now we have added the adsense ad code below the post title in blogger blog successfully.

Customizing Adsense ads

Here are the few customization tips , which you can apply to increase your CTR.You might have seen that most of the bloggers will show more than Three posts in home page / labels page / archives page. But as per adsense TOS we can show only Three ads per page. So due to this we will see some blank spaces between post title and content , when the three adsense ads are already loaded.In order to avoid this error , we can show adsense ads only in Post pages i.e pages containing articles.

Showing adsense Ad only in Post pages

In order to implement this hack in your blogger template. you need to change the encoded adsense ad code to this.

Encoded Adsense code here

Now paste this code above

Making adsense ads to Float

After adding the adsense ad code to your templates , you can see that by default the adsense ad code will not allow any text to be shown nearby it.

So in order to overcome this error , we need to add some CSS codes to make adsense ad code to float either left or right.

For this we just need to modify the encoded adsense code to be added in step 2.

replace that encoded code with this one :

left;padding:5px;”>

encoded adsense ad code here

Change the text in red to make adsense ad to float either to left or right.

My suggestion

According to me , instead of showing adsense ads in all pages ( home page , archives page and labels page ) , we can show adsense ads only in post pages to increase our ctr. If you are using the ” Read More hack for Blogger with automatic Thumbnail creator script ” then it’s advisable to show adsense ads only in post pages.

Hope you guys will like this hack. If you need any more customization , then give me your suggestions via comments.

Video Tutorial : Backup Blogger templates widgets

admin — Fri, 15 May 2009 18:41:00 +0000

One of the Major Problem Blogger users have is whenever they try to change their templates , They will loss their widgets even if they have taken backup of their blogger blog template. After changing their Blogger template , they need to add blogger widgets again manually. It’s really annoying and time consuming process. So here I have created a video which will give you step by step instructions to backup blogger templates without losing any of your widgets. While you’re backing up your templates you might as well make sure to backup and protect your other files.

I have written a tutorial on Backup Blogger blog widgets ” How to change Blogger Template without deleting widgets ? ” .But most of the friends found that difficult to backup blogger widgets. So in order to help them , I have created a video tutorial for them to backup Blogger Template and blogger widgets while changing their blogger templates.

BACKUP BLOGGER WIDGETS VIDEO TUTORIAL

This is my first video tutorial guys , so please give me your suggestions. Due to lesser RAM , the Voice is a bit choppy. If you still have any doubts or difficulty to backup the blogger blog widgets then please feel free to contact me.

Very soon I will write tutorials on

How to backup Blogger Posts

and will explain the functionality of numerous blogger posts backup software. If you don’t want to miss my future tutorials or hack then please suscribe to my blog.

Main features of this template:

Header with a search widget on right :

This is the code i have used

you can see this code if you check expand widgets box in layout page. If you want to show your own adsense search box then just replace this code with your adsense search box code.

Two navigation widget available.

This is the code I have used

Home

Wordpress

Blogger

Techie Blogger

admin

Numbered Page navigation

Author

replace all the links with your own links. If you are satisfied with just one navigation widget and want to show adsense 726×15 ad link unit then you need to edit the second navigation code with this.

< —- adsense code here — >

Related Posts Widget with custom CSS is included in this template with print option.
Comments with unique CSS style and showing author comments in different style is included.

If you want to show your own avatar then search for this code in the edit HTML tab pge with expand widgets box checked.

http://www.gravatar.com/avatar.php?gravatar_id=ef6eb8d01747fd1846efd0227517ca1c&rating=R&size=36

replace that url with your own avatar url.

Two Tabbed Navigation Widget is included in Sidebar. If you want to change the titles of the tabbed navigation , then search for this tag in EDIT HTML page.

What’s Next ?

With So many new features available , hope everyone will like this template.

Download | Demo

Guys I am giving this template as free so please don’t remove the footer credits

Hope you Guys will like this template.. if you are really impressed by my hard work then please make some donations.

See you soon with a new template.

update :

if you want to remove one of the tabbed navigation Widget then do the following step.

Go to Layout page of your template and then navigate to EDIT HTML sub page. There search for the following tag

remove this whole code.

If you need any other customization let me know..