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.

Please continue reading...

First paragraph only...

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;'/> <!-- clear for photos floats -->
</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.

Please continue reading...

First paragraph only...

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.

Please continue reading...

First paragraph only...

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.

Please continue reading...

First paragraph only...