Related Posts Widget for Blogger Blog

If you are using the standard blogger approach, your posts are structured through time related logical way. You post new publications, and they appear in the blog history widget. Only for the explicit cases, when your reader is stunned and mesmerized by the publication he came to see through the referral site or search engine, he will dig more, exploring other publications on your blog. Other than that, he will go further, in the best case, leaving a comment. How can you keep him longer? How can you present other beautiful posts, he might find interesting? In one of the previous posts Rotating Post Widget for Blogger Blog I have already presented a way to show something extra to the reader. However, while doing what it is supposed to do, the presented widget does not show the particular articles that are relevant to the blog post your reader came to see. Therefore, embedding the Relevant Articles Widget for Blogger might represent a better solution.


The relevance of the posts is based on the tags or labels, assigned to each of the posts on your blog.

The Widget can be embedded in 9 steps:
1. Go to Layout >Edit HTML in your Blogger Dashboard.

2. Back up your existing Template before making any changes! Export your template to the safe, easy identifiable location.

3. Check the "Expand Widget Templates" box.

4. Search for the </head> tag.

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

<style>
#related-posts {
float : left;
width : 540px;
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;
font-weight : normal;
margin : 5px 7px 0;
padding : 0 0 5px;
}
#related-posts a {
color : #054474;
font-size : 11px;
text-decoration : none;
}
#related-posts a:hover {
color : #054474;
text-decoration : none;
}
#related-posts ul {
border : medium none;
margin : 10px;
padding : 0;
}
#related-posts ul li {
display : block;
background : url("http://i299.photobucket.com/albums/mm297/zozuglogger/weed-bullet.gif") no-repeat 0 0;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 16px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
}
</style>
<script src='http://torrentmoon.com/javascripts/Related_posts_hack.js' type='text/javascript'/>

6. Now search for <p><data:post.body/></p>

7. Add the following code just beneath the code you just searched for.

<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. The default number of the posts is 5 in the code, but at this step you can modify it as per your needs, changing the number in the following line: max-results=5

9. Now Save your Template and you're done!

The credit for the gadget development goes to the Widgets4Free blog.

Fast Blog Ranking Search with SERP Finder

SERPs Finder is a free SEO (Search Engine Optimization) utility that allows you to find rankings of your pages in all major search engines. SERPs Finder can easily check search engine position of your site for a given query in Google, Live Search, and Yahoo! Search.

Despite it’s simplicity it is one of the most powerful tools of its kind, unlike many others it searches for position deeply, analyzing first 1000* of search engine results. It is also incredibly fast, the only practical limit is the speed of your network connection.

*Note: Authors got some complaints from the users who got their access to Google temporarily blocked after excessive use of this product, so the depth of the search was reduced to the first 100 results instead of 1000. It is possible to rewrite the program to search the first 100 results trough only one Google query (currently there are 10 queries).


The utility is light, fast, and portable. You can run it from your USB disk with no installation on the Hard Drive needed.


Website: http://www.4neurons.com/other/SERPs%20Finder/


Download: http://www.4neurons.com/click/click.php?id=20


Screenshots:

The software is so simple, that its operation can be presented in two screenshots.

Step 1

SERP Finder

Step 2

SERP Finder

Tweaking Color Schemes of AdSense Blocks with Portable Freeware

When you plant Google AdSense ads blocks on your blog or website, you might need to tweak the suggested colors in your template to fit better to your page. In some cases, you want it to blend in the page design; in some cases, you want it to be as bold as possible. Finding the appropriate colors might be challenging, especially, if you want it to be exact match. Identifying the type of color can be very difficult, but with Just Color Picker, you can get the exact color value of any pixel. Jpicker is small, portable, and absolutely free utility that will assist you in picking the right colors.

After starting to use the utility for Google AdSense ads tweaks, I found it very convenient for other design purposes, as tweaking my Blogger templates. The initial experiments show very interesting patterns, proving that even small changes in the sites GUI might be useful for the overall site effectiveness.


Features

• Five formats of color value: HTML, RGB, HEX, HSB/HSV, and HSL.
• 3x, 9x and 15x zoom of any screen area.
• Picked colors history. History saving function for future use of the picked colors. Removal of colors from the history.
• RGB and RYB color wheels to display triads and complementary colors.
• Two harmonious color finders. With this feature you can easily pick harmonious colors, for example, for your web site. Just choose your favorite color and the color picker will find the best colors harmoniously matched with yours.
• RGB & HSV color mixers to edit a picked color.
• Gradient between two latest-picked colors to allow you to pick a color from a wide range between the chosen colors.
• Optional stay-on-top.
• User-defined hotkey to capture color info (Alt+X by default).
• Copying the color value or its selected part to the clipboard just by button click.
• No installation required. Just Color Picker is a portable application and can be run directly from a USB stick.
• Multilingual interface Bulgarian, Croatian, Czech, Danish, Dutch, English, Finnish, French, German, Greek, Hungarian, Italian, Norwegian, Polish, Portuguese, Russian, Slovak, Spanish, Swedish and Turkish.

Website: http://www.annystudio.com/jcpicker.zip

Download: http://www.ziddu.com/download/4315421/jcpicker.exe.html

Rotating Post Widget for Blogger Blog

In blogger best intentions is keeping the visitor as long as possible, keeping him busy with all the wonderful content you have. But, in many cases, due to the time-related blog building logics, your visitor is leaving the site, without even knowing how much interesting stuff he failed to read beside.

Many different widgets are trying to fill the gap, and random post widget for Blogger is one of them. If you have a blog with more than 20 posts than this gadget is just the thing you might be interesting in.

 

Main features:

1. Shows one post title at a time.

2. Links to the post.

3. Shows post excerpt also.

4. Every 5 seconds shows a new post.

5. Cycles through all the posts in the blog.

6. Starts a new cycle at the end of the list.

7. Once loaded continues cycling even when not connected to the Internet.

8. Uses official Google AJAX technology.

9. Can be used on other blogging platforms (not tested).

10. Hovering with mouse cursor over the post title halts the rotation till mouse moves off the gadget.

 

Drawback:

Posts are not random, the sequence is quite defined - from the newer to the older posts.

Code:

Get code from the developer’s post http://www.blogdoctor.me/2009/01/random-rotating-post-gadget-with.html. If you need to modify the widget as per your particular needs, review the questions and answers below the post. I removed the author’s name and date, for example, decreased dimensions and fonts in half, and placed it in the side column. You can review the Random Post widget modified in the right sidebar.

 

Note that there are three areas you need to put particular data from your blog to make it work. Change "MYBLOG" to actual blog sub-domain and "BLOG_TITLE" to actual title of your blog. Then paste the modified code in the Html gadget and save the gadget. Get your AJAX API key and put it in above code instead of 'PUT_AJAX_KEY_HERE'.

Installation:

1. Login at Blogger.com.
2. Click Layouts link on Dashboard.
3. Click Add Gadget link in sidebar on Page Elements subtab of Layout tab.
4. In popup window scroll down and click Html/Javascript gadget.
5. In Contents window copy the code below and paste after modifying it.

6. Move the new widget blog to the desirable location on your template.

Using Favicon for your Blog or Website (Part 3)

Using Favicons on Blogger Blog

Favicons activation for the blogger using Blogger platform is easy as well. However, the old method of getting a custom Favicon to display in a Blogger blog no longer works, as of October 2008. If you had your Favicons before that, and they suddenly disappeared, you will just have to reinsert the code in a different area of your Blogger template. If you never had them before, the following instructions will work for you.

The process will take two simple steps, taking that you already found or created your Favicon (review earlier publication).

Step 1: Upload your Favicon file to the Host


Any free images hosting will work for you, if it answers two major questions: reliability and support for ICO format. The easiest way for the Blogger users is taking advantage of the Google Page Creator. You just need to copy the ICO file to a host server so you can link to it.

Go to Google Page Creator and login using your Google account details (use the same details you use for Blogger login). The first time you login to Page Creator you will be given the option of creating a site based on your Gmail address. You might not worry about the look of your new website, as for now you are using it just for your Favicon icons secure storage. When icon has been uploaded, record its web address, as you will need it at the step 2.

Step 2: Add the Favicon HTML to your Blogger site


Go into the Blogger Layout Editor and choose the "Edit HTML" option. As always, before doing any modifications to your template, make sure to save a backup copy to a secure location at your hard drive.

Insert the following code between the]]></b:skin>and </head> tags in your Blogger template:

<link href=’http://YOUR_GMAIL_ADDRESS.googlepages.com/YOUR_ICO_FILENAME.ico’ rel=’shortcut icon’ type=’image/x-icon’/>

Don’t forget to change the URL so it points to the .ico file on your Google Page Creator site (code elements highlighted in red font). Now save your template and view your blog. If your new Favicon doesn’t show up straight away you may need to clear your browser cache.

Note, that the Favicons might not be visible on some browsers. For example, browser I use most often, Maxthon (IE-driver based), did not show them right away. While other browsers, I tried, showed them instantly: Firefox, Chrome, and Flock. Yes, if you use Internet Explorer, the Favicon will not appear unless you have bookmarked your blog and refreshed your browser.

Additional Information:
http://www.thebeginnersbloggingguide.com/2008/05/how-to-add-favicon-to-your-blogger-blog.html
http://www.bloggerbuster.com/2008/04/favicons-made-easy.html
http://www.bloggertipsandtricks.com/2008/10/fix-for-missing-favicon.html

Using Favicon for your Blog or Website (Part 2)

The Best 5 Free WordPress Plugins to Enable Favicon on your Blog

In our previous publication we explained how you can create custom Favicons to be used as your trademark for you blog. The next step would be activating it. The related action plan will be different for various blogging platforms. In this post, we will present several plugins to enable Favicon for your WordPress blog.
As a first step of your activation process, you have to upload Favicon you generated earlier to your blog directory, for example, http://localhost/blog/, or you can keep it in one of your free image storage location, when the link to the image is handy for the further processes. As the next step, you can use one of the free Wordpress plugins to create a link to it from the header of the Wordpress blog pages and administrative console.

faVicon is a simple and easy to use plugin, creating a new options menu. After downloading faVicon.zip, unzip the contents and upload them to your wp-content/plugins Wordpress directory (you do not need to upload all images file - they provided only for examples). Then, navigate to the plugins page in the Wordpress administrative console and press Activate.

As plugin is activated, in the top navigation bar of your administrative console, click on Options. Then, in the sub menu thatappears, click on faVicon. An options page will then appear. In the text boxes labeled Favicon URL, Animated Favicon (GIF) URL, Admin Panel Favicon (GIF) URL, enter the web address of your desired favicons.

Favicon Head is a simple way to automatically include correct tags for linking to your favicon in the head of every page in your blog. No file editing is required, you only have to upload the file to the plugin directory and activate it. The default favicon location is favicon.ico, but can be changed through the options page.

Installation Steps:

• Download Favicon Head 1.1.
• Unzip the file and upload it to wp-content/plugins/.
• Click the “Plugins” tab in the WP admin panel and activate Favicon Head.
• Go to the “Options” tab and click the “Favicon Head” sub-page in order to change the favicon location from /favicon.ico.

Features:

• Animated favicon support
• Custom favicon location
• Works in WordPress 1.5 and 2.

Admin Favicon is a very simple plugin, creating a link to a shortcut icon, or favicon, into the header of the WordPress administrative console. After downloading adminfavicon.zip, unzip it’s contents and upload them to your wp-content/plugins WordPress directory (you do not need to upload wpfavicon.ico). If you wish to use the sample WordPress favicon provided, upload wpfavicon.ico into the location of your choosing on your server. Then, navigate to the plugins page in the WordPress administrative console and press “Activate”.

This plugin creates a new options menu. Just navigate to “Settings.” Then, in the sub menu that appears, click on “Admin Favicon”. An options page will then appear. In the text box labeled “Favicon URL”, enter the web address of your desired favicon. If you uploaded the sample wpfavicon.ico, enter it’s location on your server here. Otherwise, use your own favicon image. Typically, this will be an ico file that you’ve created and uploaded to your server. For example, if you’ve uploaded favicon.ico to your main website address, you would enter http://www.MyMainWebsiteAddress.com/favicon.ico

Favicon Manager Wordpress Plugin is a small plugin that allows you to manage the favicon image for your WordPress installation. You can specify any arbitrary file, either locally within your installation, or at an arbitrary url. You can also optionally have the image included in either your RSS2 or your Atom feeds, or both. All options can be set from the new options menu in the administration panel. There is no editing of any files required.

Installation steps:

1. Download the zipped file to your plugins directory and unpack. You should have a new directory containing the favicon manager files now.
2. Activate the plugin from the Plugins panel.
3. Set your favicon location and your feed options from the Options->Favicons menu of the Administration panel.

Features
This is a drop in plugin, there are no additional files to set because it’s all done through the administration panel under Options->Favicons. Once you set your favicon location, it will display below the input field. This helps you determine quickly whether or not you entered your favicon location correctly without having to go refresh other browser windows or tabs to see if it worked. Note that this plugin will only work with WordPress 2.0 and above.

MaxBlogPress Favicon Wordpress Plugin allows you use the preset collection of the embedded favicons, or gives option to link to the image in the blog directory or on the external website. Installation can be completed in three easy steps.

Step 1: Install the plugin and go to: Options >> MBP Favicon
Step 2: Click on the icon which you want to use as favicon:

Step 3: Click on save

Note that when you first activate the plugin you will be asked to register it, which signs you up to an email list which you then have to confirm your subscription to. Upon clicking the confirmation link you are then directed to a page that is trying to sell you some blog traffic package. You’ll need to scroll all the way down to the bottom of the page to select “no thanks”.

On the following video, Caroline Middlebrook gives a nice video presentation of the plugin installation:

MaxBlogPress WordPress Plugin to install Favicon