Interesting Web

Friday, August 28, 2009

Star rating system on your blog

How to install star rating widget to your blog or web site? You will find guide in this article. First we will take a look at free star rating and recommendation system outbrain.com. Outbrain.com is a content ranking and recommendation widget for blogs, RSS, magazines and news. Second, we will show how to implement outbrain star rating on blogger (this widget can be installed on the other blog platforms too). In the third section you can learn about blogger reactions feature and blogger star rating feature which exists only in draft mode.

Star rating widget - outbrain

One option is to use star rating and recommendation widget which you can find on web address www.outbrain.com. Outbrain star rating widget can be easily installed to different blog platforms (Typepad, Blogger, Wordpress, Drupal) and to FeedBurner RSS feed. Star rating system is very straightforward to install on blog. In second section you can find example of installing outbrain rating system on blogger. It can be installed on web sites too, by embeding generic java-script code on your site.

Outbrain star rating widget loook like this:

Outbrain star rating widget is composed of 5 star rating part and recommendations part. In star rating part you can see how many visitors rated page and average rating. In recommendations part there are personalized recommended links selected by outbrain rating system. You can exclude recommendations if you like.

If you are registered to Outbrain rating system service you can track rating of every post in your blog:

Installing Outbrain rating widget on blogger

Register on www.outbrain.com (you can install rating system without Registering on outbrain site but then you will not have blog reports)

Enter blog URL, chose Yes for Install rating widget, Select your blogger platform and select language

On Add Page Element click on Add Widget button and your blogspot blog have outbrain rating star widget on every post

Maybe you will need uninstall instructions for outbrain star rating widget for blogger:

From your Dashboard:
Click Layout >> Edit (on Ratings by Outbrain) >> Remove Page Element

find and remove code :

<b:widget title="Ratings by outbrain" type="HTML">

Blogger star rating and reactions feature

Blogger have its own five star rating feature. This feature exists only in blogger drat mode. To use blogger draft mode you should login on web address http://draft.blogger.com.

This feature didn't work well on my blog. There was problem with loading, one time it worked and another time did not.

Guide to use blogger star rating feature:

click Layout --> Page Elements in "Blog Posts" click on Edit

in Configure Blog Posts page check "Show Star Ratings" checkbox

Blogger reactions feature

Blogger also have reaction feature. With this feature visitors can check one of offered reactions and blog owner have feedback.

Instructions for installing blogger reactions widget:

click Layout --> Page Elements in "Blog Posts" click on Edit

in Configure Blog Posts page check "Reactions" checkbox (with click on Edit you can enter your preferred blog reactions separated by coma, for example on picture blog reactions are : bad, good, excellent)

click save and now you have reactions widget on every post

My experience with reactions feature is positive. It works very good without problems, while blogger star rating feature have difficulties and is still in draft mode.

Sunday, August 2, 2009

jQuery image preview

Here you will learn how to dynamically preview image on your web page with help of jQuery. The image preview shows up when user put mouse pointer over the link. After mouse pointer lost focus on link, image preview disappear. Take a look at image preview demo to better understand what we call web image preview.

Demo of jQuery image preview

The Sunset

When visitors cursor hovering over "The sunset" link, an image preview shows up. After mouse pointer is moved off, image preview disappear. Now we will discuss how to install preview image on your page or blog (there are more javascript effect tutorials on my blog).

On this blog you can find how to alternate image after onclik event.

For those interested in changing image when onclick event occurs with jQuery I leave the link.

Guide to implement jQuery image preview on your page

Your page should point to external jquery library and to imgpreview plugin

<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>

<script src="http://plugins.jquery.com/files/imgpreview.min.0.22.jquery.js.txt" type="text/javascript"></script>

We need some HTML code, one unordered list with one list item. This list item must have link to image

<ul id="first">
<li><a href='http://www.freefoto.com/images/15/10/15_10_70_thumb.jpg' rel="nofollow">The Sunset</a>
</li>
</ul>

Add jQuery code which instruct that when mouse pointer is over unordered list (ul) with id "first", method imgPreview is called. This method shows the image.
```
<script type="text/javascript">
$(document).ready(function(){
$('ul#first a').imgPreview({
imgCSS: { width: 100 }
});
});
</script>
```
- imgCSS: { width: 100 } - width is determined.
And that's it, demo works!!!

Sample code of HTML page for image preview

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>

<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>

<script src="http://plugins.jquery.com/files/imgpreview.min.0.22.jquery.js.txt" 

type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function(){
$('ul#first a').imgPreview({
imgCSS: { width: 100 }
});
});
</script>
</head>

<body>
<ul id="first">
<li><a href='http://www.freefoto.com/images/15/10/15_10_70_thumb.jpg' rel="nofollow">The Sunset</a></li>
</ul>

</body>
</html>

To find more about imgPreview plugin visit page of it's creator James Padolsey.

Preview image for blogspot / blogger users

Blogger users should write all jscript code in one line or can call external javascript file .

For more information you can take a look at :

Sample of image preview working code in blogspot (in one line to avoid <br> tags):

<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script><script src="http://plugins.jquery.com/files/imgpreview.min.0.22.jquery.js.txt" type="text/javascript"></script><script type="text/javascript">$(document).ready(function(){$('ul#first a').imgPreview({imgCSS: { width: 100 }});});</script><ul id="first"><li><a href='http://www.freefoto.com/images/15/10/15_10_70_thumb.jpg' rel="nofollow">The Sunset</a></li></ul>

Tuesday, July 28, 2009

click search

now you can see if your posts are in Post-title format

On the end, my experience with this method is really good, so if your blog traffic significantly grow after you use tips from this article I would ask you to put a link or two to my blog and follow my blog.

If you are interested in my real blogging experience visit: Increase blog adsense revenue real case scenario.

Saturday, June 27, 2009

Javascript in external file

Javascript can placed in external files. Of course JavaScript can be added to HTML files too, but in some situations it is better to include Javascript in external files. In this article you will find why to include Javascript in external files, how to put JavaScript in external file, one simple example and instructions for blogger users to use external Javascript.

Why people place Javascript in external files

to use the same Javascript on many pages and don't want to rewrite Javascript code on every page, it is simpler to have one Javascript function code in one place (one .js file) then in many HTML files

to get more organized and easiest to maintain code

HTML page is smaller in size, making it load faster

separates the JavaScript from the HTML to get better Search Engine Optimization (SEO), Javascript will not get higher PageRank

they are forced to move js off the page (for example blogger users have problem to use javascript in blogger editor, or some similar restrictions)

How to add Javascript in external file

First, you must make .js file. File must have extension .js

write Javascript function (or functions) in file and save file

Sample TestJs.js
```
function Hello()
{
    alert("Hello");
}
```

now we can make a call to javascript function from HTML file, let's assume that the .js file is in the same directory as the HTML file in which we are going to call javascript function

Sample HTML file : TestCall.html
```
<html>
<head>
<script src="TestJs.js" type="text/javascript">
</script>
</head>
<body>
<input type="button" onclick="Hello()" value="Hello!">
</body>
</html>
```

that is it, if those two file are in same directory when user click on Hello button javascript Hello function (which is in js file) will be called from HTML file and will be executed

External Javascript in blogger post

Demonstration:

To use javascript inside blogger post you have follow next steps:

save javascript function in js file (like described in previous chapter)

Sample TestJs.js
```
function Hello()
{
    alert("Hello");
}
```

on blogspot (blogger) there is no option to upload js file (or file of any other type) so you need to find where to upload javascript file

you can find instructions how to upload javascript file by following this link, take a look at Google Groups chapter

in blogger post add code to use remote javascript

Use this:

<script src="[URL OF AN EXTERNAL SCRIPT]" type="text/javascript"></script>

Example for uploaded javascript file on Google Groups:

<script src="http://everything-about-blogging.googlegroups.com/web/TestJs.js?hl=en&gda=bUe-djsAAAATLYFRxG7MFqGWBWh2VvtrqIEbF7jzfKsOTBbDD3S6g8oRXZrtFiBTuJ69H91AzQAGRdr3QrylPkw2aRbXD_gF&gsc=CJY8-AsAAABni9lzDVHuoDw_bqXODZJz" type="text/javascript"></script>

add code in blogger post that call JavaScript function

<input type="button" onclick="Hello()" value="Hello!">

now you have blogger post which call javascript function from external file

Monday, June 22, 2009

How to create online survey

Believe or not, making survey on internet is very easy. Here you will find brief step by step tutorial how to create your own web survey (poll) with help of Google docs forms. After online survey is make and published visitors can fill poll and their responses are automatically added to your online spreadsheet. Google docs are really useful and easy to use tool. Here you can see example of online survey.

Sample Google Docs online survey:

Sample online survey (poll) created with Google Docs forms

Creating online survey

First go to Google docs and log in

to successfully log in you must have Google Account

in case you do not have Google Account go to Google Accounts

Go to menu "New" and click on "Form"

In the form template that opens, you can add any questions and options you'd like

Enter title and description

Enter Question title

Choose question type

Text

Paragraph text

Multiple Choice

Checkboxes

Choose from a list

Scale

Choose whether or not to make it a required question

Now you can add new question, (to get a new question, click the “Add Question” button at the top left of the page) or save and publish your survey

You can change Theme if you like

You can email the form (survey) to people, which allows them to fill it out and submit it right from their email, embed survey into your site or blog (it didn't work on my blog) or place a link to survey on your site

You can review responses as:

summary

spreadsheet

You can use summary to display results or process data in spreadsheet. It is your choice. I find this Google tool very impressive and user friendly. My recommendation to everyone is to take a look at Google Docs and explore their functionality.

Step by step guide to create sample online survey:

In Google Docs go to menu "New" and click on "Form"

Enter title "Test survey"

Enter description "This survey is for testing and demonstrating purpose"

Enter Question title "1. Enter your name?"

Click on Add question button and choose "Paragraph text"

Enter Question title "2. Please tell us your opinion about this tutorial"

Click on Add question button and choose "Multiple choice"

Enter Question title "3. Do you find this tutorial useful?"

In Option 1 enter "Yes"

In Option 2 enter "No"

Click on Done

Click Save

Tuesday, June 16, 2009

HTML link code tips

In this article you will learn secrets of linking and few HTML link code tips. Also you can find ways (with HTML code samples) to link more efficiently from your site.

Here are questions on which this post will try to answer :

How to improve PageRank of pages on your site with proper linking?

How to make links on other web sites and not lose visitors?

How to stay on same page and navigate (scroll up and down) on-page links?

How to make email hyperlink?

Simple HTML link code with tag <a>

To create simple HTML link use this code:

<a href="http://interestingwebs.blogspot.com">Link to my blog</a>

href attribute - specifies the destination of a link

Text between <a> and </a> tag - is a text that visitor see on page

Improve your PageRank with nofollow attribute

Sample of HTML link code to implement NoFollow attribute :

<a rel="nofollow" href="http://interestingwebs.blogspot.com">Link to my blog</a>

The PageRank of a particular page is roughly based upon the quantity of incoming links as well as the PageRank of the pages providing the incoming links. To learn more about PageRank visit PageRank explained.

PageRank contribution - Pagerank of page on which is incoming link (backlink) is divided by the number of outbound links (links to other pages) on that page, more outbound links on page means lower PageRank contribution to linked page.
We can tell that every page have 100% of vote's right. If incoming link page have one link then linked page get 100% vote's right of that page.
But if incoming link page links to two different pages then every of two linked page will get 50% vote's right (Pagerank contribution) of incoming link page.

NoFollow attribute means that a hyperlink should not influence the link target's Page Ranking.

Example: for page A is better to have incoming link from page B which links only on page A (scenario 1) and get 100% of page B vote's right then from same page B which links on multiple pages and have only 33% of page B vote's right (scenario 2).
If page B have one link to page A and two NoFollow links then page A will get 100% of page's B vote's right (scenario 3).

Share of Google PageRank value of outbound links with NoFollow attribute

You can get better PageRank if you link with NoFollow attribute on other sites, and save your PageRank contribution for pages of your sites and for partner sites.

Like in real life balance is important, if you are to skimpy people will not like you.

My advices is to use NoFollow attribute for:

popular sites (like Google, they already have high PR and your link will not make difference )

business sites

old blogs that have not been updated more than a year

Do not use NoFollow attribute for:

your own pages

friend and partner pages

cool pages

blog pages - they need you PR contribution

Using target attribute to keep page open after clicking on link

To open link in a new window you can use attribute :

target="blank"

Sample:

<a target="_blank" href="http://interestingwebs.blogspot.com">Link to my blog</a>

This code open link in a new window, first window remains open.

Why to use target _blank :

when visitor click on link to other site, page remain opened so visitor does not leave page

so we can tell it keeps users on starting site

some sources claim that it decreases bounce rate (visitors stays on site because page remain open and click on other pages of same site)

Why to not use target _blank:

it is user-hostile - it should be up to the user to decide where the link should open up: in the same window, in a new window, or in a new tab (see The Top Ten Web Design Mistakes)

when new window is opened visitor can't use Back button and they cannot return

non experienced user can be confused with new opened windows

I was take a quick look on top blogs (tehnorati) and find that in top 10 blogs only 2 blogs using new window (target="_blank")

Link to a location on same page

Demonstration:
Go to beginning of post

Sample code to navigate on same page:

<a name="GoToBegin">Beginning of post</a>


<a  href="#GoToBegin">Go to beginning of post</a>

When link "Go to beginning of post" is clicked "Beginning of post" is positioned.

How to make email hyperlink

Sample :

<a href="mailto:blogsrec@gmail.com?Subject=Test">
Send Mail</a>

Sunday, June 14, 2009

How to create survey in blogspot

It is very easy to add a survey with one question (poll) in blogger blog. Blogger have built-in functionality to survey your visitors by adding a poll to your blog. Visitors can choose one answer from multiple choice and see how other visitors votes. Very nice feature.
But there is restriction, you can add only one question in the poll and visitors can only choose from one multiple choice question. For example with Poll you can't give visitors option to enter some text to describe their opinion.

For those interested in more complex surveys my advice is to visit Make your own web survey. There you will find how to create online survey with more than one question, different type of questions (text, multiple choice, checkboxes...) and results in online spreadsheet.

Here are find steps needed to create Poll:

Go to Layout

Click on Add Gadget

Select Poll

Enter your question and answers. You can choose Poll closing date. Click Save to save your Poll question.

You have fully functioning survey with one question in your blog

Monday, June 8, 2009

Improve your blog appearance with sidebar

In publishing, sidebar is a term for information placed adjacent to an article in a printed or Web publication, graphically separate but with contextual connection. Or we can use term framed text. Maybe there are better terms : text in colored box, text in frame, separated text...

Intention of this box is to demonstrate what is framed text

Anyway when I wrote this title i was thinking on small portion of text that is visually separated from main part of text. My intention in this article is to give instructions how to add framed text on blog posts or any HTML page. But first I will discuss advantages of using framed text. And yes, if you know better term than framed text or sidebar please leave a comment. You can see demonstration of framed text on the right side.

Tips about using sidebars (framed text)

use sidebars to highlight part of text