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

    Computers & Programming > Programming
  • 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"

    Choose new form in Google Docs

  • 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

    • Question type can be:

      • Text

      • Paragraph text

      • Multiple Choice

        Editing multiple choice in Google Docs forms


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

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

    Select Poll in Add gadget


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

    Design poll gadget


  • 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

  • use sidebars to attract attention of visitors

  • use sidebars to separate part of text

  • it can be method to reduce bounce rate for your site. You can put inner links to your site in framed site

  • links in framed text is better option than common list of links in the end of article because links in the end of article will see only most patient visitor who read whole article. Links in framed text can see and fast click visitors who aren't really interested in article

  • read any newspaper and you will see that sidebars are heavily used, there must be good reason for this, people likes when there are more small parts of text than one big text


How to make framed text

There is code for framed text:
<div style="border: 1px solid rgb(0, 0, 0); padding-left: 5px; background: [HEX CODE FOR COLOR];  width: [WIDTH FOR BOX]; height: [HEIGHT FOR BOX]; float: [SIDE FOR BOX]; ">[PUT TEXT HERE]</div>


Let's see elements:
  • border - you need border to clearly separate framed text from main text, you can use 1px solid rgb(0, 0, 0)

  • padding-left - use padding left to move framed text from border, it is ugly to see framed text too close to border

  • background - background color for framed text box in hexadecimal value, check this link to find right color. Example : #F1ECEC for color close to silver

  • width - width of box (div), example : 100 px

  • height - height of box (div)

  • float - sets where a element will appear in another element, you can use : left, right or none.
    Framed text in beginning of article have float property set to right

    Some Text Some Text Some Text Some Text Some Text
    Example of framed text with float property set to left
    Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text


  • [PUT TEXT HERE] - here you can write text you want to see in framed text box


Sample of code for framed text on beginning of this article:
<div style="border: 1px solid rgb(0, 0, 0); background: #F1ECEC; width: 100px; height: 110px; float: right; padding-left: 5px;"><span style="font-size:78%;"> <span style="font-weight:bold;">Intention of this box is to demonstrate what is framed text</span></span></div>