Recent posts blogger widget

There is a guide to add recent posts on your blogger sidebar. It is very easy. We will describe two ways to implement recent posts.

Recent posts can be added to blogger (blogspot) with help of Feed gadget. This is method I prefer because it less slow down load time of your blog then a method with Recent Posts widget. Drawback is that you a limited to only five recent posts.

Second method with a Recent Posts gadget is more powerful. Recent Posts gadget show the recent posts with thumbnails and summaries. Drawback of this method is longer load time of your blog.

On this blog you can find more blogger tips like this.

Recent posts with a Feed gadget

1. Go to Layout


2. Click on Add Gadget
   
   
   


3. Choose Feed gadget
   
   
   


4. Enter feed url
   
   
   • to find your blog feed url click on "Subscribe to this page" icon and copy & paste feed url
   
   
   • or you can try with url of your blog


5. Enter title, chose how many items will be shown (5 is limit) and chose do you want display Post dates and Post authors
   
   
   


6. After click on Save you have Recent posts list on your blogger blog with five latest posts

Recent posts gadget

1. Go to Layout


2. Click on Add Gadget
   
   
   


3. In search text box type "Recent posts"
   
   
   


4. Choose Recent posts widget with thumbnails


5. Configure Recent posts gadget


• choose title


• determine height


• blog url


• number of posts to display


• summary length...






6. click Save and you have Recent posts list with thumbnails on your blog

Increase blogger traffic - change title

Title is very important for web traffic. Good title attract more visitors and it is significant part of SEO. To gain more traffic your title should have attractive keywords, should not be too long and important words should come first (keyword prominence).

In this article you will find free guide how to increase blog traffic with title change of each page of your blogger explained step by step. With title change explained in this article my blog have visit growth more than 40%. Let's talk about how blogspot post titles are generated. In blogger post blog title come first followed by post title.

Example 1:

[Blog title]: [Post title]

Useful and interesting web sites: Add javascript in blogspot (blogger) post

Blog title - Useful and interesting web sites

Post title - Add javascript in blogspot (blogger) post


In SEO (Search Engine Optimization) world, title like this is not effective.
Why?
Because keyword prominence rule say : the closer a word is to the front of the analyzed text area, the more relevant or important it is.
In our example keywords in blog title (which are not linked with post) decrease relevancy of keywords of post title.

We will have better SEO effect with title in which post title come first.

Example 2:

[Post title]: [Blog title]

Add javascript in blogspot (blogger) post: Useful and interesting web sites



In second case search terms connected to post title like "add", "javascript", "blogspot" will have better chance to be in top google results then in first case.

How to change title for each post in blogger

This guide ensures keywords in your post titles are discovered more easily. To do this you will have to change template. Follow this blogspot tutorial to change your title in [POST TITLE: BLOG TITLE] format and achieve better google search result page ranking for your posts:

• go to Layout --> Edit HTML
  
  



• in Edit Template box find this code:
  

  <title><data:blog.pageTitle/></title>

  
  


• and replace with this code
  

  
      <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <title><data:blog.pageName/> :
      <data:blog.title/></title>
      <b:else/>
      <title><data:blog.pageTitle/></title>
      </b:if>

  
  


• it is good idea to make backup of blogspot template before you click Save Template, new code tell that if visitor load certain post page title should be in [POST TITLE]: [BLOG TITLE] format, else title should be in [BLOG TITLE] format

Change title effect on my blog visits

Visits to my blog after change title is done was increased by more than 40% !!! Here is picture that illustrate increase of my blog traffic.

Green line display visits before change title is done and blue line is after change title is done.

It is important to say that after you make this change you should wait some time (usually few day or in worse scenario few weeks) while google index your blog pages.

To check if google re-index your pages :

• go to Google page


• type site:[BLOG-NAME] (site:interestingwebs.blogspot.com)


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

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

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:



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

Question type can be:


• 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

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



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>

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

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
Recommended links to improve your blog

How to add categories in blogger
RSS reader on your blog
Create your own site search using google search


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

How to analyze and improve bounce rate with Google Analytics

In this article you can find what is bounce rate, how to measure bounce rate, how to analyze different aspects of bounce rate with Google Analytics and tips to improve bounce rate.

Bounce rate can be connected with the number of people who entered the site on a page and left right away. They visit only one page on the site and go away from site. We can say that those visitors are bounced.

A visitor can bounce by:

• Clicking on a link to a page on a different web site


• Typing other URL


• Closing an open window or tab


• Clicking the "Back" button to leave the site


• Session timeout

Bounce rate, according to Google Analytics, is the percentage of single-page visits. If we have bounce rate of 80% it means that 8 of 10 visitor come on the page of site A and then leave the site without single visit of any other page on site A.

So we can conclude lower bounce rate is better

• bounce rate of 50% is better than bounce rate of 70%


• bounce rate of 30% is even better than 50%...

Main advantage of bounce rate is that it is simple to understand. It tells you if visitors leave your site right away or if they actually navigate it and read it carefully. Everyone would agree that this is very important information.

Measuring bounce rate

We can measure bounce rate with a help of Google Analytics. Google Analytics is free to sign up and offer many indicators to follow your site. In my opinion it is most powerful web tool for tracking website statistics.

To view the bounce rates for your website in Google Analytics, go to the Bounce Rate report under Visitors > Visitor Trending > Bounce Rate.



Tracking bounce rate with Google Analytics tool can be very helpful. You can make some change on your site, track bounce rate in time interval and follow what is happening with bounce rate. Is it stay, grow or become lower?

Tracking bounce rate of individual pages

Very important is to know that with Google Analytics you are not restricted on tracking bounce rate only for your whole site. You can track bounce rate of every individual page on your site.

To track bounce rate of individual pages with Google Analytics you need:

• Click Content > Top Content


• Click on Page you want to track






• Content detail page for chosen page will be opened, choose bounce rate and you can see bounce rate graph for given page

Bounce rate by traffic sources and keywords

Visitors coming from different sources can behave differently. For example visitors coming from search engines try to find some answers and their behavior is much different from visitors coming from similar web site who can be more interested to your niche.
You can track bounce rate by different traffic sources with help of Google Analytics. Go to Traffic Sources > All traffic sources and you can discover bounce rate for traffic sources to your site.




There is also option to analyze bounce rate by keywords. For example you can find keywords with high bounce rate and put some new content using this keywords.
Let's say you have keywords "upload javascript to blogger" with 100% of bounce rate. First you must find landing page (landing page is page a web user reaches after clicking on the link in the Search Engines results page) for these keywords. After that you can add content connected to keywords or add new page to site with content about keywords and on landing page add links to this new page.
To see bounce rate by keywords go to Traffic Sources > Keywords.


Time and bounce rate in Google Analytics

Time has no effect on the Google Analytics calculation of bounce rate. A visit that lasts for 30 minutes with only one pageview is considered as a bounce. However, a visit that lasts for only 5 seconds with 2 pageviews is not considered as a bounce.

Google analytics session is able to tolerate 29 minutes of inactivity. A session will start upon landing on a site. If the user chooses to leave the site and navigate to another website, the session will still continue for a maximum of 29 minutes. As long as the user returns to the initial site and makes a click, it will not be considered as a bounce.

Tips to improve bounce rate

• You can start with your most visited pages. Optimize most visited pages with high bounce rate and follow bounce rate for those pages with Google Analytics.


• Link between your own articles as reference - if you have excellent article on Page A and have no links on other pages of your site visitor will read article and be bounced


• Try to find right keywords for your page - many visitors come from search engines, if they don't find expected content they leave


• Some people claim that web design is most important factor


• For blogs good advice may be to add sidebar with Top 10 articles or something similar


• By studying our site statistics we can find out which pages and keywords are most efficient, and by doing so, find a pattern for a better optimization.


• Write interesting and useful articles


• Check speed of your site - if it is too slow, visitors will go away


• Check how your site working on other browsers - if site don't work well on Chrome you will loose all surfers how using Chrome


• If you’re out-linking excessively, try to reduce the number of outgoing links

My related articles:
Simple explain of google pagerank

Top 10 things you can do with Wolfram Alpha

After some research of Wolfram examples I have find those 10 most interesting examples to share with the world. Some examples are useful and some are interesting. Examples are sorted by relevance. First example is most interesting and so on.

1. Get data about recent earthquakes - really impressive, you can see earthquakes in world map in last 24 hours (or broader time interval) by magnitude.
   
   Example : earthquakes
   
   To see you need to type earthquakes in wolfram alpha






2. Get salary data for a given occupation - Enter word salary and occupation. You will get salary data for entered occupation (median wage, history, people employeed ...).
   
   Example : salary progammer
   



3. Generate report for life expectancy - You will get median life expectancy, highest(with country)life expectancy, and lowest life expectancy. There are also life expectancy rankings by countries and more demographics data


Example :


• life expectancy


• life expectancy in Andora




4. Rank countries - you can rank countries by some criteria


Example :


• 5 richest countries


• 5 poorest country


You get first 5 countries by GDP per capita, by GDP and by poverty fraction.





5. Country comparison - compare two countries (by location, area, demographic data, economic)
   
   Example: America, India



6. Find the definition of a word - enter definition and word you want to define
   
   Example: define soldier
   
   Result: soldier - serve as a soldier in the military



7. Find words matching a pattern - write word and with exchanged letters with low line. This can be very helpful if you can't remember the word.
   
   Example: _oun_e_
   
   Wolfram will return:
   
   b | o | u | n | c | e | r
   b | o | u | n | c | e | s
   b | o | u | n | d | e | d
   b | o | u | n | d | e | n
   b | o | u | n | d | e | r
   c | o | u | n | s | e | l
   c | o | u | n | t | e | d
   c | o | u | n | t | e | r...




8. Find anagrams of word - type "anagrams" and desired word
   
   Example : smart
   
   Wolfram will return : marts and trams
   



9. Compute a time difference - type Date to Date and you will get time difference.
   
   Example: Mar 21, 2009 to Sep 7, 2009


Wolfram alpha return 5 months 17 days


10. Do a mortgage computation - you can calculate monthly payments, mortgage totals and payments and balances. Very nice.
    
    Example: mortgage 100,000 Euros, 7%, 25 years
    
    

Wolfram Alpha (also written WolframAlpha and Wolfram Alpha) is an answer-engine. It is an online service that answers factual queries directly by computing the answer from structured data, rather than providing a list of documents or web pages that might contain the answer as a search engine might.

My main objection on Wolfram Alpha is that I couldn't find list for some term. For example I wanted to get list of all occupations but didn't find a way. If you enter pharmacist in Wolfram it knows that it is occupation. Same thing for animals, dinosaurs...

Of course Wolfram Alpha can do many other things but those I found most interesting.