The Technical Thought Of You

Table Of Contents Widget: Label Sort Tweak

2008-12-13T19:14:00.000-08:00

The Table of Contents Widget is one of the most useful hacks/tweaks for Blogger or Blogspot blogs. This hack was created by Hans of Beautiful Beta and aims to show all posts in a "table-of-contents" format. Readers may see all the blog posts in one glance, have the entries filtered according to Labels; and have them re-arranged according to Post Title and Date. In this post, let's work on making the Category/Label sortable as well, shall we?

2 Ways To Install the Table Of Contents Widget.

For those who do not have this widget yet, there are basically two ways to install this. Below are the procedures, demo and installation instructions.

(1) Accessibility in ALL PAGES.

If you would like the ToC or Table of Contents accessible in all pages, check out the following instructions.

Installation Guide..
BlogToC Widget Released
by Hans, Beautiful Beta

PROS: Readers may view the ToC widget just above the blog posts. This makes it easier for readers to browse through the articles without leaving the currently loaded page.
CONS: This method is not advisable for a blogspot blog that has a heavy content.

Demo.
The Technical Thought Of You BETA

(2) Accessibility in ONE PAGE.

If you would like to create a shortcut on the sidebar or top navigation/menu and add a new post to hold this widget, read on.

Installation Guide.
A Beautiful Blogger Table Of Contents
by SBA, BP News and Tips

Demo1 (Top Navigation/Menu).
BP News and Tips
Demo2 (Sidebar Shortcut).
Destiny

PROS: This method is especially helpful to blogs that have more than 20 posts and contain heavy content as this prevents any performance issues on the readers' browsing experience.

Note from the Blog Author: I used to have it accessible in ALL pages but my site's load time slowed down due to the fetching of posts. I am now working on the latter procedure for this blog. For those who have lots of content on their blogs, I then recommend the second one for its advantages.

How To Sort Labels In The Table Of Contents Widget.

The sorting of LABELS involves editing/adding codes in the 4 sections of the .js (javascript file). Just follow this simple steps.

(1) Go to Beautiful Beta's blog post and view the code.
(2) Go to File. Save Page As. Save the blogtoc.js file.
(3) Open the downloaded file in NOTEPAD or TEXTPAD.

(4) Search for this line of code

for (var i=0; i < postTitle.length-1; i++) {

and add the following lines at the latter part as shown in the image far below:

if (sortBy == "labelasc") { if (postLabels[i] > postLabels[j]) { swapPosts(i,j); } }
if (sortBy == "labeldesc") { if (postLabels[i] < postLabels[j]) { swapPosts(i,j); } }

View Full Size

(5) Scroll down. Look for

function displayToc(filter) {

There are a series of conditions there. Right under the "datenewest" one:

if (sortBy == "datenewest") {
tocTool1 += ' (ascending)';
tocTool2 += ' (oldest first)';
}

add the following lines as shown in the image above:

if (sortBy == "labelasc") {
tocTool1 += ' (descending)';
tocTool2 += ' (newest first)';
}
if (sortBy == "labeldesc") {
tocTool1 += ' (ascending)';
tocTool2 += ' (newest first)';
}

(6) Look for this line.

tocTable += '<a href="javascript:allPosts();" title="' + tocTool3 + '">' + tocHead3 + '</a>'

replace this with:

tocTable += '<a href="javascript:toggleLabelSort();" title="' + tocTool3 + '">' + tocHead3 + '</a>';

(7) Scroll down. Search for:

function toggleDateSort() {

The conditions for the toggle of the DateSort is declared here. Right after the line comment - // end toggleDateSort, include the following as shown in the far below image.

function toggleLabelSort() {
if (sortBy == "labelasc") { sortBy = "labeldesc"; }
else { sortBy = "labelasc"; }
sortPosts(sortBy);
displayToc(postFilter);
} // end toggleLabelSort

View Full Size

(7) Save.
(8) Upload the .js to your server (or googlepages if you have one).

REMINDER. Do not forget to update your HTML code from:

<script src="http://home.kpn.nl/oosti468/downloads/blogtoc.js">

<script src="http://yourservername.com/blogtoc.js">

or

<script src="http://yourusername.googlepages.com/blogtoc.js">

As a reference, here is the complete code used on my test blog.

As a working example, check out:
The Technical Thought Of You BETA

Credits go to Hans of Beautiful Beta and Ramani of Hackosphere for creating and developing this amazing hack; Marg Choco of Turtle Soup for the Ethereal Substance where I got the CSS tweak; SBA of BP News and Tips for her excellent tutorial on ToC installation and Fransiska Ike of Destiny where I initially found out about the ToC sidebar shortcut.

Enjoy tweaking! ^_^

Improve Your Blog's Marketing Effectiveness With Website Grader

2008-11-30T19:46:00.000-08:00

Aside from the usual Blog Rankings, a way to gauge the progress of your blog's path to success is through its marketing effectiveness.

Marketing effectiveness is the quality of how marketers go to market with the goal of optimizing their spending to achieve good results for both the short-term and long-term. Wikipedia

In blogging, the principle is almost the same. The marketers are the readers/searchers. The market is the blogosphere. Their goal is to optimize their time to find the exact information they need in the fastest, most effective way possible.

There are several ways to determine your blog's marketing effectiveness. Websitegrader measures and explains each.

Website Grader Overview.

Website Grader is a free seo tool that measures the marketing effectiveness of a website. It provides a score that incorporates things like website traffic, SEO, social popularity and other technical factors. It also provides some basic advice on how the website can be improved from a marketing perspective.

This Blog's Website Grade and Report.

Let's take this blog as an example.

Grade.

Report.

View This Blog's Full Report

WebsiteGrader's Algorithm.

WebsiteGrader's algorithm uses a proprietary blend of over 50 different variables, including search engine data, website structure, approximate traffic, site performance and others. To be more specific, here are major variables used:

(1) On-Page SEO
(2) Off-Page SEO
(3) Blogosphere
(4) Social Mediasphere
(5) Converting Qualified Visitors to Leads
(6) Competitive Intelligence

Let's take a closer look at each point.

On-Page SEO.

On-Page SEO is the process of placing your selected keywords in the right places on your web pages. When we say keywords, these are the words used by web surfers to describe what they hope to find when performing a Web search. Choosing the right keyword to use for your blog is one of the biggest factor in attaining your website's visibility in the search engines/internet. This involves changing page titles, headings, content, and URLs to improve search engine rankings.

(a) Metadata.

Metadata tags allow you to tell the search engines what your web page is about. Once you defined what type of information you'd like the search engines to know about your website, place these meta tags right inside your document head. Below is the format:

<head>
<meta name='Description' content='type your website's description here' />
<meta name='Keywords' content='type your keywords here' />
</head>

Guidelines.
Maximum number for meta description: 150 characters
Maximum number for meta keywords: 10 keywords

To learn more, check out: Understanding the Magic of Meta-Data.

(b) Heading Summary.

The headings being referred here are the h1, h2, h3 tags that are embedded on your website.These heading tags help search engine spiders better understand the content on a page and what is most important. In blogs, headings are most commonly used in: (1) widget titles like Labels, Blog Archive, Recent Posts, Blogroll; (2) post titles

Images are a great way to enhance a website from a user's perspective. But since search engine crawlers cannot "see" images, alt attributes may be assigned to each picture to define its textual content. Below is the format:

<img src="enter image URL here" alt="type keyword or image description here">

(d) Interior Page Analysis.

WebsiteGrader looks at a few other pages on the website to see how well they are optimized. In blogs, if your site contains navigational menu, the menu's landing pages are the ones being analyzed for optimized keywords or description.

(e) Readability Level.

This score measures the approximate level of education necessary to read and understand the web page content. In most cases, the content should be made to be simple so that a majority of the target audience can understand it.

Off-Page SEO.

Off-Page SEO includes all the things you do to promote your website outside the design of the website itself. Getting more inbound links to your site, registering with directories relevant to your industry, and getting more pages into the search engine indexes are all parts of Off-Page SEO.

(a) Domain Info.

The principle here is that the longer your domain is registered, then the longer its age is. Since search engines consider domain "stability" when looking at the website's pages, this also serves as an indicator that the website is not a temporary spam site.

(b) Google Page Rank.

Here's Google's quick note about PR or Page Rank.

In essence, Google interprets a link from page A to page B as a vote, by page A, for page B. But, Google looks at more than the sheer volume of votes, or links a page receives; it also analyzes the page that casts the vote. Votes cast by pages that are themselves important weigh more heavily and help to make other pages important.

In short, getting links from high authority, relevant sites is one of the most effective way in improving your site's rank. But then, also consider the "outbound" (or outgoing) links these relevant sites have as this also has an impact on ranking. Quick example: Which is better to get links from? Page A that has PR of 5 but with 250 outbound links? or Page B that has PR of 2 but with only 10 outbound links?

To learn more, check out: The Importance of Google PageRank, A Guide For Small Business Executives

Personal Suggestion: It would be nice if they could also consider stats from other Ranking Tools such as the Trifecta of SEOMoz.

This number (i.e. google indexed pages) is the approximate number of the website's pages that have been stored in the Google index. Quick tip on blogs: The more often you update your blog, the better. This is because search engine spiders love to crawl new and updated content.

To manually check the number of your website's indexed site, go to Google. On the search bar, type:

site:yourdomain.com

To check when was the last time Googlebot crawled your site, go to Mypagerank.net's Googlebot last access

To learn how to make your blog search engine friendly, visit How To Make Your Blog Search Engine Friendly.

Personal Suggestion: It would be great if they could add other search engine stats such as those of Yahoo and MSN.

(e) Traffic Rank.

This is basically your Alexa Rank.

To improve your alexa rank and overall traffic, visit:
20 Quick Ways to Increase Your Alexa Rank
Increasing My Blog's Traffic
21 Tactics to Increase Your Site's Traffic

(f) Inbound Links.

This is the number of links that link to your site. Having links from authoritative resources on the Internet helps you rank higher in search engines since these links are an indication that your website is trustworthy and contains good content.

To manually check the number of your website's inbound links, go to Google or Yahoo or MSN. On the search bar, type:

link:yourdomain.com

To learn more about getting inbound links or most commonly known as backlinks, check out Did You Graduate From Link Building High School Yet?

(g) DMOZ Directory.

DMOZ, The Open Directory Project, is the largest and most comprehensive human-edited directory of the Web. It is constructed and maintained by a vast, global community of volunteer editors. The secret here is that you MUST submit your site to the most relevant, most specific category where it should fall under.

To learn more, visit: Quick Way to Get Listed in DMOZ.org

(h) Yahoo Directory.

The Yahoo! Directory is a web directory which rivals the DMOZ Open Directory Project in size. WebsiteGrader recommends that every business have a listing in the Yahoo! Directory.

To submit your blog to Yahoo Directory listing, visit this link.

(i) Zoom Info.

ZoomInfo is a business directory and search engine, with profiles on more than 37 million people and 3.5 million companies.

To submit your business blog/site to Zoom Info, go to Zoom Info website..

Blogosphere.

WebsiteGrader measures your website's visibility to the blogosphere. This variable scales your blog ranking in terms of Technorati authorities and reactions. This also outputs information such as the date when the last post was published, list of recent blog articles and their respective inbound links and number of diggs.

This metric is especially helpful for websites that are not yet blog-oriented. To learn why Businesses should consider Blogging as a marketing campaign, check out: 6 Reasons Every Small Business Should Be Blogging.

Quick Note: WebsiteGrader needs to update its "Dugg" Output information to yield exact results.

Personal Suggestion: It would be wonderful if they could also integrate other media statistics like those of StumbleUpon's.

Social Mediasphere.

This pertains to the Social Marketing presence of the website in terms of social bookmarks, networks and media. At the moment, the sites included in their algorithm are: delicious and digg.

To improve your social media visibility, submit your blog to the top social media sites.

Converting Qualified Visitors to Leads.

Visitors are good but you need to convert them to interested visitors so as to make them come back to your site regularly. Websitegrader has two major approach on this: through RSS feed and web forms.

(a) RSS Feeds.

RSS stands for "Really Simple Syndication" and it's intention is to allow people to share content across the internet easily and effectively. CommunitySEO

RSS is the newer, fresher means of promoting and marketing your website. Having one for your website helps a great deal, SEO included.

A good friend posted great info about RSS. Check out his post: RSS, Success in Directory Form.

(b) Conversion Form.

This is basically web forms that help the visitor contact or get in touch with you. Placing web forms such as feedback, suggestion, contact are valuable tools in attaining conversion.

Competitive Intelligence.

What's great about WebsiteGrader is that, you can actually compare your statistics with your competitor.

(a) Keyword Grader.

This shows your targetted keywords, estimated monthly search volume plus your website's rank on the specified word. Here's mine.
View Full Size

(b) Score Summary.

This displays your website grade, page/alexa/technorati ranks, number of google's indexed pages/backlinks, and delicious bookmarks.

You can easily keep track the progress of your website's grade through this feature. To learn more, visit this link.

So, wanna know your website's grade? If that's affirmative, visit Website Grader and start improving your blog's marketing campaign. ^_^

Thanks to Tehsplink where I initially found the widget, and to this Internet Marketing site where I learned that I could use this tool to find out if my blog is optimized for internet marketing and SEO.

Resources:
http://en.wikipedia.org/wiki/Marketing_effectiveness
http://www.marketingterms.com/dictionary/keyword/
http://blog.hubspot.com/blog/tabid/6307/bid/29/SEO-For-Small-Business-Executives-Understanding-The-Magic-Of-Meta-Data.aspx
http://htmlescape.compender.com/2008/01/raymonds-html-escaper.html
http://blog.hubspot.com/blog/tabid/6307/bid/45/The-Importance-of-Google-PageRank-A-Guide-For-Small-Business-Executives.aspx
http://mypagerank.net/service_gbla_index
http://www.bloggingwithsuccess.net/2008/11/how-to-make-your-blog-search-engine.html
http://www.doshdosh.com/20-quick-ways-to-increase-your-alexa-rank/
http://www.seomoz.org/blog/21-tactics-to-increase-blog-traffic
http://blog.hubspot.com/blog/tabid/6307/bid/4334/Did-You-Graduate-From-Link-Building-High-School-Yet.aspx
http://pagerankblogs.com/2007/02/03/quick-way-to-get-listed-in-dmozorg/
http://blog.hubspot.com/blog/tabid/6307/bid/1676/6-Reasons-Every-Small-Business-Should-Be-Blogging-Are-You-Missing-the-Boat.aspx
http://www.ebizmba.com/articles/social30
http://communityseo.com/forums/The-Importance-of-RSS-t150.html&view=findpost&p=209#entry209
http://ezinearticles.com/?RSS---The-Importance-of-RSS&id=569108
http://increasemyblogstraffic.blogspot.com/2008/11/rss-success-in-directory-form.html

20 Ways To Show You're Busy In YM

2008-11-29T12:16:00.000-08:00

Have you ever experienced having tons of tasks to do at a limited amount of time that you almost wish everyone will just leave you alone? Unfortunately, as much as you'd like to be unavailable, work and/or duty calls that you should at least be "visible" to be easily reached at any time.

Here are some of Yahoo Status messages I have modified and used to "indirectly" say I am very busy at the moment.

Photo Courtesy of Cybernetnews

Discreet.

(20) I'm on Mobile.
(19) Add request pending.
(18) On the phone desperately asking for solicitation

Less Discreet.

(17) Stepped out (and not coming back)
(16) (Flew) Away
(15) Im not here or there right now
(14) Not at home, Not at desk, Not in the office
(13) Be right back someday

Least Discreet.

(12) Idle for 3 years
(11) Out to lunch in Afghanistan
(10) Busy showing I am busy
(9) Do not disturb now. World at War!
(8) On vacation (and retirement)

(7) Invisible to everyone
(6) Offline

If and only if the above messages were not effective to drive your chatters away,

"Desperate times call for desperate measures."

(5) Limited or no connectivity.

(4) Bad request 400

(3) Server not found

View Full Size

(2) Unauthorized 401

View Full Size

(1) Forbidden 403

Thanks to Dean Hunt for his amazingly inspiring blog; Nathan and Mabel for the technical support. ^_^

Resources:
http://cybernetnews.com/wp-content/uploads/2008/05/yahoo-messenger-9.jpg
http://www.permadi.com/tutorial/httpCode/images/401.gif
http://blogs.microsoft.co.il/blogs/itaysk/WindowsLiveWriter/SharePointDesignerDataFormWebPartapostro_10B5C/400error_thumb.png
http://www.kirkbytimes.co.uk/images/newsimages/kirkbytimes_banned_nov_2003/403_message.jpg

The Singing Google Page Rank

2008-11-27T05:29:00.000-08:00

Initially found this link from Activated Tech Nerves's What if Page Rank is a song.

This video originated though from this amazingly funny, brilliantly creative site that explores the idea of a "Singing Google Page Rank".

So, have you ever thought what the Google Page Rank has to say if it could only sing? Hmmm, watch this video clip then.

Original Video by Dean Hunt

Code copied from Activated Tech Nerves

If the video would not play directly from your browser, you may check this link directly: If Google Pank Could Sing

If you would like to read more about the site and its author (which I highly recommend!), check out Dean Hunt's site - ".. because everyone is entitled to my opinion."

^_^

Resources:
http://activr.com/2008/11/20/singing-pagerank/

How To Open Multiple Links In Just One Click

2008-11-22T19:59:00.000-08:00

Don't you sometimes wish there is an easy way to open all links into new tabs when you visit a website/blog?

Wish no more because there is a very simple technique to solve the dilemna of continuously right-clicking these links.

The Solution: Snap Links.

Snap Links allows users to easily open multiple links in new tabs by drawing a box around them. Links can also be opened in new windows, new tabs on a new window, copied to clipboard, bookmarked or downloaded. Pedro Fonseca

How It Works.

Upon installation of this firefox add-on, you can easily select links to open by drawing a rectangle/box. Only main links are selected. What's good about this is that it requires only one click!

Below is a sample:

View Full Size

How To Install Snap Links.

(1) Go to SNAPLINKS firefox add-on page and install.
For version 1-3: Use this link.
For version 3.0.4: Use this instead.

NOTE: If you wish to install this in Firefox version 3.0.4, you may need to create an account/log in as this is an experimental add-on. On a personal note, I had it tested on 3.0.4 and it's worked!

(2) Restart Firefox.
(3) Go to your desired website/blog.
(4) Start drawing a rectangle/box using your mouse's right-click button.

How To Change The Settings Of Your Snap Links Add-On.

Default selection is set to use the right click button. You may configure to use left click instead, even change the rectangle box's colors by doing the following.

(1) From your browser's main toolbar, go to Tools. Choose Add-ons.
(2) Look for Snap Links. Click.
(3) Choose PREFERENCES / OPTIONS button.
(4) Change the settings as desired.

View Full Size

Note: The above image is the default window option for Firefox 1-3.

How SEO Works: The SEO Flowchart

2008-11-22T17:11:00.000-08:00

A flowchart is a graphic representation of how a process works, showing, at a minimum, the sequence of steps. It helps to clarify how things are currently working and how they could be improved.

Ever wondered how SEO works? Check out what Aaron Wall of SEOBook.com has to say on this matter:

View Full Size

To read more, visit SEOBook's The SEO Flow Chart.
^_^

Resources:
http://www.qaproject.org/methods/resflowchart.html
http://www.seobook.com/seo-flow-chart

ShowOffRankings: Blog Widget To Show Blog Rankings

2008-11-18T06:13:00.000-08:00

Ah, wouldn't you want to see how your blog fair in the blogosphere? Surely, one way or another, you must have wondered, at least once or twice, how well (or bad) your blog is doing in the blog world.

Blog Rankings.

This is the key to getting your site noticed on the web. The higher your ranking is, the higher the traffic your blog would mostly likely get. When you say traffic, that would be the amount of visitors and visits your site receives.

How Is This Measured.

There are several tools to use so you can measure your blog's ranking.The most popular ones are Page Rank and Alexa.

Page Rank.

Google page rank is the rank that is given to every website that is indexed by Google.The page rank numbers indicate how important each site is based on a number between zero and 10. A new site starts with a page rank of zero, and the largest, most important sites on the Internet have a 10.Google itself has a page rank of 10 while Yahoo has a nine.Suite101

More on Page Rank and how the ranking is computed:
Google Page Rank Basics

Alexa Rank.

The Alexa Rank is much like the Google Rank, with one main difference: it is exclusively based on page views, number of users and three months of historical data. SubmitSuite

More on Alexa, how it affects your blog and how to improve your ranking: What Is Alexa Ranking?

Aside from the mentioned, there are still other popular tools available like Compete and Technorati.

Compete.

Compete estimates site traffic and engagement metrics based on the daily browsing activity of over 2,000,000 U.S. Internet users. Compete applies a rigorous normalization methodology, leveraging scientific multi-dimensional scaling (by age, income, gender and geography) to ensure metrics are representative of the U.S. Internet population. Compete members are recruited through multiple sources, including ISPs, the Compete Toolbar and additional opt-in panels to ensure a diverse distribution of user types and to facilitate de-biasing across the data sources.Compete

More on Compete and how their ranking is computed:
Compete, Free Website Ranking And Analytics

Technorati Authority.

Technorati Authority is the number of blogs linking to a website in the last six months. The higher the number, the more Technorati Authority the blog has. Technorati Blog

More on Technorati and how to increase your authority:
Technorati Authority and Rank

Don't you sometimes wish you can put them all together in one simple and tidy badge/widget?

Thanks to ShowOffRankings, you now can.

ShowOffRankings.

ShowOffRankings is a widget that provides a simple and elegant representation of your site's rankings.

This currently includes:
Google Page Rank
Alexa Traffic Ranking
Compete Snapshot Rank
Technorati Rank

Live Demo:

How To Install ShowOffRankings.

Follow this simple steps.
(1) Go to ShowOffRanking home page.
(2) Enter domain in the domain bar.
(3) Check all rankings that you would like to include.

View Full Size

(4) Click GENERATE CODE. Upon clicking the button, two types of code will be shown.
a. Add the first code (CSS) before the closing tag of the document head:

</head>

b. Add the second code (JS) where you want the widget to be displayed.

NOTE: The PageRank detection algorithm doesn’t work on a lot of servers and is in fact against Google’s Terms of Service. For now, you need to specify your own PageRank. Jon Lee

To check for your own page rank, visit MyPageRank.Net

If the page rank doesnt automatically update on this widget, try clearing your cache/cookies and restart firefox.

More info about this widget:
ShowoffRankings - Not just for Wordpress

This Blog's Ranking and Credits.

Here's the result for my blog:

^_^

Let me take this opportunity to thank my very good buddy, Technomedic, for sharing the great news about this blog's Google PR Ranking. Thanks a lot, buddy! ^_^

After maintaining this blog for only a couple of months and not being that faithfully regular in posting, it came a surprise to know that this has a PR of 1 and an alexa ranking of 857127, woohoo! ^_^

I would like to extend my thanks to the first group of people who'd been with me since the start: technomedic, xjion, andri and luckylady

Thanks for the support: blackzero, raju, anurag, dave, everybodygeek, skicekegan, and TK; lando, copywriter, atenean, widgets for blogger, myblogpress

to all followers, rss subscribers, link partners, commentors.

to my RL friends/colleagues: crazymama, daddyprofessor, mitchteryosa; wendyang, kbladez, jhayghost.

thanks a whole bunch! ^_^

Resources:
http://onlinepublishing.suite101.com/article.cfm/google_page_rank_basics
http://www.submitsuite.com/blog/lesson-2-google-page-rank-and-alexa-rank-33
http://www.thenetfool.com/alexa-ranking/
http://blog.taragana.com/index.php/archive/compete-free-website-ranking-analytics/
http://technorati.com/weblog/2007/05/354.html
http://socialsourcecommons.org/tool/show/2702/
http://www.seomoz.org/blog/goodbye-page-strength-hello-trifecta-seomozs-latest-analysis-tool
http://www.jonlee.ca/showoff-rankings-not-just-for-wordpress/

How To Quickly Check What Slows Down Your Website

2008-11-15T23:05:00.000-08:00

You fairly have an idea on the loading speed of your website or blog. It may be performing well, but then again, it may not. If it's the latter, definitely, you may need to optimize your website or blog's load time. Question there is, how?

Before doing the how and checking for quick tips in speeding it up, you must learn WHAT slows it down in the first place.

This is where YSlow and Firebug come in.

QuickOverview.

Both are firefox add-ons. They are used in conjuction with each other.

Yslow.

YSlow analyzes web pages and tells you WHY they're slow based on the rules for high performance web sites.

Firebug.

With Firebug,

You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.

How It Works.

Once both add-ons are installed, YSlow begins to analyze the currently loaded page and generates:
(1) a grade based on each performance rule; and
(2) an overall grade obtained by the webpage.

Let's take this blog as an example:

View Full Size

What's great about this add-on is that, it gives recommendations on how to optimize your blog/website. Just click on each point to learn how.

Performance Rules.

Let's take a quick look at each point.

(1) Make Fewer HTTP Requests.

YSlow counts the number of HTTP requests made on the website.

View Full Size

YSlow Recommendations:
a. Two (2) CSS files/stylesheets
b. Three (3) JS files/javascript
c. Six (6) CSS background images

(2) Use a CDN.

CDN or Content Delivery Network is a collection of web servers, distributed across multiple locations, to deliver content more efficiently to users.

To put it simply, it is recommended to use a CDN service provider because the user's proximity to your web server (i.e. the server with the fewest network hops or the server with the quickest response time) has an impact on the response time.

YSlow Recommendations:
a. Akamai Technologies
b. Mirror Image Internet
c. Limelight Networks

If you cannot afford a proper CDN, check out these links that offer alternatives:
Add your server host to the list of "Known CDNs"
CoralCDN and other alternatives

(3) Add an Expires header.

Here is Yahoo's explanation on Expires header.

Web page designs are getting richer and richer, which means more scripts, stylesheets, images, and Flash in the page.

A first-time visitor to your page may have to make several HTTP requests, but by using the Expires header you make those components cacheable. This avoids unnecessary HTTP requests on subsequent page views.

Expires headers are most often used with images, but they should be used on all components including scripts, stylesheets, and Flash components.

This may only be applicable to blogs with custom domain. To implement this, check out this link's "how to": Edit .htaccess file

(4) Gzip components.

Compressing components greatly reduce the size of HTTP response by 70%. Gzip is the most popular and effective compression method at this time.

YSlow Recommendation:

Most web sites gzip their HTML documents. It's also worthwhile to gzip your scripts and stylesheets, but many web sites miss this opportunity. In fact, it's worthwhile to compress any text response including XML and JSON.

Image and PDF files SHOULD NOT BE GZIPPED because they are already compressed. Trying to gzip them not only wastes CPU but can potentially increase file sizes.

How to? Check this out: Edit .htaccess file

(5) Put CSS at the top.

All stylesheets should be placed at the document head, i.e. before the closing tag of head.:

</head>

As much as possible, try NOT to put stylesheets in the document body or near the bottom of the document as it prohibits progressive rendering in some browsers. It is for this reason that the user sometimes gets stuck with viewing a blank page.

(6) Put JS at the bottom.

Normally, we place all JS codes at the document head. Putting it at the bottom would make the loading of the header and css faster.

WARNING: There are a few guidelines in placing JS at the bottom. Wrong placement may cause the JS to break or worse, stop working.

Before making any move, you may:
(1) take one JS to the bottom at a time to check and debug; or
(2) check alternatives like using DEFER attribute or joining CSS and Javascript files together (for Wordpress/PHP hosted servers)

(7) Avoid CSS expressions.

The expression referred here is method that looks something like this:

background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );

where background color is being evaluated based on a Javascript expression and is set to load dynamically.

Avoid using CSS expressions as much as possible.

(8) Make JS and CSS external.

Call stylesheets/scripts externally? OR inline them in the front page?

Here's what Yahoo says about this matter:

The key factor, then, is the frequency with which external JavaScript and CSS components are cached RELATIVE to the number of HTML documents requested.

This factor, although difficult to quantify, can be gauged using various metrics.

If users on your site have multiple page views per session and many of your pages re-use the same scripts and stylesheets, there is a greater potential benefit from cached external files.

(9) Reduce DNS lookups.

Check out my grade below where I used picasaweb as the host of my images.

View Full Size

YSlow Recommendation:
At least 4 hostnames.

(10) Minify JS/CSS.

Minification is the practice of removing unnecessary characters from code to reduce its size thereby improving load times.

Quick tips:
a. remove comments
b. delete unneeded white space characters (i.e. space, newline, tab)
c. for CSS, use shorthand properties. instead of:

margin-top: 1px;
margin-right: 2px;
margin-bottom: 3px;
margin-left: 4px

try this,

margin: 1px 2px 3px 4px (top, right, bottom, left)

d. for js, use tools like JSMin and YUI Compressor

(11) Avoid Redirects.

This is basically using 301 and 302 status codes.

YSlow Recommendations:
Use alternatives like:
a. Alias and mod_rewrite if the two code paths are hosted on the same server; or
b. CNAME if there has been a domain name change

More information about CNAME:
Redirect with CNAME
CNAME Domain Redirect
Blogger CNAME redirect instructions

(12) Remove duplicate scripts.

Be mindful of the scripts embedded on your website. Check out mine's:

View Full Size

(13) Configure Etags.

ETags or entity tags are basically a mechanism to check for a newer version of a cached file.

To configure or turn off Etags, check out:
Website Optimization's Code:Configure or Eliminate ETags

They may be instances though when you have no control on the files that have ETags. Below is an example:

View Full Size

In such cases, you may either check the website's FAQ/support for possible resolutions or if you really feel this has a great impact on your website's speed, delete the components altogether and stick to only one or two.

How To Install and Run Firebug and YSlow Firefox Add-Ons.

(1) Go to Firebug add-on page and install.
(2) Go to Yslow add-on page and install.
(3) Restart Firefox.
(4) Go to your desired website.
(5) Double click YSlow icon. If it doesn't automatically run, you may click Performance or Stats or Components tab to begin.

View Full Size

Debugging YSlow's After Usage Errors

IF you will EVER encounter an "after usage" error (as I did) like missing scroll bars in the browser window (which may or may not be a result of conflict with other add-ons or resolution issues), follow these simple steps:
(1) Go to your Browsers Main Toolbar.
(2) Click Tools, choose Add-ons.
(3) Look for Firebug, choose Disabled.
(4) Restart Firefox.

Just enable the add-on if you need to use it. That should certainly solve it!

NOTE: To effectively use this add-on, make sure to clear all cookies and cache on your browser. Reloading the "already visited website/blog" and running YSlow FOR THE SECOND TIME or so forth may yield a higher result grade thus cannot be considered accurate.

Credits go to my great web designer guru, Kbladez. Thanks for sharing the add-ons' info. ^_^

For more Firefox add-ons, check out this fantastic post by my friend: Knowliz's Top 50 MUST HAVE Firefox Add-Ons

Resources:
http://developer.yahoo.com/yslow/
http://getfirebug.com/
http://developer.yahoo.com/performance/rules.html
http://www.thewebsqueeze.com/articles/yslow-going-from-f-to-a.html
http://htmlescape.compender.com/2008/01/raymonds-html-escaper.html
http://aciddrop.com/2008/01/03/automatically-join-your-javascript-and-css-into-a-single-file/
http://www.stevenhargrove.com/redirect-web-pages/
http://www.webmasterworld.com/forum23/3301.htm
http://www.webmasterworld.com/domain_names/3654331.htm
http://groups.google.com/group/blogger-help-troubleshoot/browse_thread/thread/39f4b79518613dfe/e476bcb6d5f25190?lnk=gst&q&pli=1
http://www.websiteoptimization.com/secrets/advanced/configure-etags.html

Add A Customized Related Posts Widget In Blogger

2008-11-12T05:56:00.000-08:00

Related Posts Widget is one of the MUST-HAVE widgets in a blog.This serves as a helpful guide to readers for topics that may be related to the current post/entry.

How It Works.

Generally, the widget is based on Category or Label. Once the blog author labeled the post (regardless whether it's single or multiple labels), all posts that fall under such category will be seen in the Related Posts Widget.

How To Check Your Website's Speed - The Easy Way

2008-11-09T01:17:00.000-08:00

One of the most important factor a blogger/website author should consider is their blog or website's download speed, i.e. the load time or the actual time being taken to download the whole web page.

Why?

Research around the world has shown that if your website does not load in under 8 seconds on a dial-up connection (56k modem) then a large percentage of your website visitors will leave and go somewhere else. The speed of your website has a direct impact on the number of website visitors that convert into a sale or an enquiry. Zeald.com

How To Check Your Website's Load Time, The Hard Way

One can check their website's load time using online tools such as:

Web Page Analyzer, or
Website Speed Check

Basically, with these online tools, just enter the website's URL and voila, the result ranges from how fast/slow the website loads to recommendations on improving the download speed.

To view more online website speed checkers, check out my post: Website Speed Checker

How To Check Your Website's Load Time, The Easy Way

One can easily "automate" or "simplify" the checking by following these simple steps.

NOTE: This is specifically for FIREFOX users only. ^_^

(1) Go to Fasterfox's page.

(2) Install Fasterfox 2.0.0 add-on.

(3) Restart Firefox.

(4) On the status bar, you'll see fasterfox icon.

(5) Go to your website/blog. Take a closer look at the fasterfox icon as it shows the Load Timer.

One great advantage of this add-on is that one can easily take note of the website's speed in just one glance. This add-on works on Firefox 1.5-2.0, Flock 1.1.

Special thanks to Saurav Bhaumik and Abhitech for the tip.

Resources:
http://fasterfox.mozdev.org/
http://www.zeald.com/Resources/Free+Tools/Website+Speed+Checker.html
http://ad1987.blogspot.com/2006/09/speeding-up-firefox.html#comment-7668632022615275806

How To Check For NoFollow,DoFollow Blogs - The Easy Way

2008-11-06T04:41:00.000-08:00

According to Wikipedia,

Nofollow is an HTML attribute value used to instruct some search engines that a hyperlink should not influence the link target's ranking in the search engine's index.

Simply put, if a website or blog has a NoFollow attribute (rel="nofollow") added on the links embedded on their site, this attribute would BLOCK search engines like Google, Yahoo and MSN (to name a few) from following these links. Links which may be in the form of Blogroll, Comments or Link Exchange.

How To Check For NoFollow/DoFollow Blogs, The Hard Way

You can check if the blog or website you're visiting supports NoFollow or DoFollow movement by doing the following steps.

(1) Go to the website/blog you'd like to visit.

(2) If you're a firefox user, click VIEW from the Menu Bar, go to PAGE SOURCE. (For IE users, choose SOURCE)

(3) Using your keyboard, Press CTRL + F.

(4) Type "nofollow" (without quotations), press ENTER.

IF it doesn't yield any result, congratulations because this means the blog/website you visited is a DOFOLLOW blog/website.

Another alternative is:
(1) Check any of the following:
a. blog/website's sidebar
b. ABOUT page
c. DISCLOSURE POLICY page
d. Comments form

(2) Look for either:
a. U COMMENT, I FOLLOW button

b.comments note

This blog is a DoFollow Blog so comment away!

How To Check For NoFollow/DoFollow Blogs, The EASY Way

NOTE: This is specifically for FIREFOX users only. ^_^

(1) Go to SearchStatus add-on page.

(2) Add to Firefox. Install.

(3) Restart Firefox.

(4) On the status bar, right click SearchStatus icon, check HIGHLIGHT NO FOLLOW LINKS

(5) Go to the website/blog you'd like to visit.
ALL NOFOLLOW LINKS WILL BE HIGHLIGHTED just like the image below.

Resources:
http://forums.digitalpoint.com/showpost.php?p=9337849&postcount=3
http://en.wikipedia.org/wiki/Nofollow
https://addons.mozilla.org/en-US/firefox/addon/321

How To Customize Your Blogger CommentLuv's Skin

2008-11-03T20:19:00.000-08:00

Want to personalize the default look of your newly installed commentluv plugin for blogger? Adjust the colors or skin to match your blog's theme?

Thanks to Andy Bailey for his kind and generous tips, and JS-Kit's Customization Guide, customizing your blogger commentluv's appearance is just a piece of cake.

How To Customize Blogger Commentluv's Skin

NOTE: BACKUP YOUR TEMPLATE!

(1) Go to Layout. Edit HTML.
(2) Search for this line of code:

<script src='http://js-kit.com/comments.js'/>

(3) Below this line, add the following.

<style type='text/css'>
.js-singleCommentBg{background-color:#1566a7; }
.js-singleCommentText{background-color:#ffffff; color: #000000; }
.js-singleCommentText a {color: #1566a7 !important; }
.js-OldCommentsWrapsmoothgray {background-color: #1566a7 !important;
border: 1px solid #eeeeee; }
.js-OldCommentssmoothgray {background-color: #ffffff;}
.js-TornPageDivider {background-color: #1566a7;}
.js-TornPageDividerTop {background-color: #ffffff;}
.js-TornPageDividerBottom {background-color: #ffffff;}
.js-CreateCommentArea {background-color: #2d2d2d; !important}
.js-CreateCommentFields {background-color:#000000; color: #ffffff; }
.js-CreateCommentFieldsWrap {background-color:#2d2d2d;border:1px solid #2d2d2d; }
</style>

(4) Save Template.
(5) View Blog.

Understanding The CSS Code.

The image below explains where each CSS class is applied.

click image to see full view.

Personalizing The Style to Match Your Blog's Theme.

Here are some tips to make the customization of your blogger commentluv's skin easier.

(1) Be sure to backup your template at all times. This is so you can restore old template in case something goes wrong.

(2) List down your blog's color scheme. Get the exact hexacode of the colors used on your blog. For reference, check out these websites:
500+ Named Colours with rgb and hex value
Web Source's Color Chart

(3) Take note of major CSS styles you can apply to personalize appearance. Some samples may be:
color
font-weight
font-size
border
padding
margin

For reference, visit W3School's CSS Tutorials

How I Styled My Blogger Commentluv's Appearance.

Here is the CSS code I used for this blog.

<style type='text/css'>
.js-singleCommentBg{background-color:#1566a7; }
.js-singleCommentText{background-color:#ffffff; color: #000000; padding: 10px}
.js-singleCommentText a {font-weight:bold; font-size: 12px; color: #1566a7 !important; }
.js-singleCommentText a:hover {font-size: 16px; color: #99cc00 !important; }
.js-singleCommentName { color:#ffffff; }
.js-singleCommentDate {color:#ffffff; }
.js-commentFieldNote {color:#ffffff; }
.js-OldCommentsWrapsmoothgray {background-color: #1566a7 !important;
border: 1px solid #eeeeee; filter:alpha(opacity=85); -moz-opacity: 0.85; opacity: 0.85; }
.js-OldCommentssmoothgray {background-color: #ffffff;}
.js-TornPageDivider {background-color: #1566a7;}
.js-TornPageDividerTop {background-color: #ffffff;}
.js-TornPageDividerBottom {background-color: #ffffff;}
.js-CreateCommentArea {background-color: #2d2d2d; !important}
.js-CreateCommentFields {background-color:#000000; filter:alpha(opacity=70); -moz-opacity: 0.70; opacity: 0.70; color: #ffffff; font-weight: bold;}
.js-CreateCommentFieldsWrap {background-color:#2d2d2d;border:1px solid #2d2d2d; }
</style>

Result:

click image to see full view.

How To Change The Entire Design Of Your Blogger Commentluv

Based on JS Kit's Comment Customization Guide, you may change the entire design by doing this:

(1) Find the following codes:

<div class='js-kit-comments' permalink=''/>
<a expr:href='data:post.url' id='jskit-commentRSS'>RSS </a>
<script src='http://js-kit.com/comments.js'/>

(2) Replace them with

<div class="js-kit-comments" style="display: none">


<div class="js-singleComment">
<div class="js-singleCommentBg">
<div class="js-singleCommentAvatar"></div>

<div class="js-singleCommentINFO">
<div class="js-singleCommentName" style="clear:both">{Name}</div>
<div class="js-singleCommentDate">{Date}</div>
<div class="js-singleCommentDate">{Time}</div>
</div>
<div class="js-singleCommentRating" style="display:none;"></div>
<div class="js-singleCommentText">{Text}</div>
<div class="js-singleCommentKarmaComMod">
<div class="js-singleCommentKarma">{Label:Like this comment?}
[<a class="js-singleCommentKarmaY">{Label:yes}</a>]
[<a class="js-singleCommentKarmaN">{Label:no}</a>]
<span class="js-singleCommentKarmaScore">({Label:Score}:
<span class="js-singleCommentKarmaValue">0</span>{Label:byVotes}
<span class="js-singleCommentKarmaVoters">0</span>)
</span>
</div>
<div class="js-singleCommentComMod">{Label:Mark as}
[<a class="js-singleCommentComModMark">{Label:offensive}</a>]
</div>
<div class="js-singleCommentCtls">
<span class="js-singleCommentReplyable">[<a class="js-singleCommentReply">{Label:reply}</a>]</span>
<span class="js-singleCommentDeletable">[<a class="js-singleCommentDelete">{Label:delete}</a>]</span>
<span class="js-singleCommentModeratable">[<a class="js-singleCommentModerate">{Label:moderate}</a>]</span>
</div>
</div>
<div style="clear: both"></div>
</div>
</div>


<div class="js-CreateComment">
<div class="js-CreateCommentBg">

<div class="js-commentFieldSubject">{Label:leaveComment}</div>
<div class="js-commentFieldLabel">{Label:nameLabel}</div>
<div><input name="js-CmtName" SIZE=32 /></div>
<div class="js-commentInputEmail">

<div class="js-commentFieldLabel">{Label:emailLabel}
<div class="js-commentFieldNote">{Label:emailNote}</div>
</div>
<div><input name="js-CmtEmail" type="email" SIZE=32 /></div>
</div>
<div class="js-commentFieldLabel js-commentRatingDisplay">{Label:ratingLabel}</div>
<div class="js-commentFieldRating js-commentRatingDisplay"></div>

<div class="js-commentFieldLabel">{Label:commentLabel}</div>
<div><textarea name="js-CmtText" ROWS=4 COLS=32></textarea></div>
<div class="js-commentOpenID">{Label:openidLogin}
<span class="js-commentOpenIDURL"></span>[<a class="js-commentOpenIDLogout">{Label:logout}</a>]
</div>
<div class="js-commentInputOpenID">
<div class="js-commentFieldLabel">{Label:openidLogin}
<div class="js-commentFieldNote">{Label:openidNote}</div>
</div>
<div><input name="js-CmtOpenID" type="openid" SIZE=32 /></div>
<div class="js-OpenIDError"></div>
</div>
<div class="js-commentAvatarArea"></div>

<div class="js-CCButtons"><input type="submit" name="js-Cmtsubmit" class="js-CmtButton" VALUE="{Label:submit}"><input type="reset" name="js-Cmtcancel" class="js-CmtButton" VALUE="{Label:cancel}"><span class="js-CCMore">[<a class="js-commentMore">{Label:more}</a>]</span>
</div>
<div class="js-poweredBy js-antispamBy">(<a href="http://js-kit.com/comments?wow">Powered by JS-Kit</a>)</div>
<div class="js-poweredBy js-antispamBy">(Spam filtering by <a href="http://akismet.com/">Akismet</a>)</div>
</div><br clear="all" /></div>
</div>
<a expr:href='data:post.url' id='jskit-commentRSS'>RSS </a>
<script src="http://js-kit.com/comments.js"></script>

(3) Below the last line:

<script src="http://js-kit.com/comments.js">
</script>

add your CSS code.

<style type='text/css'>
code goes here
</style>

NOTE OF ADVICE: Unless you are very familiar with CSS, kindly take one line at a time when tweaking the code above. This is to avoid messing up the entire code.

If you haven't installed Blogger Commentluv yet,
try it now by going to:
Commentluv's Download Page for Blogger Platform
How To Install CommentLuv On Your Blogspot Blog

If you are using other platforms, check out:
Andy Bailey's New Platforms Supported for Commentluv

To learn how to further customize your commentluv plugin aside from styling the skin, visit:
JS Kit's Comment Customization Guide

Happy tweaking! ^_^

Resources:
http://www.fiddyp.co.uk/new-platforms-supported-for-commentluv/
http://www.commentluv.com/download/blogger-commentluv/
http://js-kit.com/comments/custom.html
http://cloford.com/resources/colours/500col.htm
http://www.w3schools.com/Css/css_syntax.asp
http://www.web-source.net/216_color_chart.htm
http://www.w3schools.com/Css/css_font.asp
http://www.w3schools.com/Css/css_padding.asp
http://www.w3schools.com/Css/css_border.asp
http://www.w3schools.com/Css/css_margin.asp
http://www.w3schools.com/Css/default.asp
http://htmlescape.compender.com/

25 Things You Should NOT Do With A Computer

2008-11-03T19:47:00.000-08:00

I have stumbled upon this interesting and funny article posted in Lando's blog about 25 Things You Should NOT Do With A Computer.

Just would like to share as this made me smile and chuckle. Read on.

25 Things You Should NOT do With A Computer

1. Try to open the tower without proper training.
2. Give your monitor a bath.
3. Use your floppy drive as a toaster.
4. Insert foreign objects into the CD-ROM drive.
5. Throw your laptop out the window.
6. Use a saw to trim new memory into the size you need.
7. Play with magnets near your hard drive.
8. Talk to it and expect results.
9. Attempt to connect to the Internets.
10. If your computer freezes, don’t thaw it in the oven.

Read the remaining 15 items here.

Question there is, which among these 25 were you guilty of? ^_^

Create Expandable Titles in Blogger Label Page

2008-11-02T07:13:00.000-08:00

If you have read and liked this post: How To Create Expandable Read More In Blogger, you may also be interested on doing the same kind of hack for your own LABEL or ARCHIVE Pages.

LABEL Page. The Landing Page upon clicking your label or category links. The format being: http://yourblog.blogspot.com/search/label/labelname.

ARCHIVE Page. The Landing Page upon clicking your weekly or monthly or yearly archives. Sample format for a monthly archive:
http://yourblog.blogspot.com/yyyy_mm_01_archive.html.

Click the below samples of Expandable Titles in my Label and Archive Pages.

Label Page: Blogger Tweaks
Archive Page: October 2008

How is this done? Thanks to Dynamic Drive's Accordion Content Script, this can be implemented in Blogger.

Before you start editing your template, make sure to
(1) DOWNLOAD
ddaccordion.js
jquery-1.2.6.pack.js
(2) Right click and choose "Save As"
(3) Upload to your site (e.g. Google Pages if you have one).

Moving on.

How To Create Expandable Titles In Blogger Label/Archive Pages

NOTE: BACKUP YOUR TEMPLATE!

(1) Go to Layout. Edit HTML.
(2) Before the closing tag of

]]></b:skin>

insert this CSS code:

.technology{
cursor: hand;
cursor: pointer;
font: bold 14px Verdana;
margin: 10px 0;
}

.openlanguage{
color: #99cc00;
}

.closedlanguage{
color: #99cc00;
}

(3) Before the closing tag of

</head>

insert these javascript codes:

<script type="text/javascript" src="http://yourblog.googlepages.com/
jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src=
"http://yourblog.googlepages.com/ddaccordion.js">
/*********************************************
* Accordion Content script- (c) Dynamic Drive DHTML
code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of
DHTML scripts
* This notice must stay intact for legal use
*********************************************/
</script>

NOTE: Please note the bold-faced texts above and make sure that
each was uploaded to your personal servers (i.e. googlepages).
http://yourblog.googlepages.com/jquery-1.2.6.pack.js
http://yourblog.googlepages.com/ddaccordion.js

(4) Right after the last line of code in item/step number 3,
add this lines:

<script type="text/javascript">
//Initialize first demo:
ddaccordion.init({
headerclass: "mypets", //Shared CSS class name of
headers group
contentclass: "thepet", //Shared CSS class name of
contents group
revealtype: "mouseover", //Reveal content when user
clicks or onmouseover the header? Valid value: "click"
or "mouseover"
mouseoverdelay: 200, //if revealtype="mouseover",
set delay in milliseconds before header expands
onMouseover
collapseprev: true, //Collapse previous content (so
only one open at any time)? true/false
defaultexpanded: [0], //index of content(s) open by
default [index1, index2, etc]. [] denotes no content.
onemustopen: false, //Specify whether at least one
header should be open always (so never all headers
closed)
animatedefault: false, //Should contents open by
default be animated into view?
persiststate: true, //persist state of opened contents
within browser session?
toggleclass: ["", "openpet"], //Two CSS classes to be
applied to the header when it's collapsed and
expanded, respectively ["class1", "class2"]
togglehtml: ["none", "", ""], //Additional HTML added
to the header when it's collapsed and expanded,
respectively ["position", "html1", "html2"] (see docs)
animatespeed: "fast", //speed of animation: integer
in milliseconds (ie: 200), or keywords "fast",
"normal", or "slow"
oninit:function(expandedindices){ //custom code to
run when headers have initalized
//do nothing
},
onopenclose:function(header, index, state,
isuseractivated){ //custom code to run whenever a
header is opened or closed
//do nothing
}
})
//Initialize 2nd demo:
ddaccordion.init({
headerclass: "technology", //Shared CSS class name of headers group
contentclass: "thelanguage", //Shared CSS class name of contents group
revealtype: "click", //Reveal content when user clicks or
onmouseover the header? Valid value: "click" or "mouseover"
mouseoverdelay: 200, //if revealtype="mouseover",
set delay in milliseconds before header expands onMouseover
collapseprev: false, //Collapse previous content (so
only one open at any time)? true/false
defaultexpanded: [], //index of content(s) open by
default [index1, index2, etc]. [] denotes no content.
onemustopen: false, //Specify whether at least one header
should be open always (so never all headers closed)
animatedefault: false, //Should contents open by
default be animated into view?
persiststate: false, //persist state of opened
contents within browser session?
toggleclass: ["closedlanguage", "openlanguage"],
//Two CSS classes to be applied to the header when
it's collapsed and expanded, respectively ["class1",
"class2"]
togglehtml: ["prefix", "<img
src='http://i13.tinypic.com/80mxwlz.gif' /> ",
"<img src='http://i18.tinypic.com/6tpc4td.gif'
/> "], //Additional HTML added to the header
when it's collapsed and expanded, respectively
["position", "html1", "html2"] (see docs)
animatespeed: "fast", //speed of animation: integer
in milliseconds (ie: 200), or keywords "fast",
"normal", or "slow"
oninit:function(expandedindices){ //custom code to
run when headers have initalized
//do nothing
},
onopenclose:function(header, index, state,
isuseractivated){ //custom code to run whenever a
header is opened or closed
//do nothing
}
})
</script>

(5) After adding the javascript, search for this one.

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

Depending on your template, there may be two or three
occurences in the code. To avoid confusion, look for the one
that is IMMEDIATELY AFTER the below code:

<data:post.dateHeader/>

(6) Upon finding the correct one, replace this line

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

with this one:

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<div class='technology'>
<a expr:href='data:post.url'><data:post.title/></a></div> <p style='padding-left:20px; font-size:9px;'> <a expr:href='data:post.url'>» Click here to go to the entry/page</a> </p>
<div class='thelanguage'><data:post.body/></div>
<b:else/>
<p style='padding-left:23px; color:#7AA200; font-size:12px; font-weight:bold;'/>
<b:include data='post' name='post'/>
</b:if> <b:else/>
<p style='padding-left:23px; color:#7AA200; font-size:12px; font-weight:bold;/>
<b:include data='post' name='post'/>
</b:if>

Bold faced texts are the parts which may be customized according to your preference and template.

(6) To edit the textbox found at the Label
Page, look for this code (There were two occurences of
these. Just add to both):

<data:navMessage/>

replace them with your own. Example of mine is:

<p style='color:#000000;
font-variant:small-caps;font-weight:bold;font-size:14
px;padding-left:20px;
text-align:left;'>Note:</p><p
style='color:#000000;
font-weight:bold;padding-left:20px;text-align:left;pad
ding-right:10px'> Click on either <a href='#'
style='text-decoration:none; font-variant:small-caps;
color:#99cc00'>[show]</a> or "post
title" to see ENTRY PREVIEWS of a chosen
category. Click on the text : <a href='#'
style='text-decoration:none; font-size:9px;
color:#1566a7'> » Click here to go to the
entry/page </a> to see each in full page.
Thanks!</p>

(7) Save Template.
(8) View Blog.

If you feel like needing to style your titles, landing pages, even the textbox and borders, feel free to leave a note/message here.

Happy tweaking!

Resources:
http://www.dynamicdrive.com/dynamicindex17/ddaccordion.htm
http://htmlescape.compender.com/

Create Expandable Read More In Blogger

2008-11-02T05:46:00.000-08:00

Don't you sometimes wish your blog posts can easily expand/collapse contents on-click, for easy viewing? You have searched the net for simple installations thereby you tried, and tried, until your template died due to all these trials and errors but nada. Zilch. No Avail.

If you ever experienced this dilemma (like I woefully did), think not. Worry not.

Personally speaking, this has got to be the simplest, most uncomplicated tweak I've found on the web as this only involves three simple steps.

Put a script on the document head, replace a few lines of codes on the template, adjust the settings and voila! Expandable/Collapsible Read More In Blogger.

I had mine installed just today and it only took 5 minutes! Amazing! Forgive my babbles, I'm just too happy coz it worked on my blog. ^_^

The tweak came from Trik-Tips and thanks to Andri, the code was translated in English. What's good about this is that, the javascript is only 2KB!

Demos may be found at The Technical Thought Of You and Sharing Everyone's blogs.

Want to learn how to add a "read more" with accordion effect on your blog?

Check out the step by step procedure in
Sharing Everyone's How to Create Read More.

Resources:
http://trik-tips.blogspot.com
http://klik-share.blogspot.com/2008/09/how-to-create-read-more.html

CommentLuv for Blogger Now Live!

2008-10-26T23:30:00.000-07:00

CommentLuv enables you to reward your blog readers by leaving a titled link to their last post automatically whenever they comment thus encouraging more comments by more people on more posts! CommentLuv.com

As we all know, commentluv feature was initially available in Wordpress blogs as a plugin. At first, it was designed in a way that it would automatically retrieve the commentator's last blog post. Last September, Andy Bailey released his AJAX version where the commenter can then choose which among the posts would he/she prefers to display.

It's getting better and so much friendlier! Many blogspot authors, including your truly, have been anxiously waiting for a blogspot release version. And there was one. On that same month (i.e. September), Andy Bailey posted an option for Blogspot owners to install Commentluv. This option though requires owners to use Haloscan commenting system in their blogger blogs.

Although it may be a little limiting as one needs to signup in Haloscan first before one can use Commentluv in Blogspot, personally, I found the idea a little too tempting. ^_^

Well now, worry no more as Andy Bailey did it again. With the help of JS-kit commenting system, installation of BLOGGER COMMENTLUV has never been SO easy!

Here is a live demo of how BLOGGER COMMENTLUV works for blogspot blogs.

How To Install CommentLuv In Blogger.

Visit CommentLuv For Blogger / Blogspot Blogs page and follow the step by step procedure.

Supported Platforms

Oh yes. Not only does it support Blogger now. It also works on Dotclear and Typepad. Check out Andy Bailey's New Platforms Supported for Commentluv post for more info.

How cool can this be? ^_^

On my side, I may need to work on my XML template first before this can be fully integrated in my blog. Will post a more detailed entry once I had it installed in mine.

Meanwhile, why not give it a try on yours. If you find the BLOGGER COMMENTLUV integration in Do I Have To Spell It Out blog real cool, wait till it works on your own blog. ^_^

Resources:
http://www.fiddyp.co.uk/a-commentluv-option-for-blogspot-owners/
http://www.fiddyp.co.uk/commentluv-wordpress-plugin/
http://js-kit.com/comments/blogger.cgi
http://hollyjahangiri.blogspot.com/2008/10/sunday-stupidity.html
http://www.fiddyp.co.uk/new-platforms-supported-for-commentluv/
http://www.commentluv.com/wp-content/uploads/commentluv-blogger.gif

Create Multiple Homepages In Firefox

2008-10-26T10:02:00.000-07:00

Mozilla Firefox is one of the most popular and friendliest browsers on the web. Its functionality is hard to beat as there are lots of useful and cool variety of add-ons one can choose to install.

Didn't you ever wonder if its possible to have multiple homepages in firefox?

Wonder no more as the answer to that is... yes. It is possible.

Thanks to AbhiTech post, the procedure is so simple. It only involves using a pipeline (|) and voila, multiple homepages in an instant.

Wanna learn how? Check out AbhiTech's Multiple Homepages in Firefox.

Add Nice Tooltips using Nice Titles in Blogger

2008-10-18T20:52:00.000-07:00

Tooltips are small boxes that appear when you roll over an icon or text that contains a brief text message identifying the object. Below are examples.

Roll over your mouse on the text.

Rollover me!

This is an image that shows tooltip.

With Nate's Nicer Titles, you can easily customize the default tooltips on your blog. His version of tooltip is pretty nice to look at. Moreover, this is by far, the easiest to install in blogger.

How It Works.

Hide Sidenotes

Nate's Nicer Titles are automatically shown in all HTML elements that have TITLE attributes. These TITLE attributes can be applied to links, images and other kinds of elements.

Example code:

<a href='http://technicaldotcom.blogspot.com/' title='Home: The Technical Thought Of You'><img alt='home' height='64' src='http://lh5.ggpht.com/techniquealtechie/SMwVx4qtIwI/AAAAAAAAASg/K7uXHWd-ER0/cssdockmenublack-home3.jpg' width='64'/></a>

Result:

What's great about Nate's Nicer Titles, it also works on image maps!

Example code:

<img border="0" usemap="#imap_35" alt="subscribe" width="223" src="http://lh4.ggpht.com/techniquealtechie/SMaR8GEFL_I/AAAAAAAAALc/NSL311-zAD8/subscribe7.jpg" height="160"/>
<map id="imap_35" name="imap_35">
<area shape="rect" coords="141,34,219,100" alt="Subscribe to RSS" href="http://feeds.feedburner.com/technicaldotcom" target="_blank" title="Subscribe to RSS"/>
</map>

Result:

How To Add Nicer Titles in Blogger.

Part One.

(1) DOWNLOAD this zipped file (right click and choose "Save As")
(2) uncompress or unzip.
(3) upload "nicetitle.js" and "nicetitle.css" to your site (e.g. Google Pages if you have one).

Part Two.

NOTE: BACKUP YOUR TEMPLATE!

(1) Go to Layout. Edit HTML.
(2) Before the closing tag of

</head>

insert the following code:

<src="http://yourgooglepageusername.googlepages.com/nicetitle.js" type='text/javascript'></script>
<link rel="stylesheet" href="http://yourgooglepageusername.googlepages.com/nicetitle.css">

(3) Save template.
(4) Create a new post.
(5) To use the customized tooltip on texts, type a text link.

Example:

<a href="URL here" title="put your tooltip message here">Read Me!</a>

(6) To use the customized tooltip on images, insert an image link.

Example:

<a href="URL here" title="put your tooltip message here"><img src="URL of the image here"></a>

(7) Publish Post.
(8) View Blog.

How To Make Nice Titles Work On Image Maps.

If you would like to make it work on image maps just like how it worked on my SUBSCRIBE section, we just need to make a little tweak.

(1) make a backup copy of "nicetitles.js". keep it somewhere safe. ^_^
(2) open the original "nicetitles.js" in notepad or textpad.
(3) before this code:

addEvent(window, "load", NiceTitles.autoCreation);

insert this line of script:

function niceTitlesOnAreaElements(){
var niceTitle = new NiceTitles("<p class=\"titletext\">attr(nicetitle)? <span class=\"accesskey\">[attr(accesskey)]</span>?</p><p class=\"destination\">attr(href)</p>", 600);
niceTitle.addElements(document.getElementsByTagName("area"), "title");
}
addEvent(window, "load", niceTitlesOnAreaElements);

(4) Save.
(5) Upload the edited "nicetitles.js" to your site.

To learn more on how to create image maps, kindly check out my post:
Image Mapping and Online Image Mappers

Enjoy tweaking!

Resources:
http://neo.dzygn.com/archive/2003/12/nicer-titles
http://neo.dzygn.com/downloads/code/nicetitle.zip
http://www.web-graphics.com/mtarchive/000778.php#chatty001219
http://htmlhelp.com/reference/html40/attrs.html
http://www.kryogenix.org/code/browser/nicetitle/
http://htmlescape.compender.com/2008/01/raymonds-html-escaper.html

How To Ask Google To Reconsider Your PR

2008-10-16T06:49:00.000-07:00

Hide Sidenotes

Google Dance: A period of time when Google indexes are updated which often results in fluctuations in the index side and some noticeable changes in search engine result positions.

With all the google dance happening once in a while, don't you sometimes wish you can request Google to reconsider your Page Rank?

Bloganol has the step-by-step procedure on how to do this.

Check out this article:
How to request Google for your Blog's PR reconsideration?

Resources:
http://www.seoglossary.com/cat/G#632
http://www.techterms.com/definition/index
http://www.bloganol.com/2008/10/how-to-request-google-for-your-blogs-pr.html

How To Create Animated Handwritten Signatures

2008-10-12T03:11:00.000-07:00

Have you ever wondered how to create an animated text that looks like it was being handwritten?

Thanks to Fence Post's tutorial, you can easily create one using GIMP.

Hide Sidenotes

The GNU Image Manipulation Program, or GIMP, is a free raster graphics editor used to process digital graphics and photographs. It is often used as a free software replacement for Adobe Photoshop; however, it is not designed to be a Photoshop clone. Wikipedia

It is light-weight. Easy to use. You can create animated GIFs too!

You can download the GIMP software from these sites:
GIMP for Windows
GIMP for MAC OS X
GIMP for Linux

For installation instructions, check out these articles:
How to Install GIMP on Windows XP
How to Install GIMP on MAC OS X 10.5.2 or greater
How to Install GIMP 2.6 on Linux

Once you have GIMP installed in your system, you are now ready to create animated handwritten texts or signatures.

How to Create Animated Signatures using GIMP

Part One.
(1) Open GIMP. Go to FILE > NEW. Set the image size. (ex. 640x480).
(2) Click on the TEXT ICON, choose your desired font, size, color. Click on the paint area and add your text.

(3) Go to your layer window. Right click on the text layer (i.e. Enjoy!). Choose ALPHA TO SELECTION.
(4) This is how your image would look like afterwards.

(5) With the text selection still active, go back to the layer window, hide the text layer and choose background. Your image will now look like this:

Part Two.
(1) Set foreground color with anything you want.
(2) Grab the brush (or Draw in Ink). Adjust the brush size as desired. Add a dab of color on a portion of the first letter of your word.

(3) On the layer window, click Duplicate Layer. Add another dab of color in continuation of the portion you have colored in the previous step.

(4) Repeat STEP 3 over and over again until you have colored each letter of your word.

Part Three.
(1) Go to the layer window. Right-click the TEXT LAYER (i.e. Enjoy!), choose DELETE.
(2) Go to FILTER > ANIMATION > PLAYBACK.

Part Four.
(1) Go to FILE > SAVE or SAVE AS. Choose GIF as File type.
(2) On the EXPORT FILE Message box, select SAVE AS ANIMATION. EXPORT.

(3) Choose your desired speed. Default is 100 ms. Click OK.

Here is the result.

Notes:
If you'd like to have a different background color (besides white), fill in the background with the desired color right after STEP 1 of PART 1.
You may crop your image by going to the layer window, choosing the bottom-most layer, and clicking IMAGE > CROP.

If you're having difficulty following this method, check out how Fence Post did it.

Resources:
http://en.wikipedia.org/wiki/GIMP
http://fence-post.deviantart.com/art/Handwritten-Text-in-GIMP-36791055
http://graphicdesign.learnhub.com/lesson/video/115-how-to-install-gimp-on-windows-xp
http://darwingimp.sourceforge.net/guides/install_leopard/
http://phorolinux.com/how-to-install-gimp-26-on-linux.html

5 Tips to Create An Effective Blog Post

2008-10-11T11:20:00.000-07:00

No doubt that every blogger in the blogosphere wishes to have his/her entries read, enjoyed, appreciated by his/her readers. At some point, maybe some only wish to make their readers feel what they, the blog authors, feel about the topic. Nevertheless, it all boils down to one thing. When one person blogs, sooner or later, one way or another, there will always be someone out there who would read what you've written. (unless of course, you opted to limit the viewers of your blog to no one but yourself ^_^)

Here are some tips I've personally organized in creating effective blog posts or entries.

(1) TITLE

-Create catchy titles. As much as possible, use W5H. WHO. WHAT. WHERE. WHEN. WHY. HOW. Why Blogs have No Traffic Policemen. How To Earn A Million Dollar In Blogging. From Which Planets Do Hackers Come From. What Kind Of A Homo Sapien Are You. Catchy. Something that would capture everyone's interest.

-Numbered List. Include Numbers in Title. Numbers signify ranks.
The Top 40 Free AJAX and Javascript Codes for Web Designers. 53 CSS Techniques You Couldn't Live Without.

-Use adjectives.
10 Finger Licking Linux Desktop Themes. 30 Exceptional CSS Techniques and Examples.

-Add some emotion. Humor. Drama. You name it.
The Most Overused Word on the Internet. Confessions of A Broken Microchip. My Big Gutsy Geek Wedding.

-Think like Search Engines. Be Friendly!
Use common words that would most likely yield search engine results. Instead of using "Featuring: GMAIL Notifiers", why not try "How To Open Multiple GMAIL Accounts" instead. For online users who are unaware of the add-on name, they would more or less tend to type "open multiple gmail accounts" in Google or Yahoo to gather information.

(2) CONTENT

-is the king! Make sure that your content is really worth spending time to read on. Check out the web for writing tips, Do's and Dont's.

-Be original. Creativity is the key. As blog press suggested, do a niche topic research for creative content.

-Think of ways on how readers can relate to your posts. Make them participate. Add a hanging question in the end as needed. "How about you? Which one works best for you?" "Are you in or out?"

-Add your targeted keywords on the main content. When we say keywords, these are the words that would help search engines find your post over billions, zillions of published entries in the blogosphere. If your topic is about "Customizing a Blogger Widget", add words like "add background color", "put border" or any phrases that would define what kind of customization were you referring to.

-Create an element of surprise. Stun the readers with a "plot" twist.

(3) IMAGE/ALT TAGS

-Find images that would be most appropriate to your post. Images that would liven up and capture readers' attention.

-Add ALT TAGS on the image so search engines would find it easier and faster. To add ALT tags on the newly added image, go to EDIT HTML portion of your "Create New Post", look for

<img src="http://sourceURLhere">

change it to

<img src="http://sourceURLhere" alt="keyword or tag here">

(4) LABELS/TAGS

-Use label names or category names that would be closest in relevance to the topic of your entry. This will aid the readers to understand your entry better. Tag as much as you can.

(5) RESOURCES/RELATED POSTS/BOOKMARKS

-Show your resources on each entry. If you can install related posts (by category), much better!

-Add social media icons for easy bookmarks. Digg. StumbleUpon. Reddit. Join the buzz!

For more information about the topic, you may check these resources out.
How To Create Great Blog Content
24 Simple Tips For Creatinng Great Blog Content
10 Tips of Writing Bookmarkable Content

Resources:
http://acronyms.thefreedictionary.com/Who+What+Where+When+Why+How
http://digg.com/technology
http://www.lifereboot.com/2007/avoid-bad-blog-posts-with-these-3-writing-tips/
http://weblogs.about.com/od/bloggingtips/tp/TipsWriteBlogPosts.htm
http://ezinearticles.com/?How-To-Write-Fresh-And-Creative-Posts&id=597848
http://www.conveneit.co.uk/pictures/ist2_318029_alert_icon.jpg

Add Multiple Feeds with Multiple Entries In Blogger

2008-10-08T13:13:00.000-07:00

5 Google News Feeds Gadget. 10 Recent Technology DIGGs. 5 Latest Slashdot News Snippets. Three separate feed widgets on your sidebar. Is there a way to put them all together in one widget?

Blogger currently offers two feed gadgets:
(1) FEED GADGET
where you can add content (maximum of 5 entries) from ONE RSS or Atom feed to your blog.
(2) BLOG LIST GADGET
where you can add MULTIPLE FEEDS (with ONE/latest entry for each feed) of your favorite blogs.

Don't you sometimes wish you can combine both and display MULTIPLE FEEDS with MULTIPLE ENTRIES for each feed?

Thanks to Dynamic Drive's gAjax RSS Feeds Displayer, this is possible.

To be specific, you may find it in action at my sidebar: TECH NEWS FEEDS section. Here, my subscription list includes feeds with multiple entries from DIGG Technology, PC Magazine, Reuter's Technology, SEObook, SEOmoz, Slashdot, and Yahoo Security.

Using gAjax RSS Feeds Displayer, you can display results from multiple feeds intermixed, sort them in a variety of ways, specify which components of each RSS entry to display, and more. Dynamic Drive

How to add it in Blogger? Here's how.

Before you start editing your template, make sure to DOWNLOAD
(1) gfeedfetcher.js (right click and choose "Save As") first and upload to your site (e.g. Google Pages if you have one).
(2) (right click and choose "Save Image As") and upload to your image hosting site (e.g. Photobucket or Imageshack. I use PicasaWeb)

Now, let's get started.

NOTE: BACKUP YOUR TEMPLATE!

1. Go to Layout. Edit HTML.
2. Before the closing tag of

</head>

insert the following code:

<script type="text/javascript" src="http://www.google.com/jsapi?key=YOUR-API-KEY">
</script>

<script type="text/javascript" src="gfeedfetcher.js">
/***********************************************
* gAjax RSS Feeds Displayer- (c) Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>

NOTE: Please look at the above code closely. For your API Key, go to Google Ajax API Key Page, type in your blog URL and click Generate API Key. Then, on the below code:

<script type="text/javascript" src="http://www.google.com/jsapi?key=YOUR-API-KEY">

replace "YOUR-API-KEY" with the CODE YOU RECEIVED from Google Ajax API Key Page.

3. Before the closing tag of

]]></b:skin>

insert this code to apply CSS.

.labelfield {
color:brown;
font-size: 90%;
}

.datefield {
color:gray;
font-size: 90%;
}

#example2 div {
margin-bottom: 5px;
}

#example2 div a {
text-decoration: none;
}

4. Save template.
5. Go to Layout. Page Elements.
6. Add A Gadget.
7. Choose HTML/Javascript.
8. Copy the code below and paste it on the HTML/Javascript gadget.

<script type="text/javascript">
var socialfeed=new gfeedfetcher("example2", "example2class", "_new")
socialfeed.addFeed("Slashdot", "http://rss.slashdot.org/Slashdot/slashdot")
socialfeed.addFeed("Digg", "http://digg.com/rss/index.xml")
socialfeed.displayoptions("label datetime snippet") //show the specified additional fields
socialfeed.setentrycontainer("div")
socialfeed.filterfeed(6, "label")
socialfeed.init()
</script>

9. Save.
10. View Blog.

How to customize the Feed script

<script type="text/javascript">
var socialfeed=new gfeedfetcher("example2", "example2class", "_new")
socialfeed.addFeed("Slashdot", "http://rss.slashdot.org/Slashdot/slashdot")
socialfeed.addFeed("Digg", "http://digg.com/rss/index.xml")
socialfeed.displayoptions("label datetime snippet") //show the specified additional fields
socialfeed.setentrycontainer("div")
socialfeed.filterfeed(6, "label")
socialfeed.init()
</script>

Below are the only codes that you need to change:

One.

socialfeed.addFeed("Slashdot", "http://rss.slashdot.org/Slashdot/slashdot")

where "Slashdot" is the title of your feed and
"http://rss.slashdot.org/Slashdot/slashdot" is the feed URL.

Two.

socialfeed.displayoptions("label datetime snippet")

where the display options can be set to include feed title ("label"), feed publishing date and time ("datetime"), and preview of feed ("snippet"). If you wish to include only the title and feed preview, kindly set the option to ("label snippet")

Three.

socialfeed.filterfeed(6, "label")

where 6 is the number of entries to be displayed and "label" is the sorting config meaning all feed entries will be sorted alphabetically by label.

To learn more about this displayer and view other options, visit Dynamic Drive's gAjax RSS Feeds Displayer.

Resources:
http://www.dynamicdrive.com/dynamicindex18/gajaxrssdisplayer.htm
http://htmlescape.compender.com/2008/01/raymonds-html-escaper.html

The Technical Thought Of You

Top and Best Posts of "The Technical Thought Of You" for 2008

Table Of Contents Widget: Label Sort Tweak

Recent Comments Widget for Blogger CommentLuv Users

Improve Your Blog's Marketing Effectiveness With Website Grader

20 Ways To Show You're Busy In YM

The Singing Google Page Rank

How To Open Multiple Links In Just One Click

How SEO Works: The SEO Flowchart

ShowOffRankings: Blog Widget To Show Blog Rankings

How To Quickly Check What Slows Down Your Website

Add A Customized Related Posts Widget In Blogger

How To Check Your Website's Speed - The Easy Way

How To Check For NoFollow,DoFollow Blogs - The Easy Way

How To Customize Your Blogger CommentLuv's Skin

25 Things You Should NOT Do With A Computer

Create Expandable Titles in Blogger Label Page

Create Expandable Read More In Blogger

CommentLuv for Blogger Now Live!

Create Multiple Homepages In Firefox

Popular Posts Widget (with Comment Count)

Add Nice Tooltips using Nice Titles in Blogger

How To Ask Google To Reconsider Your PR

How To Create Animated Handwritten Signatures

5 Tips to Create An Effective Blog Post

(1) TITLE

(2) CONTENT

(3) IMAGE/ALT TAGS

(4) LABELS/TAGS

(5) RESOURCES/RELATED POSTS/BOOKMARKS

Add Multiple Feeds with Multiple Entries In Blogger