Web Basics: 2007

2007-12-19

Taking a Screenshot

Taking screenshots or snapshots of your PC screen is very easy to do. The picture that you see below is an example of screenshot image of this site. Screenshot images can be created by simultaneously pressing the CONTROL key and PRINT SCREEN key (Ctrl+PrtSc). After doing this, open the Paint program found under the Accessories category of the MS-Windows menu. Use the Ctrl+V command to paste the image. You may then do some editing before saving the image file. If you want more advanced options, you may choose other image editing application programs such a CorelDraw or PhotoShop.

Drivewire – Auto Parts and Accessories

If you are looking for dependable aftermarket auto parts such as Ford auto parts, one of the best sites to visit is Drivewire.com. This site offers a wide array of product options, covering virtually all types of car makes and models. Finding the car parts that you need is very easy because of the convenient navigational tools of this site. You can easily access specific product catalogs by simply clicking the corresponding links. This site offers great product discounts that are highly competitive. Online shopping is the best way to purchase the auto parts that you need. Transaction is hassle-free and it may take just a few clicks of your mouse buttons.

2007-12-17

Play Online Backgammon

Do you want to play online backgammon just for fun or for real money? There are many backgammon sites that offer software downloads as well as actual tournaments. Unlike other types of games that involve dice rolling, backgammon also requires some degree of skills. If you want to play challenging backgammon online games with real people, MisterGammon.com is one of the best backgammon sites that you can visit. This site offers the latest information on online backgammon tournaments as well as tips on game strategies that can help you to improve your skills. The site is very easy to navigate and the loading time is fast. This site is credible and has over 100,000 regular players. You can be assured that your online funds will be secured if you sign-up for membership.

2007-12-16

CSS Blockquote Formats

'An eye for eye only ends up making the whole world blind.'
--Mahatma Gandhi

The block quotation above was formatted using the <blockquote> tags. If you cannot view the styles that I have applied in the quotation above, switch to Mozilla Firefox browser. This browser is far much better than other browsers in terms of displaying CSS formats and in terms of being user-friendly. The Blogger/Blogspot default settings simply format blockquotes as indented. If you want to add decorative quotation marks and background color, you have to do some tweaking with the CSS codes. You can easily create blockquotes by higlighting the selected texts and clicking the "quote icon" found on the upper frame of the text editor as shown in the illustration below.

The format of the quotation above should look something like the one shown in the illustration below -- without the red oval, of course!

I have used the CSS codes shown below to achieve the effects that you see. Simply copy-paste these codes onto the style sheet of your template and save. Every time you make a block quotation, it will be formatted accordingly. You may also adjust some attributes to suit your preference. You can change the size of the decorative quotation marks and their colors; the height, width, and background of the blockquote; and the text formatting.

Codes:

BLOCKQUOTE {
color: blue;
display: block;
background: #FFF380;
padding: 0 60px;
width: 350px;
}

blockquote:before, blockquote:after {
color: #69c;
display: block;
font-size: 700%;
width: 50px;
}

blockquote:before {
content: open-quote;
height: 0;
margin-left: -0.55em;
}

blockquote:after {
content: close-quote;
height: 50px;
margin-top: -70px;
margin-left: 360px;
}

Online Backgammon Portal

Backgammon is a game that involves both chance and strategy. Very few people really know how to play backgammon. However, for those who have been hooked with the game, it is quite addicting, especially if large stakes are involved. Backgammon games can be played online. There are several sites that offer live backgammon tournaments. If you are looking for an excellent backgammon site, Gammon-World.com is one of the best backgammon portals that you can visit. This site also offers tutorials on strategies of the game. The site is minimalist in concept with very few distractions, allowing online players to easily navigate its pages.

Online Slot Machines

Online slots are among the oldest type of web-based gambling ever developed. Even during the early years of the internet as a public domain, online slot machines were already providing entertainment and price opportunities for the online community. Play slots are popular because of their simplicity and high probability of winning. An online slot machine is obviously far more convenient than the traditional casino slots. Sloterix.com is among the pioneer online slots. Its varieties of interactive games are easy to play and the website design is very ergonomic. Technical support is excellent and round the clock. Hence, you can be assured of high quality services.

2007-12-15

Domain Names

This summary is not available. Please click here to view the post.

A Web Portal to Online Casinos

The web is pretty much a crowded place. Finding your way requires some sort of guide map, especially if you are looking for specific sites such as online casinos. If you are a professional gambler, a gambling addict or simply someone who enjoy the thrill of high-stake games, then Gamblux.com is the perfect site for you. This site is not actually a gambling site but a portal or gateway to the best online casinos. The navigation tools and layout of this site are great. Hence, you will not get lost. Here, you can find casino news, comprehensive casino guide, and a wide range of game options.

2007-12-14

Online Hotel Reservations

If you are planning to have a Roman holiday this Christmas, you might end up being frustrated in finding Rome accommodation (pun intended). Rome is one of the busiest cities this time of year. You can expect a deluge of pilgrims in that ancient city. If you have not booked reservations at least two weeks in advance, you could not expect to find the best accommodations such as Hotel Venice. Your Roman holiday might end up as a penance rather than a vacation. There are many online sites that offer hotel booking services complete with tour package. However, only few of these truly offer high quality services commensurate to the fee required.

Aside from hotel rooms, you might also want to avail a Rome apartment. In this manner, you will be assured of privacy. Most online reservations also offer other service packages such as bed and breakfast, transportation, plane reservations, guided tours and even audience with the Pope. Finding the right website is sometimes confusing with all the fuss of competition. Paying for accommodation booking services might not come as a surprise to you. However, did you know that there are actually booking websites that offer excellent but free services? If you do not believe me, you might want to visit FreeReservations.com. Free services such as this give credence to the popular saying: “the best things in life are free.” Rome was not built within a day but you can book reservations within just a few minutes.

2007-12-13

Hosting Template Codes

Have you ever wondered how to host your Blogger/Blogspot HTML template codes? Well, there is the option of posting them on your blogsite or website. But then, in order to do this, you must first have to change the arrow brackets of the tags so that they can be displayed as texts. A convenient method of doing this is to copy-paste the template codes onto MS-Word and use the Replace command to replace all the arrow brackets with the corresponding ampersand (&) symbols. For details regarding this, you may read this related post: Displaying HTML Tags. After replacing all the arrow brackets, you can then post the template codes on your site. However, this method is a bit tedious and may introduce unnecessary XML codes that might not be parsed by the Blogger HTML editor.

Another option would be to simply upload the text file (Notepad) version of your template to a web host. There are many web hosting services that you can avail. Some are for free while others require payments. The best free web-hosting site that I have encountered so far is Googlepages. You can upload text files and other types of files to Googlepages. These files will then be hosted in unique pages of their own -- with corresponding URL addresses, of course.

To upload the text version of your Blogger HTML template, simply follow these instructions:

Step1: Open the HTML editor of your Blogger template.

Step2: Check the “expand widget” box. Copy the entire codes using the Ctrl+A and Ctrl+C command on your keyboard.

Step3: Open a Notepad. Then, paste the codes that you have copied using the Ctrl+V command on your keyboard. Save the file using the appropriate filename (example: backup template.txt).

Step4: Open your Googlepages account. If you do not yet have an account, you must first create an account. Typically, if you have a Blogger account, you can easily open your Googlepages account. The username and password for this account are the same as the ones that you are using for your Blogger account.

Step5: Upload the Notepad file as shown in the illustration below. As you can see in the example, I have uploaded the template of my Alternate Reality blog.

Step6: After uploading the Notepad file, click the corresponding link of the uploaded file. A new page will open displaying your text file. For instance, the web page for my uploaded template is hosted at this address: Alternate Reality backup template. You can use your created page as backup template or as reference link for your blog posts. If you want to have a formatted text file, you may use MS-Word to format and save your text file. You may then upload this file.

Custom Writing Services

Even with the available help essay services on the Internet, some students still find it very difficult to write high quality research papers. Sometimes, the problem lies on the writing skills and not on the availability of information. If you want custom papers for your project, thesis, term paper or dissertation, you may simply buy an essay from credible websites. Technically, it would not be considered as plagiarism if you avail custom writing services, especially if you provided the rough draft, sources and format specifications. Services such as these simply polish and organize your research papers.

2007-12-12

Menu Bar with CSS Definitions

(Related Topic: Adding a Menu Bar)
Menu bars are the basic navigation tools of a website. Menu bars allow the visitors or users of a website to conveniently navigate from one page to another. Without the menu bar or any other navigation links, all the contents of a website have to be placed on the front page. This would be tantamount to printing a whole book as a long scroll rather than the more practical leaf-page format. The menu bar is comparable to the index or table of contents of a book. It allows the readers to find the particular page or contents that they want. Thus, the need for scanning the whole book is eliminated.

Even blogsites may need menu bars for easy navigation. For instance, this blogsite features a simple menu bar located at the top portion of the header area. This menu bar leads to the different resources and information found on this blogsite. Since each blog post is located on a unique page, you can link the important pages to the items of your menu bar. For instance, I have included the following items in my menu bar:

HOME||CHAT||GAMES||SLIDES||BLOGROLL||ABOUT||CONTENTS

The menu bar of this blogsite was created using simple text links. There is another way of creating a Blogger/Blogspot menu bar using CSS definitions. CSS adds text effects to the menu bar. In my previous post on this topic I have discussed the simple method that I have used for this blogsite without using CSS definitions. In this post I will discuss the method that utilizes CSS definitions. (For an example of Blogger menu bar with CSS definitions, visit this site: Much Ado About Nothing.)

Here are the steps that you should follow to create a menu bar for your Blogger/Blogspot site:

Step1: Create a new header page element. To do this, please refer to this post: New Header and Crosscol Elements.

Step2: Find the HTML section that is shown below and add the red-higlighted codes.

<div id='header-wrapper'>
<b:section class='menubar' id='menubar' maxwidgets='1' showaddelement='yes'>
<b:widget id='LinkList2' locked='true' title='Menubar' type='LinkList'/>
</b:section>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='false' title='Beautiful Beta (Header)' type='Header'/>
</b:section>
</div>

Step3: In the style sheet section of your template, add these CSS codes:

#menubar h2 {display:none;}

#menubar ul {
list-style: none;
}
#menubar li {
float: left;
}

#menubar a:link, #menubar a:visited, #menubar a:hover {
padding: 5px;
display: block;
color: $headerTextColor;
}

#menubar a:hover {
background-color: $headerCornersColor;
}

Step4: Save your template and go to the Page Elements tab. You will notice that a new page element box has been added above the header title. Click the Add a Page Element link and choose Link List as the new page element. You can now start linking pages from your blogsite posts or from other sites.

2007-12-11

Small Business Web Hosting

Our age is the age of information. Virtually all types of information can be accessed with a few clicks of the mouse buttons. In fact, we are overwhelmed by too much information that we sometimes do not even know which information is right. The internet is a worldwide library that made it possible for the easy access to information. Aside from academic concerns, the internet is the gateway to global marketing. The amazing thing about web marketing is that you can actually do business 24 hours a day even when you are asleep or simply twiddling your thumbs. Your customers can literally come from any part of the planet. If you intend to start a web-based business, you must first find the right web hosting site for your business.

Small business web hosting sites are ideal for start-up individual enterprises. When it comes to web marketing, the possibilities are endless. You can offer very obscure products and services, yet you will be surprised to find a sustainable market demand. There are many sites that offer free or paid web hosting services. However, only very few of these provide the right information that you need to make your web business successful. Before you jump into the bandwagon, you must first gather the right information.

Learn from the real-world experience of others. Those ordinary individuals who made it big in web-based enterprises are those people who were willing to learn from their mistakes. However, you do not need to go through the same grueling process that they have gone through. You can know more about web marketing by simply reading the articles written by successful web marketers. Being equipped with the right information is like possessing a treasure map. The map itself will not give you wealth but it can lead you to riches that perhaps even beyond your wildest dreams.

2007-12-08

Understanding Style Sheets (CSS)

There are actually different types of style sheets that can be integrated with HTML documents. However, the most commonly used type of style sheet is the Cascading Style Sheet or CSS. As the name implies, this style sheet is a layered style sheet. This means that different formats can be implemented using different attributes. CSS is an extension of the HTML language. CSS allows generalized formatting of a web document without the need for individually tagging each element. Basically, CSS provides the general formatting for the texts, graphics and layout a HTML document or web page.

You can consider CSS as some sort of generic formatting tool that is much similar to the formatting tools of word processors. CSS tells the browser how a particular type of page element will be displayed. For instance, the post titles (header texts) of this blogsite are displayed as left aligned, blue color, and black during mouse hover. All of these characteristics are declared in the style sheet. Without the style sheet, the individual titles need to be tagged separately.

CSS codes are placed inside the <head> tags of a HTML document. These CSS codes, are further nested inside the <style> tags. In Blogger/Blogspot templates, the style sheets are found between the <b:skin> tags. If HTML tags are easily identifiable because of the arrow brackets (< and >), CSS codes are easily identifiable because of the curly brackets ({ and }) CSS codes or attributes are enclosed within these brackets.

Below is an example of CSS codes. These CSS codes provide the background image for this blogsite. Tweaking these codes in my template will change the attributes of the background image.

<style type='text/css'>
body
{
background-image:
url('http://www.quiltingbb.com/images/wood_tile.jpg');
background-repeat: repeat;
background-attachment:
fixed
}
</style>

Unlike HTML tags, CSS codes do not necessarily need to be grouped in hierachical order. However, for the sake of convenience, the CSS codes are grouped according to the particular HTML elements they format. For instance, in the Blogger templates, the CSS codes for the header elements are grouped together. CSS codes have similar attributes to HTML tags. Some of the most common attributes of CSS codes are width, alignment, height, color, and text effect. Hence, if you are very familiar with HTML tags, you can easily learn how to format CSS codes. In my successive posts, I will discuss specific CSS formatting codes that can be used in Blogger/Blogspot templates.

If you want to learn more about CSS, you can visit this site: W3.ORG

2007-12-05

Site Within a Site

Do you want your favorite site to be displayed within your blog?. There are Javascript codes that you can create and copy-paste on your website or blogsite to enable you to create i-frames. An i-frame is actually like a picture frame contained within another picture frame. It may also be compared to a window within a window. An i-frame allows you to view other sites within your own site. Hence, there is no need to navigate away from your site. You can simultaneously view two sites. For instance, if you scroll down to the footer area of this blogsite, you will see an i-frame displaying my GooglePages site (Family Life). This is made possible by the i-frame codes that I have embedded on this site.

To conveniently create an i-frame for your site, you must first create the code in Bitty Browser. Follow the step-by-step graphical instructions below:

Step1: Open Bitty Browser page.

Step2: Go to the settings page by clicking the "change something" link.

Step3: Choose the "change the contents" option.

Step4: Choose the "website URL" option.

Step5: Paste the URL of your choice inside the form box. This could be the URL of your other blog or the URL of your favorite site.

Step6: Get the HTML/Javascript codes by clicking the "Get HTML" icon.

Step7: Copy-paste the codes to your blog. Simply choose the appropriate location. Preferably, you should embed the codes on the footer area of your site. Now you are done. Save and view your blog.

On the other hand, if you do not want to go over the abovementioned steps, simply copy-paste the codes below onto the footer area of your site. Simply change the red-highlighted URL address with the URL address of your choice.

CODES:

<script type="text/javascript">

</script><script src="http://b1.bitty.com/b2script/" type="text/javascript"></script><noscript><a href="http://www.bitty.com/">Bitty Browser</a> (JavaScript required)</noscript>

2007-12-03

Embedding PowerPoint Slides

Have you noticed that the Blogger/Blogspot post editor only offers photo and video upload? The illustration below shows the icons that you should click if you want to upload photos or videos from your hard desk. However, what if you want to upload PowerPoint or PDF files? There are no straightforward options that you can choose. Hence, the best option would be to first convert the files into some sort of codes and copy-paste or embed them onto your blog in similar manner that YouTube videos are embedded on blog posts.

To embed a PowerPoint file onto Blogger, you must first create an account in Slide Share. After creating an account, you can then upload the PowerPoint files that you created. However, the maximum file size that is allowed is 30 Megabytes. Well, this is enough for general purposes. Uploading may take some time, depending on the file size. On the other hand, the process of converting the file into Slide Share format may take longer time. Hence, you should be patient.

After your file has been converted into codes, you can now embed the codes from the corresponding code box as shown in the illustration below. To do this, copy the corresponding codes; then, open the text editor of your blog and choose the "Edit Html" tab. Paste the codes that you copied. Publish your post or save it as draft.

Now you are done. After publishing your post, you can now view your blog. Remember, there are separate codes for Wordpress and Blogger. Simply choose the appropriate codes that you are going to embed. Here is an example of an embedded PowerPoint file. This file was created by my friend, Joseph Benedict:

| View | Upload your own

2007-11-30

Editing Templates

(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

The Importance of RSS Feeds

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

Collapsible Posts (Dropdown Posts)

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:

<b:if cond='data:blog.pageType != "item"'>
<script type="text/javascript">

var fade = false;
function showFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost") {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Appear(spans[i]);
} else spans[i].style.display = 'inline';
}
if (spans[i].id == "showlink")
spans[i].style.display = 'none';
if (spans[i].id == "hidelink")
spans[i].style.display = 'inline';
}
}

function hideFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost") {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Fade(spans[i]);
} else spans[i].style.display = 'none';
}
if (spans[i].id == "showlink")
spans[i].style.display = 'inline';
if (spans[i].id == "hidelink")
spans[i].style.display = 'none';
}
post.scrollIntoView(true);
}

function checkFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
var found = 0;
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost") {
spans[i].style.display = 'none';
found = 1;
}
if ((spans[i].id == "showlink") && (found == 0))
spans[i].style.display = 'none';
}
}

</script>
</b:if>

If the codes above do not work, go to this link and copy all the codes: Codes.

Step3: Save your template and locate this section in the HTML document:

<b:includable id='post' var='post'>
<div class='post uncustomized-post-template' expr:id='"post-" + data:post.id'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title'>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>

<div class='post-header-line-1'/>

<div class='post-body'>

<b:if cond='data:blog.pageType == "item"'>

<p><data:post.body/></p>

<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a href='javascript:void(0);' expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"'>Read More...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a href='javascript:void(0);' expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"'>Summary only...</a></p>
</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if>

<div style='clear: both;'/> 
</div>

Add the red-highlighted codes as shown above. If the codes above do not work properly, visit this link: Codes2.

Step4: Save your template and go to the Settings-Formatting tab.

Step5: Locate the Post Template box and paste these codes as shown in the illustration:

Type your summary here
<span id="fullpost">
Type rest of the post here
</span>

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

New Header and Crosscol Elements

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'>

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

Step3: Save the template and go back to the Page Elements tab. You will notice that new element boxes now appear. Now, you can add new widgets in these areas.

Google Search Box

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

NOTE: To add new page elements to the header and crosscol areas of your template, read this post: New Header and Crosscol Elements.

2007-11-22

Preserving Widgets

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.

Step3: Add this code immediately before the codes stated above: <b:section id='backupwidget' showaddelement='yes'/>. Save your template.

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

Blogger Search Box

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

Template Downloads

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

Hiding the Navigation Bar

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.

<b:skin><![CDATA[/*

-----------------------------------------------
Blogger Template Style
Name: Minima
Designer: Douglas Bowman
URL: www.stopdesign.com
Date: 26 Feb 2004
Updated by: Blogger Team
Modified by: Homar Murillo
----------------------------------------------- */

The aforementioned section is located on the upper part of your blogsite template. Hence, it is very easyto find. Immediately under it, add this CSS code:

#navbar-iframe {
display: none !important;
}

Now you are done. It is as simple as that. Save your template and view your blog. If you want to restore the navigation bar, simply remove the aforementioned CSS code.

2007-11-14

Scrollbars Inside Blog Posts

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.

.scrollingtext {
height:200px;
width:465px;
background:#FFFFFF;
border:2px solid #b47b10;
overflow:auto;
}

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.

Web Basics Template

<?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<b:include data='blog' name='all-head-content'/>

<b:skin><![CDATA[/*

-----------------------------------------------

Blogger Template Style

Name: Minima

Original Design By: Douglas Bowman

URL: www.stopdesign.com

Updated By: Blogger Team

Modified By: Homar Murillo

----------------------------------------------- */

/* Variable definitions

====================

<Variable name="bgcolor" description="Page Background Color"

type="color" default="#fff" value="#ffffff">

<Variable name="textcolor" description="Text Color"

type="color" default="#333" value="#000000">

<Variable name="linkcolor" description="Link Color"

type="color" default="#58a" value="#a9501b">

<Variable name="pagetitlecolor" description="Blog Title Color"

type="color" default="#666" value="#b47b10">

<Variable name="descriptioncolor" description="Blog Description Color"

type="color" default="#999" value="#b47b10">

<Variable name="titlecolor" description="Post Title Color"

type="color" default="#c60" value="#b47b10">

<Variable name="bordercolor" description="Border Color"

type="color" default="#ccc" value="#b47b10">

<Variable name="sidebarcolor" description="Sidebar Title Color"

type="color" default="#999" value="#b47b10">

<Variable name="sidebartextcolor" description="Sidebar Text Color"

type="color" default="#666" value="#000000">

<Variable name="visitedlinkcolor" description="Visited Link Color"

type="color" default="#999" value="#a9501b">

<Variable name="bodyfont" description="Text Font"

type="font" default="normal normal 100% Georgia, Serif" value="normal normal 96% Georgia, Times, serif">

<Variable name="headerfont" description="Sidebar Title Font"

type="font"

default="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif" value="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif">

<Variable name="pagetitlefont" description="Blog Title Font"

type="font"

default="normal normal 200% Georgia, Serif" value="normal bold 339% Georgia, Times, serif">

<Variable name="descriptionfont" description="Blog Description Font"

type="font"

default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="italic normal 116% Georgia, Times, serif">

<Variable name="postfooterfont" description="Post Footer Font"

type="font"

default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif">

/* Use this with templates/template-twocol.html */

body {

background:$bgcolor;

margin:0;

color:$textcolor;

font:x-small Georgia Serif;

font-size/* */:/**/small;

font-size: /**/small;

text-align: center;

}

a:link {

color:$linkcolor;

text-decoration:none;

}

a:visited {

color:$visitedlinkcolor;

text-decoration:none;

}

a:hover {

color:$titlecolor;

text-decoration:underline;

}

a img {

border-width:0;

}

/* Header

-----------------------------------------------

#header-wrapper {

width:960px;

background: none;

margin:0 auto 10px;

border:1px solid $bordercolor;

}

#header-inner {

background-position: left;

margin-left: auto;

margin-right: auto;

}

#header {

margin: 5px;

border: 1px solid $bordercolor;

text-align: center;

color:$pagetitlecolor;

}

#header h1 {

margin:5px 5px 0;

padding:15px 20px .25em;

line-height:1.2em;

text-transform:uppercase;

letter-spacing:.2em;

font: $pagetitlefont;

}

#header a {

color:$pagetitlecolor;

text-decoration:none;

}

#header a:hover {

color:$pagetitlecolor;

}

#header .description {

margin:0 auto;

padding:0 20px 15px;

max-width:700px;

text-transform:uppercase;

letter-spacing:.2em;

line-height: 1.4em;

font: $descriptionfont;

color: $descriptioncolor;

}

#header img {

margin-left: 0;

margin-right: 0;

}

/* Outer-Wrapper

----------------------------------------------- */

#outer-wrapper {

width: 960px;

margin:0 auto;

padding:10px;

text-align:left;

font: $bodyfont;

}

#main-wrapper {

width: 470px;

float: left;

padding:10px;

word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

}

#right-sidebar-wrapper {

width: 200px;

float: right;

word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

}

/* Headings

----------------------------------------------- */

h2 {

margin:1.5em 0 .75em;

font:$headerfont;

line-height: 1.4em;

text-transform:uppercase;

letter-spacing:.2em;

color:$sidebarcolor;

}

/* Posts

-----------------------------------------------

h2.date-header {

margin:1.5em 0 .5em;

}

.scrollingtext {

height:200px;

background:#FFFFFF;

width:465px;

border:2px solid $bordercolor;

overflow:auto;

}

.post {

margin:.5em 0 1.5em;

border-bottom:3px solid $bordercolor;

padding-bottom:1.5em;

}

{ border-bottom: thick none transparent url('http://img.photobucket.com/albums/v333/dianeskie/2dhh1d1.jpg') }

.post h3 {

margin:.25em 0 0;

padding:0 0 4px;

font-size:140%;

font-weight:normal;

line-height:1.4em;

color:$titlecolor;

}

.post h3 a, .post h3 a:visited, .post h3 strong {

display:block;

text-decoration:none;

color:$titlecolor;

font-weight:normal;

}

.post h3 strong, .post h3 a:hover {

color:$textcolor;

}

.post p {

margin:0 0 .75em;

line-height:1.6em;

}

.post-footer {

margin: .75em 0;

color:$sidebarcolor;

text-transform:uppercase;

letter-spacing:.1em;

font: $postfooterfont;

line-height: 1.4em;

}

.comment-link {

margin-left:.6em;

}

.post img {

padding:4px;

border:1px solid $bordercolor;

}

.post blockquote {

margin:1em 20px;

}

.post blockquote p {

margin:.75em 0;

}

.dropcaps { float:left; color: $#C68E17; font-size:100px; line-height:80px; padding-top:1px; padding-right:5px; }

/* Comments

----------------------------------------------- */

#comments h4 {

margin:1em 0;

font-weight: bold;

line-height: 1.4em;

text-transform:uppercase;

letter-spacing:.2em;

color: $sidebarcolor;

}

#comments-block {

margin:1em 0 1.5em;

line-height:1.6em;

}

#comments-block .comment-author {

margin:.5em 0;

}

#comments-block .comment-body {

margin:.25em 0 0;

}

#comments-block .comment-footer {

margin:-.25em 0 2em;

line-height: 1.4em;

text-transform:uppercase;

letter-spacing:.1em;

}

#comments-block .comment-body p {

margin:0 0 .75em;

}

.deleted-comment {

font-style:italic;

color:gray;

}

#blog-pager-newer-link {

float: left;

}

#blog-pager-older-link {

float: right;

}

#blog-pager {

text-align: center;

}

.feed-links {

clear: both;

line-height: 2.5em;

}

#left-sidebar-wrapper {

width: 200px;

float: left;

word-wrap: break-word;

overflow: hidden;

}

/* Sidebar Content

----------------------------------------------- */

.sidebar {

color: $sidebartextcolor;

line-height: 1.5em;

}

.sidebar ul {

list-style:none;

margin:0 0 0;

padding:0 0 0;

}

.sidebar li {

margin:0;

padding:0 0 .25em 15px;

text-indent:-15px;

line-height:1.5em;

}

.sidebar .widget, .main .widget {

border-bottom:0px dotted $bordercolor;

margin:0 0 1.5em;

padding:0 0 1.5em;

}

.main .Blog {

border-bottom-width: 0;

}

/* Profile

----------------------------------------------- */

.profile-img {

float: left;

margin: 0 5px 5px 0;

padding: 4px;

border: 1px solid $bordercolor;

}

.profile-data {

margin:0;

text-transform:uppercase;

letter-spacing:.1em;

font: $postfooterfont;

color: $sidebarcolor;

font-weight: bold;

line-height: 1.6em;

}

.profile-datablock {

margin:.5em 0 .5em;

}

.profile-textblock {

margin: 0.5em 0;

line-height: 1.6em;

}

.profile-link {

font: $postfooterfont;

text-transform: uppercase;

letter-spacing: .1em;

}

/* Footer

----------------------------------------------- */

#footer {

width:100%;

clear:both;

margin:0 auto;

padding-top:15px;

line-height: 1.6em;

text-transform:uppercase;

letter-spacing:.1em;

text-align: center;

}

/** Page structure tweaks for layout editor wireframe */

body#layout #header {

margin-left: 0px;

margin-right: 0px;

}

]]></b:skin>

body

{

background-image:

url('http://www.quiltingbb.com/images/wood_tile.jpg');

background-repeat: repeat;

background-attachment:

fixed

}

</style>

</head>

<body>

<a href='#main'>skip to main </a> |

<a href='#sidebar'>skip to sidebar</a>

</span>

<b:section class='header' id='header' maxwidgets='4' showaddelement='yes'>

<b:widget id='Text2' locked='false' title='' type='Text'>

<b:includable id='main'>

<b:if cond='data:title != ""'>

</b:if>

<data:content/>

</div>

<b:include name='quickedit'/>

</b:includable>

</b:widget>

<b:widget id='Header1' locked='true' title='Web Basics (Header)' type='Header'>

<b:includable id='main'>

<b:if cond='data:useImage'>

<b:if cond='data:imagePlacement == "REPLACE"'>

</a>

</div>

<b:else/>

<b:if cond='data:blog.url == data:blog.homepageUrl'>

<data:title/>

<b:else/>

</b:if>

</h1>

</div>

</div>

</b:if>

<b:else/>

<b:if cond='data:blog.url == data:blog.homepageUrl'>

<data:title/>

<b:else/>

</b:if>

</h1>

</div>

</div>

</b:if>

</b:includable>

</b:widget>

<b:widget id='Text4' locked='false' title='' type='Text'>

<b:includable id='main'>

<b:if cond='data:title != ""'>

</b:if>

<data:content/>

</div>

<b:include name='quickedit'/>

</b:includable>

</b:widget>

</b:section>

</div>

<b:section class='sidebar' id='left-sidebar' preferred='yes'>

<b:widget id='HTML6' locked='false' title='' type='HTML'>

<b:includable id='main'>

<b:if cond='data:title != ""'>

</b:if>

<data:content/>

</div>

<b:include name='quickedit'/>

</b:includable>

</b:widget>

<b:widget id='HTML9' locked='false' title='' type='HTML'>

<b:includable id='main'>

<b:if cond='data:title != ""'>

</b:if>

<data:content/>

</div>

<b:include name='quickedit'/>

</b:includable>

</b:widget>

<b:widget id='HTML8' locked='false' title='PayPerPost, Inc' type='HTML'>

<b:includable id='main'>

<b:if cond='data:title != ""'>

</b:if>

<data:content/>

</div>

<b:include name='quickedit'/>

</b:includable>

</b:widget>

<b:widget id='HTML11' locked='false' title='Subscribe Now' type='HTML'>

<b:includable id='main'>

<b:if cond='data:title != ""'>

</b:if>

<data:content/>

</div>

<b:include name='quickedit'/>

</b:includable>

</b:widget>

<b:widget id='HTML7' locked='false' title='' type='HTML'>

<b:includable id='main'>

<b:if cond='data:title != ""'>

</b:if>

<data:content/>

</div>

<b:include name='quickedit'/>

</b:includable>

</b:widget>

<b:widget id='AdSense2' locked='false' title='' type='AdSense'>

<b:includable id='main'>

<data:adCode/>

</div>

</b:includable>

</b:widget>

<b:widget id='Image4' locked='false' title='' type='Image'>

<b:includable id='main'>

<b:if cond='data:title != ""'>

</b:if>

<br/>

<b:if cond='data:caption != ""'>

</b:if>

</div>

<b:include name='quickedit'/>

</b:includable>

</b:widget>

<b:widget id='Image2' locked='false' title='' type='Image'>

<b:includable id='main'>

<b:if cond='data:title != ""'>

</b:if>

<br/>

<b:if cond='data:caption != ""'>

</b:if>

</div>

<b:include name='quickedit'/>

</b:includable>

</b:widget>

<b:widget id='Image3' locked='false' title='' type='Image'>

<b:includable id='main'>

<b:if cond='data:title != ""'>

</b:if>

<br/>

<b:if cond='data:caption != ""'>

</b:if>

</div>

<b:include name='quickedit'/>

</b:includable>

</b:widget>

<b:widget id='HTML5' locked='false' title='blog listing' type='HTML'>

<b:includable id='main'>

<b:if cond='data:title != ""'>

</b:if>

<data:content/>

</div>

<b:include name='quickedit'/>

</b:includable>

</b:widget>

<b:widget id='LinkList2' locked='false' title='web resources' type='LinkList'>

<b:includable id='main'>

<b:if cond='data:title'><h2><data:title/></h2></b:if>

<ul>

<b:loop values='data:links' var='link'>

</b:loop>

</ul>

<b:include name='quickedit'/>

</div>

</b:includable>

</b:widget>

<b:widget id='LinkList1' locked='false' title='Web Pals' type='LinkList'>

<b:includable id='main'>

<b:if cond='data:title'><h2><data:title/></h2></b:if>

<ul>

<b:loop values='data:links' var='link'>

</b:loop>

</ul>

<b:include name='quickedit'/>

</div>

</b:includable>

</b:widget>

<b:widget id='BloggerButton1' locked='false' title='' type='BloggerButton'>

<b:includable id='main'>

<b:include name='quickedit'/>

</div>

</b:includable>

</b:widget>

</b:section>

</div>

<b:section class='crosscol' id='crosscol' showaddelement='no'/>

</div>

<b:section class='main' id='main' showaddelement='yes'>

<b:widget id='HTML4' locked='false' title='' type='HTML'>

<b:includable id='main'>

<b:if cond='data:title != ""'>

</b:if>

<data:content/>

</div>

<b:include name='quickedit'/>

</b:includable>

</b:widget>

<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>

<b:includable id='nextprev'>

<b:if cond='data:newerPageUrl'>

</span>

</b:if>

<b:if cond='data:olderPageUrl'>

</span>

</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>

<b:else/>

<b:if cond='data:newerPageUrl'>

</b:if>

</div>

</b:includable>

<b:includable id='backlinks' var='post'>

<b:if cond='data:post.numBacklinks != 0'>

<b:loop values='data:post.backlinks' var='backlink'>

<b:include data='backlink' name='backlinkDeleteIcon'/>

</dt>

<data:backlink.snippet/>

</dd>

</dd>

</div>

</b:loop>

</dl>

</b:if>

</p>

</b:includable>

<b:includable id='post' var='post'>

<b:if cond='data:post.title'>

<b:if cond='data:post.link'>

<b:else/>

<b:if cond='data:post.url'>

<b:else/>

<data:post.title/>

</b:if>

</h3>

</b:if>

</div>

<div><script type='text/javascript'>addthis_url='<data:post.url/>'; addthis_title='<data:post.title/>'; addthis_pub='homar';</script><script src='http://s7.addthis.com/js/addthis_widget.php?v=12' type='text/javascript'/></div>

<b:if cond='data:top.showAuthor'>

<data:top.authorLabel/>

</b:if>

</span> <span class='post-timestamp'>

<b:if cond='data:top.showTimestamp'>

<data:top.timestampLabel/>

<b:if cond='data:post.url'>

</b:if>

</span> <span class='post-comment-link'>

<b:if cond='data:blog.pageType != "item"'>

<b:if cond='data:post.allowComments'>

</b:if>

</span> <span class='post-icons'>

<b:if cond='data:post.emailPostUrl'>

</a>

</span>

</b:if>

<b:include data='post' name='postQuickEdit'/>

</span> <span class='post-backlinks post-comment-link'>

<b:if cond='data:blog.pageType != "item"'>

<b:if cond='data:post.showBacklinks'>

</b:if>

</span> </p>

<b:if cond='data:post.labels'>

<data:postLabelsLabel/>

<b:loop values='data:post.labels' var='label'>

</b:loop>

</b:if>

</span> </p>

</div>

</b:includable>

<b:includable id='commentDeleteIcon' var='comment'>

</a>

</span>

</b:includable>

<b:includable id='status-message'>

<b:if cond='data:navMessage'>

<data:navMessage/>

</div>

</div>

</b:if>

</b:includable>

<b:includable id='feedLinks'>

<b:if cond='data:blog.pageType != "item"'>

<b:if cond='data:feedLinks'>

<b:include data='feedLinks' name='feedLinksBody'/>

</div>

</b:if>

<b:else/>

<b:loop values='data:posts' var='post'>

<b:if cond='data:post.allowComments'>

<b:if cond='data:post.feedLinks'>

<b:include data='post.feedLinks' name='feedLinksBody'/>

</b:if>

</b:loop>

</div>

</b:if>

</b:includable>

<b:includable id='backlinkDeleteIcon' var='backlink'>

</a>

</span>

</b:includable>

<b:includable id='feedLinksBody' var='links'>

<data:feedLinksMsg/>

<b:loop values='data:links' var='f'>

</b:loop>

</div>

</b:includable>

<b:includable id='postQuickEdit' var='post'>

<b:if cond='data:post.editUrl'>

</a>

</span>

</b:if>

</b:includable>

<b:includable id='comments' var='post'>

<b:if cond='data:post.allowComments'>

<h4>

<b:if cond='data:post.numComments == 1'>

1 <data:commentLabel/>:

<b:else/>

<data:post.numComments/> <data:commentLabelPlural/>:

</b:if>

</h4>

<b:loop values='data:post.comments' var='comment'>

<b:if cond='data:comment.authorUrl'>

<b:else/>

<data:comment.author/>

</b:if>

<data:commentPostedByMsg/>

</dt>

<b:if cond='data:comment.isDeleted'>

<b:else/>

</b:if>

</dd>

<data:comment.timestamp/>

</a>

<b:include data='comment' name='commentDeleteIcon'/>

</span>

</dd>

</b:loop>

</dl>

</p>

</b:if>

<b:if cond='data:post.showBacklinks'>

<b:include data='post' name='backlinks'/>

</b:if>

</div>

</b:includable>

<b:includable id='main' var='top'>

<b:include data='top' name='status-message'/>

<data:adStart/>

<b:loop values='data:posts' var='post'>

<b:if cond='data:post.dateHeader'>

</b:if>

<b:include data='post' name='post'/>

<b:if cond='data:blog.pageType == "item"'>

<b:include data='post' name='comments'/>

</b:if>

<b:if cond='data:post.includeAd'>

<data:adEnd/>

<data:adCode/>

<data:adStart/>

</b:if>

</b:loop>

<data:adEnd/>

</div>

<b:include name='nextprev'/>

<b:include name='feedLinks'/>

</b:includable>

</b:widget>

</b:section>

</div>

<b:section class='sidebar' id='right-sidebar' preferred='yes'>

<b:widget id='Image1' locked='false' title='' type='Image'>

<b:includable id='main'>

<b:if cond='data:title != ""'>

</b:if>

<br/>

<b:if cond='data:caption != ""'>

</b:if>

</div>

<b:include name='quickedit'/>

</b:includable>

</b:widget>

<b:widget id='Text1' locked='false' title='My Son' type='Text'>

<b:includable id='main'>

<b:if cond='data:title != ""'>

</b:if>

<data:content/>

</div>

<b:include name='quickedit'/>

</b:includable>

</b:widget>

<b:widget id='HTML3' locked='false' title='My Web Pet' type='HTML'>

<b:includable id='main'>

<b:if cond='data:title != ""'>

</b:if>

<data:content/>

</div>

<b:include name='quickedit'/>

</b:includable>

</b:widget>

<b:widget id='HTML2' locked='false' title='Please Leave Your Message' type='HTML'>

<b:includable id='main'>

<b:if cond='data:title != ""'>

</b:if>

<data:content/>

</div>

<b:include name='quickedit'/>

</b:includable>

</b:widget>

<b:widget id='HTML1' locked='false' title='Passers-by' type='HTML'>

<b:includable id='main'>

<b:if cond='data:title != ""'>

</b:if>

<data:content/>

</div>

<b:include name='quickedit'/>

</b:includable>

</b:widget>

<b:widget id='Text3' locked='false' title='My sites' type='Text'>

<b:includable id='main'>

<b:if cond='data:title != ""'>

</b:if>

<data:content/>

</div>

<b:include name='quickedit'/>

</b:includable>

</b:widget>

<b:widget id='Profile1' locked='false' title='About Me' type='Profile'>

<b:includable id='main'>

<b:if cond='data:title != ""'>

</b:if>

<b:if cond='data:team == "true"'>

<ul>

<b:loop values='data:authors' var='i'>

</b:loop>

</ul>

<b:else/>

<b:if cond='data:photo.url != ""'>

</b:if>

<b:if cond='data:showlocation == "true"'>

</b:if>

<b:if cond='data:aboutme != ""'><dd class='profile-textblock'><data:aboutme/></dd></b:if>

</dl>

</b:if>

<b:include name='quickedit'/>

</div>

</b:includable>

</b:widget>

<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'>

<b:includable id='main'>

<b:if cond='data:title'>

</b:if>

<b:if cond='data:style == "HIERARCHY"'>

<b:include data='data' name='interval'/>

</b:if>

<b:if cond='data:style == "FLAT"'>

<b:include data='data' name='flat'/>

</b:if>

<b:if cond='data:style == "MENU"'>

<b:include data='data' name='menu'/>

</b:if>

</div>

<b:include name='quickedit'/>

</div>

</b:includable>

<b:includable id='flat' var='data'>

<ul>

<b:loop values='data:data' var='i'>

<a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>)

</li>

</b:loop>

</ul>

</b:includable>

<b:includable id='menu' var='data'>

<b:loop values='data:data' var='i'>

</b:loop>

</select>

</b:includable>

<b:includable id='interval' var='intervalData'>

<b:loop values='data:intervalData' var='i'>

<ul>

<b:include data='i' name='toggle'/>

(<span class='post-count'><data:i.post-count/></span>)

<b:if cond='data:i.data'>

<b:include data='i.data' name='interval'/>

</b:if>

<b:if cond='data:i.posts'>

<b:include data='i.posts' name='posts'/>

</b:if>

</li>

</ul>

</b:loop>

</b:includable>

<b:includable id='toggle' var='interval'>

<b:if cond='data:interval.toggleId'>

<b:if cond='data:interval.expclass == "expanded"'>

</a>

<b:else/>

</a>

</b:if>

</b:includable>

<b:includable id='posts' var='posts'>

<b:loop values='data:posts' var='i'>

</b:loop>

</ul>

</b:includable>

</b:widget>

</b:section>

</div>

</div>

<b:section class='footer' id='footer'>

<b:widget id='HTML12' locked='false' title='' type='HTML'>

<b:includable id='main'>

<b:if cond='data:title != ""'>

</b:if>

<data:content/>

</div>

<b:include name='quickedit'/>

</b:includable>

</b:widget>

</b:section>

</div>

</div></div>

</body>

</html>