Sunday, November 29, 2009

Download entire website or images

This article can help surfers who want:

  • download all pages linked from selected page on their computer

  • or

  • download entire web site on a local computer

  • or

  • automatically download all images (and links to images) from specific page or web site

  • or

  • automatically download any other type of files from selected page or site


Purpose of this article is not to go in details but to give links to applications which can help surfer to move files from web to his local hard. There is no need for saving every file by hand - just enter the starting address, choose what files to save and let the program do the rest of the work.


Extreme picture finder - with this software you can download images, music, video or any other files from websites automatically. Application have "find pictures" feature with built-in web picture search engine. Simply type your search phrase, click "Search" button and you'll have thousands of pictures to choose from in just a few minutes.
Main purpose of Extreme picture finder is downloading images on your computer.
This is a best application for downloading images from web sites I found on Internet. Very intuitive, good designed and user friendly. Unfortunately it is not free, user license plus one year of free updates cost $29.95.
Luckily you can download free evaluation copy for 20 days.



WinHTTrack - this application is FREE.
Main purpose of WinHTTrack is downloading sites on your computer.
In my opinion it is not so user friendly as Extreme picture finder but it is very powerful application. It give user many features.
With this application user can:

  • Download web site(s)

  • Get individual files - Will only get the desired files you specify (for example, ZIP files), but will not spider through HTML files

  • Download all sites in pages



BackStreet Browser - It is a FREE, offline browser. Main purpose is viewing and downloading sites on your computer.
It is less intuitive then Extreme picture finder and less powerful then WinHTTrack. This application was very successfully download my blog so it can be used for backup blogs.
By making multiple simultaneous server requests, BackStreet Browser can quickly download entire website or part of a site including HTML, graphics, Java Applets, sound and other user definable files, and saves all the files in your hard drive, either in their native format, or as a compressed ZIP file and view offline.


Monday, November 23, 2009

Google analytics - exclude your traffic

You can't resist to click and inspect your own blog? Problem is that your actions influence your Google analytic statistics. Your internal traffic have impact on your google analytics reports and this is a reason you can't quality analyze trends on your blog. For example I just put awesome menu bar on my blog and want to see how my Page/Visit is going. But while I implementing and testing menu bar on my blog I clicked many times on it and because my Google analytics reports are not accurate.


In this article you will find:

  • how to learn your external IP address

  • does you have dynamic or static IP address

  • excluding your IP address in google analytics

  • exclude your traffic in google analytics with cookies (guide to exclude traffic in GA you can find in second part of article)


The most simplest way to exclude you internal traffic in google analytics is to exclude your IP address with filters. Excluding your IP address in google analytics works if you have fixed IP address.
Those who have dynamic IP address can find how to exclude their own internal traffic with cookies.


Find your external IP address


To learn your IP address go to whatismyip.com and you will see your IP addres on the top of a page.


Does you have static or dynamic IP address


Static IP address is fixed and therefore never changes. Dynamic external IP address can change when you connect to the internet. So you can check your external IP address with help of whatismyip.com, disconnect from Internet, connect to Internet and check again your external IP address with whatismyip.com. If IP addresses are same you have static external IP address, if IP addresses are different you have dynamic external IP address.


Exclude your IP address in google analytics


  • In your Google Analytics click Edit

    Edit in Google Analytics

  • Click Add filter in the Filters Applied to Profile box

    Add filter in Google Analytics

  • now enter filter name, under filter type chose traffic from the IP addresses and Save Changes

    Create new filter in google analytics

  • on the end all traffic coming from your IP address (if it is static) will be excluded from google analytics reports (after 24 to 48 hours)


Exclude your traffic in google analytics with cookies


More about this topic find in my article Exclude my own visits in GA records with cookies.


Thursday, November 19, 2009

Where are cookies stored on PC

Find where are cookies stored on your computer with IE, Firefox or Chrome internet browser. This article will guide you how to find and inspect cookies with help of your favorite internet browser. You can find instructions to find location of cookies for internet explorer, Mozilla Firefoox and Google Chrome.


Let's first explain what is cookie. Cookie is a message given to a web browser on client PC by a web server. The internet browser stores the message (cookie) in a text file. The message is then sent back to the server each time the browser requests a page from the server. The main purpose of cookies is to identify user.


Locate cookies with IE 8


  • In IE8 click Tools --> Internet options

    Tools - Internet options in IE 8
  • In General tab click Setting under browsing history

    Settings under browsing history in Internet options
  • Final step is to click "View files" button in Temporary Internet Files and History Settings window and directoy with cookies files will be opened.

Find cookies with Firefox


  • Click on Tools --> Options

    Tools - Options in Firefox
  • Click privacy tab, for drop down box choose Use custom settings for history

    How to show cookies in firefox
  • Click button "Show Cookies" and Cookies window will be displayed. There is search option, you can view details for specific cookies or remove selected cookie

    Firefox cookie window

Find stored cookies with Google Chrome


  • Inside Customize and control Google Chrome find and click Options
  • Select Under the Hood tab and click Show Cookies button

    Show cookies in Google Chrome options window
  • In cookies window you can search, inspect and remove cookies on your computer

Realed topics:
Show hidden files and folders on Windows 7

Monday, November 2, 2009

jQuery drop down menu for blogger

How to add horizontal multi level menu to blogger? More precise, how to implement jQuery drop down multi level menu for blogger (blogspot)? You can find step by step guide in this article. Sometimes it can be called blogger menu bar, blogger horizontal navigation menu or horizontal navbar. This article can be useful and for visitors who do not want to install drop down menu on blogger but it is primarily focused on blogger users. In this guide jQuery menu plugin by Joel Birch is used.


First let's explain what jQuery drop down multi level menu mean word by word.

  • jQuery - jQuery is designed to change the way that you write JavaScript. It have powerful visual effects and allow our drop down menu to work

  • drop down menu - a list of options that appears below the item when the computer user clicks on it or hover mouse pointer over item

  • multi level menu - menu from this tutorial is 3 levels depth. Multi level means that you have menus and submenus. For 3 level we have menu items which have submenu items and submenu items can have own submenu items


Example of simple jQuery drop down menu:




Tutorial to add jQuery drop down menu on blogspot

  • first step is to add css code to blogger template

    • you can find sample css code in the end of article and copy and paste it in Edit Template box

    • copy css sample code from the bottom of article

    • Go to Layout

    • Click on Layout --> Edit HTML

      Edit blogger template

    • it is recommended (wise) to backup template on local hard disk before doing any change in edit template box

    • in Edit HTML box find </b:skin> tag, before this tag paste css code (just before ]]></b:skin>), you can see on picture where to put code, "PUT jQuery MENU CSS CODE HERE"


    • you can change css code to adjust your visual preferences of menu if you have enough knowledge, if this is case my suggestion is to use some good HTML editor


  • second step is to add HTML/JavaScript page element and add jQuery and HTML code for drop down menu into this page element

    • Go to Layout --> Page elements


    • select HTML/JavaScript

      Select HTML or JavaScript on blogger

    • in Configure HTML/JavaScript window add (copy and paste code below) jQuery code needed for menu to work properly

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

      <script type="text/javascript" src="http://everything-about-blogging.googlegroups.com/web/hoverIntent.js?gda=OCoH4UAAAADAUWBlY8jxn6h_X6rBHvj4fINo3FqnP184lbsvRkkyX55SCaRh6rXo2PdRGn5gs_5txVPdW1gYotyj7-X7wDON"></script>

      <script type="text/javascript" src="http://everything-about-blogging.googlegroups.com/web/superfish.js?gda=ap1Fuj4AAADAUWBlY8jxn6h_X6rBHvj4L6oUiMXUy8ihNbuhoIHff41rY0dt7WB7QpdcqEsrVV3jsKXVs-X7bdXZc5buSfmx"></script>

      <script type="text/javascript">
      // initialise plugins
      jQuery(function()
      {
      jQuery('ul.sf-menu').superfish();
      });
      </script>

    • in jQuery code above there are three links on external jquery files (jquery-1.3.2.min.js, hoverIntent.js and superfish.js) and jQuery initialize function. You can upload files somewhere you like if you have where to host files, for more information about hosting files for blogger visit the link


    • and on the end you must add HTML code for menu items, more information about building menu items in HTML you can find in lower section of this article

      <ul class="sf-menu">
      <li class="current">
      <a href="#a">Home</a>
      </li>
      <li>
      <a href="#a">Sample menu 1</a>
      <ul>
      <li class="current">
      <a href="#a">Submenu 1</a>
      <ul>
      <li>
      <a href="#a">Sub submenu</a>
      </li>
      </ul>

      </li>
      <li>
      <a href="#a">Submenu 2</a>
      </li>
      </ul>
      </li>

      <li>
      <a href="#a">Sample menu 2</a>
      </li>
      </ul>


    • click on Save button and you have page element with jQuery menu

  • put drop down menu on right position on the blog

    • to set HTML/JavaScript gadget with drop down menu below header you should drag and drop HTML/JavaScript gadget right below header gadget like on the picture

      Set drop down menu below header

    • if you want to put multi level menu inside header you can read Add new page element to blogger header


Short guide for building drop down menu in HTML


Intention of this section is to learn users how to build their own jQuery menu with menu items of user's choice. To follow this section requirements are : added jQuery css code in blogger template and links to jQuery scripts in HTML page element under HTML code for building drop down menu.


To start building jQuery menu in blogger we will first add code to show just Home menu item in HTML/Javascript page element:


  <ul class="sf-menu">
<li class="current">
<a href="#a">Home</a>
</li>
</ul>
Result:

First step in creating jQuery menu


Now we will add menu item "Menu 2" right to Home item, it is new <li> in HTML code


<ul class="sf-menu">
<li class="current">
<a href="#a">Home</a>
</li>
<li class="current">
<a href="#a">Menu 2</a>
</li>

</ul>
Result:

Step two in building jQuery menu


To add two submenus to "Menu2" item we will open <ul> tag and put two <li> tags, one for each submenu


<ul class="sf-menu">
<li class="current">
<a href="#a">Home</a>
</li>
<li class="current">
<a href="#a">Menu 2</a>
<ul>
<li><a href="#a">SubMenu1</a></li>
<li><a href="#a">SubMenu2</a></li>
</ul>

</li>
</ul>

Result:

Add two submenus to menu item in jQuery drop down multi level menu


Last, we will add one 3rd level submenu "Blogger jQuery menu" to Submenu1 which link to this page. To do that one more <ul>, <li> tag are needed



<ul class="sf-menu">
<li class="current">
<a href="#a">Home</a>
</li>
<li class="current">
<a href="#a">Menu 2</a>
<ul>
<li><a href="#a">SubMenu1</a>
<ul>
<li>
<a href="http://interestingwebs.blogspot.com/2009/11/jquery-drop-down-menu-for-blogger.html">jQuery menu</a>
</li>
</ul>

</li>
<li><a href="#a">SubMenu2</a></li>
</ul>
</li>
</ul>
Result:

Add third level submenu with link for jQuery multi level menu



Sample css code (this code you should Paste inside Edit Template box):
/* jQuery menu in Blogger
----------------------------------------------- */
.sf-menu, .sf-menu * {
margin: 0;
padding: 0;
list-style: none;
font-size: 12.5px;
font-weight: bolder;

}
.sf-menu {
line-height: 1.0;
}
.sf-menu ul {
position: absolute;/*absolute */
top: -999em;
width: 11em; /* left offset of submenus need to match (see below) */
}
.sf-menu ul li {
width: 100%;
}
.sf-menu li:hover {
visibility: inherit; /* fixes IE7 'sticky bug' */
position: relative;
}
.sf-menu li {
float: left;
position: relative;
}
.sf-menu a {
display: block;
position: relative;
}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
left: 0;
top: 2.5em; /* match top ul list item height */
z-index: 99;
}
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
top: -999em;
}
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
left: 10em; /* match ul width */
top: 0;
}
ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
top: -999em;
}
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
left: 10em; /* match ul width */
top: 0;
}

/* jQuery menu Skin */
.sf-menu {
float: left;
margin-bottom: 1em;
}
.sf-menu a {
border-left: 1px solid #fff;
border-top: 1px solid #303643;
padding: .75em 1em;
text-decoration:none;
}
.sf-menu a, .sf-menu a:visited { /* visited pseudo selector so IE6 applies text colour*/
color: #13a;
}
.sf-menu li {
background: #BEBDC6;
}
.sf-menu li li {
background: #ABAAB2;
}
.sf-menu li li li {
background: #9D9CA3;
}
.sf-menu li:hover, .sf-menu li.sfHover,
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
background: #C9CED8;
outline: 0;
}

/* jQuery menu arrows */
.sf-menu a.sf-with-ul {
padding-right: 2.25em;
min-width: 1px; /* trigger IE7 hasLayout so spans position accurately */
}
.sf-sub-indicator {
position: absolute;
display: block;
right: .75em;
top: 1.05em; /* IE6 only */
width: 10px;
height: 10px;
text-indent: -999em;
overflow: hidden;
background: url('http://everything-about-blogging.googlegroups.com/web/arrows-ffffff.png?gda=67YBQ0MAAADAUWBlY8jxn6h_X6rBHvj4QNAPmZcqNnLYwV-u6mYlzcxqN3IBlRvSF39T5Jy3ke8ytiJ-HdGYYcPi_09pl8N7FWLveOaWjzbYnpnkpmxcWg') no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */
}
a > .sf-sub-indicator { /* give all except IE6 the correct values */
top: .8em;
background-position: 0 -100px; /* use translucent arrow for modern browsers*/
}
/* jQuery menu - apply hovers to modern browsers */
a:focus > .sf-sub-indicator,
a:hover > .sf-sub-indicator,
a:active > .sf-sub-indicator,
li:hover > a > .sf-sub-indicator,
li.sfHover > a > .sf-sub-indicator {
background-position: -10px -100px; /* arrow hovers for modern browsers*/
}

/* jQuery menu - point right for anchors in subs */
.sf-menu ul .sf-sub-indicator { background-position: -10px 0; }
.sf-menu ul a > .sf-sub-indicator { background-position: 0 0; }
/* jQuery menu - apply hovers to modern browsers */
.sf-menu ul a:focus > .sf-sub-indicator,
.sf-menu ul a:hover > .sf-sub-indicator,
.sf-menu ul a:active > .sf-sub-indicator,
.sf-menu ul li:hover > a > .sf-sub-indicator,
.sf-menu ul li.sfHover > a > .sf-sub-indicator {
background-position: -10px 0; /* arrow hovers for modern browsers*/
}

/*** jQuery menu - shadows for all but IE6 ***/
.sf-shadow ul {
background: url('http://everything-about-blogging.googlegroups.com/web/shadow.png?gda=4tLiFjwAAADAUWBlY8jxn6h_X6rBHvj4ceGrKIvBGE44_txK-25oJLZEbBiS5QGKHXatl60KKDH9Wm-ajmzVoAFUlE7c_fAt') no-repeat bottom right;
padding: 0 8px 9px 0;
-moz-border-radius-bottomleft: 17px;
-moz-border-radius-topright: 17px;
-webkit-border-top-right-radius: 17px;
-webkit-border-bottom-left-radius: 17px;
}
.sf-shadow ul.sf-shadow-off {
background: transparent;
}