» Click here to go to the entry/page
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 ReportWebsiteGrader'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(c) Image Summary.
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 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?
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.
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.
(c) Google Indexed Pages and (d) Last Google Crawl Date.
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:
To learn more about getting inbound links or most commonly known as backlinks, check out Did You Graduate From Link Building High School Yet?
link:yourdomain.com
(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 is the newer, fresher means of promoting and marketing your website. Having one for your website helps a great deal, SEO included.
RSS stands for "Really Simple Syndication" and it's intention is to allow people to share content across the internet easily and effectively. CommunitySEO
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.(c) Historical Data Available.
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
» Click here to go to the entry/page
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
» Click here to go to the entry/page
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.
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/
» Click here to go to the entry/page
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.
Below is a sample:
View Full Size
(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.
(2) Restart Firefox.
(3) Go to your desired website/blog.
(4) Start drawing a rectangle/box using your mouse's right-click button.
(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.
View Full Size
Photo courtesy of
Increasing My Blogs Traffic
View Full Size
Photo courtesy of
Sharing Everyone
View Full Size
Photo courtesy of
Knowliz
View Full Size
Photo courtesy of
My Little World
View Full Size
Photo courtesy of
Technically Personal
View Full Size
Photo courtesy of
Everybody Geek
View Full Size
Photo courtesy of
When Silence Speaks
View Full Size
Photo courtesy of
Digital Passion of a Technomedic
View Full Size
Photo courtesy of
Destiny
View Full Size
Photo courtesy of
Blogger Widgets
Top Commentators
Footer Links
Chatbox
Live Traffic Feed
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 SizeHow 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 SizeNote: The above image is the default window option for Firefox 1-3.
Top 10 Uses Of Snap Links in Blogs.
(10) Directories.
View Full Size
Photo courtesy of
Increasing My Blogs Traffic
(9) Google Ads.
View Full Size
Photo courtesy of
Sharing Everyone
(8) Photos / Images.
View Full Size
Photo courtesy of
Knowliz
(7) Blogroll.
View Full Size
Photo courtesy of
My Little World
(6) Related Posts.
View Full SizePhoto courtesy of
Technically Personal
(5) Page Navigation.
View Full SizePhoto courtesy of
Everybody Geek
(4) Top Navigation.
View Full Size
Photo courtesy of
When Silence Speaks
(3) Archive.
View Full Size
Photo courtesy of
Digital Passion of a Technomedic
(2) Labels.
View Full Size
Photo courtesy of
Destiny
(1) Recent Posts.
View Full Size
Photo courtesy of
Blogger Widgets
Other Common Uses:
Recent CommentsTop Commentators
Footer Links
Chatbox
Live Traffic Feed
» Click here to go to the entry/page
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
» Click here to go to the entry/page
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/
» Click here to go to the entry/page
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
» Click here to go to the entry/page
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.Related Posts Widget Appearance.
The appearance may vary.Some hacks show segregation of posts based on category; each category name is labeled for easy reference.
courtesy of:
3 Columns Blogger Template
On the other hand, other hacks show a combined list of related posts for a neater and more refined look. Like this one:
courtesy of:
Blogger Accessories
Customized Related Post Widget.
While the categorized Related Posts widget for multiple labels look orderly, some bloggers (like myself) prefer to have the related posts in one tidy list.DCBlog has a fantastic hack on how to do this in his post - Hacking Related Posts. What's great about his hack is that the customization is fairly simple and the overall look is truly nice and pretty elegant. Below is an example of how it looks in my blog.
His hack is a combination of the following blogs' hacks:
SCRIPT: Related Posts Widget For Blogger With CSS
CSS: A blogger hack to show related posts before each blogger posts
BLOGGER CODE: How to show related posts/articles in blogspot blogs
To read more about this hack, check out DCBlog's Hacking Related Posts
How To Add Customized Related Post Widget in Blogger.
This one is based on DCBlog's Hacking Related Posts.NOTE: BACKUP YOUR TEMPLATE!
(1) Go to Layout. Edit HTML.
(2) Before the closing tag of
]]></b:skin>
insert this CSS code from Bloganol.
/*-- related posts --*/
#related-posts {
float : left;
width : 450px;
margin-top:20px;
margin-left : 5px;
margin-bottom:20px;
font : 11px Verdana;
margin-bottom:10px; }
#related-posts .widget {
list-style-type : none;
margin : 5px 0 5px 0;
padding : 0; }
#related-posts .widget h2, #related-posts h2 {
color : #940f04;
font-size : 20px;
margin : 5px 7px 0;
padding : 0 0 5px; }
#related-posts a {
color : #1566a7;
font-size : 11px;
text-decoration : none;}
#related-posts a:hover {
color : #99cc00;
font-size : 16px;
font-weight: bold;
text-decoration : none; }
#related-posts ul {
border : medium none;
margin : 10px;
padding : 0; }
#related-posts ul li {
display : block;
background : url() no-repeat 0 0;
margin: 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 0;
padding-left : 0;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc; }
For more tips on customizing this CSS, check out DCBlog's post..
(3) Before the closing tag of
</head>
add this script from Blogger Accessories
<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
//]]>
</script>
(4) Search for this line of code:
<p><data:post.body/></p>
(5) Underneath this line, insert this blogger code from Realtrix
<b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<font face='Arial' size='3'>
<b>Related Posts :</b>
</font>
<font color='#FFFFFF'>
<b:loop values='data:post.labels' var='label'><data:label.name/>
<b:if cond='data:label.isLast != "true"'>,</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=5"' type='text/javascript'/>
</b:if>
</b:loop>
</font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div>
</b:if>
The text "Related Posts" may customized:
<b>Related Posts :</b>
(6) Save Template.
(7) View Blog.
Here is the result:
Credits go to: Bloganol, Blogger Accessories, and Realtrix for creating wonderful hacks; DCBlog for putting them together to create another fantastic hack.
Blogs of Note that have Related Posts Widgets Hacks:
Jackbook
PurpleMoggy
Scrapur
Hoctro's Place
EverybodyGeek
Resources:
http://www.dcblog.net/2008/10/hacking-related-posts.html
http://rias-techno-wizard.blogspot.com/2008/06/related-posts-widget-for-blogger-with_25.html
http://www.bloganol.com/2008/09/show-related-posts-below-each-blogger.html
http://realtrix.blogspot.com/2008/09/create-related-posts-plugin-for-blogger.html
http://3columns-bloggertemplate.blogspot.com/
http://www.jackbook.com/2007/09/related-posts-entries-on-blogger-blogspot.html
http://hoctro.blogspot.com/2007/01/killer-hack-related-articles-by-labels.html
http://htmlescape.compender.com/2008/01/raymonds-html-escaper.html
» Click here to go to the entry/page
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
» Click here to go to the entry/page
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
» Click here to go to the entry/page
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">
<!-- Template for a single comment entry. This template is optional -->
<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>
<!-- Template for a "Create a comment" dialog. This template is optional -->
<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/
» Click here to go to the entry/page
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? ^_^
» Click here to go to the entry/page
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:
<!-- start expandable titles -->
<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>
<!-- end expandable titles -->
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/
» Click here to go to the entry/page
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
