Catatan Harian

Google Plus Blogger Template

2011-07-24T21:42:00.000-07:00

Name:	Google Plus
Platform:	Blogger / Blogspot
Coder/Designer:	Creative Blogging Ideas
Coder/Designer URL:	http://www.creativebloggingideas.com/
Description:	Google Plus is a free Blogger template that is a minimalist design, with
	2 Sidebar, 3 Column, white color background, Fixed width, Left Sidebar and Right Sidebar and more.
Theme Features:	-

Instructions:	1. Change the logo:
	open template source code and search for: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJuiDwp_LrAGUkphpEWsnFl03GV3Popl0ZMPvuJC8n3EZOxIGvfNGawv5GwbV57veJqwkR2zusYIk16JcMEj28l6BUq9PwLPBLW4tnknSnpqWW6suSsxvQm23cFHTMS5WE3vVLH0szlwo/s320/google-logo-plus-0fbe8f0119f4a902429a5991af5db563.png replace this image link with you own logo but remember the size should be same. 2. There are four menu option but beside the logo, by default I’ve given some links, if you want to change it, you have to do it manually. Search for <div class=’top-options’> and you can make the changes there. 3. At top there is option to add Pages that are added automatically.
Compatible:
Tags:	2 sidebar, 3 column, Blogger, Fixed Width, Left Sidebar, Magazine, Right Sidebar, White

NJ Company Blogger Template

2011-06-29T10:18:00.000-07:00

Name:	NJ Company
Platform:	Blogger / Blogspot
Description:	NJ Company Blogger Template is a clean and nice elegant style blogger template adapted from WordPress Theme to Blogger Template. It's a 1 column blogger template, cool elegant look background.top navigation bar and this blogger template suitable for company introduce blogs.
Template Author:	Cute Templates Blogger
Designer URL	http://cutetemplatesblogger.blogspot.com
Instructions:	-
Compatible:
Tags:	1 Column, Adapted from Wordpress, Ads Ready, adsense ready, Blogger, Blue, Business, dark, Elegant

Bionic Blogger Template

2011-06-29T05:10:00.000-07:00

Name:	Bionic
Platform:	Blogger / Blogspot
Description:	Bionic Blogger Template is another beautiful HTML5 and CSS3 latest blogger coding and disqus comment system. Bionic Blogger Template which is modified and converted from WordPress theme. This template have a very vivid color scheme, slider and twitter integration. This template contains three version: Bionic Blogger Template Full Version, Bionic Blogger Template Simple Version and Bionic Blogger Template Without Slider Version
Template Author:	Avinas Bhardwaj
Designer URL	http://top-wordpress.net/
Instructions:	Setting for discus comment system: First sign up at http://disqus.com/. And create a site profile at there and then find disqus_shortname in your html template in extended form. And your short name next to this.
Compatible:
Tags:	1 Sidebar, 2 Column, 4 Column Footer, Adapted from Wordpress, Blogger, CSS3, Green, HTML5, Magazine, Right Sidebar, Slider, Threaded Comments, Twitter Ready, White, Yellow

DotNews Blogger Template

2011-03-23T00:16:00.000-07:00

Features:
Instructions:	How to use this template
Template author:	PBTemplates
Designer:	FThemes
Description:	DotNews is a free blogger template adapted from WordPress with 3 columns, sidebar on the right and left, magazine-styled, space for ads, slideshow, posts thumbnails, tabs and drop down menu.

Luxury Yatching Blogger Template

2011-03-15T10:01:00.000-07:00

Features:

Instructions:	How to use this template
Author:	PBTemplates
Designer:	Web2Feel
Description:	Luxury Yatching is a free premium blogger template adapted from WordPress with 2 columns, right sidebar, magazine-styled, footer columns, slideshow and posts thumbnails.

Techa WordPress Theme

2011-03-15T09:19:00.000-07:00

Techa is a 3 columns fixed width WordPress theme by MagPress.com. This Dark Blue WordPress template comes with customized homepage layout, custom first/latest post display, custom recent posts block, featured categories, Adsense ready and many more.

Solarmag WordPress Theme

2011-03-15T09:17:00.000-07:00

Solarmag is a 2 columns fixed width WordPress theme by MagPress.com. This WP theme comes with theme options, featured posts, Adsense ready, sidebar tabbers, footer widgets and many more.

Pinkvisor WordPress Theme

2011-03-15T09:16:00.000-07:00

Pinkvisor is 2 columns fixed width WordPress theme by MagPress.com. This Pink WordPress template has theme options, featured content slider, featured categories, Adsense ready, Twitter and many more.

Minimal Swiss Design Blogger Template

2011-03-08T07:10:00.000-08:00

The Minimal Swiss Design theme by Marios Lublinski (released by Smashing Magazine) is just one of those templates. Ideally suited to artists and designers, this simple and beautiful template instantly inspired me to create a Blogger conversion (including additional theme options for customizing the design).

This blogger template for free under the GPLv2 License, which means you can use them for all your projects for free and without any restrictions.

Features of this template

Minimal Swiss Design is a simple CSS-based template which uses no external JavaScript and loads swiftly in the browser.

It features a three column layout with two narrow sidebars which are ideally suited to Picture gadgets for display of visual portfolio items and is wholly compatible with the Blogger template designer for customization of backgrounds, colours and fonts.

More features include:

Widget sections in the header for address details and social media links
Use of custom fonts from the Google Font Directory
Choose to display post titles only on item pages (perfect for a portfolio site) or site-wide
Upload your own background image using the Blogger template editor
Change all background colours, fonts and font colours to create a visual theme of your own

I've checked the design in a wide variety of browsers and am assured of it's compatibility right back to Internet Explorer 6!

How to install this template

This Minimal Swiss Design template works right out of the box and can be installed in just a few mouse clicks!

First you'll need to download the version you would like to use:

Show post titles on all pages
No post titles (except on item pages)

Once you've downloaded the appropriate file, extract the template to a location on your computer.

Now log into your Blogger dashboard and go to Design>Edit HTML. Near the top of this page you'll see a section where you can choose to "Upload a new template". Click this button which will prompt you to locate the XML file for your template.

Select your extracted template file and click "Upload".

Note: You may receive a notice that gadgets in your existing template are not present in the new design. If you would like to keep these widgets, select "Keep widgets" from the options available (alternatively you can choose to delete these widgets).

Once the upload is complete, choose to "View blog" to see the new template in action.

Add your gadgets to the sidebar

This template was designed primarily to be used as a portfolio site and is very suited to image gadgets in the sidebars.

Go to Design>Page Elements to add gadgets to your layout. When you add Picture gadgets through this page, the images you upload will be automatically resized to fit the sidebar's width.

Note: Gadget titles in the sidebar will appear if present (using the "Syncopate" font used for the blog title). If you do not want to display gadget titles, do not add a title for your gadget.

Customize the design

This template is fully compatible with the Blogger template designer, enabling us to customize the appearance using the WYSIWYG editor with live previews. You can even remove the background image and replace it with an image of your own!

To customize the Minimal Swiss Design template, simply go to Design>Template Designer in your Blogger dashboard and select your chosen options from the menu in the left column:

Customize the background image

Customize fonts and colours

Credits and usage guidelines

This template was converted from the original Wordpress design by Marios Lublinski, which is distributed by Smashing Magazine.

It is available for use under the GPLv2 License which enables free use for all your personal and commercial projects without the requirement of attribution. In other words, you don't have to link back to Blogger Buster or Marios Lublinski (though of course we wouldn't complain if you do!).

If you'd like to spread the word about this free template, please link to this article rather than the actual download link so others may find complete instructions for installation, customization and credits.

Display Post Summaries and Automatic Thumbnails

2011-03-08T07:08:00.000-08:00

With only a few small changes to our Blogger template, we can display post summaries and thumbnails using this easy to manage hack.

How to add Blogger post summaries and thumbnails in three simple steps

Here's my step-by-step guide to the easiest solution for post summaries and thumbnails with Blogger:

Step 1 - Back up your template!

It is important to back up your Blogger template before making any edits. This ensures we can easily restore the working template if anything goes wrong.

You'll be prompted to save an XML file to your computer hard drive - this XML file includes all of the HTML and widget templates required to display your current Blogger design. Be sure to save this in an easy to remember location and make a note of the file name in case you later need to restore your working template.

Step 2 - Add the code to display summaries and thumbnails on non-item pages

The next stage is to add the Blogger code which will display a summary and thumbnail of our posts. Go to Design>Edit HTML and check the Expand widget templates box and search for the following line of code:

<data:post.body />

Replace this line with the following code:

      <b:if cond='data:blog.pageType != "item"'>
          <b:if cond='data:post.snippet'>
          <b:if cond='data:post.thumbnailUrl'>
              <div class='Image thumb'>
                <img expr:src='data:post.thumbnailUrl'/>
              </div>
          </b:if>
            <data:post.snippet/>
    <b:if cond='data:post.jumpLink != data:post.hasJumpLink'>
      <div class='jump-link'>
        <a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
      </div>
    </b:if>
          <b:else/>
            <data:post.body/>
          </b:if>
      <b:else/>
      <data:post.body/>
      </b:if>

Preview the change to your template and you'll see that your posts will appear in a format similar to this:

As seen in the screenshot above, the thumbnail appears above the summary. We can align the thumbnail more cohesively to the left or right of the summary by adding CSS to our template.

At this stage, you can choose to save the edit to your template or add the CSS and preview the final effect before committing the changes to your site.

Step 3 - Add CSS to align the thumbnail image

While still on the Design>Edit HTML section of your dashboard, search for the following line:

</b:skin>

Immediately before this line, paste the following CSS statement:

.thumb img {
  float: left;
  margin: 0 10px 10px 0;
}

This will align the thumbnail to the left of the post summary, and allow some distance between the thumbnail and text like this:

If you would prefer to align your thumbnail image to the right, paste the following code instead:

.thumb img {
  float: right;
  margin: 0 0 10px 10px;
}

Preview your template to see how this makes your posts appear on the home page. When you're happy with the layout, save your template and enjoy your automated thumbnails!

How this customization displays summaries and thumbnails

While simple to add to our Blogger template in order for the function to work, there is a lot of complex conditional code in use to ensure the summaries display as they should.

First, the code checks if the page being viewed is an item page or not. If the page is not an item page, the summary/thumbnail code will come into effect.

The second check discovers if a post snippet is available (i.e: if the post contains some text). If there is a snippet, the code checks if a thumbnail is available and displays the thumbnail if there is, followed by the snippet. Where no thumbnail is available (when the post does not contain an image), only the snippet is displayed.

If there is no snippet available for a particular post, the complete body of text is displayed normally. This ensures that posts with no content or which feature only an image are displayed normally; no thumbnail is displayed, and any images are displayed at full size.

Finally, the code checks if the post contains the  tag. If it does not contain this tag, a "Read more" link will be displayed beneath the snippet, ensuring visitors can easily click through to read the post page. Where a jump-link is present, this is displayed as normal after the snippet.

Twitter Inspired Blogger Template – Twit Plus

2011-02-18T10:01:00.000-08:00

This blogger template is called as Twit plus and has all the Twitter style features. This template is totally unique and different.

Template Specifications:

Two column Twitter style layout.
Twitter-like floating header
Twitter-like expandable post contents
Read more and comments link shown when hovered
Twitter-like Profile box on home page
Widgets ready
Social share icons for blog post

Template Settings

1. Blog Title

<div class='logo'><a expr:href='data:blog.homepageUrl'><h2>Twit Plus</h2></a></div>

2. Navigation Bar

<div id='nav'>
 <ul>
 <li><a expr:href='data:blog.homepageUrl'>Home</a></li>
 <li><a href='#'>About</a></li>
 <li><a href='#'>Contact</a></li>
 </ul>
</div>

3. Profile Box

Profile image size : 128px X 128px

<div class='authorimg'>
     <img src='http://3.bp.blogspot.com/_b8IA1ajBJG8/TTLRUxcD4oI/AAAAAAAAB4g
/vqBMUVneVII/s1600/default_pic.png'/>
</div>
<div class='authorinfo'>
     <span class='name'><h3>Bloggermint</h3></span>
     <span class='location'><h4>Mountain View, California</h4></span>
     <span class='bio'>Bloggermint focus on blogger, wordpress, web tips, web design to help bloggers blog better.</span>
</div>

4. Profile link and follow button

<div class='profilelink'>
    <a href='#'>View My Profile!</a>
    <span class='follow button'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdDY04SXNxg9E2gsbJSxSsCC1IvaTxt3HPmFQ01ko4VDWnnlZDzXHb6XQuXmfwRwaKn8PmUbMAh5YnFJpg7QnOU9R3W4q7vxDPozA6IYY4MDi6Rmv6GmM8ry4qH3T0AYVWMWQH8aQF9U4V/s1600/add.png' style='left: -3px;position: relative;top: 1px;'/><a href='http://twitter.com/username'>Follow</a></span>
</div>

5. Mini Profile Pic in Post Area

Mini image size : 48px X 48px

<!-- Post Author Image Start -->
<div class='authorpic'>
<img src='http://3.bp.blogspot.com/_b8IA1ajBJG8/TTLSDkWo33I/AAAAAAAAB4o
/D5ioqogJ250/s1600/default_profile_normal.png'/>
</div>
<!-- Post Author Image End -->

6. Followers, fans, subscribers count

<div id='follow'>
<div class='twitter'><a href='http://twitter.com/username'><b>299</b></a><span class='bot'>Followers</span></div>
<div class='facebook'><a href='http://www.facebook.com/pages'><b>299</b></a><span class='bot'>Fans</span></div>
<div class='feedburner'><a href='http://feedburner.google.com/feed'><b>299</b></a><span class='bot'>Subscribers</span></div>
</div>

Get the feel of Twitter for you blog now!

How to improve website speed

2011-02-09T22:13:00.000-08:00

image by moovinonup.com

When you write Web pages, you need to remember that someone on the other end of the 'net is going to download and read them. Because of this, you want to make sure that they load as quickly as possible.

Some good rules of thumb for keeping the download time short:

30K — maximum size for your Web page, including all images
Thus, if you have two 10K images on your page, you should not have more than 10K of HTML and text.
12K — maximum size for each image, sound file, or applet
This includes animated images and anything downloaded with the page
Use multiple pages
Instead of one long page
Use special effects sparingly
Make sure that the site needs the effect you want. Whenever you add Java or JavaScript or other effects, that impacts the download time of your site.
Keep JavaScript and CSS External
By reducing the amount of code on each page of your site you can improve the load time. But instead of stripping your site of content and features, just keep as much functionality and design features external as possible. Loading JavaScript and CSS from external sources only requires one line of code in the header of the page. This is as opposed to bits and pieces of inline code across each page eating up precious milliseconds for each image they format or chunk of text they tailor.
Progressive Rendering
Progressive rendering is a vital part of speeding up your site and making it more appealing for user experience. If you went to a restaurant, you would expect your starter to be served up before your main and not have to wait longer for it all to come at once. Progressive rendering works the same way in that it serves up what is currently available to you while waiting for the rest of the page to bake (sorry, load).

There are several ways in which you can apply better progressive rendering:

By putting stylesheets at the top of the document, i.e. in the page header, you can force the server to load these sections first allowing the page to return several page elements while it waits for the other.

Remember to Flush! No seriously, a content flush can play a major part in progressively rendering your page by allowing you to tell the page when to output a section during the load. Multiple flushes can be used on a page, but one ideal use is to get the page to flush immediately after the section of the page. This way the browser gets ahead by starting to download the CSS, JavaScript, etc while waiting for the full HTML response. Below is an example of a PHP flush being performed:

<html>
<head>
<title>page name</title>
<link rel=”” href=”style.css” />
<script src=”new.js”></script>
</head>
<?php flush(); ?>
<body>

Make sure that your website is both efficient and fast, you certainly put yourself in a better position to improve your traffic, conversions and rankings. Add this to creating new content and making ongoing SEO developments, and your site will be off to a flyer.

Quick WEB Pages (HTML) Refresher

2011-02-09T21:23:00.000-08:00

When you create Web pages, there are a few things that can help make the pages load more quickly, and the pages be more available for your readers. These are tips that I've given the developers on my team, and now I'm passing them along to you.

Images - always use an ALT tag with your images. This is so that the image is accessible to non-visual browsers and also so that there is a little "pop-up" text information when you hover your mouse over the image. Verify that the alt-text matches the image. It can be common to create alt text that describes the image, but not what it says. For example, many companies put their logo on their pages with the alt text "company logo". But when a screen reader reads it, it makes more sense to read "About, Inc."

Also with images, always use the exact height and width of the image in the image tag. i.e. <img src="image.gif" height="65" width="34" alt="image" border="0"> When you don't put in the exact height and width, the browser has to guess and this makes the page take longer to load.

Finally, with images it's a good idea to use the border="0" attribute. It isn't required, but if that image is changed into a link, it will have a bright blue border around it, which usually distracts from the look of the page.
Links - always test your links before you finish a Web page. Your readers will, and they will get annoyed by broken links. And most readers will not write to you to tell you a link is broken, they will just leave.
URLs - both for images and links - make sure that you use a full-path URL for all images and links that are your Web server. These URLs should not include the http://www.domain.com - but they should include everything from the first slash (/) after the server name. This is because if the page is moved, or a symbolic link is created to it, the images and links will not be broken. This is especially important to watch if you write the pages in an editor offline and then upload them. look at the HTML before you upload to make sure that the URLs are full-path and not relative.
TEST YOUR PAGES - it helps if you can test your pages on a testing server before you put them live. This allows you to put pages up in the Web environment, see how they look, and not be worried that they might be seen by a customer.

source: Jennifer Kyrnin

Table Of Contents Widget For Blogger

2011-02-04T20:19:00.000-08:00

Table Of Contents widget on this blog requires Javascript that it will take time to load and will be displayed on a particular Page only.

Installation :

1. Make a new Blank Post in Blogger with title "Table Of Contents" (or whatever you like).

2. Before publishing this post, make sure that you set the publishing date to an old one so that this post wont appear in your blog feed. You can do it from Post Options in the Post Editor. Also don't allow comments on this post.

3. Now you have created a new post page where the Table Of Contents will be displayed.

4. Note down the URL of this post that you created.

5. Find.

</head>

in your template and replace it with the following code after applying the proper url.

<b:if cond='data:blog.url == &quot;http://blogbloger-admin.blogspot.com/2010/10/table-of-contents.html&quot;'>
<style>

#toc {
border: 0px solid #000000;
background: #ffffff;
padding: 5px;
width:100%;
margin-top:10px;
}
.toc-header-col1, .toc-header-col2, .toc-header-col3 {
background: #ddd;
color: #000000;
padding-left: 5px;
width:50%px;
}
.toc-header-col2 {
width:15%;
}
.toc-header-col3 {
width:25%px;
}
.toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {
font-size:93%;
text-decoration:none;
}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
font-size:93%;
text-decoration:underline;
}

.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {
padding-left: 5px;
font-size:93%;
}
.post{display:none;}
.comments-block{display:none;}
.comment-form{display:none;}
.comment-footer{display:none;}
.blog-pager{display:none;}
.date-header{display:none;}
.feed-links{display:none;}
.comments{display:none;}
</style>
</b:if>
</head>

6. Save and again edit your template. Don't expand the Widget Templates.
7. Find this line of code.

<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>

and immediately after that place this code snippet (after editing the snippet with your TOC url).

<b:widget id='HTML345' locked='false' title='Table Of Contents' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == &quot;http://blogbloger-admin.blogspot.com/2010/10/table-of-contents.html&quot;'>
<h2 class='title'>Blog Table Of Contents</h2>
<div class='widget-content'>
<div id='toc'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhCHKu2DSXA8IEkeFQhTCJiCsD6grHCNXH2vzWsZGchAVftgYCkqUx8Y67MgbERa5fkVC8du2TOAbaiiHGpOtn6yIeqjL_dxW6_hbYbbloqkmL65eE5saC4hyq-BgmVrUvJ8k5TPAVpDNX/s400/favicon.png'/>Loading The Blog TOC...</div>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

8. Now Find.

</body>

and place this code immediately above it after tweaking it with your blog urls (replace all those red urls properly).

<b:if cond='data:blog.url == &quot;http://blogbloger-admin.blogspot.com/2010/10/table-of-contents.html&quot;'>
&lt;script style=&quot;text/javascript&quot; src=&quot;http://blogger-plugins.googlecode.com/files/blogtoc.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;http://blogbloger-admin.blogspot.com/feeds/posts/default?alt=json-in-script&amp;max-results=500&amp;callback=loadtoc&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;http://blogbloger-admin.blogspot.com/feeds/posts/default?alt=json-in-script&amp;start-index=501&amp;max-results=500&amp;callback=loadtoc&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;http://blogbloger-admin.blogspot.com/feeds/posts/default?alt=json-in-script&amp;start-index=1001&amp;max-results=500&amp;callback=loadtoc&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;&gt;showToc();&lt;/script&gt;
</b:if>

9. Done and try visiting your TOC Page.

Add Tweet Box to Blogger

2011-02-03T14:07:00.000-08:00

Since @Twitter released the @AnyWhere Developer Tool. AnyWhere allows you to seamlessly integrate Twitter into your site using a few lines of JavaScript. You can read more about it at @AnyWhere Developer Page. Tweet Box is one such @AnyWhere Application, which allows you to add a 140 char Tweet Box onto your blog.

Add the Tweet Box on a Blogger Blog?

1. Go to the @AnyWhere Developers Page and create an Application there with your blog details.

Make Sure that you have checked the Read & Write Option when you Register your Application

2. When you complete the signup process, you will get some JavaScript codes, with a unique API Key.

Copy out the JavaScript from there(the code in the red box) as shown in this Screenshot.

3. Now Login to your Blogger Dashboard and navigate to the Edit HTML Tab under Design and “Expand your Widget Templates”

4. Look for

<head>

and paste the copied Twitter JavaScript just above that line and save the template.

5. Now look for

<data:post.body>

and immediately below that paste the following JavaScript Code and save your template.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='tweetBox'/>
<script type='text/javascript'>
tweet_link=&quot;<data:post.url/>&quot;;
twttr.anywhere(function (T) {
T(&quot;#tweetBox&quot;).tweetBox({
width: 560,
label: &quot;Share &amp; Retweet&quot;,
defaultContent: &quot;Retweet @bambangwi <data:post.title/>&quot;+&quot; &quot;+tweet_link
});
});
</script>
</b:if>

note: editable parts are shown in red

Now you should see the Tweet Box on all of your post pages

Tab View Menu for Blogger with CSS and jQuery

2011-01-30T07:37:00.000-08:00

How To Add this Multi Tabbed Widget To Blogger?

I have divided the tutorial in three parts which are,

Adding the JQuery and JavaScript to your Blogger templates
Adding the CSS
Adding the HTML

1- Adding the JQuery and JavaScript to your Blogger templates

Go To Blogger > Design > Edit HTML
Backup your template
Search for ]]></b:skin>
Just below it paste the following code

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[

/*
 * Superfish v1.4.8 - jQuery menu widget
 * Copyright (c) 2008 Joel Birch
 *
 * Dual licensed under the MIT and GPL licenses:
 *  http://www.opensource.org/licenses/mit-license.php
 *  http://www.gnu.org/licenses/gpl.html
 *
 * CHANGELOG: http://users.tpg.com.au/j_birch/plugins/superfish/changelog.txt
 */

;(function($){
 $.fn.superfish = function(op){

  var sf = $.fn.superfish,
   c = sf.c,
   $arrow = $(['<span class="',c.arrowClass,'"> &#187;</span>'].join('')),
   over = function(){
    var $$ = $(this), menu = getMenu($$);
    clearTimeout(menu.sfTimer);
    $$.showSuperfishUl().siblings().hideSuperfishUl();
   },
   out = function(){
    var $$ = $(this), menu = getMenu($$), o = sf.op;
    clearTimeout(menu.sfTimer);
    menu.sfTimer=setTimeout(function(){
     o.retainPath=($.inArray($$[0],o.$path)>-1);
     $$.hideSuperfishUl();
     if (o.$path.length && $$.parents(['li.',o.hoverClass].join('')).length<1){over.call(o.$path);}
    },o.delay); 
   },
   getMenu = function($menu){
    var menu = $menu.parents(['ul.',c.menuClass,':first'].join(''))[0];
    sf.op = sf.o[menu.serial];
    return menu;
   },
   addArrow = function($a){ $a.addClass(c.anchorClass).append($arrow.clone()); };
   
  return this.each(function() {
   var s = this.serial = sf.o.length;
   var o = $.extend({},sf.defaults,op);
   o.$path = $('li.'+o.pathClass,this).slice(0,o.pathLevels).each(function(){
    $(this).addClass([o.hoverClass,c.bcClass].join(' '))
     .filter('li:has(ul)').removeClass(o.pathClass);
   });
   sf.o[s] = sf.op = o;
   
   $('li:has(ul)',this)[($.fn.hoverIntent && !o.disableHI) ? 'hoverIntent' : 'hover'](over,out).each(function() {
    if (o.autoArrows) addArrow( $('>a:first-child',this) );
   })
   .not('.'+c.bcClass)
    .hideSuperfishUl();
   
   var $a = $('a',this);
   $a.each(function(i){
    var $li = $a.eq(i).parents('li');
    $a.eq(i).focus(function(){over.call($li);}).blur(function(){out.call($li);});
   });
   o.onInit.call(this);
   
  }).each(function() {
   var menuClasses = [c.menuClass];
   if (sf.op.dropShadows  && !($.browser.msie && $.browser.version < 7)) menuClasses.push(c.shadowClass);
   $(this).addClass(menuClasses.join(' '));
  });
 };

 var sf = $.fn.superfish;
 sf.o = [];
 sf.op = {};
 sf.IE7fix = function(){
  var o = sf.op;
  if ($.browser.msie && $.browser.version > 6 && o.dropShadows && o.animation.opacity!=undefined)
   this.toggleClass(sf.c.shadowClass+'-off');
  };
 sf.c = {
  bcClass     : 'sf-breadcrumb',
  menuClass   : 'sf-js-enabled',
  anchorClass : 'sf-with-ul',
  arrowClass  : 'sf-sub-indicator',
  shadowClass : 'sf-shadow'
 };
 sf.defaults = {
  hoverClass : 'sfHover',
  pathClass : 'overideThisToUse',
  pathLevels : 1,
  delay  : 800,
  animation : {opacity:'show'},
  speed  : 'normal',
  autoArrows : true,
  dropShadows : true,
  disableHI : false,  // true disables hoverIntent detection
  onInit  : function(){}, // callback functions
  onBeforeShow: function(){},
  onShow  : function(){},
  onHide  : function(){}
 };
 $.fn.extend({
  hideSuperfishUl : function(){
   var o = sf.op,
    not = (o.retainPath===true) ? o.$path : '';
   o.retainPath = false;
   var $ul = $(['li.',o.hoverClass].join(''),this).add(this).not(not).removeClass(o.hoverClass)
     .find('>ul').hide().css('visibility','hidden');
   o.onHide.call($ul);
   return this;
  },
  showSuperfishUl : function(){
   var o = sf.op,
    sh = sf.c.shadowClass+'-off',
    $ul = this.addClass(o.hoverClass)
     .find('>ul:hidden').css('visibility','visible');
   sf.IE7fix.call($ul);
   o.onBeforeShow.call($ul);
   $ul.animate(o.animation,o.speed,function(){ sf.IE7fix.call($ul); o.onShow.call($ul); });
   return this;
  }
 });

})(jQuery);



//]]>
</script>

<script type='text/javascript'>
//<![CDATA[

/*
 * jQuery Cycle Plugin (with Transition Definitions)
 * Examples and documentation at: http://jquery.malsup.com/cycle/
 * Copyright (c) 2007-2010 M. Alsup
 * Version: 2.88 (08-JUN-2010)
 * Dual licensed under the MIT and GPL licenses.
 * http://jquery.malsup.com/license.html
 * Requires: jQuery v1.2.6 or later
 */
(function($){var ver="2.88";if($.support==undefined){$.support={opacity:!($.browser.msie)};}function debug(s){if($.fn.cycle.debug){log(s);}}function log(){if(window.console&&window.console.log){window.console.log("[cycle] "+Array.prototype.join.call(arguments," "));}}$.fn.cycle=function(options,arg2){var o={s:this.selector,c:this.context};if(this.length===0&&options!="stop"){if(!$.isReady&&o.s){log("DOM not ready, queuing slideshow");$(function(){$(o.s,o.c).cycle(options,arg2);});return this;}log("terminating; zero elements found by selector"+($.isReady?"":" (DOM not ready)"));return this;}return this.each(function(){var opts=handleArguments(this,options,arg2);if(opts===false){return;}opts.updateActivePagerLink=opts.updateActivePagerLink||$.fn.cycle.updateActivePagerLink;if(this.cycleTimeout){clearTimeout(this.cycleTimeout);}this.cycleTimeout=this.cyclePause=0;var $cont=$(this);var $slides=opts.slideExpr?$(opts.slideExpr,this):$cont.children();var els=$slides.get();if(els.length<2){log("terminating; too few slides: "+els.length);return;}var opts2=buildOptions($cont,$slides,els,opts,o);if(opts2===false){return;}var startTime=opts2.continuous?10:getTimeout(els[opts2.currSlide],els[opts2.nextSlide],opts2,!opts2.rev);if(startTime){startTime+=(opts2.delay||0);if(startTime<10){startTime=10;}debug("first timeout: "+startTime);this.cycleTimeout=setTimeout(function(){go(els,opts2,0,(!opts2.rev&&!opts.backwards));},startTime);}});};function handleArguments(cont,options,arg2){if(cont.cycleStop==undefined){cont.cycleStop=0;}if(options===undefined||options===null){options={};}if(options.constructor==String){switch(options){case"destroy":case"stop":var opts=$(cont).data("cycle.opts");if(!opts){return false;}cont.cycleStop++;if(cont.cycleTimeout){clearTimeout(cont.cycleTimeout);}cont.cycleTimeout=0;$(cont).removeData("cycle.opts");if(options=="destroy"){destroy(opts);}return false;case"toggle":cont.cyclePause=(cont.cyclePause===1)?0:1;checkInstantResume(cont.cyclePause,arg2,cont);return false;case"pause":cont.cyclePause=1;return false;case"resume":cont.cyclePause=0;checkInstantResume(false,arg2,cont);return false;case"prev":case"next":var opts=$(cont).data("cycle.opts");if(!opts){log('options not found, "prev/next" ignored');return false;}$.fn.cycle[options](opts);return false;default:options={fx:options};}return options;}else{if(options.constructor==Number){var num=options;options=$(cont).data("cycle.opts");if(!options){log("options not found, can not advance slide");return false;}if(num<0||num>=options.elements.length){log("invalid slide index: "+num);return false;}options.nextSlide=num;if(cont.cycleTimeout){clearTimeout(cont.cycleTimeout);cont.cycleTimeout=0;}if(typeof arg2=="string"){options.oneTimeFx=arg2;}go(options.elements,options,1,num>=options.currSlide);return false;}}return options;function checkInstantResume(isPaused,arg2,cont){if(!isPaused&&arg2===true){var options=$(cont).data("cycle.opts");if(!options){log("options not found, can not resume");return false;}if(cont.cycleTimeout){clearTimeout(cont.cycleTimeout);cont.cycleTimeout=0;}go(options.elements,options,1,(!opts.rev&&!opts.backwards));}}}function removeFilter(el,opts){if(!$.support.opacity&&opts.cleartype&&el.style.filter){try{el.style.removeAttribute("filter");}catch(smother){}}}function destroy(opts){if(opts.next){$(opts.next).unbind(opts.prevNextEvent);}if(opts.prev){$(opts.prev).unbind(opts.prevNextEvent);}if(opts.pager||opts.pagerAnchorBuilder){$.each(opts.pagerAnchors||[],function(){this.unbind().remove();});}opts.pagerAnchors=null;if(opts.destroy){opts.destroy(opts);}}function buildOptions($cont,$slides,els,options,o){var opts=$.extend({},$.fn.cycle.defaults,options||{},$.metadata?$cont.metadata():$.meta?$cont.data():{});if(opts.autostop){opts.countdown=opts.autostopCount||els.length;}var cont=$cont[0];$cont.data("cycle.opts",opts);opts.$cont=$cont;opts.stopCount=cont.cycleStop;opts.elements=els;opts.before=opts.before?[opts.before]:[];opts.after=opts.after?[opts.after]:[];opts.after.unshift(function(){opts.busy=0;});if(!$.support.opacity&&opts.cleartype){opts.after.push(function(){removeFilter(this,opts);});}if(opts.continuous){opts.after.push(function(){go(els,opts,0,(!opts.rev&&!opts.backwards));});}saveOriginalOpts(opts);if(!$.support.opacity&&opts.cleartype&&!opts.cleartypeNoBg){clearTypeFix($slides);}if($cont.css("position")=="static"){$cont.css("position","relative");}if(opts.width){$cont.width(opts.width);}if(opts.height&&opts.height!="auto"){$cont.height(opts.height);}if(opts.startingSlide){opts.startingSlide=parseInt(opts.startingSlide);}else{if(opts.backwards){opts.startingSlide=els.length-1;}}if(opts.random){opts.randomMap=[];for(var i=0;i<els.length;i++){opts.randomMap.push(i);}opts.randomMap.sort(function(a,b){return Math.random()-0.5;});opts.randomIndex=1;opts.startingSlide=opts.randomMap[1];}else{if(opts.startingSlide>=els.length){opts.startingSlide=0;}}opts.currSlide=opts.startingSlide||0;var first=opts.startingSlide;$slides.css({position:"absolute",top:0,left:0}).hide().each(function(i){var z;if(opts.backwards){z=first?i<=first?els.length+(i-first):first-i:els.length-i;}else{z=first?i>=first?els.length-(i-first):first-i:els.length-i;}$(this).css("z-index",z);});$(els[first]).css("opacity",1).show();removeFilter(els[first],opts);if(opts.fit&&opts.width){$slides.width(opts.width);}if(opts.fit&&opts.height&&opts.height!="auto"){$slides.height(opts.height);}var reshape=opts.containerResize&&!$cont.innerHeight();if(reshape){var maxw=0,maxh=0;for(var j=0;j<els.length;j++){var $e=$(els[j]),e=$e[0],w=$e.outerWidth(),h=$e.outerHeight();if(!w){w=e.offsetWidth||e.width||$e.attr("width");}if(!h){h=e.offsetHeight||e.height||$e.attr("height");}maxw=w>maxw?w:maxw;maxh=h>maxh?h:maxh;}if(maxw>0&&maxh>0){$cont.css({width:maxw+"px",height:maxh+"px"});}}if(opts.pause){$cont.hover(function(){this.cyclePause++;},function(){this.cyclePause--;});}if(supportMultiTransitions(opts)===false){return false;}var requeue=false;options.requeueAttempts=options.requeueAttempts||0;$slides.each(function(){var $el=$(this);this.cycleH=(opts.fit&&opts.height)?opts.height:($el.height()||this.offsetHeight||this.height||$el.attr("height")||0);this.cycleW=(opts.fit&&opts.width)?opts.width:($el.width()||this.offsetWidth||this.width||$el.attr("width")||0);if($el.is("img")){var loadingIE=($.browser.msie&&this.cycleW==28&&this.cycleH==30&&!this.complete);var loadingFF=($.browser.mozilla&&this.cycleW==34&&this.cycleH==19&&!this.complete);var loadingOp=($.browser.opera&&((this.cycleW==42&&this.cycleH==19)||(this.cycleW==37&&this.cycleH==17))&&!this.complete);var loadingOther=(this.cycleH==0&&this.cycleW==0&&!this.complete);if(loadingIE||loadingFF||loadingOp||loadingOther){if(o.s&&opts.requeueOnImageNotLoaded&&++options.requeueAttempts<100){log(options.requeueAttempts," - img slide not loaded, requeuing slideshow: ",this.src,this.cycleW,this.cycleH);setTimeout(function(){$(o.s,o.c).cycle(options);},opts.requeueTimeout);requeue=true;return false;}else{log("could not determine size of image: "+this.src,this.cycleW,this.cycleH);}}}return true;});if(requeue){return false;}opts.cssBefore=opts.cssBefore||{};opts.animIn=opts.animIn||{};opts.animOut=opts.animOut||{};$slides.not(":eq("+first+")").css(opts.cssBefore);if(opts.cssFirst){$($slides[first]).css(opts.cssFirst);}if(opts.timeout){opts.timeout=parseInt(opts.timeout);if(opts.speed.constructor==String){opts.speed=$.fx.speeds[opts.speed]||parseInt(opts.speed);}if(!opts.sync){opts.speed=opts.speed/2;}var buffer=opts.fx=="shuffle"?500:250;while((opts.timeout-opts.speed)<buffer){opts.timeout+=opts.speed;}}if(opts.easing){opts.easeIn=opts.easeOut=opts.easing;}if(!opts.speedIn){opts.speedIn=opts.speed;}if(!opts.speedOut){opts.speedOut=opts.speed;}opts.slideCount=els.length;opts.currSlide=opts.lastSlide=first;if(opts.random){if(++opts.randomIndex==els.length){opts.randomIndex=0;}opts.nextSlide=opts.randomMap[opts.randomIndex];}else{if(opts.backwards){opts.nextSlide=opts.startingSlide==0?(els.length-1):opts.startingSlide-1;}else{opts.nextSlide=opts.startingSlide>=(els.length-1)?0:opts.startingSlide+1;}}if(!opts.multiFx){var init=$.fn.cycle.transitions[opts.fx];if($.isFunction(init)){init($cont,$slides,opts);}else{if(opts.fx!="custom"&&!opts.multiFx){log("unknown transition: "+opts.fx,"; slideshow terminating");return false;}}}var e0=$slides[first];if(opts.before.length){opts.before[0].apply(e0,[e0,e0,opts,true]);}if(opts.after.length>1){opts.after[1].apply(e0,[e0,e0,opts,true]);}if(opts.next){$(opts.next).bind(opts.prevNextEvent,function(){return advance(opts,opts.rev?-1:1);});}if(opts.prev){$(opts.prev).bind(opts.prevNextEvent,function(){return advance(opts,opts.rev?1:-1);});}if(opts.pager||opts.pagerAnchorBuilder){buildPager(els,opts);}exposeAddSlide(opts,els);return opts;}function saveOriginalOpts(opts){opts.original={before:[],after:[]};opts.original.cssBefore=$.extend({},opts.cssBefore);opts.original.cssAfter=$.extend({},opts.cssAfter);opts.original.animIn=$.extend({},opts.animIn);opts.original.animOut=$.extend({},opts.animOut);$.each(opts.before,function(){opts.original.before.push(this);});$.each(opts.after,function(){opts.original.after.push(this);});}function supportMultiTransitions(opts){var i,tx,txs=$.fn.cycle.transitions;if(opts.fx.indexOf(",")>0){opts.multiFx=true;opts.fxs=opts.fx.replace(/\s*/g,"").split(",");for(i=0;i<opts.fxs.length;i++){var fx=opts.fxs[i];tx=txs[fx];if(!tx||!txs.hasOwnProperty(fx)||!$.isFunction(tx)){log("discarding unknown transition: ",fx);opts.fxs.splice(i,1);i--;}}if(!opts.fxs.length){log("No valid transitions named; slideshow terminating.");return false;}}else{if(opts.fx=="all"){opts.multiFx=true;opts.fxs=[];for(p in txs){tx=txs[p];if(txs.hasOwnProperty(p)&&$.isFunction(tx)){opts.fxs.push(p);}}}}if(opts.multiFx&&opts.randomizeEffects){var r1=Math.floor(Math.random()*20)+30;for(i=0;i<r1;i++){var r2=Math.floor(Math.random()*opts.fxs.length);opts.fxs.push(opts.fxs.splice(r2,1)[0]);}debug("randomized fx sequence: ",opts.fxs);}return true;}function exposeAddSlide(opts,els){opts.addSlide=function(newSlide,prepend){var $s=$(newSlide),s=$s[0];if(!opts.autostopCount){opts.countdown++;}els[prepend?"unshift":"push"](s);if(opts.els){opts.els[prepend?"unshift":"push"](s);}opts.slideCount=els.length;$s.css("position","absolute");$s[prepend?"prependTo":"appendTo"](opts.$cont);if(prepend){opts.currSlide++;opts.nextSlide++;}if(!$.support.opacity&&opts.cleartype&&!opts.cleartypeNoBg){clearTypeFix($s);}if(opts.fit&&opts.width){$s.width(opts.width);}if(opts.fit&&opts.height&&opts.height!="auto"){$slides.height(opts.height);}s.cycleH=(opts.fit&&opts.height)?opts.height:$s.height();s.cycleW=(opts.fit&&opts.width)?opts.width:$s.width();$s.css(opts.cssBefore);if(opts.pager||opts.pagerAnchorBuilder){$.fn.cycle.createPagerAnchor(els.length-1,s,$(opts.pager),els,opts);}if($.isFunction(opts.onAddSlide)){opts.onAddSlide($s);}else{$s.hide();}};}$.fn.cycle.resetState=function(opts,fx){fx=fx||opts.fx;opts.before=[];opts.after=[];opts.cssBefore=$.extend({},opts.original.cssBefore);opts.cssAfter=$.extend({},opts.original.cssAfter);opts.animIn=$.extend({},opts.original.animIn);opts.animOut=$.extend({},opts.original.animOut);opts.fxFn=null;$.each(opts.original.before,function(){opts.before.push(this);});$.each(opts.original.after,function(){opts.after.push(this);});var init=$.fn.cycle.transitions[fx];if($.isFunction(init)){init(opts.$cont,$(opts.elements),opts);}};function go(els,opts,manual,fwd){if(manual&&opts.busy&&opts.manualTrump){debug("manualTrump in go(), stopping active transition");$(els).stop(true,true);opts.busy=false;}if(opts.busy){debug("transition active, ignoring new tx request");return;}var p=opts.$cont[0],curr=els[opts.currSlide],next=els[opts.nextSlide];if(p.cycleStop!=opts.stopCount||p.cycleTimeout===0&&!manual){return;}if(!manual&&!p.cyclePause&&!opts.bounce&&((opts.autostop&&(--opts.countdown<=0))||(opts.nowrap&&!opts.random&&opts.nextSlide<opts.currSlide))){if(opts.end){opts.end(opts);}return;}var changed=false;if((manual||!p.cyclePause)&&(opts.nextSlide!=opts.currSlide)){changed=true;var fx=opts.fx;curr.cycleH=curr.cycleH||$(curr).height();curr.cycleW=curr.cycleW||$(curr).width();next.cycleH=next.cycleH||$(next).height();next.cycleW=next.cycleW||$(next).width();if(opts.multiFx){if(opts.lastFx==undefined||++opts.lastFx>=opts.fxs.length){opts.lastFx=0;}fx=opts.fxs[opts.lastFx];opts.currFx=fx;}if(opts.oneTimeFx){fx=opts.oneTimeFx;opts.oneTimeFx=null;}$.fn.cycle.resetState(opts,fx);if(opts.before.length){$.each(opts.before,function(i,o){if(p.cycleStop!=opts.stopCount){return;}o.apply(next,[curr,next,opts,fwd]);});}var after=function(){$.each(opts.after,function(i,o){if(p.cycleStop!=opts.stopCount){return;}o.apply(next,[curr,next,opts,fwd]);});};debug("tx firing; currSlide: "+opts.currSlide+"; nextSlide: "+opts.nextSlide);opts.busy=1;if(opts.fxFn){opts.fxFn(curr,next,opts,after,fwd,manual&&opts.fastOnEvent);}else{if($.isFunction($.fn.cycle[opts.fx])){$.fn.cycle[opts.fx](curr,next,opts,after,fwd,manual&&opts.fastOnEvent);}else{$.fn.cycle.custom(curr,next,opts,after,fwd,manual&&opts.fastOnEvent);}}}if(changed||opts.nextSlide==opts.currSlide){opts.lastSlide=opts.currSlide;if(opts.random){opts.currSlide=opts.nextSlide;if(++opts.randomIndex==els.length){opts.randomIndex=0;}opts.nextSlide=opts.randomMap[opts.randomIndex];if(opts.nextSlide==opts.currSlide){opts.nextSlide=(opts.currSlide==opts.slideCount-1)?0:opts.currSlide+1;}}else{if(opts.backwards){var roll=(opts.nextSlide-1)<0;if(roll&&opts.bounce){opts.backwards=!opts.backwards;opts.nextSlide=1;opts.currSlide=0;}else{opts.nextSlide=roll?(els.length-1):opts.nextSlide-1;opts.currSlide=roll?0:opts.nextSlide+1;}}else{var roll=(opts.nextSlide+1)==els.length;if(roll&&opts.bounce){opts.backwards=!opts.backwards;opts.nextSlide=els.length-2;opts.currSlide=els.length-1;}else{opts.nextSlide=roll?0:opts.nextSlide+1;opts.currSlide=roll?els.length-1:opts.nextSlide-1;}}}}if(changed&&opts.pager){opts.updateActivePagerLink(opts.pager,opts.currSlide,opts.activePagerClass);}var ms=0;if(opts.timeout&&!opts.continuous){ms=getTimeout(els[opts.currSlide],els[opts.nextSlide],opts,fwd);}else{if(opts.continuous&&p.cyclePause){ms=10;}}if(ms>0){p.cycleTimeout=setTimeout(function(){go(els,opts,0,(!opts.rev&&!opts.backwards));},ms);}}$.fn.cycle.updateActivePagerLink=function(pager,currSlide,clsName){$(pager).each(function(){$(this).children().removeClass(clsName).eq(currSlide).addClass(clsName);});};function getTimeout(curr,next,opts,fwd){if(opts.timeoutFn){var t=opts.timeoutFn.call(curr,curr,next,opts,fwd);while((t-opts.speed)<250){t+=opts.speed;}debug("calculated timeout: "+t+"; speed: "+opts.speed);if(t!==false){return t;}}return opts.timeout;}$.fn.cycle.next=function(opts){advance(opts,opts.rev?-1:1);};$.fn.cycle.prev=function(opts){advance(opts,opts.rev?1:-1);};function advance(opts,val){var els=opts.elements;var p=opts.$cont[0],timeout=p.cycleTimeout;if(timeout){clearTimeout(timeout);p.cycleTimeout=0;}if(opts.random&&val<0){opts.randomIndex--;if(--opts.randomIndex==-2){opts.randomIndex=els.length-2;}else{if(opts.randomIndex==-1){opts.randomIndex=els.length-1;}}opts.nextSlide=opts.randomMap[opts.randomIndex];}else{if(opts.random){opts.nextSlide=opts.randomMap[opts.randomIndex];}else{opts.nextSlide=opts.currSlide+val;if(opts.nextSlide<0){if(opts.nowrap){return false;}opts.nextSlide=els.length-1;}else{if(opts.nextSlide>=els.length){if(opts.nowrap){return false;}opts.nextSlide=0;}}}}var cb=opts.onPrevNextEvent||opts.prevNextClick;if($.isFunction(cb)){cb(val>0,opts.nextSlide,els[opts.nextSlide]);}go(els,opts,1,val>=0);return false;}function buildPager(els,opts){var $p=$(opts.pager);$.each(els,function(i,o){$.fn.cycle.createPagerAnchor(i,o,$p,els,opts);});opts.updateActivePagerLink(opts.pager,opts.startingSlide,opts.activePagerClass);}$.fn.cycle.createPagerAnchor=function(i,el,$p,els,opts){var a;if($.isFunction(opts.pagerAnchorBuilder)){a=opts.pagerAnchorBuilder(i,el);debug("pagerAnchorBuilder("+i+", el) returned: "+a);}else{a='<a href="#">'+(i+1)+"</a>";}if(!a){return;}var $a=$(a);if($a.parents("body").length===0){var arr=[];if($p.length>1){$p.each(function(){var $clone=$a.clone(true);$(this).append($clone);arr.push($clone[0]);});$a=$(arr);}else{$a.appendTo($p);}}opts.pagerAnchors=opts.pagerAnchors||[];opts.pagerAnchors.push($a);$a.bind(opts.pagerEvent,function(e){e.preventDefault();opts.nextSlide=i;var p=opts.$cont[0],timeout=p.cycleTimeout;if(timeout){clearTimeout(timeout);p.cycleTimeout=0;}var cb=opts.onPagerEvent||opts.pagerClick;if($.isFunction(cb)){cb(opts.nextSlide,els[opts.nextSlide]);}go(els,opts,1,opts.currSlide<i);});if(!/^click/.test(opts.pagerEvent)&&!opts.allowPagerClickBubble){$a.bind("click.cycle",function(){return false;});}if(opts.pauseOnPagerHover){$a.hover(function(){opts.$cont[0].cyclePause++;},function(){opts.$cont[0].cyclePause--;});}};$.fn.cycle.hopsFromLast=function(opts,fwd){var hops,l=opts.lastSlide,c=opts.currSlide;if(fwd){hops=c>l?c-l:opts.slideCount-l;}else{hops=c<l?l-c:l+opts.slideCount-c;}return hops;};function clearTypeFix($slides){debug("applying clearType background-color hack");function hex(s){s=parseInt(s).toString(16);return s.length<2?"0"+s:s;}function getBg(e){for(;e&&e.nodeName.toLowerCase()!="html";e=e.parentNode){var v=$.css(e,"background-color");if(v.indexOf("rgb")>=0){var rgb=v.match(/\d+/g);return"#"+hex(rgb[0])+hex(rgb[1])+hex(rgb[2]);}if(v&&v!="transparent"){return v;}}return"#ffffff";}$slides.each(function(){$(this).css("background-color",getBg(this));});}$.fn.cycle.commonReset=function(curr,next,opts,w,h,rev){$(opts.elements).not(curr).hide();opts.cssBefore.opacity=1;opts.cssBefore.display="block";if(w!==false&&next.cycleW>0){opts.cssBefore.width=next.cycleW;}if(h!==false&&next.cycleH>0){opts.cssBefore.height=next.cycleH;}opts.cssAfter=opts.cssAfter||{};opts.cssAfter.display="none";$(curr).css("zIndex",opts.slideCount+(rev===true?1:0));$(next).css("zIndex",opts.slideCount+(rev===true?0:1));};$.fn.cycle.custom=function(curr,next,opts,cb,fwd,speedOverride){var $l=$(curr),$n=$(next);var speedIn=opts.speedIn,speedOut=opts.speedOut,easeIn=opts.easeIn,easeOut=opts.easeOut;$n.css(opts.cssBefore);if(speedOverride){if(typeof speedOverride=="number"){speedIn=speedOut=speedOverride;}else{speedIn=speedOut=1;}easeIn=easeOut=null;}var fn=function(){$n.animate(opts.animIn,speedIn,easeIn,cb);};$l.animate(opts.animOut,speedOut,easeOut,function(){if(opts.cssAfter){$l.css(opts.cssAfter);}if(!opts.sync){fn();}});if(opts.sync){fn();}};$.fn.cycle.transitions={fade:function($cont,$slides,opts){$slides.not(":eq("+opts.currSlide+")").css("opacity",0);opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts);opts.cssBefore.opacity=0;});opts.animIn={opacity:1};opts.animOut={opacity:0};opts.cssBefore={top:0,left:0};}};$.fn.cycle.ver=function(){return ver;};$.fn.cycle.defaults={fx:"fade",timeout:4000,timeoutFn:null,continuous:0,speed:1000,speedIn:null,speedOut:null,next:null,prev:null,onPrevNextEvent:null,prevNextEvent:"click.cycle",pager:null,onPagerEvent:null,pagerEvent:"click.cycle",allowPagerClickBubble:false,pagerAnchorBuilder:null,before:null,after:null,end:null,easing:null,easeIn:null,easeOut:null,shuffle:null,animIn:null,animOut:null,cssBefore:null,cssAfter:null,fxFn:null,height:"auto",startingSlide:0,sync:1,random:0,fit:0,containerResize:1,pause:0,pauseOnPagerHover:0,autostop:0,autostopCount:0,delay:0,slideExpr:null,cleartype:!$.support.opacity,cleartypeNoBg:false,nowrap:0,fastOnEvent:0,randomizeEffects:1,rev:0,manualTrump:true,requeueOnImageNotLoaded:true,requeueTimeout:250,activePagerClass:"activeSlide",updateActivePagerLink:null,backwards:false};})(jQuery);
/*
 * jQuery Cycle Plugin Transition Definitions
 * This script is a plugin for the jQuery Cycle Plugin
 * Examples and documentation at: http://malsup.com/jquery/cycle/
 * Copyright (c) 2007-2010 M. Alsup
 * Version:  2.72
 * Dual licensed under the MIT and GPL licenses:
 * http://www.opensource.org/licenses/mit-license.php
 * http://www.gnu.org/licenses/gpl.html
 */
(function($){$.fn.cycle.transitions.none=function($cont,$slides,opts){opts.fxFn=function(curr,next,opts,after){$(next).show();$(curr).hide();after();};};$.fn.cycle.transitions.scrollUp=function($cont,$slides,opts){$cont.css("overflow","hidden");opts.before.push($.fn.cycle.commonReset);var h=$cont.height();opts.cssBefore={top:h,left:0};opts.cssFirst={top:0};opts.animIn={top:0};opts.animOut={top:-h};};$.fn.cycle.transitions.scrollDown=function($cont,$slides,opts){$cont.css("overflow","hidden");opts.before.push($.fn.cycle.commonReset);var h=$cont.height();opts.cssFirst={top:0};opts.cssBefore={top:-h,left:0};opts.animIn={top:0};opts.animOut={top:h};};$.fn.cycle.transitions.scrollLeft=function($cont,$slides,opts){$cont.css("overflow","hidden");opts.before.push($.fn.cycle.commonReset);var w=$cont.width();opts.cssFirst={left:0};opts.cssBefore={left:w,top:0};opts.animIn={left:0};opts.animOut={left:0-w};};$.fn.cycle.transitions.scrollRight=function($cont,$slides,opts){$cont.css("overflow","hidden");opts.before.push($.fn.cycle.commonReset);var w=$cont.width();opts.cssFirst={left:0};opts.cssBefore={left:-w,top:0};opts.animIn={left:0};opts.animOut={left:w};};$.fn.cycle.transitions.scrollHorz=function($cont,$slides,opts){$cont.css("overflow","hidden").width();opts.before.push(function(curr,next,opts,fwd){$.fn.cycle.commonReset(curr,next,opts);opts.cssBefore.left=fwd?(next.cycleW-1):(1-next.cycleW);opts.animOut.left=fwd?-curr.cycleW:curr.cycleW;});opts.cssFirst={left:0};opts.cssBefore={top:0};opts.animIn={left:0};opts.animOut={top:0};};$.fn.cycle.transitions.scrollVert=function($cont,$slides,opts){$cont.css("overflow","hidden");opts.before.push(function(curr,next,opts,fwd){$.fn.cycle.commonReset(curr,next,opts);opts.cssBefore.top=fwd?(1-next.cycleH):(next.cycleH-1);opts.animOut.top=fwd?curr.cycleH:-curr.cycleH;});opts.cssFirst={top:0};opts.cssBefore={left:0};opts.animIn={top:0};opts.animOut={left:0};};$.fn.cycle.transitions.slideX=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$(opts.elements).not(curr).hide();$.fn.cycle.commonReset(curr,next,opts,false,true);opts.animIn.width=next.cycleW;});opts.cssBefore={left:0,top:0,width:0};opts.animIn={width:"show"};opts.animOut={width:0};};$.fn.cycle.transitions.slideY=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$(opts.elements).not(curr).hide();$.fn.cycle.commonReset(curr,next,opts,true,false);opts.animIn.height=next.cycleH;});opts.cssBefore={left:0,top:0,height:0};opts.animIn={height:"show"};opts.animOut={height:0};};$.fn.cycle.transitions.shuffle=function($cont,$slides,opts){var i,w=$cont.css("overflow","visible").width();$slides.css({left:0,top:0});opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,true,true,true);});if(!opts.speedAdjusted){opts.speed=opts.speed/2;opts.speedAdjusted=true;}opts.random=0;opts.shuffle=opts.shuffle||{left:-w,top:15};opts.els=[];for(i=0;i<$slides.length;i++){opts.els.push($slides[i]);}for(i=0;i<opts.currSlide;i++){opts.els.push(opts.els.shift());}opts.fxFn=function(curr,next,opts,cb,fwd){var $el=fwd?$(curr):$(next);$(next).css(opts.cssBefore);var count=opts.slideCount;$el.animate(opts.shuffle,opts.speedIn,opts.easeIn,function(){var hops=$.fn.cycle.hopsFromLast(opts,fwd);for(var k=0;k<hops;k++){fwd?opts.els.push(opts.els.shift()):opts.els.unshift(opts.els.pop());}if(fwd){for(var i=0,len=opts.els.length;i<len;i++){$(opts.els[i]).css("z-index",len-i+count);}}else{var z=$(curr).css("z-index");$el.css("z-index",parseInt(z)+1+count);}$el.animate({left:0,top:0},opts.speedOut,opts.easeOut,function(){$(fwd?this:curr).hide();if(cb){cb();}});});};opts.cssBefore={display:"block",opacity:1,top:0,left:0};};$.fn.cycle.transitions.turnUp=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,true,false);opts.cssBefore.top=next.cycleH;opts.animIn.height=next.cycleH;});opts.cssFirst={top:0};opts.cssBefore={left:0,height:0};opts.animIn={top:0};opts.animOut={height:0};};$.fn.cycle.transitions.turnDown=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,true,false);opts.animIn.height=next.cycleH;opts.animOut.top=curr.cycleH;});opts.cssFirst={top:0};opts.cssBefore={left:0,top:0,height:0};opts.animOut={height:0};};$.fn.cycle.transitions.turnLeft=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,false,true);opts.cssBefore.left=next.cycleW;opts.animIn.width=next.cycleW;});opts.cssBefore={top:0,width:0};opts.animIn={left:0};opts.animOut={width:0};};$.fn.cycle.transitions.turnRight=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,false,true);opts.animIn.width=next.cycleW;opts.animOut.left=curr.cycleW;});opts.cssBefore={top:0,left:0,width:0};opts.animIn={left:0};opts.animOut={width:0};};$.fn.cycle.transitions.zoom=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,false,false,true);opts.cssBefore.top=next.cycleH/2;opts.cssBefore.left=next.cycleW/2;opts.animIn={top:0,left:0,width:next.cycleW,height:next.cycleH};opts.animOut={width:0,height:0,top:curr.cycleH/2,left:curr.cycleW/2};});opts.cssFirst={top:0,left:0};opts.cssBefore={width:0,height:0};};$.fn.cycle.transitions.fadeZoom=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,false,false);opts.cssBefore.left=next.cycleW/2;opts.cssBefore.top=next.cycleH/2;opts.animIn={top:0,left:0,width:next.cycleW,height:next.cycleH};});opts.cssBefore={width:0,height:0};opts.animOut={opacity:0};};$.fn.cycle.transitions.blindX=function($cont,$slides,opts){var w=$cont.css("overflow","hidden").width();opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts);opts.animIn.width=next.cycleW;opts.animOut.left=curr.cycleW;});opts.cssBefore={left:w,top:0};opts.animIn={left:0};opts.animOut={left:w};};$.fn.cycle.transitions.blindY=function($cont,$slides,opts){var h=$cont.css("overflow","hidden").height();opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts);opts.animIn.height=next.cycleH;opts.animOut.top=curr.cycleH;});opts.cssBefore={top:h,left:0};opts.animIn={top:0};opts.animOut={top:h};};$.fn.cycle.transitions.blindZ=function($cont,$slides,opts){var h=$cont.css("overflow","hidden").height();var w=$cont.width();opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts);opts.animIn.height=next.cycleH;opts.animOut.top=curr.cycleH;});opts.cssBefore={top:h,left:w};opts.animIn={top:0,left:0};opts.animOut={top:h,left:w};};$.fn.cycle.transitions.growX=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,false,true);opts.cssBefore.left=this.cycleW/2;opts.animIn={left:0,width:this.cycleW};opts.animOut={left:0};});opts.cssBefore={width:0,top:0};};$.fn.cycle.transitions.growY=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,true,false);opts.cssBefore.top=this.cycleH/2;opts.animIn={top:0,height:this.cycleH};opts.animOut={top:0};});opts.cssBefore={height:0,left:0};};$.fn.cycle.transitions.curtainX=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,false,true,true);opts.cssBefore.left=next.cycleW/2;opts.animIn={left:0,width:this.cycleW};opts.animOut={left:curr.cycleW/2,width:0};});opts.cssBefore={top:0,width:0};};$.fn.cycle.transitions.curtainY=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,true,false,true);opts.cssBefore.top=next.cycleH/2;opts.animIn={top:0,height:next.cycleH};opts.animOut={top:curr.cycleH/2,height:0};});opts.cssBefore={left:0,height:0};};$.fn.cycle.transitions.cover=function($cont,$slides,opts){var d=opts.direction||"left";var w=$cont.css("overflow","hidden").width();var h=$cont.height();opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts);if(d=="right"){opts.cssBefore.left=-w;}else{if(d=="up"){opts.cssBefore.top=h;}else{if(d=="down"){opts.cssBefore.top=-h;}else{opts.cssBefore.left=w;}}}});opts.animIn={left:0,top:0};opts.animOut={opacity:1};opts.cssBefore={top:0,left:0};};$.fn.cycle.transitions.uncover=function($cont,$slides,opts){var d=opts.direction||"left";var w=$cont.css("overflow","hidden").width();var h=$cont.height();opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,true,true,true);if(d=="right"){opts.animOut.left=w;}else{if(d=="up"){opts.animOut.top=-h;}else{if(d=="down"){opts.animOut.top=h;}else{opts.animOut.left=-w;}}}});opts.animIn={left:0,top:0};opts.animOut={opacity:1};opts.cssBefore={top:0,left:0};};$.fn.cycle.transitions.toss=function($cont,$slides,opts){var w=$cont.css("overflow","visible").width();var h=$cont.height();opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,true,true,true);if(!opts.animOut.left&&!opts.animOut.top){opts.animOut={left:w*2,top:-h/2,opacity:0};}else{opts.animOut.opacity=0;}});opts.cssBefore={left:0,top:0};opts.animIn={left:0};};$.fn.cycle.transitions.wipe=function($cont,$slides,opts){var w=$cont.css("overflow","hidden").width();var h=$cont.height();opts.cssBefore=opts.cssBefore||{};var clip;if(opts.clip){if(/l2r/.test(opts.clip)){clip="rect(0px 0px "+h+"px 0px)";}else{if(/r2l/.test(opts.clip)){clip="rect(0px "+w+"px "+h+"px "+w+"px)";}else{if(/t2b/.test(opts.clip)){clip="rect(0px "+w+"px 0px 0px)";}else{if(/b2t/.test(opts.clip)){clip="rect("+h+"px "+w+"px "+h+"px 0px)";}else{if(/zoom/.test(opts.clip)){var top=parseInt(h/2);var left=parseInt(w/2);clip="rect("+top+"px "+left+"px "+top+"px "+left+"px)";}}}}}}opts.cssBefore.clip=opts.cssBefore.clip||clip||"rect(0px 0px 0px 0px)";var d=opts.cssBefore.clip.match(/(\d+)/g);var t=parseInt(d[0]),r=parseInt(d[1]),b=parseInt(d[2]),l=parseInt(d[3]);opts.before.push(function(curr,next,opts){if(curr==next){return;}var $curr=$(curr),$next=$(next);$.fn.cycle.commonReset(curr,next,opts,true,true,false);opts.cssAfter.display="block";var step=1,count=parseInt((opts.speedIn/13))-1;(function f(){var tt=t?t-parseInt(step*(t/count)):0;var ll=l?l-parseInt(step*(l/count)):0;var bb=b<h?b+parseInt(step*((h-b)/count||1)):h;var rr=r<w?r+parseInt(step*((w-r)/count||1)):w;$next.css({clip:"rect("+tt+"px "+rr+"px "+bb+"px "+ll+"px)"});(step++<=count)?setTimeout(f,13):$curr.css("display","none");})();});opts.cssBefore={display:"block",opacity:1,top:0,left:0};opts.animIn={left:0};opts.animOut={left:0};};})(jQuery);

//]]>
</script>

Save your template
Done!

2- Adding the CSS

Inside your template search for ]]></b:skin> again
Just above it paste the code below,

*---- TabsView Menu Tabs Start----*/

.MBT-tabs{list-style:none;list-style-type:none;margin:0 0 10px 0;padding:0;height:26px}
.MBT-tabs li{list-style:none;list-style-type:none;margin:0 0 0 4px;padding:0;float:left}
.MBT-tabs li:first-child{margin:0}
.MBT-tabs li a{color:#fff;background:#333333;padding:5px 5px;display:block;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif;}
.MBT-tabs li a:hover,.MBT-tabs li a.MBT-tabs-current{background:#A46F38;color:#fff;text-decoration:none}
.MBT-tabs-content{background:#212121}
.MBT-tabviewsection{margin-top:10px;margin-bottom:10px;}

*---- TabsView Menu Tabs End----*/

Replace #A46F38 with the HexaDecimal Colour code of your template so that the tabs may blend perfectly into your template.

3- Adding the HTML

Now Search for <div id='sidebar-wrapper'>
Make sure the widgets box is unchecked.
Just below <div id='sidebar-wrapper'> paste the code below,

<div class='MBT-tabviewsection'>

    <script type='text/javascript'>
                jQuery(document).ready(function($){
                    $(&quot;.MBT-tabs-content-widget-MBT-id&quot;).hide();
                    $(&quot;ul.MBT-tabs-widget-MBT-id li:first a&quot;).addClass(&quot;MBT-tabs-current&quot;).show();
                    $(&quot;.MBT-tabs-content-widget-MBT-id:first&quot;).show();
                    $(&quot;ul.MBT-tabs-widget-MBT-id li a&quot;).click(function() {
                        $(&quot;ul.MBT-tabs-widget-MBT-id li a&quot;).removeClass(&quot;MBT-tabs-current a&quot;);
                        $(this).addClass(&quot;MBT-tabs-current&quot;);
                        $(&quot;.MBT-tabs-content-widget-MBT-id&quot;).hide();
                        var activeTab = $(this).attr(&quot;href&quot;);
                        $(activeTab).fadeIn();
                        return false;
                    });
                });
            </script>

    <ul class='MBT-tabs MBT-tabs-widget-MBT-id'>
    <li><a href='#widget-MBT-id1'>Subscribe</a></li>
    <li><a href='#widget-MBT-id2'>Latest Tricks</a></li>
    <li><a href='#widget-MBT-id3'>Search</a></li>
    </ul>

    <div class='MBT-tabs-content MBT-tabs-content-widget-MBT-id' id='widget-MBT-id1'>
    <b:section class='sidebar' id='sidebartab1' preferred='yes'>
    </b:section>                                      
    </div>   

    <div style='clear:both;'/>                       
    <div class='MBT-tabs-content MBT-tabs-content-widget-MBT-id' id='widget-MBT-id2'>
    <b:section class='sidebar' id='sidebartab2' preferred='yes'>
    </b:section>                                        
    </div>   

                           
    <div style='clear:both;'/>
    <div class='MBT-tabs-content MBT-tabs-content-widget-MBT-id' id='widget-MBT-id3'>
    <b:section class='sidebar' id='sidebartab3' preferred='yes'>
    </b:section>                                       
    </div>

    </div>
    <div style='clear:both;'/>

Replace Subscribe, Latest Tricks and Search with your Widget Titles that you will be adding.

4. Now Go To Page Elements. You will see something like this,

Adding your widgets and after you have added all your widgets then simply view your blog to see it in action.

Done!

iBusiness Premium Blogger Template

2011-01-28T08:38:00.000-08:00

Template name : iBusiness

Template type : 1 Sidebar, 2 Column, Adapted from Wordpress, Elegant, Featured Section, Fixed width, Gradients, Grey, Magazine, Right Sidebar, Rounded corners, Top Navigation Bar, White

Release date: October 02, 2010

Coder/Designer Name(s): Lasantha Bandara / New WP Themes

Coder/Designer URL(s):
http://www.premiumbloggertemplates.com/
http://newwpthemes.com/

Basic Instructions : How to install a Blogger template

Advanced Details : http://www.premiumbloggertemplates.com/2010/10/ibusiness-blogger-template.html

Configure Meta tags

Login to your blogger dashboard--> layout- -> Edit HTML. Now Scroll down to where you see below codes :

<meta content='DESCRIPTION HERE' name='description'/>
<meta content='KEYWORDS HERE' name='keywords'/>

Replace DESCRIPTION HERE, KEYWORDS HERE as below.

DESCRIPTION HERE: Write your blog description
KEYWORDS HERE: Write the keywords of your blog separated by comma.

How To Configure Favicon:

<link href='YOUR-FAVICON-URL' rel='shortcut icon' type='image/vnd.microsoft.icon'/>

Now replace "YOUR-FAVICON-URL" with your Favicon address/url.

Configure About us Section:

Login to your blogger dashboard--> layout- -> Edit HTML. Find  Now scroll down slowly and you can see the content of about us section.

You can replace these contents as you like.

Important !!!:

Please do not remove the footer credit. So that you can use it for your blog. Stay the credit intact.

License:

This free Blogger template is licensed under the Creative Commons Attribution 3.0 License, which permits both personal and commercial use.

However, to satisfy the 'attribution' clause of the license, you are required to keep the footer links intact which provides due credit to its authors. For more specific details about the license, you may visit the URL below:

http://creativecommons.org/licenses/by/3.0/

Add Energy Saving Mode For Blogs or Websites

2011-01-28T08:26:00.000-08:00

This is a free service and it is provided by http://www.onlineleaf.com/
Their standby engine is deliver a fully functional and simple way to help your website run requiring less energy to generate. It hides heavy animations, covers the window in dark colors (as these, in many cases are less energy consuming) and pauses heavily running background processes.

When your visitors are inactive, this engine launch a standby screen, with the text "Energy saving mode".

Don't click on "Expand Widget Templates". Scroll down to where you see the </head> tag of your template. Now copy below code and paste it just before the </head> tag.

<script language='javascript' src='http://www.onlineleaf.com/savetheenvironment.js' type='text/javascript'/>

This standby engine uses the jQuery Javascript library, so if you are using other Javascript libraries or code, add below code instead of above code :

<script language='javascript' src='http://www.onlineleaf.com/savetheenvironment.js' type='text/javascript'/><script>jQuery.noConflict();</script>

Time of inactivity

Also you can easily define how long time your visitors have to be inactive, for the engine to launch the standby screen, by adding ?time=X where X should be replaced with the number of seconds you would like to define the time interval. An example could be:

<script language="javascript" type="text/javascript" src="http://www.onlineleaf.com/savetheenvironment.js?time=120"></script>

... which will set the time of inactivity to 2 minutes (120 seconds).

This can be configured to display in any of the supported languages, if you add ?lang=code, where code is one of the language short codes below.

Supported languages


ak - Akan

da - Danish

de - German

en - English

es - Spanish

fr - French

fi - Filipino

gr - Greek hr - Croatian

id - Indonesian

jp - Japanese

it - Italian

nl - Dutch

pl - Polish

pt - Portuguese

bpt - Brazilian Portuguese ro - Romanian

sl - Slovenian

se - Swedish

sk - Slovak

sw - Swahili

tr - Turkish

vi - Vietnamese

The following example will be using Spanish for the standby screen:

<script language="javascript" type="text/javascript" src="http://www.onlineleaf.com/savetheenvironment.js?lang=es"></script>

If you are using WordPress, just download their plugin, activate it and everything should work instantly.

In HomePage Blog Blogger Only Displays Post Title

2011-01-28T06:11:00.000-08:00

Show only your blog blogger post title on your home page? Do you like? follow the steps below:

1. Login to your blogger dashboard--> layout- -> Edit HTML

2. Scroll down to where you see </head> tag.

3. Copy below code and paste it just before the </head> tag.

<style type='text/css'>

<b:if cond='data:blog.pageType != "item"'></b:if>

.post {
margin:.5em 0 1.5em;
border-bottom:0px dotted $bordercolor;
padding-bottom:1.0em;
height:50px;
}
.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:20px;
font-family:Tahoma,Georgia,Century gothic,Arial,sans-serif;
font-weight:normal;
line-height:1.4em;
color:#cc6600;
}

.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color:#cc6600;
font-weight:normal;
}

.post h3 strong, .post h3 a:hover {color:#333333;}

.post-body {display:none;}
.post-footer {display:none;}
.comment-link {display:none;}
.post img {display:none;}
.post blockquote {display:none;}
.post blockquote p {display:none;}
h2.date-header {display:none;}
.post-labels {display:none;}
.post-rating {display:none;}

</b:if>

</style>

4. Now Save your template.

5. Go to Layout-->Page Elements.Click on "Edit" link of Blog Posts Section.

6. Enter the value for "Number of posts on main page:" as your choice and click on save.

7. Done

Tab View Menu for Blogger

2011-01-26T12:16:00.000-08:00

1. Enter the following code in the header between <head> and <head>

<script src="http://sites.google.com/site/amatullah83/js-indahnyaberbagi/tabview.js" type="text/javascript">

2. Paste code below into an external JavaScript file named: tabView.js

/* Copyright (C) 2005 Ilya S. Lyubinskiy. All rights reserved.
Technical support: http://www.php-development.ru/

YOU MAY NOT
(1) Remove or modify this copyright notice.
(2) Distribute this code, any part or any modified version of it.
    Instead, you can link to the homepage of this code:
    http://www.php-development.ru/javascripts/tabview.php.

YOU MAY
(1) Use this code on your website.
(2) Use this code as a part of another product.

NO WARRANTY
This code is provided "as is" without warranty of any kind, either
expressed or implied, including, but not limited to, the implied warranties
of merchantability and fitness for a particular purpose. You expressly
acknowledge and agree that use of this code is at your own risk.


If you find my script useful, you can support my site in the following ways:
1. Vote for the script at HotScripts.com (you can do it on my site)
2. Link to the homepage of this script or to the homepage of my site:
   http://www.php-development.ru/javascripts/tabview.php
   http://www.php-development.ru/
   You will get 50% commission on all orders made by your referrals.
   More information can be found here:
   http://www.php-development.ru/affiliates.php
*/

// ----- Auxiliary -------------------------------------------------------------

function tabview_aux(TabViewId, id)
{
  var TabView = document.getElementById(TabViewId);

  // ----- Tabs -----

  var Tabs = TabView.firstChild;
  while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;

  var Tab = Tabs.firstChild;
  var i   = 0;

  do
  {
    if (Tab.tagName == "A")
    {
      i++;
      Tab.href      = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
      Tab.className = (i == id) ? "Active" : "";
      Tab.blur();
    }
  }
  while (Tab = Tab.nextSibling);

  // ----- Pages -----

  var Pages = TabView.firstChild;
  while (Pages.className != 'Pages') Pages = Pages.nextSibling;

  var Page = Pages.firstChild;
  var i    = 0;

  do
  {
    if (Page.className == 'Page')
    {
      i++;
      if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
      Page.style.overflow = "auto";
      Page.style.display  = (i == id) ? 'block' : 'none';
    }
  }
  while (Page = Page.nextSibling);
}

// ----- Functions -------------------------------------------------------------

function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }

function tabview_initialize(TabViewId) { tabview_aux(TabViewId,  1); }

3. Paste code below into your external CSS file or in the <style> section within the HEAD section of your HTML document.

div.TabView div.Tabs {
  height: 24px;
  overflow: hidden;
}

div.TabView div.Tabs a {
  float: left;
  display: block;
  width:  90px;
  text-align: center;
  height:      24px;
  line-height: 28px;
  vertical-align: middle;
  background: url('http://javascript.internet.com/img/tab-view/tabs.png') no-repeat -2px -1px;
  text-decoration: none;
  font-family: "Times New Roman", Serif;
  font-weight: 900;
  font-size: 13px;
  color: #000080;
}

div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active {
  background: url('http://javascript.internet.com/img/tab-view/tabs.png') no-repeat -2px -31px;
}

div.TabView div.Pages {
  clear: both;
  border: 1px solid #404040;
  overflow: hidden;
}

div.TabView div.Pages div.Page {
  height: 100%;
  padding: 0px;
  overflow: hidden;
}

div.TabView div.Pages div.Page div.Pad {
  padding: 3px 18px;
}

4. Paste this code into the BODY section (in the elements of a page=> add gadgets => HTML/JavaSript)

<div class="TabView" id="TabView">

<!-- *** Tabs ************************************************************** -->

<div class="Tabs" style="width: 350px;">
  <a>Basic Info.</a>
  <a>Categories</a>
  <a>Order Form</a>
</div>

<!-- *** Pages ************************************************************* -->

<div class="Pages" style="width: 450px; height: 250px; text-align: left;">

  <div class="Page">
  <div class="Pad">

  <!-- *** Page1 Start *** -->

<br>
You can put regular text on the tabs.
<p>
We have put together a collection of thousands of free JavaScripts that are available to you for use on your Web pages. The scripts are available, including a working JavaScript example of most of the scripts and the complete actual JavaScript code used.</p>
<p>
We also have a great JavaScript Forum where you can post script requests, script questions, and more.</p>


  <!-- *** Page1 End ***** -->

  </div>
  </div>

  <!-- *** Page2 Start *** -->

  <div class="Page">
  <div class="Pad">
<br>
Categories include:<br>
<table cellpadding="15" valign="top">
<tr>
<td>
• Cookies<br>
• CSS<br>
• Forms<br>
</td><td>
• Games<br>
• Generators<br>
• Image Effects
</td><td>
• Math Related<br>
• Miscellaneous<br>
• Navigation
</td></tr><tr><td>
• Page Details<br>
• Security<br>
• Snippets
</td><td>
• Time & Date<br>
• Tools<br>
• Tutorials
</td><td>
• Text Effects<br>
• User Details
</td>
</tr>
</table>

  <!-- *** Page2 End ***** -->

  </div>
  </div>

  <div class="Page">
  <div class="Pad">

  <!-- *** Page3 Start *** -->

  <br>
<p>
You can also use forms on the tab pages. <small><em>(This one is just an example; it doesn't work.)</em></small></p>

  <table>
  <tr>
    <td>Username: </td>
    <td><input style="width: 120px;" type="text"     name="username" /></td>
  </tr>
  <tr>
    <td>Password: </td>
    <td><input style="width: 120px;" type="password" name="password" /></td>
  </tr>
  <tr>
    <td> </td>
    <td><input type="submit" value="Submit" /></td>
  </tr>
  </table>

  <!-- *** Page3 End ***** -->

  </div>
  </div>

5. Add this to the end of your page:

<script type="text/javascript">
  tabview_initialize('TabView');
</script>

6. Done

Important Components of SEO

2011-01-26T07:37:00.000-08:00

Search engine optimization is truly big business. The process of making websites search engine friendly, has undergone several changes over the years, and so it is important that if you are planning to optimize yours or a client’s website, that you are abreast of the changes.

In 2006, Google, stopped using keyword density as the main component when assessing relevance to a website following a related search engine search. This may seem odd at the outset, as surely the content of the site dictates how closely related the search engine search term, and the search engine result are related?

Problems arose when programs were developed that could write high density keyword articles with a few clicks of the mouse. Though the articles were laughable to human beings in terms of how they were written, and their relevance, search engine robots however, loved them. So more and more computer generated articles began to pull through on searches, as articles could easily be added that bore no relevance to the website or what it was about very easily.

In response to this problem, Google changed how it ranked websites, by determining how well linked they were from other websites. The more relevant, and the better quality websites that had a link to your website, the higher up the page rank your site travelled.

So linking now determines page rank. The thing to bear in mind about linking is this:

Free company directories from a website are not rated as highly as some other links. Though some directory links are rated more highly than others.

National and local press are considered good quality links

Links from the same kind of company or organization are considered good quality links

How to build good link campaigns for search engine optimization is a trick in itself. Many SEO companies will feature this prominently when search engine optimizing your website.

There are certain companies that specialise in the area of link campaigning, and if you are unsure about how to go about utilizing campaigns, this could be a good area to explore. Companies of this nature will have advanced knowledge of the better sites to place links, and have the connections to do so.

So what of title tags, meta data, and optimized web copy?

Well in essence these are very important components to search engine optimize a website. They provide Google and other search engines information on what your website is about, and what its relevance is to the search engine query. In effect, it allows you to hone in on your chosen markets, and point your website in the right direction. Without paying attention to these elements of search engine optimization, you will not find yourself very high on the page rank, if at all.

A note about meta data

Many search engine optimization articles, do not attach much value to meta tags, and though search engines do not use them to determine page rank, good meta data can make your website stand out from the crowd. A good description can make all the difference to whether you get a click in your direction. So when considering what to write for a meta tag, try and make it stand out in your chosen industry. If you feature something that your competitors do not have, state it. You’ll get more hits this way.

Therefore, search engine optimization needs a holistic approach. Everything has to be in place for it to work, and without one of the elements the whole search engine optimization effort is for nothing.

If you think of search engine optimization as a car, with the link campaign as the engine, and the title tag, meta data and optimised copy as its navigation, then you are on the right lines.

Improve Page Rank And Boost Your Alexa Rank In No Time

2011-01-20T11:25:00.000-08:00

On internet you will find lots of trick to boost your alexa rank and link popularity in less time, but all are not effective in improving the link popularity. Every new webmaster wants to improve their alexa rank so they follow the articles and books which are not effective for their site.

If you are one of them, then you should follow this article if you really want to improve your link popularity and alexa rank. I’m introducing a smashing trick by which you can increase your link popularity and visitors in very less time. All you need to follow the link below:

Improve Your Link Popularity in Less time

Or, you can download the code from here: Improve your Alexa Rank code. Now, You have to create, a article by using the code. You dont have to do modifications in the code.

Below is the Link order to increase the link popularity, you are not allowed to play with the link list below, all you have to do is just replace YOUR LINK HERE From the list with your own link. You can find YOUR LINK HERE in the last of the link list.

List Order:
01. Rajesh Patel
02. RP SMS
03. Trying to be Better
04. Tech Gopal
05. FlyingOffer
06. Frugal Save Wave
07. Riches Corner – Make Money
08. Surf Planet Technology
09. Be Healthy, not MAD
10. Catatan Harian

This trick have helps many webmasters, and we have received positive responses. Now its your chance to improve your link popularity and alexa rank in less time.

WP-Creativix Premium Wordpress Theme

2011-01-15T19:18:00.000-08:00

WP Creativix is a free but still premium Wordpress Theme. It offers you a elegant Business design, with Javascript dropdown Menu and a lot more features. It comes with a Javascript Slideshow, Lightbox Portfolio and Full Widget Support. This Wordpress theme is free for download, you can use it on any Wordpress site you want.

WP Creativix comes with a nice Portfolio powered with nice Javascript Lightbox. This Portfolio displays as many Featured Posts/Works as you want. Adding Posts/Works to the Portfolio is really easy, just select a category and add a custom field. The images will be resized automatically. Why don’t you have a look at our Portfolio to

WP-Creativix Features

WP-Creativix a free premium business portfolio Wordpress Theme offers a lot to his users. This is a small excerpt from what will be possible by using WP-Creativix Wordpress Theme:

Drop-Down Menu for Pages
JQuery Slideshow with Thumbnails on Frontpage
Predesigned Portfolio Page
Lightbox Support
Allows you to chose your own highlight color (f.e. 993399 for purple)
Threaded Comments
Predesigned Widgets
Big Option Set
Upload Custom Logo via Admin Panel
Nice Icons for Home/Contact/Imprint

Blogger Archive Calendar

2011-01-15T08:45:00.000-08:00

This is for New Blogger using Layouts templates only (blogspot or custom domain). Classic Templates not supported. Also, feeds for posts must be enabled in your settings (Blogger>Dashboard>Settings>Site Feed> Post Feed can either be set at Full or Short). Private blogs do not have feeds, so they are not supported.

Here is another feature commonly found in WordPress blogs which has been customized for Blogger. Phydeaux3 has created a useful archive calendar widget which readers can use to skip to posts made on a certain date. Dates where posts have been made are highlighted in the calendar, and readers can skip to different months using the easy drop-down selector.

As with any template modifications, always make a backup before preceding!

Step #1
Go to Template>Edit HTML. Leave the Expand Widget Templates box UNCHECKED (default)

This code will replace your Archive widget. Scroll down and find yours in your template. Will look something like this

<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'>

Copy the following code, then highlight the archive widget as shown and replace it with a paste.

<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'>
<b:includable id='main'>
  <b:if cond='data:title'>
   <h2><data:title/></h2>
  </b:if>
  <div class='widget-content'>
  <div id='ArchiveList'>
  <div expr:id='data:widget.instanceId + "_ArchiveList"'>
    <b:if cond='data:style == "HIERARCHY"'>
     <b:include data='data' name='interval'/>
    </b:if>
    <b:if cond='data:style == "FLAT"'>
      <b:include data='data' name='flat'/>
    </b:if>
    <b:if cond='data:style == "MENU"'>
      <b:include data='data' name='menu'/>
    </b:if>
  </div>
  </div>
  <b:include name='quickedit'/>
  </div>
</b:includable>
<b:includable id='toggle' var='interval'>
  <!-- Toggle not needed for Calendar -->
</b:includable>
<b:includable id='flat' var='data'>
 <div id='bloggerCalendarList'>
  <ul>
    <b:loop values='data:data' var='i'>
      <li class='archivedate'>
       <a expr:href='data:i.url'><data:i.name/></a>(<data:i.post-count/>)
      </li>
    </b:loop>
  </ul>
 </div>

<div id='blogger_calendar' style='display:none'>
<table id='bcalendar'><caption id='bcaption'>

</caption>
<!-- Table Header -->
<thead id='bcHead'></thead>
<!-- Table Footer -->

<!-- Table Body -->
<tbody><tr><td id='cell1'></td><td id='cell2'></td><td id='cell3'></td><td id='cell4'></td><td id='cell5'></td><td id='cell6'></td><td id='cell7'></td></tr>
<tr><td id='cell8'></td><td id='cell9'></td><td id='cell10'></td><td id='cell11'></td><td id='cell12'></td><td id='cell13'></td><td id='cell14'></td></tr>
<tr><td id='cell15'></td><td id='cell16'></td><td id='cell17'></td><td id='cell18'></td><td id='cell19'></td><td id='cell20'></td><td id='cell21'></td></tr>
<tr><td id='cell22'></td><td id='cell23'></td><td id='cell24'></td><td id='cell25'></td><td id='cell26'></td><td id='cell27'></td><td id='cell28'></td></tr>
<tr><td id='cell29'></td><td id='cell30'></td><td id='cell31'></td><td id='cell32'></td><td id='cell33'></td><td id='cell34'></td><td id='cell35'></td></tr>
<tr id='lastRow'><td id='cell36'></td><td id='cell37'></td></tr>
</tbody>
</table>
<table id='bcNavigation'><tr>
<td id='bcFootPrev'></td>
<td id='bcFootAll'></td>
<td id='bcFootNext'></td>
</tr></table>    

<div id='calLoadingStatus' style='display:none;text-align:center;'>
<script type='text/javascript'>bcLoadStatus();</script>
</div>
<div id='calendarDisplay'/>

</div>

<script  type='text/javascript'>initCal();</script>

</b:includable>
<b:includable id='posts' var='posts'>
<!-- posts not needed for Calendar -->
</b:includable>
<b:includable id='menu' var='data'>
  Configure your calendar archive widget - Edit archive widget - Flat List - Newest first - Choose any Month/Year Format
</b:includable>
<b:includable id='interval' var='intervalData'>
  Configure your calendar archive widget - Edit archive widget - Flat List - Newest first - Choose any Month/Year Format
</b:includable>
</b:widget>

At this point you may want to save the template. It should save without any errors, if not then make sure you followed the above, and copy/pasted correctly.

Now, we need to copy and paste the scripts themselves. If you have an external server, you can copy the following scripts (removing the beginning /ending script tags) and save it as a file with the .js extension, then link to it from the head section. If that doesn't make any sense to you, don't worry. Just do it this way.
Find in your template the ending ]]></b:skin> tag and the ending </head> tag, copy the following code, and paste it in between these two tags.

<!-- Blogger Archive Calendar -->
<script type='text/javascript'>
//<![CDATA[

var bcLoadingImage = "http://phydeauxredux.googlepages.com/loading-trans.gif";
var bcLoadingMessage = " Loading....";
var bcArchiveNavText = "View Archive";
var bcArchiveNavPrev = '&#9668;';
var bcArchiveNavNext = '&#9658;';
var headDays = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
var headInitial = ["Su","Mo","Tu","We","Th","Fr","Sa"];

// Nothing to configure past this point ----------------------------------
var timeOffset;
var bcBlogID;
var calMonth;
var calDay = 1;
var calYear;
var startIndex;
var callmth;
var bcNav = new Array ();
var bcList = new Array ();

//Initialize Fill Array
var fill = ["","31","28","31","30","31","30","31","31","30","31","30","31"];
function openStatus(){
   document.getElementById('calLoadingStatus').style.display = 'block';
   document.getElementById('calendarDisplay').innerHTML = '';
  }
function closeStatus(){
   document.getElementById('calLoadingStatus').style.display = 'none';
  }
function bcLoadStatus(){
   cls = document.getElementById('calLoadingStatus');
   img = document.createElement('img');
   img.src = bcLoadingImage;
   img.style.verticalAlign = 'middle';
   cls.appendChild(img);
   txt = document.createTextNode(bcLoadingMessage);
   cls.appendChild(txt);
  }
function callArchive(mth,yr,nav){
// Check for Leap Years
  if (((yr % 4 == 0) && (yr % 100 != 0)) || (yr % 400 == 0)) {
      fill[2] = '29';
   }
  else {
      fill[2] = '28';
   }
   calMonth = mth;
   calYear = yr;
   if(mth.charAt(0) == 0){
      calMonth = mth.substring(1);
      }
   callmth = mth;
   bcNavAll = document.getElementById('bcFootAll');
   bcNavPrev = document.getElementById('bcFootPrev');
   bcNavNext = document.getElementById('bcFootNext');
   bcSelect = document.getElementById('bcSelection');
   a = document.createElement('a');
   at = document.createTextNode(bcArchiveNavText);
   a.href = bcNav[nav];
   a.appendChild(at);
   bcNavAll.innerHTML = '';
   bcNavAll.appendChild(a);
   bcNavPrev.innerHTML = '';
   bcNavNext.innerHTML = '';
   if(nav <  bcNav.length -1){
      a = document.createElement('a');
      a.innerHTML = bcArchiveNavPrev;
      bcp = parseInt(nav,10) + 1;
      a.href = bcNav[bcp];
      a.title = 'Previous Archive';
      prevSplit = bcList[bcp].split(',');
      a.onclick =
function(){bcSelect.options[bcp].selected =
true;openStatus();callArchive(prevSplit[0],prevSplit[1],prevSplit[2]);return false;};
      bcNavPrev.appendChild(a);
      }
   if(nav > 0){
      a = document.createElement('a');
      a.innerHTML = bcArchiveNavNext;
      bcn = parseInt(nav,10) - 1;
      a.href = bcNav[bcn];
      a.title = 'Next Archive';
      nextSplit = bcList[bcn].split(',');
      a.onclick =
function(){bcSelect.options[bcn].selected =
true;openStatus();callArchive(nextSplit[0],nextSplit[1],nextSplit[2]);return false;};
      bcNavNext.appendChild(a);
     }
   script = document.createElement('script');
   script.src = 'http://www.blogger.com/feeds/'+bcBlogId+'/posts/summary?published-max='+calYear+'-'+callmth+'-'+fill[calMonth]+'T23%3A59%3A59'+timeOffset+'&published-min='+calYear+'-'+callmth+'-01T00%3A00%3A00'+timeOffset+'&max-results=100&orderby=published&alt=json-in-script&callback=cReadArchive';
   document.getElementsByTagName('head')[0].appendChild(script);
}

function cReadArchive(root){
// Check for Leap Years
  if (((calYear % 4 == 0) && (calYear % 100 != 0)) || (calYear % 400 == 0)) {
      fill[2] = '29';
   }
  else {
      fill[2] = '28';
   }
    closeStatus();
    document.getElementById('lastRow').style.display = 'none';
    calDis = document.getElementById('calendarDisplay');
    var feed = root.feed;
    var total = feed.openSearch$totalResults.$t;
    var entries = feed.entry || [];
    var fillDate = new Array();
    var fillTitles = new Array();
    fillTitles.length = 32;
    var ul = document.createElement('ul');
    ul.id = 'calendarUl';
    for (var i = 0; i < feed.entry.length; ++i) {
      var entry = feed.entry[i];
      for (var j = 0; j < entry.link.length; ++j) {
           if (entry.link[j].rel == "alternate") { 
           var link = entry.link[j].href; 
            } 
             } 
      var title = entry.title.$t;
      var author = entry.author[0].name.$t;
      var date = entry.published.$t;
      var summary = entry.summary.$t;
      isPublished = date.split('T')[0].split('-')[2];
      if(isPublished.charAt(0) == '0'){
         isPublished = isPublished.substring(1);
         }
      fillDate.push(isPublished);
      if (fillTitles[isPublished]){
          fillTitles[isPublished] = fillTitles[isPublished] + ' | ' + title;
          }
      else {
          fillTitles[isPublished] = title;
          }
      li = document.createElement('li');
      li.style.listType = 'none';
      li.innerHTML = '<a href="'+link+'">'+title+'</a>';
      ul.appendChild(li);
      }
   calDis.appendChild(ul);
   var val1 = parseInt(calDay, 10)
   var valxx = parseInt(calMonth, 10);
   var val2 = valxx - 1;
   var val3 = parseInt(calYear, 10);
   var firstCalDay = new Date(val3,val2,1);
   var val0 = firstCalDay.getDay();
   startIndex = val0 + 1;
  var dayCount = 1;
  for (x =1; x < 38; x++){
      var cell = document.getElementById('cell'+x);
      if( x < startIndex){
          cell.innerHTML = ' ';
          cell.className = 'firstCell';
         }
      if( x >= startIndex){
          cell.innerHTML = dayCount;
          cell.className = 'filledCell';
          for(p = 0; p < fillDate.length; p++){
              if(dayCount == fillDate[p]){
                 
if(fillDate[p].length == 1){
                    
fillURL = '0'+fillDate[p];
                     }
                  else {
                    
fillURL = fillDate[p];
                     }
                 
cell.className = 'highlightCell';

                 
cell.innerHTML = '<a
href="/search?updated-max='+calYear+'-'+callmth+'-'+fillURL+'T23%3A59%3A59'+timeOffset+'&updated-min='+calYear+'-'+callmth+'-'+fillURL+'T00%3A00%3A00'+timeOffset+'"
title="'+fillTitles[fillDate[p]].replace(/"/g,'\'')+'">'+dayCount+'</a>';

                 }
              }
          if( dayCount > fill[valxx]){
             cell.innerHTML = ' ';
             cell.className = 'emptyCell';  
             }
          dayCount++;  
         }
      }
    visTotal = parseInt(startIndex) + parseInt(fill[valxx]) -1;
    if(visTotal >35){
        document.getElementById('lastRow').style.display = '';
       }
  }

function initCal(){
   document.getElementById('blogger_calendar').style.display = 'block';
   var bcInit = document.getElementById('bloggerCalendarList').getElementsByTagName('a');
   var bcCount = document.getElementById('bloggerCalendarList').getElementsByTagName('li');
   document.getElementById('bloggerCalendarList').style.display = 'none';
   calHead = document.getElementById('bcHead');
   tr = document.createElement('tr');
   for(t = 0; t < 7; t++){
       th = document.createElement('th');
       th.abbr = headDays[t];
       scope = 'col';
       th.title = headDays[t];
       th.innerHTML = headInitial[t];
       tr.appendChild(th);
      }
   calHead.appendChild(tr);
  for (x = 0; x <bcInit.length;x++){
     var stripYear= bcInit[x].href.split('_')[0].split('/')[3];
     var stripMonth = bcInit[x].href.split('_')[1];
     bcList.push(stripMonth + ','+ stripYear + ',' + x);
     bcNav.push(bcInit[x].href);
     }
  var sel = document.createElement('select');
  sel.id = 'bcSelection';
  sel.onchange = function(){var cSend =
this.options[this.selectedIndex].value.split(',');openStatus();callArchive(cSend[0],cSend[1],cSend[2]);};
  q = 0;
  for (r = 0; r <bcList.length; r++){
       var selText = bcInit[r].innerHTML;
       var selCount = bcCount[r].innerHTML.split('> (')[1];
       var selValue = bcList[r];
       sel.options[q] = new Option(selText + ' ('+selCount,selValue);
       q++
      
}                  
 
   document.getElementById('bcaption').appendChild(sel);
   var m = bcList[0].split(',')[0];
   var y = bcList[0].split(',')[1];
   callArchive(m,y,'0');
 }

function timezoneSet(root){
   var feed = root.feed;
   var updated = feed.updated.$t;
   var id = feed.id.$t;
   bcBlogId = id.split('blog-')[1];
   upLength = updated.length;
   if(updated.charAt(upLength-1) == "Z"){timeOffset = "+00:00";}
   else {timeOffset = updated.substring(upLength-6,upLength);}
   timeOffset = encodeURIComponent(timeOffset);
}

//]]>
</script>
<script src='/feeds/posts/summary?max-results=0&amp;alt=json-in-script&amp;callback=timezoneSet'></script>
<!-- End Blogger Archive Calendar -->

As of May 4 2007 the scripts will autodetect your timezone settings. Nothing here has to be changed, but there are a few things that some people may want to configure (especially non-English blogs) but for now the defaults will do. If you want to change some things (especially if you have a non-English blog) then check out the full list at the Blogger Archive Calendar Settings Page

Now save your template. It should save without errors, if not recheck your steps above. One more thing needs to be configured in your Archive Widget. Goto the Page Elements page, find your Archive Widget, and click to edit it. You'll see a screen like this

<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'>

The title can be anything you want. The style MUST be Flat List as show. Options should NOT have Show Oldest Posts firsts checked. Archive Frequency MUST be Monthly. The Date Format can be anything you want. The calendar will accept whatever you decide here.

Save the widget. Then try it out. Go view your blog and if everything is correct you should have the calendar working now.

If you've made it this far, and it's working you'll note that without any style associated with it the calendar is a bit plain. But we've got some of that covered as well. Admire your work so far. Make sure it seems to function.

Step #2
To style the calendar, you can add some CSS entries. If you are knowledgeable in CSS than you can use the base ones to come up with your own. Or you can pick from below.

To use any of the following styles, find the one you want and copy it. Then, find the ending ]]></b:skin> tag in your template, and paste the code right BEFORE that tag.

Use the Blogger Widget Font/Color Selector
Plain
Dark
White
Blue
DustyBlue

Plain Base Style

This is probably best if you want to style it yourself, but need all the classes/id's to get started. Most of the ones here are empty, but I've included a few to round out the calendar. I've tried to include a description so you know what each entry goes with on the calendar.

/* Calendar
----------------------------------------------- */

/* div that holds calendar */
#blogger_calendar { margin:5px 0 0 0;width:98%;}

/* Table Caption - Holds the Archive Select Menu */
#bcaption {border:1px solid #000;padding:2px;margin:10px 0 0}

/* The Archive Select Menu */
#bcaption select {}

/* The Heading Section */
table#bcalendar thead {}

/* Head Entries */
table#bcalendar thead tr th {width:20px;text-align:center;padding:2px; border:1px solid #000; font-family:Tahoma; font-weight:normal;}

/* The calendar Table */
table#bcalendar {border:1px solid #000;border-top:0; margin:0px 0 0px;width:95%;}

/* The Cells in the Calendar */
table#bcalendar tbody tr td {text-align:center;padding:2px;border:1px solid #000;}

/* Links in Calendar */
table#bcalendar tbody tr td a {font-weight:bold;}

/* First Row Empty Cells */
td.firstCell {visibility:visible;}

/* Cells that have a day in them */
td.filledCell {}

/* Cells that are empty, after the first row */
td.emptyCell {visibility:hidden;}

/* Cells with a Link Entry in them */
td.highlightCell {background:#FFFF99;border:1px outset #000!important}

/* Table Footer Navigation */
table#bcNavigation  {width:95%;}
table#bcNavigation a {text-decoration:none;}
td#bcFootPrev {width:10px;}
td#bcFootAll{text-align:center;}
td#bcFootNext {width:10px;}
ul#calendarUl {margin:5px auto 0!important;}
ul#calendarUl li a{}

Basic styles for Dark Templates

This is just some very basic styles, for dark templates. It has white borders around the calendar entries, with a highlight in a gawdy yellow. It should keep your default link colors in the calendar.

/* Calendar
----------------------------------------------- */

/* div that holds calendar */
#blogger_calendar { margin:5px 0 0 0;width:98%;}

/* Table Caption - Holds the Archive Select Menu */
#bcaption {border:1px solid #fff;padding:2px;margin:10px 0 0;}

/* The Archive Select Menu */
#bcaption select {}

/* The Heading Section */
table#bcalendar thead {}

/* Head Entries */
table#bcalendar thead tr th {width:20px;text-align:center;padding:2px; border:1px solid #fff; font-family:Tahoma; font-weight:normal;color:#fff;}

/* The calendar Table */
table#bcalendar {border:1px solid #fff;border-top:0; margin:0px 0 0px;width:95%;}

/* The Cells in the Calendar */
table#bcalendar tbody tr td {text-align:center;padding:2px;border:1px solid #fff;color:#fff;}

/* Links in Calendar */
table#bcalendar tbody tr td a {font-weight:bold;}

/* First Row Empty Cells */
td.firstCell {visibility:visible;}

/* Cells that have a day in them */
td.filledCell {}

/* Cells that are empty, after the first row */
td.emptyCell {visibility:hidden;}

/* Cells with a Link Entry in them */
td.highlightCell {background:#FFFF99;border:1px outset #000}

/* Table Footer Navigation */
table#bcNavigation  {width:95%;}
table#bcNavigation a {text-decoration:none;}
td#bcFootPrev {width:10px;}
td#bcFootAll{text-align:center;}
td#bcFootNext {width:10px;}
ul#calendarUl {margin:5px auto 0!important;}
ul#calendarUl li a{}

Plain White

This is for a plain white look. Has black borders, and black lettering inside the calendar.

/* Calendar
----------------------------------------------- */

/* div that holds calendar */
#blogger_calendar { margin:5px 0 0 0;width:98%;}

/* Table Caption - Holds the Archive Select Menu */
#bcaption {border:1px solid #000;padding:2px;margin:10px 0 0;background:#fff;}

/* The Archive Select Menu */
#bcaption select {border:1px solid #000;}

/* The Heading Section */
table#bcalendar thead {}

/* Head Entries */
table#bcalendar thead tr th {width:20px;text-align:center;padding:2px; border:1px solid #000; font-family:Tahoma; font-weight:normal;color:#000;}

/* The calendar Table */
table#bcalendar {border:1px solid #000;border-top:0; margin:0px 0 0px;width:95%;background:#fff;}

/* The Cells in the Calendar */
table#bcalendar tbody tr td {text-align:center;padding:2px;border:1px solid #000;color:#000;}

/* Links in Calendar */
table#bcalendar tbody tr td a {font-weight:bold;color:#000;}

/* First Row Empty Cells */
td.firstCell {visibility:visible;}

/* Cells that have a day in them */
td.filledCell {}

/* Cells that are empty, after the first row */
td.emptyCell {}

/* Cells with a Link Entry in them */
td.highlightCell {background:#FFFF99;border:1px outset #000}

/* Table Footer Navigation */
table#bcNavigation  {width:95%;background:#fff;border:1px solid #000;border-top:0;}
table#bcNavigation a {text-decoration:none;color:#000;}
td#bcFootPrev {width:10px;}
td#bcFootAll{text-align:center;}
td#bcFootNext {width:10px;}
ul#calendarUl {margin:5px auto 0!important;}
ul#calendarUl li a{}

Blue/Black

This one is blue, with black and grey for highlights.

/* Calendar
----------------------------------------------- */

/* div that holds calendar */
#blogger_calendar { margin:5px 0 0 0;width:98%;}

/* Table Caption - Holds the Archive Select Menu */
#bcaption {border:1px solid #000;padding:2px;margin:10px 0 0;background:#1F1FFF;}

/* The Archive Select Menu */
#bcaption select {border:0px;background:#1F1FFF;color:#fff;font-weight:bold;}

/* The Heading Section */
table#bcalendar thead {background:#000;}

/* Head Entries */
table#bcalendar thead tr th {width:20px;text-align:center;padding:2px; border:1px solid #000; font-family:Tahoma; font-weight:bold;color:#fff;}

/* The calendar Table */
table#bcalendar {border:1px solid #000;border-top:0; margin:0px 0 0px;width:95%;background:#fff;}

/* The Cells in the Calendar */
table#bcalendar tbody tr td {text-align:center;padding:2px;border:1px solid #000;color:#1F1FFF;}

/* Links in Calendar */
table#bcalendar tbody tr td a {font-weight:bold;color:#000;}

/* First Row Empty Cells */
td.firstCell {}

/* Cells that have a day in them */
td.filledCell {}

/* Cells that are empty, after the first row */
td.emptyCell {}

/* Cells with a Link Entry in them */
td.highlightCell {background:#ddd;border:1px outset #000}

/* Table Footer Navigation */
table#bcNavigation  {width:95%;background:#1F1FFF;border:1px solid #000;border-top:0;}
table#bcNavigation a {text-decoration:none;color:#fff;}
td#bcFootPrev {width:10px;}
td#bcFootAll{text-align:center;}
td#bcFootNext {width:10px;}
ul#calendarUl {margin:5px auto 0!important;}
ul#calendarUl li a{}

Dusty Blue

Kinda light blue with dusty highlights, bottom menu.

/* Calendar
----------------------------------------------- */

/* div that holds calendar */
#blogger_calendar { margin:5px 0 0 0;padding:3px;1px solid #000;background:#FFF ; width:100%;}
/* Table Caption - Holds the Archive Select Menu */
#bcaption {border:1px outset #000;background:#CCD9FF;padding:2px;margin:10px 0 0}
/* The Archive Select Menu */
#bcaption select {background:#CCD9FF;color:#fff;font-weight:bold;border:0 solid #CCD9FF;text-align:center;}
/* The Heading Section */
table#bcalendar thead {background:#FFF2CC ;color:#111;}
/* Head Entries */
table#bcalendar thead tr th {width:20px;text-align:center;padding:2px; border:1px inset #000; font-family:Tahoma; font-weight:normal;}
/* The calendar Table */
table#bcalendar {border:1px solid #000;border-top:0; margin:0px 0 0px;width:95%;}
/* The Cells in the Calendar */
table#bcalendar tbody tr td {text-align:center;padding:2px;border:1px outset #000;}
/* Links in Calendar */
table#bcalendar tbody tr td a {font-weight:bold; color:#527DFF;}
/* First Row Empty Cells */
td.firstCell {visibility:visible;}
/* Cells that have a day in them */
td.filledCell {background:#fff;}
/* Cells that are empty, after the first row */
td.emptyCell {visibility:hidden;}
/* Cells with a Link Entry in them */
td.highlightCell {background:#FFF2CC;border:1px outset #000!important}
/* Table Navigation */
table#bcNavigation  {width:95%;background:#FFF2CC;border:1px inset #000;border-top:0;color:#fff;}
table#bcNavigation a {color:#527DFF;text-decoration:none;}
td#bcFootPrev {width:10px;}
td#bcFootAll{text-align:center;}
td#bcFootNext {width:10px;}
ul#calendarUl {margin:5px auto 0!important;}
ul#calendarUl li a{ color:#527DFF}

Use the Blogger Font/Color Selector

This might be the best option for most. With it, you can use the Blogger WYSIWYG font and color page to play with all the goodies in the calendar. NOTE: When using this, the Blogger Archive scripts don't completely work in preview/font color page...the calendar will only partially generate. But enough of it does so you can see most everything you are selecting. Just make your picks, then save, and open your blog in another tab to view and see if it's all like you want.

To set this up, you just need to copy over the following code which includs all the variable definitions the WYSIWYG editor needs, along with the necessary CSS. You do it just like all the CSS files, just find the ending ]]></b:skin> tag in your template, then copy and paste the following right BEFORE that tag.

/* Archive Calendar Variable Setups
Do not modify unless you know what's what
=========================================

<Variable name="bcCalenderFonts" description="Calendar Font Sizes"
           type="font" default="normal normal 100% Tahoma, Arial, Sans-serif" / value="normal normal 100% Tahoma, Arial, Sans-serif">
 <Variable name="bcTableBackgroundColor" description="Calendar Background Color"
          type="color" default="#ffffff" value="#ffffff">
 <Variable name="bcTableBorderColor" description="Calendar Border Color"
          type="color" default="#000000" value="#000000">
 <Variable name="bcTableTextColor" description="Calendar Text Color"
          type="color" default="#000000" value="#000000">
 <Variable name="bcMenuBackgroundColor" description="Calendar Menu Select Background Color"
          type="color" default="#ffffff" value="#ffffff">
 <Variable name="bcMenuTextColor" description="Calendar Menu Select Text Color"
          type="color" default="#000000" value="#000000">
 <Variable name="bcTableHeaderBackgroundColor" description="Calendar Header Background Color"
          type="color" default="#ffffff" value="#ffffff">
 <Variable name="bcTableHeaderTextColor" description="Calendar Header Text  Color"
          type="color" default="#000000" value="#000000">
 <Variable name="bcTableHighLightColor" description="Calendar Highlight  Color"
          type="color" default="#cccccc" value="#cccccc">
 <Variable name="bcCalenderLinksColor" description="Calendar Links  Color"
          type="color" default="#0000ff" value="#0000ff">
 <Variable name="bcCalenderLinksHoverColor" description="Calendar Links Hover Color"
          type="color" default="#0000ff" value="#0000ff">
 <Variable name="bcTableFooterBackground" description="Calendar Footer Background Color"
          type="color" default="#ffffff" value="#ffffff">
 <Variable name="bcFooterLinksColor" description="Calendar Footer LinksColor"
          type="color" default="#0000ff" value="#0000ff">
   
===========================================
    End Archive Calendar Variables */

/* div that holds calendar */
#blogger_calendar { margin:5px 0 0 0;width:98%;}

/* Table Caption - Holds the Archive Select Menu */
#bcaption {border:1px solid $bcTableBorderColor;padding:2px;margin:10px 0 0;background:$bcMenuBackgroundColor;font:$bcCalenderFonts}

/* The Archive Select Menu */
#bcaption select {background:$bcMenuBackgroundColor;border:0 solid $bcMenuBackgroundColor;color:$bcMenuTextColor;font-weight:bold;text-align:center;}


/* The Heading Section */
table#bcalendar thead {}

/* Head Entries */
table#bcalendar thead tr th {width:20px;text-align:center;padding:2px; border:1px outset $bcTableBorderColor; font:$bcCalenderFonts;background:$bcTableHeaderBackgroundColor;color:$bcTableHeaderTextColor}

/* The calendar Table */
table#bcalendar {border:1px solid $bcTableBorderColor;border-top:0; margin:0px 0 0px;width:95%;background:$bcTableBackgroundColor}

/* The Cells in the Calendar */
table#bcalendar tbody tr td {text-align:center;padding:2px;border:1px outset $bcTableBorderColor; color:$bcTableTextColor;font:$bcCalenderFonts;}

/* Links in Calendar */
table#bcalendar tbody tr td a:link, table#bcalendar tbody tr td a:visited, table#bcalendar tbody tr td a:active {font-weight:bold;color:$bcCalenderLinksColor;}
table#bcalendar tbody tr td a:hover {color:$bcCalenderLinksHoverColor;}

/* First Row Empty Cells */
td.firstCell {visibility:visible;}

/* Cells that have a day in them */
td.filledCell {}

/* Cells that are empty, after the first row */
td.emptyCell {visibility:hidden;}

/* Cells with a Link Entry in them */
td.highlightCell {background:$bcTableHighLightColor;border:1px solid $bcTableBorderColor}

/* Table Footer Navigation */
table#bcNavigation  {width:95%;background:$bcTableFooterBackground;border:1px solid $bcTableBorderColor;border-top:0;color:$bcTableTextColor;font:$bcCalenderFonts;}
table#bcNavigation a:link {text-decoration:none;color:$bcFooterLinksColor}
td#bcFootPrev {width:10px;}
td#bcFootAll{text-align:center;}
td#bcFootNext {width:10px;}
ul#calendarUl {margin:5px auto 0!important;}
ul#calendarUl li a:link {}

Once you have that copied over, save your template. It should save without errors, if not then recheck that you copied all of the code, and inserted it in the correct spot.

Then, just goto the Fonts and Colors Page in Blogger, and you can modify the colors anyway that suits. The first entry for the Calendar is titled "Calendar Font Sizes", and the rest follow. All Calendar styles start with "Calendar", and I've tried to give them a descriptive enough title so you know what they are each for. Remember, the archive widget won't fully render on the Fonts and Colors page, but most of it will.

Note for the more advanced users. If you want, and know what you are doing, it's safe to move the variables section intact up where the other template variables are setup near the top of the template. People that are modifying their CSS a lot may find it cleaner to have them out of the way with the other entries. Otherwise, just leave it as is and it will work just fine.