Eblogger Tricks.com: 2010/09

Great Related Posts Widget for Blogger – Easy to Install

In this post I am going to show you a wonderful hack for displaying links to related posts/articles beneath each of your Blogger blog posts. The related articles are chosen from other posts in the same category/label/tag. With this hack a lot of your readers will remain on your site for longer periods of time when they come across related posts of interest.

1. Sign in to Blogger, then go to Dashboard --> Design --> Edit HTML.

2. You might want to back up your existing template before making any changes.

3. Check the „Expand Widget Templates“ box.

4. Search for (Ctrl + F) the </head> tag.

5. Add the following code just before the </head> tag.

6. Now search for <data:post.body/>. In some templates this code may look like this:

<div class='post-body>

<data:post.body/>

7. Add the following code just below said line of code.

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

8. Save your template.

That´s all!

Customization

In order to change the number of maximum related posts being displayed for each label, search for the code below (within the code given in step 7) and change the number „5" to the desired number.

max-results=5

Good luck!

How to Add a Table of Contents/Archive Page to Your Blogger Blog

Table of Contents for Blogger is a useful little widget first created Abu Fathan. The Table of Contents widget or Archive widget will display all posts categorized by labels, which means that it works best when you use no more than 1 or 2 labels for each of your posts. The widget will also point out your most recent 10 posts as „New!“. A live demo can be found on my archive page.

How to add this widget to your blog by using a regular post:

1. Sign in to your Blogger blog. Create a new post and click on the Edit HTML tab.

2. Paste the following code:

into the empty field on the HTML tab.

3. Replace myblog.blogspot.com with the URL of your blog.

4. Publish the new post.

How to add the widget to your Blogger blog using Blogger´s static pages:

1. Sign in to http://draft.blogger.com/

2. Click on New Post --> Edit Pages tab --> New Page.

3. Paste the following code into the field on the HTML tab:

4. Once again, replace myblog.blogspot.com with the URL of your blog.

5. Publish the new page.

That´s all!

Good luck!

Table of Contents/Archive

How to Publish Code in a Stylish Box on Blogger

As you may have seen on this blog, placing HTML code inside a blog post without a stylish box around it does not look particularly pleasing to the eye. And it is not very practical.

So how do you add code boxes to your Blogger posts?

There are two ways, one is fairly simple and best suited for beginners (like myself) and the other is an advanced method which gives your code box a more professional look but requires a little tweaking of the source code.

First, the simple method:

Just paste the following code in the Edit HTML tab of your post editor:

<textarea name="textarea" cols="40" rows="4" wrap="VIRTUAL">
YOUR CODE HERE
</textarea>

Here you can see where to paste the code:

The result looks like this:

That´s just the simple version. If you prefer a more Professional Code Box look, follow the second method:

1. Sign in to your Blogger Dashboard --> Design --> Edit HTML.

(You might want to backup your template before proceeding.)

2. Look for (CTRL+F):

]]></b:skin>

3. Add the following code right ABOVE ]]></b:skin>

.code {
background:#f5f8fa;
background-image:none;
background-repeat:no-repeat;
border: solid #5C7B90;
border-width: 1px 1px 1px 20px;
color: #000000;
font: 13px 'Courier New', Courier, monospace;
line-height: 16px;

margin: 10px 0 10px 10px;
max-height: 200px;
min-height: 16px;
overflow: auto;
padding: 28px 10px 10px; width: 90%;
}
.code: hover {
background: #FAFAFA; background-image:none;
background-repeat:no-repeat;
}

4. Save Template.

5. Now go to your Dashboard and create a new post on the blog where you added the Professional Code Box.

Just paste the follwing code in the Edit HTML tab:

<div class="code">
YOUR CODE
</div>

(refer to the image above for reference)

Here is the result:

THIS IS THE
RESULT
CALLED
PROFESSIONAL CODE BOX

Important note: You cannot see the Professional Code Box on your post editor, so you'll have to save it and view the post from your blog.

How to Avoid the Google Web Page Speed Penalty

Now that Google has started using website speed as a parameter in their ranking algorithms, every webmaster has a good reason to keep an eye on the page load speed of his or her website. Google's bending over backwards to spread the word about their new speed penalty is more than enough proof in itself since these guys are usually very secretive about pending algorithm changes.

From the announcement we learn that the speed penalty was introduced following experiments by Google that revealed the impact website speed has on Internet users.

But the results of the experiment should surprise no one who is even remotely interested in the Internt; users prefer websites that load faster and tend to spend more time on such sites.

However, the search engine giant has been careful to state that even though website speed is now a factor, it is not the primary parameter for determining results. The quality and relevance of information still remains the determining factor, but if your website speed is slow, your site will be penalized by Google.

This implies that it is important for you as a webmaster start to assess the speed of your website to determine whether you are moving further down the search engine results pages (SERPs) because your website is slower than the sites of your direct competitors.

How Can Google Know Your Page Speed?

It is vital for you to understand the basics of how Google's algorithm determines your website speed and thus your SERP ranking. The search engine uses two main factors when it comes to speed assessment.

First, your website will receive a higher speed ranking if it responds faster to Googlebot, the crawler program Google uses to find and index websites.

Second, your website will also receive a good speed ranking if it records a faster loading time on Google Toolbar than your competition. To better assist you in analyzing the speed of your website, Google has added a page speed report to their Webmaster Tools found within the Google webmasters´ „lab“ section.

The tool and the reports can be used to compare the page load times of your website to that of other websites. Once you are armed with the information of where your site (or a specific page) ranks in the speed hierarchy, you can start to make the necessary code and structure changes to make it respond faster.

Your first priority should be to make sure you have no SLOW pages on your site. Pages that take two seconds or more to load and pages that are marked as SLOW in Google Webmaster Tools need to be improved to avoid a Google penalty for website speed.

When you have no slow pages left, try to make all your pages load in under a second. Read on to see why this is important.

Having a website that loads quickly has more benefits than just higher search engine ranking and avoiding a Google penalty.

A website optimized for speed reduces the bandwidth required on your hosting service, thus reducing your overall hosting costs.

Faster websites also provide a better browsing experience because users are able to get information faster and navigate through your website more easily.

Moreover, websites optimized for speed tend to work better when accessed on mobile phones, PDAs and other devices that do not have the same level of processing memory as your standard laptop or desktop computer.

Even though you can have a mobile variant of your website which is trimmed down, some users will want to view your site in full HTML on their phone or PDA. A faster loading website will have a better chance of successfully loading on such devices.

As a webmaster, there are a number of free tools that you can use to improve the loading speed of your website. Here are three of the more popular ones:

Page Speed

Page Speed is an open-source add-on for the Mozilla Firefox browser. It evaluates the speed of your website and gives you suggestions on how to improve your website speed.

Page Speed runs tests on the architectural configuration of both your web server and your website's front end code. After running these tests, it gives you a report on your website speed and suggestions on how to improve the speed of your website.

Yslow

Yslow is a free Firefox add-on from Yahoo integrated with the Firebug software for website development. It displays statistics, an evaluation report and also provides suggestions on how to improve the speed of your website using best practices.

Yslow comes integrated with other tools for performance evaluation, including Smush. Use it and JSLint to further enhance your website performance. Although Yslow is a Yahoo product it is still a useful tool for avoiding the Google speed penalty.

SSEL Speed Tools

There is also a website speed check at Secret Search Engine Labs where you can get a quick answer on how big your webpage is and how fast it loads.

The Website Speed Quick Fix

There are several factors that affect page load speeds on your website, many of them technical and best solved by your webmaster or developer, but some changes you can do yourself as long as you have some experience with HTML and creating web pages.

Reduce the number, size and quality of images and use less audio, Flash and Javascript. Reduce the length of the page by splitting a long page into several short pages. Strip the source code of redundant HTML, Javascript and CSS code that just slows things down. Do not use images and other components that are linked live from other domains; use a copy on your server instead.

And do not forget to keep your eyes on Google Webmaster Tools to see how your site performs compared to the competition.

Good luck!

Cool Headlines Widget for Blogger Blogs

Update:

Please check out my Improved Headlines Widget for Blogger Blogs as well.

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

Adding a headlines widget to your web page is a cool way to let your readers know at a glance what your recent blog entries are about. It is also a good way to attract attention and to encourage the reading of recent posts.

Code

<ul><span style="font-size:58%;font-family:verdana,tahoma,arial;">↑ <a href="http://www.ebloggertricks.com/2010/09/cool-headlines-widget-for-blogger-blogs.html/" title="Grab This Widget">GRAB THIS HEADLINES </a><a href="http://www.ebloggertricks.com" title="HEADLINES WIDGET">WIDGET</a></span></ul>

</scriqt>

Installation

1. Sign in to your Blogger Dashboard --> Design --> Page Element --> Add a Gadget --> HTML/JavaScript.

2. Copy and paste the code into the new HTML/JavaScript.

3. In the code, look for the line:

…src=”http://YourOwnBlog.blogspot.com/feeds/posts/default…

and replace the blog address (shown in color blue below) with your own blog address:

…src=”http://YourOwnBlog.blogspot.com/feeds/posts/default.…

For self-hosted blogs:

…src=”http://www.YourOwnBlog.com/feeds/posts/default…

4. Add a title (optional).

5. Save.

Layout/Design

Headlines are usually placed at the top of the web page. For your Blogger blog, go to your blog’s Design page, drag your Headlines Widget and place it above the Blog Posts box.

Do not forget to click SAVE!!

Good luck!

Related articles:

How to Create Static Pages in Blogger / Blogger Draft

Not too long ago, Blogger launched its much awaited Blogger Pages Feature.
This enables us to create static pages in Blogger. So, lets see how this is done.

1. Sign into Blogger Draft (draft.blogger.com) [As of the time of writing static Blogger Pages can only be created via the Blogger Draft dashboard.]

2. Click on New Post as usual.

3. Select Edit Pages from the top menu.

4. Click on the „New Page“ button.

5. Now, give your page a title and write the content and publish the page.

6. If you want to display the Pages list in the sidebar of your blog, select the „Blog Sidebar“ option,or you can keep it as nav menu below header by selecting „Blog Tabs“ option.

Note: If you have selected either the „Blog Sidebar“ or „Blog Tabs“ option and you see any bx-error, then simply return to the previous page and select the „No Gadget“ option.
This means that you will have to add the links to your template manually.

To do so, click on Edit Pages again and Right Click on View -> Copy link location (in Firefox) and add the link manually to your sidebar by using the Link Widget or to your navigation bar via Template --> Edit HTML.

Many thanks to Blogger for the awesome feature.

Good luck!

P.S.: Currently Blogger allows you to create no more than 10 pages. But you can hack Blogger to create more pages. You can find a tutorial on how to do this at soswticher.

Eblogger Tricks.com

Great Related Posts Widget for Blogger – Easy to Install

How to Add a Table of Contents/Archive Page to Your Blogger Blog

Table of Contents/Archive

How to Publish Code in a Stylish Box on Blogger

How to Avoid the Google Web Page Speed Penalty