2007-11-30

(Related Topic: Template Downloads)The great thing about Blogger/Blogspot templates is their flexibility. Depending on your skills and creativity, there is virtually limitless range of design variations that you can implement. Unlike other blog hosting services, such as Wordpress, Blogger does not require you to pay fees to modify the templates. However, there is a downside to this. Blogger does not provide readily available professional looking templates, such as three-column layouts or templates with built-in navigation bars. Consequently, if you want to modify the Blogger template and extend its functionality, you either need to download templates from other site or directly edit your own template. The second option is preferable, especially if you want to have a unique blogsite design.There are web sites and blogsites (such as this one) that offer HTML and CSS tutorials. However, the main problem when it comes to editing Blogger template codes is finding the specific sections that need to be edited. Although the Blogger template codes are arranged in logical manner, they are especially meant to be read by web browsers and not by human eyes. For most people, HTML and CSS codes are confusing if not downright intimidating.

To conveniently edit your Blogger/Blogspot template, here are the steps that you should follow:

Step1: Open the HTML template editor of your blog and backup or download the template.

The XML editor will open as shown below:

Step2: Save this XML file into the hard desk of your computer.

Step3: Open the XML template file using Notepad. It is not advisable to use MS-Word because it may introduce hidden codes that may not be parsed by the template editor.

Step4: Simply use the Ctrl+F command to find the specific sections that you need to edit.

Step5: After editing the template, save it and upload it to Blogger.

NOTE: Another method of editing the template is to directly edit it in the Blogger HTML template editor. To do this, you must first, check the "expand widget" box found at the upper-right corner of the HTML editor frame. You may also copy-paste the whole codes onto Notepad and do the editing there.

2007-11-28

Have you noticed the orange icon above? You might already have seen this icon in many other sites. This icon is the universally recognized standard symbol of RSS feeds. The acronym, RSS, stands for "really simple syndication." RSS feeds allow the contents of sites or blogs to be automatically published in other sites or feed readers without the need for manually posting the contents.

For instance, if your blog is subscribed to MyBlogLog, the contents of your blog are partially displayed on this site. This is made possible by the RSS feeds of your blog site. The RSS feeds are also responsible for allowing your site to be easily indexed by search engines such as Google.

If you are using Blogger/Blogspot services, the default RSS feed of your blog is called "Atom." Try clicking the "Atom" link found at the bottom-most part of the post body of your blog. Clicking the said link will open a new page that displays the contents of your blog, minus the widgets and layout design. This page is known as the RSS feed page. This page is used by other sites and RSS readers to dispaly the contents of your blog. Feed aggregators such as Technorati will not be able to index and display the contents of your blogsite without the RSS feeds.

One way of increasing the web visibiltiy and web traffic of you site is to register your blogsite to different RSS readers. However, this is very inconvenient and time-consuming. The best option would be to simply redirect your feeds to Feed Burner. This site consolidates all other RSS feeds and readers into one convenient feed. To redirect all the feeds of your blog to Feed Burner, you must first register and follow the instructions therein.

After, registering your site, you will get a new RSS feed URL. You have to paste this URL address onto the "site feed box" of your Blogger/Blogspot template. To do this, go to Settings-Site Feed tab and paste the new RSS feed URL of your site to the corresponding box as shown below.

Now you are done. All your feeds will now be redirected to Feed Burner. Try exploring your Feed Burner account to customize the settings and optimize your blog.

2007-11-27

If you like your blog posts to be truncated without actually eliminating a single word, then the "collapsible post" option is the best option for you. This option allows your blog post to be partially displayed on the main page of your blogsite. In this manner, only the first paragraph or selected paragraphs will be displayed. Some blog readers do not have the patience to scroll down on your blog posts to find the articles that are interesting to them. The collapsible option allows your readers to conveniently scan your main blog posts. Your readers will be able to read the rest of the post by simply clicking the "Read More..." link at the bottom of each article post. In my Much Ado About Nothing blogsite, I have used the "More Blasphemy..." link. You can actually customize this link by editing the corresponding texts in the HTML codes.

However, the collapsible option is not readily available in Blogger/Blogspot. You first need to implement some CSS and HTML codes in the template of your blogsite. Here are the steps that you should follow to include the collapsible option in your Blogger/Blogspot template:

Step1: Backup your template. Just in case something goes wrong, you can always go back to your original template.

Step2: Open the HTML editor of your template and locate the closing </head> tag. Just before this tag, add these codes:

Now you are done. Save your template and view your blog. You will notice that there are actually no changes in your blog posts. You must first edit the old blog posts and include the post template codes to implement the "collapsible post" option. However, every time you make a new post, the template codes that you have added will appear in the "Edit HTML" tab of the post editor. Hence, it is better to first type your blog post using the Edit HTML tab of the post editor to assure that the texts are properly coded. Simply inlcude the texts or portion of your post that you want to be hidden within the <span> codes.

NOTE: If you find it difficult to directly edit your HTML template, refer to this post: Editing Templates.

2007-11-25

To add new page elements to the header and crosscol areas of your template, you must first open the template HTML editor or you may directly open the Page Element tab. If your template does not yet have extra header or crosscol (cross-column) page elements, follow the steps enumerated below to add new page elements to these areas.

Step1: Locate these sections:

For the Header:<b:section class='header' id='header' maxwidgets='0'showaddelement='no'>

For the Crosscol:<b:section class='crosscol' id='crosscol' showaddelement='no'>

Step2: Change the codes above into these:

For the Header:<b:section class='header' id='header' maxwidgets='5'showaddelement='yes'>

(Related Post:Blogger Search Box)One way of monetizing or generating residual income from your blog is to add a Google search box. The search box that you see on the header area of this blogsite is a Google search box. Every time you or someone else uses the said search box, certain points are added to your Google Adsense account. These points are then accumulated and converted into monetary value when they reach certain level. This is called Adsense for Search.Adsense for Search offers three window options. Depending on your preferences, the search results may open on the same window, on another window or within your own site. Try typing search keywords inside the Google search box above. When you click the search button, the search results open within this site. This option is the best option if you want your readers to stay on your site when making Google searches.

To include a Google search box with similar settings such as found on this site, you must first open your Google Adsense account. If you do not have one, you must first create an account. Go to this site: Google Adsense.

Here are the simple steps that you can follow to embed a Google search box on your Blogger/Blogspot site:

Step1: Open your Google Adsense account.

Step2: Choose the Adsense Setup tab and click Adsense for search as shown in the illustration below:

Step3: Choose the option that will open the search results area within your site. You will notice that two sets of codes will be displayed. The first set of codes is for the search box while the second set of codes is for the search results area.

Step4: Login to your Blogger/Blogspot account and open the Page Elements tab.

Step5: Copy-paste the first set of codes onto an available header page element box. Then, copy-paste the second set of codes onto a crosscol page element box. Save your template and view your blog. Now, you are done. You may now test your new Google search box.

2007-11-22

Once you have decided to upload a new template for your blogsite, you may want to preserve the widgets of your original template. Here are the simple steps to preserve the widgets of your original template, thereby allowing them to appear on your newly modified blog template.Step1: Go to the template editor and choose the edit HTML tab:

Step2: Find these codes: </body></html>. These codes are easy to find because they are located at the end of the template file.

Step4: Go to the Page Elements tab. You will notice that a new blank page element box appears on the bottom-most portion. Drag the widget elements into the new element box as shown below. Save your template.

Step5: Open again the HTML template editor and locate this section: <b:section id='backupwidget' showaddelement='yes'/>. This is the same section that you previously added. Copy this section and include all the codes therein until the closing </html> tag.

Step6: Open the new teplate XML file that you have designed or downloaded from other source. Choose Notepad to edit the file. Now, paste the codes that you have just copied from your older template into the last section of the new template. However, you must first delete these codes: </body></html> in the new template and replace it with the codes that you have copied from the older template as stated in Step5. Save your new template.

Step 7:Now you are done. You can now upload the new template for your blogite. All the widgets that you included from the older template will now appear in the new template. Simply rearrange the widget elements based on your preferences. See this post for instructions on how to properly download and upload a new template: Template Downloads.

2007-11-21

Have you noticed the search box above? It is not part of Google search box. Rather, it is actually an integral part of the Blogger/Blogspot template. Typing a keyword search inside the dialog box will return search results of contents found within this blogsite.

If you have hidden the navigation bar of your template, it is ideal to include a search box such as found above to help your readers find specific contents within your blogsite. The illustration below shows the location of the default Blogger/Blogspot search box.

To include a Blogger/Blogspot search box in your blogsite, you must first open the Page Elements tab of your template as shown below.

Then add the codes found below to any available location you prefer. However, you first have to change the red-higlighted codes in the shown example to match the specifications of your blogsite. Otherwise, any keyword search on your blogsite would return results found in this site.

2007-11-17

Although Blogger/Blogspot is very easy to use and it has great flexibility compared to other blog hosting services, it has some disadvantages. One disadvantage of Blogger/Blogspot is its lack of readily available three-column templates and other more professionally-looking templates such as found in Wordpress, for instance. However, this blog host offers lots of freedom, especially for would-be web designers.Although you might be very creative, it requires some technical skills when it comes to designing Blogger/Blogspot templates. You have to be knowledgeable about HTML and CSS to implement your ideas. On the other hand, if you are the type of person who is too busy and do not have much patience to design your own templates, you may simply download from other sources. There are many blogsites and web sites that offer free templates.

I have listed here some links where you can find free templates for Blogger/Blogspot. However, when it comes to downloading templates, it is not as straightforward as copy-pasting the codes. You must first download the file and save it to your hard desk, then upload it to the template editor of your blogsite.

There are instances wherein the template editor will not parse or you will be asked to delete some widgets. This is especially true if you have too many widgets in your original blog template. Typically, you must simply confirm and save. However, there are instances wherein you may need to manually delete the widgets. Hence, it is wise to first save the original template before trying to replace it with a new one. This should be done to preserve the widgets of your original template.

Here are some of the best links that offer free Blogger/Blogspot templates:

2007-11-16

Have you noticed the bar on top of your Blogger/Blogspot site? It is called the navigation bar. It contains the search box and other links that can be conveniently used when you are editing your blogs. However, some bloggers would prefer to dispense of the said navigation bar. There are many reasons why you might like to remove the said bar. One reason would be for aesthetic purposes. You might want your blogsite layout to have a more professional feel. On the other hand, you might simply want to add other functionalities on your layout. Whatever the reasons might be, it is still not advisable to permanently remove the said bar. You might end up having difficulty navigating and editing your blogsite if the navigation bar is permanently removed. One solution to this is to simply hide the navigation bar by adding a CSS code on the template of your blogsite.

To hide the navigation bar, first find the "credits section" on the template of your blogsite. The credits section contains the name of the template designer. This section resembles the sample below. For the sake of illustration, I have used the credits section of this blogsite's template.

2007-11-14

If you intend to include very long text contents in your blog posts but you want to save space, you may use the scrolling text or scroll bar definitions in your style sheets. For instance, I have posted here the template of this blogsite. However, since the template has very long text contents, I opted to use the scrolling text style. I have used the codes below for the CSS scroll bar definitions within my blog posts. You may directly copy-paste the codes in the style sheet of your blog template or you may modify them first, depending on your preferences. The size (width and height), background color, and border definitions can all be modified.

Scrollbars are ideal for long text contents such as the template codes of this blog site. To include selected texts inside the scrollbars, you must enclose the texts within these codes: <div class="scrollingtext">TEXT</div>. By the way, these codes should only be used within the text editor of the blog post and not on the template editor, as illustrated below.