Blogger Tips And Tricks|Latest Tips For Bloggers

How To Add Beautiful Subscribe Section to Blogger

2010-02-06T01:56:00.000-08:00

Do you like to add a good looking Subscribe section to your blog?Then simply 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'>

#hsection{border:4px solid #D3D3D3;background-color:#e9e9e9;}
#hsection:hover{border:4px solid #BABABA;background-color:#e9e9e9;}

#sectionmy .sectionmy2 h2.subscription { border:0; margin:0; padding:6px 0 0 55px; height:42px; font-size:16px;font-family:&quot;Segoe UI&quot;,Calibri,&quot;Myriad Pro&quot;,Myriad,&quot;Trebuchet MS&quot;,Helvetica,Arial,sans-serif;
font-weight:bold; }

#sectionmy .sectionmy2 h2.rss { background:url(http://2.bp.blogspot.com/_4HKUHirY_2U/S209wcnxO5I/AAAAAAAAAw4/I7aEXRVYR8s/RSS.png) no-repeat top left; }

#sectionmy .sectionmy2 h2.email { background:url(http://3.bp.blogspot.com/_4HKUHirY_2U/S209s4_wFoI/AAAAAAAAAww/8VovLp1Yxlg/EmailRSS.png) no-repeat top left; }

#sectionmy .sectionmy2 h2.twitter { background:url(http://4.bp.blogspot.com/_4HKUHirY_2U/S209oJTU3UI/AAAAAAAAAwo/28dTiLvxvDQ/twitter.png) no-repeat top left; }

#sectionmy .sectionmy2 .subscription a { color:#252e28; text-decoration:none; }

</style>

NOTE : Host RSS.png , EmailRSS.png , twitter.png yourself.

4.Now go to Layout-->Page Element and click on "Add a gadget".

5.Select "html/java script" and add the code given below and click save.

<div id="hsection">
<div id="sectionmy">
<div class="sectionmy2">

<h2 class="subscription rss"><a href="YOUR-RSS-FEED-URL">SUBSCRIBE VIA RSS</a></h2>

<h2 class="subscription email"><a href="YOUR-FEEDBURNER-EMAIL-SUBSCRIPTION-URL">SUBSCRIBE VIA EMAIL</a></h2>

<h2 class="subscription twitter"><a href="YOUR-TWITTER-URL">FOLLOW ON TWITTER</a></h2>

</div></div>
</div>

NOTE : Replace YOUR-RSS-FEED-URL , YOUR-FEEDBURNER-EMAIL-SUBSCRIPTION-URL , YOUR-TWITTER-URL with your urls.

Look at the example below:

<div id="hsection">
<div id="sectionmy">
<div class="sectionmy2">

<h2 class="subscription rss"><a href="http://feeds2.feedburner.com/blogspot/WyNa">SUBSCRIBE VIA RSS</a></h2>

<h2 class="subscription email"><a href="http://feedburner.google.com/fb/a/mailverify?uri=blogspot/WyNa&loc=en_US">SUBSCRIBE VIA EMAIL</a></h2>

<h2 class="subscription twitter"><a href="http://www.twitter.com/btipandtrick">FOLLOW ON TWITTER</a></h2>

</div></div>
</div>

You are done.

How to Add Multi Tabbed Section to Blogger

2010-01-30T02:14:00.000-08:00

To add a nice multi tab section to your blog follow the steps given 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'>
h2 { font-size:11px;}
.tabberlive .tabbertabhide {
display:none;
}

.tabber { font-size:11px;
}
.tabberlive {

}

ul.tabbernav
{

padding: 3px 0;
}

ul.tabbernav li
{
list-style: none;
display: inline;
}

ul.tabbernav li a
{
padding: 3px 0.5em;
margin-right: 3px;
border-bottom: none;
background: #eeedea;
text-decoration: none;
}

ul.tabbernav li a:link {}
ul.tabbernav li a:visited { }

ul.tabbernav li a:hover
{
color: #000;
background: #f8f8f4;

}

ul.tabbernav li.tabberactive a
{
background: #f8f8f4;
}

ul.tabbernav li.tabberactive a:hover
{
color: #333;
background: #f8f8f4;

}

/*--------------------------------------------------
.tabbertab = the tab content
Add style only after the tabber interface is set up (.tabberlive)
--------------------------------------------------*/
.tabberlive .tabbertab {
padding:5px;
border-top:0;
background:#f5f5f3;



/* If you don&#39;t want the tab size changing whenever a tab is changed
you can set a fixed height */

/* height:200px; */

/* If you set a fix height set overflow to auto and you will get a
scrollbar when necessary */

/* overflow:auto; */
}

/* If desired, hide the heading since a heading is provided by the tab */
.tabberlive .tabbertab h2 {
display:none;

}
.tabberlive .tabbertab h3 {
display:none;

}

/* Example of using an ID to set different styles for the tabs on the page */
.tabberlive#tab1 {
}
.tabberlive#tab2 {
}
.tabberlive#tab2 .tabbertab {
height:200px;
overflow:auto;
}

.tabbertab p { padding-bottom:10px; line-height:140%; }
.tabbertab ul { padding:0; margin:0;}
.tabbertab ul li { padding:5px 0 6px 0; font-size:11px; }
.tabbertab ul li { background:url(http://4.bp.blogspot.com/_4HKUHirY_2U/S2QGCNXNP3I/AAAAAAAAAu8/n2gY2Ybsqoc/bullet.gif) no-repeat 0 7px; padding-left:16px; border-bottom:1px solid #eeedea;}
</style>

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

/*==================================================
$Id: tabber.js,v 1.9 2006/04/27 20:51:51 pat Exp $
tabber.js by Patrick Fitzgerald pat@barelyfitz.com

Documentation can be found at the following URL:
http://www.barelyfitz.com/projects/tabber/

License (http://www.opensource.org/licenses/mit-license.php)

Copyright (c) 2006 Patrick Fitzgerald

Permission is hereby granted, free of charge, to any person
obtaining a copy of this software and associated documentation files
(the "Software"), to deal in the Software without restriction,
including without limitation the rights to use, copy, modify, merge,
publish, distribute, sublicense, and/or sell copies of the Software,
and to permit persons to whom the Software is furnished to do so,
subject to the following conditions:

The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS
BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN
ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
==================================================*/

function tabberObj(argsObj)
{
var arg; /* name of an argument to override */

/* Element for the main tabber div. If you supply this in argsObj,
then the init() method will be called.
*/
this.div = null;

/* Class of the main tabber div */
this.classMain = "tabber";

/* Rename classMain to classMainLive after tabifying
(so a different style can be applied)
*/
this.classMainLive = "tabberlive";

/* Class of each DIV that contains a tab */
this.classTab = "tabbertab";

/* Class to indicate which tab should be active on startup */
this.classTabDefault = "tabbertabdefault";

/* Class for the navigation UL */
this.classNav = "tabbernav";

/* When a tab is to be hidden, instead of setting display='none', we
set the class of the div to classTabHide. In your screen
stylesheet you should set classTabHide to display:none.  In your
print stylesheet you should set display:block to ensure that all
the information is printed.
*/
this.classTabHide = "tabbertabhide";

/* Class to set the navigation LI when the tab is active, so you can
use a different style on the active tab.
*/
this.classNavActive = "tabberactive";

/* Elements that might contain the title for the tab, only used if a
title is not specified in the TITLE attribute of DIV classTab.
*/
this.titleElements = ['h2','h3','h4','h5','h6'];

/* Should we strip out the HTML from the innerHTML of the title elements?
This should usually be true.
*/
this.titleElementsStripHTML = true;

/* If the user specified the tab names using a TITLE attribute on
the DIV, then the browser will display a tooltip whenever the
mouse is over the DIV. To prevent this tooltip, we can remove the
TITLE attribute after getting the tab name.
*/
this.removeTitle = true;

/* If you want to add an id to each link set this to true */
this.addLinkId = false;

/* If addIds==true, then you can set a format for the ids.
<tabberid> will be replaced with the id of the main tabber div.
<tabnumberzero> will be replaced with the tab number
(tab numbers starting at zero)
<tabnumberone> will be replaced with the tab number
(tab numbers starting at one)
<tabtitle> will be replaced by the tab title
(with all non-alphanumeric characters removed)
*/
this.linkIdFormat = '<tabberid>nav<tabnumberone>';

/* You can override the defaults listed above by passing in an object:
var mytab = new tabber({property:value,property:value});
*/
for (arg in argsObj) { this[arg] = argsObj[arg]; }

/* Create regular expressions for the class names; Note: if you
change the class names after a new object is created you must
also change these regular expressions.
*/
this.REclassMain = new RegExp('\\b' + this.classMain + '\\b', 'gi');
this.REclassMainLive = new RegExp('\\b' + this.classMainLive + '\\b', 'gi');
this.REclassTab = new RegExp('\\b' + this.classTab + '\\b', 'gi');
this.REclassTabDefault = new RegExp('\\b' + this.classTabDefault + '\\b', 'gi');
this.REclassTabHide = new RegExp('\\b' + this.classTabHide + '\\b', 'gi');

/* Array of objects holding info about each tab */
this.tabs = new Array();

/* If the main tabber div was specified, call init() now */
if (this.div) {

this.init(this.div);

/* We don't need the main div anymore, and to prevent a memory leak
in IE, we must remove the circular reference between the div
and the tabber object. */
this.div = null;
}
}


/*--------------------------------------------------
Methods for tabberObj
--------------------------------------------------*/


tabberObj.prototype.init = function(e)
{
/* Set up the tabber interface.

e = element (the main containing div)

Example:
init(document.getElementById('mytabberdiv'))
*/

var
childNodes, /* child nodes of the tabber div */
i, i2, /* loop indices */
t, /* object to store info about a single tab */
defaultTab=0, /* which tab to select by default */
DOM_ul, /* tabbernav list */
DOM_li, /* tabbernav list item */
DOM_a, /* tabbernav link */
aId, /* A unique id for DOM_a */
headingElement; /* searching for text to use in the tab */

/* Verify that the browser supports DOM scripting */
if (!document.getElementsByTagName) { return false; }

/* If the main DIV has an ID then save it. */
if (e.id) {
this.id = e.id;
}

/* Clear the tabs array (but it should normally be empty) */
this.tabs.length = 0;

/* Loop through an array of all the child nodes within our tabber element. */
childNodes = e.childNodes;
for(i=0; i < childNodes.length; i++) {

/* Find the nodes where class="tabbertab" */
if(childNodes[i].className &&
childNodes[i].className.match(this.REclassTab)) {

/* Create a new object to save info about this tab */
t = new Object();

/* Save a pointer to the div for this tab */
t.div = childNodes[i];

/* Add the new object to the array of tabs */
this.tabs[this.tabs.length] = t;

/* If the class name contains classTabDefault,
then select this tab by default.
*/
if (childNodes[i].className.match(this.REclassTabDefault)) {
defaultTab = this.tabs.length-1;
}
}
}

/* Create a new UL list to hold the tab headings */
DOM_ul = document.createElement("ul");
DOM_ul.className = this.classNav;

/* Loop through each tab we found */
for (i=0; i < this.tabs.length; i++) {

t = this.tabs[i];

/* Get the label to use for this tab:
From the title attribute on the DIV,
Or from one of the this.titleElements[] elements,
Or use an automatically generated number.
*/
t.headingText = t.div.title;

/* Remove the title attribute to prevent a tooltip from appearing */
if (this.removeTitle) { t.div.title = ''; }

if (!t.headingText) {

/* Title was not defined in the title of the DIV,
So try to get the title from an element within the DIV.
Go through the list of elements in this.titleElements
(typically heading elements ['h2','h3','h4'])
*/
for (i2=0; i2<this.titleElements.length; i2++) {
headingElement = t.div.getElementsByTagName(this.titleElements[i2])[0];
if (headingElement) {
t.headingText = headingElement.innerHTML;
if (this.titleElementsStripHTML) {
  t.headingText.replace(/<br>/gi," ");
  t.headingText = t.headingText.replace(/<[^>]+>/g,"");
}
break;
}
}
}

if (!t.headingText) {
/* Title was not found (or is blank) so automatically generate a
number for the tab.
*/
t.headingText = i + 1;
}

/* Create a list element for the tab */
DOM_li = document.createElement("li");

/* Save a reference to this list item so we can later change it to
the "active" class */
t.li = DOM_li;

/* Create a link to activate the tab */
DOM_a = document.createElement("a");
DOM_a.appendChild(document.createTextNode(t.headingText));
DOM_a.href = "javascript:void(null);";
DOM_a.title = t.headingText;
DOM_a.onclick = this.navClick;

/* Add some properties to the link so we can identify which tab
was clicked. Later the navClick method will need this.
*/
DOM_a.tabber = this;
DOM_a.tabberIndex = i;

/* Do we need to add an id to DOM_a? */
if (this.addLinkId && this.linkIdFormat) {

/* Determine the id name */
aId = this.linkIdFormat;
aId = aId.replace(/<tabberid>/gi, this.id);
aId = aId.replace(/<tabnumberzero>/gi, i);
aId = aId.replace(/<tabnumberone>/gi, i+1);
aId = aId.replace(/<tabtitle>/gi, t.headingText.replace(/[^a-zA-Z0-9\-]/gi, ''));

DOM_a.id = aId;
}

/* Add the link to the list element */
DOM_li.appendChild(DOM_a);

/* Add the list element to the list */
DOM_ul.appendChild(DOM_li);
}

/* Add the UL list to the beginning of the tabber div */
e.insertBefore(DOM_ul, e.firstChild);

/* Make the tabber div "live" so different CSS can be applied */
e.className = e.className.replace(this.REclassMain, this.classMainLive);

/* Activate the default tab, and do not call the onclick handler */
this.tabShow(defaultTab);

/* If the user specified an onLoad function, call it now. */
if (typeof this.onLoad == 'function') {
this.onLoad({tabber:this});
}

return this;
};


tabberObj.prototype.navClick = function(event)
{
/* This method should only be called by the onClick event of an <A>
element, in which case we will determine which tab was clicked by
examining a property that we previously attached to the <A>
element.

Since this was triggered from an onClick event, the variable
"this" refers to the <A> element that triggered the onClick
event (and not to the tabberObj).

When tabberObj was initialized, we added some extra properties
to the <A> element, for the purpose of retrieving them now. Get
the tabberObj object, plus the tab number that was clicked.
*/

var
rVal, /* Return value from the user onclick function */
a, /* element that triggered the onclick event */
self, /* the tabber object */
tabberIndex, /* index of the tab that triggered the event */
onClickArgs; /* args to send the onclick function */

a = this;
if (!a.tabber) { return false; }

self = a.tabber;
tabberIndex = a.tabberIndex;

/* Remove focus from the link because it looks ugly.
I don't know if this is a good idea...
*/
a.blur();

/* If the user specified an onClick function, call it now.
If the function returns false then do not continue.
*/
if (typeof self.onClick == 'function') {

onClickArgs = {'tabber':self, 'index':tabberIndex, 'event':event};

/* IE uses a different way to access the event object */
if (!event) { onClickArgs.event = window.event; }

rVal = self.onClick(onClickArgs);
if (rVal === false) { return false; }
}

self.tabShow(tabberIndex);

return false;
};


tabberObj.prototype.tabHideAll = function()
{
var i; /* counter */

/* Hide all tabs and make all navigation links inactive */
for (i = 0; i < this.tabs.length; i++) {
this.tabHide(i);
}
};


tabberObj.prototype.tabHide = function(tabberIndex)
{
var div;

if (!this.tabs[tabberIndex]) { return false; }

/* Hide a single tab and make its navigation link inactive */
div = this.tabs[tabberIndex].div;

/* Hide the tab contents by adding classTabHide to the div */
if (!div.className.match(this.REclassTabHide)) {
div.className += ' ' + this.classTabHide;
}
this.navClearActive(tabberIndex);

return this;
};


tabberObj.prototype.tabShow = function(tabberIndex)
{
/* Show the tabberIndex tab and hide all the other tabs */

var div;

if (!this.tabs[tabberIndex]) { return false; }

/* Hide all the tabs first */
this.tabHideAll();

/* Get the div that holds this tab */
div = this.tabs[tabberIndex].div;

/* Remove classTabHide from the div */
div.className = div.className.replace(this.REclassTabHide, '');

/* Mark this tab navigation link as "active" */
this.navSetActive(tabberIndex);

/* If the user specified an onTabDisplay function, call it now. */
if (typeof this.onTabDisplay == 'function') {
this.onTabDisplay({'tabber':this, 'index':tabberIndex});
}

return this;
};

tabberObj.prototype.navSetActive = function(tabberIndex)
{
/* Note: this method does *not* enforce the rule
that only one nav item can be active at a time.
*/

/* Set classNavActive for the navigation list item */
this.tabs[tabberIndex].li.className = this.classNavActive;

return this;
};


tabberObj.prototype.navClearActive = function(tabberIndex)
{
/* Note: this method does *not* enforce the rule
that one nav should always be active.
*/

/* Remove classNavActive from the navigation list item */
this.tabs[tabberIndex].li.className = '';

return this;
};


/*==================================================*/


function tabberAutomatic(tabberArgs)
{
/* This function finds all DIV elements in the document where
class=tabber.classMain, then converts them to use the tabber
interface.

tabberArgs = an object to send to "new tabber()"
*/
var
tempObj, /* Temporary tabber object */
divs, /* Array of all divs on the page */
i; /* Loop index */

if (!tabberArgs) { tabberArgs = {}; }

/* Create a tabber object so we can get the value of classMain */
tempObj = new tabberObj(tabberArgs);

/* Find all DIV elements in the document that have class=tabber */

/* First get an array of all DIV elements and loop through them */
divs = document.getElementsByTagName("div");
for (i=0; i < divs.length; i++) {

/* Is this DIV the correct class? */
if (divs[i].className &&
divs[i].className.match(tempObj.REclassMain)) {

/* Now tabify the DIV */
tabberArgs.div = divs[i];
divs[i].tabber = new tabberObj(tabberArgs);
}
}

return this;
}


/*==================================================*/


function tabberAutomaticOnLoad(tabberArgs)
{
/* This function adds tabberAutomatic to the window.onload event,
so it will run after the document has finished loading.
*/
var oldOnLoad;

if (!tabberArgs) { tabberArgs = {}; }

/* Taken from: http://simon.incutio.com/archive/2004/05/26/addLoadEvent */

oldOnLoad = window.onload;
if (typeof window.onload != 'function') {
window.onload = function() {
tabberAutomatic(tabberArgs);
};
} else {
window.onload = function() {
oldOnLoad();
tabberAutomatic(tabberArgs);
};
}
}


/*==================================================*/


/* Run tabberAutomaticOnload() unless the "manualStartup" option was specified */

if (typeof tabberOptions == 'undefined') {

tabberAutomaticOnLoad();

} else {

if (!tabberOptions['manualStartup']) {
tabberAutomaticOnLoad(tabberOptions);
}

}

//]]>
</script>

Note : Host bullet.gif image yourself.

4.Now go to Layout-->Page Element and click on "Add a gadget".

5.Select "html/java script" and add the code given below and click save.

<div id="tab">
<div class="tabber">

<div class="tabbertab">
<h2>Recent Post</h2>
<ul>

ENTER-TAB-1-CONTENT

</ul>
</div>

<div class="tabbertab">
<h2>Recent Comments</h2>

<ul>

ENTER-TAB-2-CONTENT

</ul>
</div>

<div class="tabbertab">
<h2>Archives</h2>
<ul>

ENTER-TAB-3-CONTENT

</ul>
</div>

</div></div>

Note:

Replace ENTER-TAB-1-CONTENT , ENTER-TAB-2-CONTENT , ENTER-TAB-3-CONTENT with your content.

And also you can change Tabs Names.(Red coloured text)

You are done.

How To Add Featured Post Content Slider to Blogger

2010-01-28T02:10:00.000-08:00

This is very smart featured post content slider for your blogger blog or any other site.You can easily add or remove slides to this widget.And also very easy to configure.To add it to your site follow the steps given below.You can see the demo of this widget HERE.

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 .

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

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

eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('(6($){$.1g.1w=6(o){o=$.1f({r:n,x:n,N:n,17:q,J:n,L:1a,16:n,y:q,u:12,H:3,B:0,k:1,K:n,I:n},o||{});8 G.R(6(){p b=q,A=o.y?"15":"w",P=o.y?"t":"s";p c=$(G),9=$("9",c),E=$("10",9),W=E.Y(),v=o.H;7(o.u){9.1h(E.D(W-v-1+1).V()).1d(E.D(0,v).V());o.B+=v}p f=$("10",9),l=f.Y(),4=o.B;c.5("1c","H");f.5({U:"T",1b:o.y?"S":"w"});9.5({19:"0",18:"0",Q:"13","1v-1s-1r":"S","z-14":"1"});c.5({U:"T",Q:"13","z-14":"2",w:"1q"});p g=o.y?t(f):s(f);p h=g*l;p j=g*v;f.5({s:f.s(),t:f.t()});9.5(P,h+"C").5(A,-(4*g));c.5(P,j+"C");7(o.r)$(o.r).O(6(){8 m(4-o.k)});7(o.x)$(o.x).O(6(){8 m(4+o.k)});7(o.N)$.R(o.N,6(i,a){$(a).O(6(){8 m(o.u?o.H+i:i)})});7(o.17&&c.11)c.11(6(e,d){8 d>0?m(4-o.k):m(4+o.k)});7(o.J)1p(6(){m(4+o.k)},o.J+o.L);6 M(){8 f.D(4).D(0,v)};6 m(a){7(!b){7(o.K)o.K.Z(G,M());7(o.u){7(a<=o.B-v-1){9.5(A,-((l-(v*2))*g)+"C");4=a==o.B-v-1?l-(v*2)-1:l-(v*2)-o.k}F 7(a>=l-v+1){9.5(A,-((v)*g)+"C");4=a==l-v+1?v+1:v+o.k}F 4=a}F{7(a<0||a>l-v)8;F 4=a}b=12;9.1o(A=="w"?{w:-(4*g)}:{15:-(4*g)},o.L,o.16,6(){7(o.I)o.I.Z(G,M());b=q});7(!o.u){$(o.r+","+o.x).1n("X");$((4-o.k<0&&o.r)||(4+o.k>l-v&&o.x)||[]).1m("X")}}8 q}})};6 5(a,b){8 1l($.5(a[0],b))||0};6 s(a){8 a[0].1k+5(a,\'1j\')+5(a,\'1i\')};6 t(a){8 a[0].1t+5(a,\'1u\')+5(a,\'1e\')}})(1x);',62,96,'||||curr|css|function|if|return|ul|||||||||||scroll|itemLength|go|null||var|false|btnPrev|width|height|circular||left|btnNext|vertical||animCss|start|px|slice|tLi|else|this|visible|afterEnd|auto|beforeStart|speed|vis|btnGo|click|sizeCss|position|each|none|hidden|overflow|clone|tl|disabled|size|call|li|mousewheel|true|relative|index|top|easing|mouseWheel|padding|margin|200|float|visibility|append|marginBottom|extend|fn|prepend|marginRight|marginLeft|offsetWidth|parseInt|addClass|removeClass|animate|setInterval|0px|type|style|offsetHeight|marginTop|list|jCarouselLite|jQuery'.split('|'),0,{}))

//]]>
</script>

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

/*
* Copyright (c) 2009 Simo Kinnunen.
* Licensed under the MIT license.
*
* @version 1.02
*/
var Cufon=(function(){var m=function(){return m.replace.apply(null,arguments)};var x=m.DOM={ready:(function(){var C=false,E={loaded:1,complete:1};var B=[],D=function(){if(C){return}C=true;for(var F;F=B.shift();F()){}};if(document.addEventListener){document.addEventListener("DOMContentLoaded",D,false);window.addEventListener("pageshow",D,false)}if(!window.opera&&document.readyState){(function(){E[document.readyState]?D():setTimeout(arguments.callee,10)})()}if(document.readyState&&document.createStyleSheet){(function(){try{document.body.doScroll("left");D()}catch(F){setTimeout(arguments.callee,1)}})()}q(window,"load",D);return function(F){if(!arguments.length){D()}else{C?F():B.push(F)}}})(),root:function(){return document.documentElement||document.body}};var n=m.CSS={Size:function(C,B){this.value=parseFloat(C);this.unit=String(C).match(/[a-z%]*$/)[0]||"px";this.convert=function(D){return D/B*this.value};this.convertFrom=function(D){return D/this.value*B};this.toString=function(){return this.value+this.unit}},addClass:function(C,B){var D=C.className;C.className=D+(D&&" ")+B;return C},color:j(function(C){var B={};B.color=C.replace(/^rgba\((.*?),\s*([\d.]+)\)/,function(E,D,F){B.opacity=parseFloat(F);return"rgb("+D+")"});return B}),fontStretch:j(function(B){if(typeof B=="number"){return B}if(/%$/.test(B)){return parseFloat(B)/100}return{"ultra-condensed":0.5,"extra-condensed":0.625,condensed:0.75,"semi-condensed":0.875,"semi-expanded":1.125,expanded:1.25,"extra-expanded":1.5,"ultra-expanded":2}[B]||1}),getStyle:function(C){var B=document.defaultView;if(B&&B.getComputedStyle){return new a(B.getComputedStyle(C,null))}if(C.currentStyle){return new a(C.currentStyle)}return new a(C.style)},gradient:j(function(F){var G={id:F,type:F.match(/^-([a-z]+)-gradient\(/)[1],stops:[]},C=F.substr(F.indexOf("(")).match(/([\d.]+=)?(#[a-f0-9]+|[a-z]+\(.*?\)|[a-z]+)/ig);for(var E=0,B=C.length,D;E<B;++E){D=C[E].split("=",2).reverse();G.stops.push([D[1]||E/(B-1),D[0]])}return G}),hasClass:function(C,B){return RegExp("(?:^|\\s)"+B+"(?=\\s|$)").test(C.className)},quotedList:j(function(E){var D=[],C=/\s*((["'])([\s\S]*?[^\\])\2|[^,]+)\s*/g,B;while(B=C.exec(E)){D.push(B[3]||B[1])}return D}),recognizesMedia:j(function(G){var E=document.createElement("style"),D,C,B;E.type="text/css";E.media=G;try{E.appendChild(document.createTextNode("/**/"))}catch(F){}C=g("head")[0];C.insertBefore(E,C.firstChild);D=(E.sheet||E.styleSheet);B=D&&!D.disabled;C.removeChild(E);return B}),removeClass:function(D,C){var B=RegExp("(?:^|\\s+)"+C+"(?=\\s|$)","g");D.className=D.className.replace(B,"");return D},supports:function(D,C){var B=document.createElement("span").style;if(B[D]===undefined){return false}B[D]=C;return B[D]===C},textAlign:function(E,D,B,C){if(D.get("textAlign")=="right"){if(B>0){E=" "+E}}else{if(B<C-1){E+=" "}}return E},textDecoration:function(G,F){if(!F){F=this.getStyle(G)}var C={underline:null,overline:null,"line-through":null};for(var B=G;B.parentNode&&B.parentNode.nodeType==1;){var E=true;for(var D in C){if(!k(C,D)||C[D]){continue}if(F.get("textDecoration").indexOf(D)!=-1){C[D]=F.get("color")}E=false}if(E){break}F=this.getStyle(B=B.parentNode)}return C},textShadow:j(function(F){if(F=="none"){return null}var E=[],G={},B,C=0;var D=/(#[a-f0-9]+|[a-z]+\(.*?\)|[a-z]+)|(-?[\d.]+[a-z%]*)|,/ig;while(B=D.exec(F)){if(B[0]==","){E.push(G);G={};C=0}else{if(B[1]){G.color=B[1]}else{G[["offX","offY","blur"][C++]]=B[2]}}}E.push(G);return E}),textTransform:(function(){var B={uppercase:function(C){return C.toUpperCase()},lowercase:function(C){return C.toLowerCase()},capitalize:function(C){return C.replace(/\b./g,function(D){return D.toUpperCase()})}};return function(E,D){var C=B[D.get("textTransform")];return C?C(E):E}})(),whiteSpace:(function(){var B={inline:1,"inline-block":1,"run-in":1};return function(E,C,D){if(B[C.get("display")]){return E}if(!D.previousSibling){E=E.replace(/^\s+/,"")}if(!D.nextSibling){E=E.replace(/\s+$/,"")}return E}})()};n.ready=(function(){var B=!n.recognizesMedia("all"),E=false;var D=[],H=function(){B=true;for(var K;K=D.shift();K()){}};var I=g("link"),J=g("style");function C(K){return K.disabled||G(K.sheet,K.media||"screen")}function G(M,P){if(!n.recognizesMedia(P||"all")){return true}if(!M||M.disabled){return false}try{var Q=M.cssRules,O;if(Q){search:for(var L=0,K=Q.length;O=Q[L],L<K;++L){switch(O.type){case 2:break;case 3:if(!G(O.styleSheet,O.media.mediaText)){return false}break;default:break search}}}}catch(N){}return true}function F(){if(document.createStyleSheet){return true}var L,K;for(K=0;L=I[K];++K){if(L.rel.toLowerCase()=="stylesheet"&&!C(L)){return false}}for(K=0;L=J[K];++K){if(!C(L)){return false}}return true}x.ready(function(){if(!E){E=n.getStyle(document.body).isUsable()}if(B||(E&&F())){H()}else{setTimeout(arguments.callee,10)}});return function(K){if(B){K()}else{D.push(K)}}})();function s(C){var B=this.face=C.face;this.glyphs=C.glyphs;this.w=C.w;this.baseSize=parseInt(B["units-per-em"],10);this.family=B["font-family"].toLowerCase();this.weight=B["font-weight"];this.style=B["font-style"]||"normal";this.viewBox=(function(){var E=B.bbox.split(/\s+/);var D={minX:parseInt(E[0],10),minY:parseInt(E[1],10),maxX:parseInt(E[2],10),maxY:parseInt(E[3],10)};D.width=D.maxX-D.minX;D.height=D.maxY-D.minY;D.toString=function(){return[this.minX,this.minY,this.width,this.height].join(" ")};return D})();this.ascent=-parseInt(B.ascent,10);this.descent=-parseInt(B.descent,10);this.height=-this.ascent+this.descent}function f(){var C={},B={oblique:"italic",italic:"oblique"};this.add=function(D){(C[D.style]||(C[D.style]={}))[D.weight]=D};this.get=function(H,I){var G=C[H]||C[B[H]]||C.normal||C.italic||C.oblique;if(!G){return null}I={normal:400,bold:700}[I]||parseInt(I,10);if(G[I]){return G[I]}var E={1:1,99:0}[I%100],K=[],F,D;if(E===undefined){E=I>400}if(I==500){I=400}for(var J in G){if(!k(G,J)){continue}J=parseInt(J,10);if(!F||J<F){F=J}if(!D||J>D){D=J}K.push(J)}if(I<F){I=F}if(I>D){I=D}K.sort(function(M,L){return(E?(M>I&&L>I)?M<L:M>L:(M<I&&L<I)?M>L:M<L)?-1:1});return G[K[0]]}}function r(){function D(F,G){if(F.contains){return F.contains(G)}return F.compareDocumentPosition(G)&16}function B(G){var F=G.relatedTarget;if(!F||D(this,F)){return}C(this)}function E(F){C(this)}function C(F){setTimeout(function(){m.replace(F,d.get(F).options,true)},10)}this.attach=function(F){if(F.onmouseenter===undefined){q(F,"mouseover",B);q(F,"mouseout",B)}else{q(F,"mouseenter",E);q(F,"mouseleave",E)}}}function u(){var C=[],D={};function B(H){var E=[],G;for(var F=0;G=H[F];++F){E[F]=C[D[G]]}return E}this.add=function(F,E){D[F]=C.push(E)-1};this.repeat=function(){var E=arguments.length?B(arguments):C,F;for(var G=0;F=E[G++];){m.replace(F[0],F[1],true)}}}function A(){var D={},B=0;function C(E){return E.cufid||(E.cufid=++B)}this.get=function(E){var F=C(E);return D[F]||(D[F]={})}}function a(B){var D={},C={};this.extend=function(E){for(var F in E){if(k(E,F)){D[F]=E[F]}}return this};this.get=function(E){return D[E]!=undefined?D[E]:B[E]};this.getSize=function(F,E){return C[F]||(C[F]=new n.Size(this.get(F),E))};this.isUsable=function(){return !!B}}function q(C,B,D){if(C.addEventListener){C.addEventListener(B,D,false)}else{if(C.attachEvent){C.attachEvent("on"+B,function(){return D.call(C,window.event)})}}}function v(C,B){var D=d.get(C);if(D.options){return C}if(B.hover&&B.hoverables[C.nodeName.toLowerCase()]){b.attach(C)}D.options=B;return C}function j(B){var C={};return function(D){if(!k(C,D)){C[D]=B.apply(null,arguments)}return C[D]}}function c(F,E){var B=n.quotedList(E.get("fontFamily").toLowerCase()),D;for(var C=0;D=B[C];++C){if(i[D]){return i[D].get(E.get("fontStyle"),E.get("fontWeight"))}}return null}function g(B){return document.getElementsByTagName(B)}function k(C,B){return C.hasOwnProperty(B)}function h(){var B={},D,F;for(var E=0,C=arguments.length;D=arguments[E],E<C;++E){for(F in D){if(k(D,F)){B[F]=D[F]}}}return B}function o(E,M,C,N,F,D){var K=document.createDocumentFragment(),H;if(M===""){return K}var L=N.separate;var I=M.split(p[L]),B=(L=="words");if(B&&t){if(/^\s/.test(M)){I.unshift("")}if(/\s$/.test(M)){I.push("")}}for(var J=0,G=I.length;J<G;++J){H=z[N.engine](E,B?n.textAlign(I[J],C,J,G):I[J],C,N,F,D,J<G-1);if(H){K.appendChild(H)}}return K}function l(C,J){var B=n.getStyle(v(C,J)).extend(J);var D=c(C,B),E,H,G,F,I;for(E=C.firstChild;E;E=G){H=E.nodeType;G=E.nextSibling;if(H==3){if(F){F.appendData(E.data);C.removeChild(E)}else{F=E}if(G){continue}}if(F){C.replaceChild(o(D,n.whiteSpace(F.data,B,F),B,J,E,C),F);F=null}if(H==1&&E.firstChild){if(n.hasClass(E,"cufon")){z[J.engine](D,null,B,J,E,C)}else{arguments.callee(E,J)}}}}var t=" ".split(/\s+/).length==0;var d=new A();var b=new r();var y=new u();var e=false;var z={},i={},w={enableTextDecoration:false,engine:null,forceHitArea:false,hover:false,hoverables:{a:true},printable:true,selector:(window.Sizzle||(window.jQuery&&function(B){return jQuery(B)})||(window.dojo&&dojo.query)||(window.Ext&&Ext.query)||(window.$$&&function(B){return $$(B)})||(window.$&&function(B){return $(B)})||(document.querySelectorAll&&function(B){return document.querySelectorAll(B)})||g),separate:"words",textShadow:"none"};var p={words:/[^\S\u00a0]+/,characters:"",none:/^/};m.now=function(){x.ready();return m};m.refresh=function(){y.repeat.apply(y,arguments);return m};m.registerEngine=function(C,B){if(!B){return m}z[C]=B;return m.set("engine",C)};m.registerFont=function(D){var B=new s(D),C=B.family;if(!i[C]){i[C]=new f()}i[C].add(B);return m.set("fontFamily",'"'+C+'"')};m.replace=function(D,C,B){C=h(w,C);if(!C.engine){return m}if(!e){n.addClass(x.root(),"cufon-active cufon-loading");n.ready(function(){n.addClass(n.removeClass(x.root(),"cufon-loading"),"cufon-ready")});e=true}if(C.hover){C.forceHitArea=true}if(typeof C.textShadow=="string"){C.textShadow=n.textShadow(C.textShadow)}if(typeof C.color=="string"&&/^-/.test(C.color)){C.textGradient=n.gradient(C.color)}if(!B){y.add(D,arguments)}if(D.nodeType||typeof D=="string"){D=[D]}n.ready(function(){for(var F=0,E=D.length;F<E;++F){var G=D[F];if(typeof G=="string"){m.replace(C.selector(G),C,true)}else{l(G,C)}}});return m};m.set=function(B,C){w[B]=C;return m};return m})();Cufon.registerEngine("canvas",(function(){var b=document.createElement("canvas");if(!b||!b.getContext||!b.getContext.apply){return}b=null;var a=Cufon.CSS.supports("display","inline-block");var e=!a&&(document.compatMode=="BackCompat"||/frameset|transitional/i.test(document.doctype.publicId));var f=document.createElement("style");f.type="text/css";f.appendChild(document.createTextNode((".cufon-canvas{text-indent:0;}@media screen,projection{.cufon-canvas{display:inline;display:inline-block;position:relative;vertical-align:middle;"+(e?"":"font-size:1px;line-height:1px;")+"}.cufon-canvas .cufon-alt{display:-moz-inline-box;display:inline-block;width:0;height:0;overflow:hidden;text-indent:-10000in;}"+(a?".cufon-canvas canvas{position:relative;}":".cufon-canvas canvas{position:absolute;}")+"}@media print{.cufon-canvas{padding:0;}.cufon-canvas canvas{display:none;}.cufon-canvas .cufon-alt{display:inline;}}").replace(/;/g,"!important;")));document.getElementsByTagName("head")[0].appendChild(f);function d(p,h){var n=0,m=0;var g=[],o=/([mrvxe])([^a-z]*)/g,k;generate:for(var j=0;k=o.exec(p);++j){var l=k[2].split(",");switch(k[1]){case"v":g[j]={m:"bezierCurveTo",a:[n+~~l[0],m+~~l[1],n+~~l[2],m+~~l[3],n+=~~l[4],m+=~~l[5]]};break;case"r":g[j]={m:"lineTo",a:[n+=~~l[0],m+=~~l[1]]};break;case"m":g[j]={m:"moveTo",a:[n=~~l[0],m=~~l[1]]};break;case"x":g[j]={m:"closePath"};break;case"e":break generate}h[g[j].m].apply(h,g[j].a)}return g}function c(m,k){for(var j=0,h=m.length;j<h;++j){var g=m[j];k[g.m].apply(k,g.a)}}return function(ah,H,Z,D,L,ai){var n=(H===null);if(n){H=L.alt}var J=ah.viewBox;var p=Z.getSize("fontSize",ah.baseSize);var X=Z.get("letterSpacing");X=(X=="normal")?0:p.convertFrom(parseInt(X,10));var K=0,Y=0,W=0,F=0;var I=D.textShadow,U=[];if(I){for(var ag=I.length;ag--;){var O=I[ag];var T=p.convertFrom(parseFloat(O.offX));var R=p.convertFrom(parseFloat(O.offY));U[ag]=[T,R];if(R<K){K=R}if(T>Y){Y=T}if(R>W){W=R}if(T<F){F=T}}}var al=Cufon.CSS.textTransform(H,Z).split(""),B;var o=ah.glyphs,E,r,ac;var h=0,v,N=[];for(var ag=0,ae=0,ab=al.length;ag<ab;++ag){E=o[B=al[ag]]||ah.missingGlyph;if(!E){continue}if(r){h-=ac=r[B]||0;N[ae-1]-=ac}h+=v=N[ae++]=~~(E.w||ah.w)+X;r=E.k}if(v===undefined){return null}Y+=J.width-v;F+=J.minX;var C,q;if(n){C=L;q=L.firstChild}else{C=document.createElement("span");C.className="cufon cufon-canvas";C.alt=H;q=document.createElement("canvas");C.appendChild(q);if(D.printable){var ad=document.createElement("span");ad.className="cufon-alt";ad.appendChild(document.createTextNode(H));C.appendChild(ad)}}var am=C.style;var Q=q.style;var m=p.convert(J.height);var ak=Math.ceil(m);var V=ak/m;var P=V*Cufon.CSS.fontStretch(Z.get("fontStretch"));var S=h*P;var aa=Math.ceil(p.convert(S+Y-F));var t=Math.ceil(p.convert(J.height-K+W));q.width=aa;q.height=t;Q.width=aa+"px";Q.height=t+"px";K+=J.minY;Q.top=Math.round(p.convert(K-ah.ascent))+"px";Q.left=Math.round(p.convert(F))+"px";var A=Math.ceil(p.convert(S))+"px";if(a){am.width=A;am.height=p.convert(ah.height)+"px"}else{am.paddingLeft=A;am.paddingBottom=(p.convert(ah.height)-1)+"px"}var aj=q.getContext("2d"),M=m/J.height;aj.scale(M,M*V);aj.translate(-F,-K);aj.lineWidth=ah.face["underline-thickness"];aj.save();function s(i,g){aj.strokeStyle=g;aj.beginPath();aj.moveTo(0,i);aj.lineTo(h,i);aj.stroke()}var u=D.enableTextDecoration?Cufon.CSS.textDecoration(ai,Z):{};if(u.underline){s(-ah.face["underline-position"],u.underline)}if(u.overline){s(ah.ascent,u.overline)}function af(){aj.scale(P,1);for(var x=0,k=0,g=al.length;x<g;++x){var y=o[al[x]]||ah.missingGlyph;if(!y){continue}if(y.d){aj.beginPath();if(y.code){c(y.code,aj)}else{y.code=d("m"+y.d,aj)}aj.fill()}aj.translate(N[k++],0)}aj.restore()}if(I){for(var ag=I.length;ag--;){var O=I[ag];aj.save();aj.fillStyle=O.color;aj.translate.apply(aj,U[ag]);af()}}var z=D.textGradient;if(z){var G=z.stops,w=aj.createLinearGradient(0,J.minY,0,J.maxY);for(var ag=0,ab=G.length;ag<ab;++ag){w.addColorStop.apply(w,G[ag])}aj.fillStyle=w}else{aj.fillStyle=Z.get("color")}af();if(u["line-through"]){s(-ah.descent,u["line-through"])}return C}})());Cufon.registerEngine("vml",(function(){var e=document.namespaces;if(!e){return}e.add("cvml","urn:schemas-microsoft-com:vml");e=null;var b=document.createElement("cvml:shape");b.style.behavior="url(#default#VML)";if(!b.coordsize){return}b=null;var g=(document.documentMode||0)<8;document.write(('<style type="text/css">.cufon-vml-canvas{text-indent:0;}@media screen{cvml\\:shape,cvml\\:rect,cvml\\:fill,cvml\\:shadow{behavior:url(#default#VML);display:block;antialias:true;position:absolute;}.cufon-vml-canvas{position:absolute;text-align:left;}.cufon-vml{display:inline-block;position:relative;vertical-align:'+(g?"middle":"text-bottom")+";}.cufon-vml .cufon-alt{position:absolute;left:-10000in;font-size:1px;}a .cufon-vml{cursor:pointer}}@media print{.cufon-vml *{display:none;}.cufon-vml .cufon-alt{display:inline;}}</style>").replace(/;/g,"!important;"));function c(h,i){return a(h,/(?:em|ex|%)$|^[a-z-]+$/i.test(i)?"1em":i)}function a(k,l){if(/px$/i.test(l)){return parseFloat(l)}var j=k.style.left,i=k.runtimeStyle.left;k.runtimeStyle.left=k.currentStyle.left;k.style.left=l.replace("%","em");var h=k.style.pixelLeft;k.style.left=j;k.runtimeStyle.left=i;return h}var f={};function d(o){var p=o.id;if(!f[p]){var m=o.stops,n=document.createElement("cvml:fill"),h=[];n.type="gradient";n.angle=180;n.focus="0";n.method="sigma";n.color=m[0][1];for(var l=1,i=m.length-1;l<i;++l){h.push(m[l][0]*100+"% "+m[l][1])}n.colors=h.join(",");n.color2=m[i][1];f[p]=n}return f[p]}return function(aj,K,ad,G,O,ak,ab){var o=(K===null);if(o){K=O.alt}var M=aj.viewBox;var q=ad.computedFontSize||(ad.computedFontSize=new Cufon.CSS.Size(c(ak,ad.get("fontSize"))+"px",aj.baseSize));var aa=ad.computedLSpacing;if(aa==undefined){aa=ad.get("letterSpacing");ad.computedLSpacing=aa=(aa=="normal")?0:~~q.convertFrom(a(ak,aa))}var C,r;if(o){C=O;r=O.firstChild}else{C=document.createElement("span");C.className="cufon cufon-vml";C.alt=K;r=document.createElement("span");r.className="cufon-vml-canvas";C.appendChild(r);if(G.printable){var ag=document.createElement("span");ag.className="cufon-alt";ag.appendChild(document.createTextNode(K));C.appendChild(ag)}if(!ab){C.appendChild(document.createElement("cvml:shape"))}}var ap=C.style;var V=r.style;var m=q.convert(M.height),am=Math.ceil(m);var Z=am/m;var T=Z*Cufon.CSS.fontStretch(ad.get("fontStretch"));var Y=M.minX,X=M.minY;V.height=am;V.top=Math.round(q.convert(X-aj.ascent));V.left=Math.round(q.convert(Y));ap.height=q.convert(aj.height)+"px";var v=G.enableTextDecoration?Cufon.CSS.textDecoration(ak,ad):{};var J=ad.get("color");var ao=Cufon.CSS.textTransform(K,ad).split(""),B;var p=aj.glyphs,H,s,af;var h=0,P=[],W=0,x;var z,L=G.textShadow;for(var ai=0,ah=0,ae=ao.length;ai<ae;++ai){H=p[B=ao[ai]]||aj.missingGlyph;if(!H){continue}if(s){h-=af=s[B]||0;P[ah-1]-=af}h+=x=P[ah++]=~~(H.w||aj.w)+aa;s=H.k}if(x===undefined){return null}var A=-Y+h+(M.width-x);var an=q.convert(A*T),ac=Math.round(an);var S=A+","+M.height,n;var N="r"+S+"ns";var y=G.textGradient&&d(G.textGradient);for(ai=0,ah=0;ai<ae;++ai){H=p[ao[ai]]||aj.missingGlyph;if(!H){continue}if(o){z=r.childNodes[ah];while(z.firstChild){z.removeChild(z.firstChild)}}else{z=document.createElement("cvml:shape");r.appendChild(z)}z.stroked="f";z.coordsize=S;z.coordorigin=n=(Y-W)+","+X;z.path=(H.d?"m"+H.d+"xe":"")+"m"+n+N;z.fillcolor=J;if(y){z.appendChild(y.cloneNode(false))}var al=z.style;al.width=ac;al.height=am;if(L){var u=L[0],t=L[1];var F=Cufon.CSS.color(u.color),D;var R=document.createElement("cvml:shadow");R.on="t";R.color=F.color;R.offset=u.offX+","+u.offY;if(t){D=Cufon.CSS.color(t.color);R.type="double";R.color2=D.color;R.offset2=t.offX+","+t.offY}R.opacity=F.opacity||(D&&D.opacity)||1;z.appendChild(R)}W+=P[ah++]}var Q=z.nextSibling,w,E;if(G.forceHitArea){if(!Q){Q=document.createElement("cvml:rect");Q.stroked="f";Q.className="cufon-vml-cover";w=document.createElement("cvml:fill");w.opacity=0;Q.appendChild(w);r.appendChild(Q)}E=Q.style;E.width=ac;E.height=am}else{if(Q){r.removeChild(Q)}}ap.width=Math.max(Math.ceil(q.convert(h*T)),0);if(g){var U=ad.computedYAdjust;if(U===undefined){var I=ad.get("lineHeight");if(I=="normal"){I="1em"}else{if(!isNaN(I)){I+="em"}}ad.computedYAdjust=U=0.5*(a(ak,I)-parseFloat(ap.height))}if(U){ap.marginTop=Math.ceil(U)+"px";ap.marginBottom=U+"px"}}return C}})());

//]]>
</script>

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

/*
* jQuery Easing v1.1 - http://gsgd.co.uk/sandbox/jquery.easing.php
*
* Uses the built in easing capabilities added in jQuery 1.1
* to offer multiple easing options
*
* Copyright (c) 2007 George Smith
* Licensed under the MIT License:
*   http://www.opensource.org/licenses/mit-license.php
*/

jQuery.easing = {
easein: function(x, t, b, c, d) {
 return c*(t/=d)*t + b; // in
},
easeinout: function(x, t, b, c, d) {
 if (t < d/2) return 2*c*t*t/(d*d) + b;
 var ts = t - d/2;
 return -2*c*ts*ts/(d*d) + 2*c*ts/d + c/2 + b; 
},
easeout: function(x, t, b, c, d) {
 return -c*t*t/(d*d) + 2*c*t/d + b;
},
expoin: function(x, t, b, c, d) {
 var flip = 1;
 if (c < 0) {
  flip *= -1;
  c *= -1;
 }
 return flip * (Math.exp(Math.log(c)/d * t)) + b; 
},
expoout: function(x, t, b, c, d) {
 var flip = 1;
 if (c < 0) {
  flip *= -1;
  c *= -1;
 }
 return flip * (-Math.exp(-Math.log(c)/d * (t-d)) + c + 1) + b;
},
expoinout: function(x, t, b, c, d) {
 var flip = 1;
 if (c < 0) {
  flip *= -1;
  c *= -1;
 }
 if (t < d/2) return flip * (Math.exp(Math.log(c/2)/(d/2) * t)) + b;
 return flip * (-Math.exp(-2*Math.log(c/2)/d * (t-d)) + c + 1) + b;
},
bouncein: function(x, t, b, c, d) {
 return c - jQuery.easing['bounceout'](x, d-t, 0, c, d) + b;
},
bounceout: function(x, t, b, c, d) {
 if ((t/=d) < (1/2.75)) {
  return c*(7.5625*t*t) + b;
 } else if (t < (2/2.75)) {
  return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
 } else if (t < (2.5/2.75)) {
  return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
 } else {
  return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
 }
},
bounceinout: function(x, t, b, c, d) {
 if (t < d/2) return jQuery.easing['bouncein'] (x, t*2, 0, c, d) * .5 + b;
 return jQuery.easing['bounceout'] (x, t*2-d,0, c, d) * .5 + c*.5 + b;
},
elasin: function(x, t, b, c, d) {
 var s=1.70158;var p=0;var a=c;
 if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
 if (a < Math.abs(c)) { a=c; var s=p/4; }
 else var s = p/(2*Math.PI) * Math.asin (c/a);
 return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
},
elasout: function(x, t, b, c, d) {
 var s=1.70158;var p=0;var a=c;
 if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
 if (a < Math.abs(c)) { a=c; var s=p/4; }
 else var s = p/(2*Math.PI) * Math.asin (c/a);
 return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
},
elasinout: function(x, t, b, c, d) {
 var s=1.70158;var p=0;var a=c;
 if (t==0) return b;  if ((t/=d/2)==2) return b+c;  if (!p) p=d*(.3*1.5);
 if (a < Math.abs(c)) { a=c; var s=p/4; }
 else var s = p/(2*Math.PI) * Math.asin (c/a);
 if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
 return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
},
backin: function(x, t, b, c, d) {
 var s=1.70158;
 return c*(t/=d)*t*((s+1)*t - s) + b;
},
backout: function(x, t, b, c, d) {
 var s=1.70158;
 return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
},
backinout: function(x, t, b, c, d) {
 var s=1.70158;
 if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
 return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
},
linear: function(x, t, b, c, d) {
 return c*t/d + b; //linear
}
};

//]]>
</script>

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

jQuery(document).ready(function() {
Cufon.replace('.blogname h2', { fontFamily: 'MankSans-Medium' });
Cufon.replace('.sidetitl,.blogname h1', { fontFamily: 'ChunkFive' });

});

//]]>
</script>


<style type='text/css'>
#slidearea{
height: 230px;
overflow: hidden;
position: relative;
width:680px;
background:#242424;
}
#gallerycover{
overflow: hidden;
margin:0px 0px;
}

.mygallery{
overflow: hidden;
position:relative;
}

.mytext img{
position:absolute;
left:10px;
top:10px;
padding:5px;
background:#515252;
border:1px solid #5e5e5e;
}

.mytext{
position:relative;
margin:0px 0px;
height:200px;
width:680px;
float:left;
display:inline;
line-height:20px;
color:#c4c4c4;
font-family: Tahoma,Georgia,century gothic,Verdana, sans-serif;
}

.mytext ul li{
height:200px;

}

.mytext a:link, .mytext  a:visited {
color:#fff;
}

.mytext h2 {
font: 18px Georgia,century gothic,Verdana, sans-serif;
margin:15px 0px 5px 310px;
font-weight:normal;
width:350px;
height:24px;
overflow:hidden;
}

.mytext p {
width:350px;
margin:0px 0px 5px 310px;
color:#6f6f6f;
}

.mytext h2 a:link, .mytext h2 a:visited {
color:#fff;
}
.slnav{
padding:3px 0px;
background:#000;

}
.prev{
float:left;
width:24px;
height:24px;
z-index:200;
margin-left:5px;
background:url(http://1.bp.blogspot.com/_4HKUHirY_2U/S2FVY1DGRHI/AAAAAAAAAtc/BZkCromQU-I/prev.png);
}

.next{
float:right;
width:24px;
height:24px;
z-index:200;
background:url(http://4.bp.blogspot.com/_4HKUHirY_2U/S2FVWGJQahI/AAAAAAAAAtU/l-hiX3uOqBo/nxt.png);
display:block;
}

</style>

Note : Host prev.png and nxt.png images yourself.

4.Now go to Layout-->Page Element and click on "Add a gadget".

5.Select "html/java script" and add the code given below and click save.

<script type="text/javascript">
var $jx = jQuery.noConflict();
$jx(function() {
$jx(".mygallery").jCarouselLite({
btnNext: ".next",
btnPrev: ".prev",
      visible: 1,
      easing: "backout",
  speed: 1000
});

});
</script>

<div id="slidearea">

<div id="gallerycover">
<div class="mygallery">
<ul>

<li>
<div class="mytext">
<h2><a href="URL-of-Post-1" title="#">Title-of-Post-1</a></h2>
<p>Slide 1 Description [...]</p>

<img src="Slide-1-Image-Address" alt=""  />
</div>
</li>


<li>
<div class="mytext">
<h2><a href="URL-of-Post-2" title="#">Title-of-Post-2</a></h2>
<p>Slide 2 Description [...]</p>

<img src="Slide-2-Image-Address" alt=""  />
</div>
</li>


<li>
<div class="mytext">
<h2><a href="URL-of-Post-3" title="#">Title-of-Post-3</a></h2>
<p>Slide 3 Description [...]</p>

<img src="Slide-3-Image-Address" alt=""  />
</div>
</li>


<li>
<div class="mytext">
<h2><a href="URL-of-Post-4" title="#">Title-of-Post-4</a></h2>
<p>Slide 4 Description [...]</p>

<img src="Slide-4-Image-Address" alt=""  />
</div>
</li>


<li>
<div class="mytext">
<h2><a href="URL-of-Post-5" title="#">Title-of-Post-5</a></h2>
<p>Slide 5 Description [...]</p>

<img src="Slide-5-Image-Address" alt=""  />
</div>
</li>

</ul>

<div class="clear"></div>

</div>
</div>

<div class="slnav">
<a href="#" class="prev"></a>
<a href="#" class="next"></a>
<div class="clear"></div>
</div>

</div>

Note : Replace URL-of-Post-X , Title-of-Post-X , Slide X Description [...] , Slide-X-Image-Address with your content.

Use width=270px and height=170px images for your slides.

And also you can add many more slide to this widget.

For example look at the code below:

<script type="text/javascript">
var $jx = jQuery.noConflict();
$jx(function() {
$jx(".mygallery").jCarouselLite({
btnNext: ".next",
btnPrev: ".prev",
       visible: 1,
       easing: "backout",
   speed: 1000
});

});
</script>

<div id="slidearea">

<div id="gallerycover">
<div class="mygallery">
<ul>

<li>
<div class="mytext">
<h2><a href="#" title="#">Avatar (2009 film)</a></h2>
<p>James Cameron's epic motion picture, Avatar - in cinemas December 18th worldwide. In the epic action adventure AVATAR, James Cameron, the director of "Titanic," takes us to a spectacular new world beyond our imagination. On the distant moon Pandora, a reluctant hero embarks on a journey of redemption and discovery as he leads a heroic battle to save a civilization. [...]</p>

<img src="http://1.bp.blogspot.com/_4HKUHirY_2U/S2FWzuNvBBI/AAAAAAAAAts/ijNwX4Ei-O4/avatar.jpg" alt="" />
</div>
</li>


<li>
<div class="mytext">
<h2><a href="#" title="#">2012 Movie</a></h2>
<p>The film briefly references Mayanism, the Mesoamerican Long Count calendar, and the 2012 phenomenon in its portrayal of cataclysmic events unfolding in the year 2012. Because of solar flare bombardment the Earth's core begins heating up at an unprecedented rate, eventually causing crustal displacement. This results in an onslaught of Doomsday event scenarios plunging [...]</p>

<img src="http://3.bp.blogspot.com/_4HKUHirY_2U/S2FYyPWHTJI/AAAAAAAAAt0/kNXA5auZ65k/2012+movie.jpg" alt="" />
</div>
</li>


<li>
<div class="mytext">
<h2><a href="#" title="#">I am Legend Movie</a></h2>
<p>The film briefly references Mayanism, the Mesoamerican Long Count calendar, and the 2012 phenomenon in its portrayal of cataclysmic events unfolding in the year 2012. Because of solar flare bombardment the Earth's core begins heating up at an unprecedented rate, eventually causing crustal displacement. This results in an onslaught of Doomsday event scenarios plungingThe novel's main character is Robert Neville, apparently the sole survivor of a pandemic the symptoms of which resemble vampirism. The author details Neville's [...]</p>

<img src="http://1.bp.blogspot.com/_4HKUHirY_2U/S2FdlLmVmsI/AAAAAAAAAt8/ERw6PcL-tsE/iamlegend1.jpg" alt="" />
</div>
</li>


<li>
<div class="mytext">
<h2><a href="#" title="#">Transformer Movie</a></h2>
<p>Transformers is a 2007 live-action-thriller film adaptation of the Transformers franchise, directed by Michael Bay and written by John Rogers, Roberto Orci and Alex Kurtzman. It stars Shia LaBeouf as Sam Witwicky, a teenager involved in a war between the heroic Autobots and the evil Decepticons, two factions of alien robots who can disguise themselves by transforming into everyday machinery. The Decepticons desire control of the All Spark, the object that created their robotic race, with the intention of using it to build [...]</p>

<img src="http://4.bp.blogspot.com/_4HKUHirY_2U/S2Fdo2TdCpI/AAAAAAAAAuE/txvdowislx8/transformer11.jpg" alt="" />
</div>
</li>


<li>
<div class="mytext">
<h2><a href="#" title="#">Max Payne Game</a></h2>
<p>Max Payne is a BAFTA award winning[1] third-person shooter video game developed by Finnish Remedy Entertainment, produced by 3D Realms and published by Gathering of Developers in July 2001 for Windows. Ports later in the year for the Xbox, PlayStation 2 and the GameBoy Advance were published by Rockstar Games. A Macintosh port was published in July 2002 by MacSoft in[...]</p>

<img src="http://4.bp.blogspot.com/_4HKUHirY_2U/S2FfKKAoNMI/AAAAAAAAAuM/bzIRya9LZBI/Max_Payne1.jpg" alt="" />
</div>
</li>

</ul>

<div class="clear"></div>

</div>
</div>

<div class="slnav">
<a href="#" class="prev"></a>
<a href="#" class="next"></a>
<div class="clear"></div>
</div>

</div>

Now you are done.

Look at the Demo of This Widget.

JQuery Multitab Widget For Blogger/Websites

2010-01-27T19:07:00.000-08:00

This is another good multi tab view widget for your blog/website.Follow the steps given below to add it to your site.

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 .

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'></script>
<script type='text/javascript' src='http://pwam.googlecode.com/files/jquery-ui-personalized-1.5.2.packed.js'></script>

<style type="text/css">
.widgets545 {
  width:295px;
  overflow:hidden;
  margin-top:5px;
  margin-bottom:5px;
  padding:0px 0px 0px 0px;
  background:#e8dbcc;

}

.widgets545 a {
  color: #222;
  text-decoration: none;
  }

.widgets545 a:hover {
  color: #009;
  text-decoration: underline;
  }

ul.tabnav{

  padding:0px 0px 0px 0px;
  height:26px;
  margin:0px 0px;
  background:#FFFFFF;

}


.tabnav li {
  display: inline;
  list-style: none;
  float:left;
  text-align:center;
  margin-right:8px;

  }


.tabnav li a {
  text-decoration: none;
  text-transform: uppercase;
  font-weight: normal;
  padding: 5px 8px 6px 8px;
  width:70px;
  font-weight:normal;
  font: 12px tahoma, helvetica,arial,sans-serif;
  color: #E8DBCC;
  text-decoration: none;
  display:block;
  background:#5F381D url(http://1.bp.blogspot.com/_4HKUHirY_2U/S2D_9Ok6mZI/AAAAAAAAAtM/n_ikKRhyfgI/button.png) repeat-x;
  border-top:1px solid #7F1E00;
  border-left:1px solid #7F1E00;
  border-right:1px solid #7F1E00;
  }

.tabnav li a:hover, .tabnav li a:active, .tabnav li.ui-tabs-selected a {
  text-decoration:none;
  background: #E8DBCC;
  color: #AE8269;
  border-top:1px solid #DFD2C3;
  border-left:1px solid #DFD2C3;
  border-right:1px solid #DFD2C3;
  }


.tabdiv {

  padding: 5px 5px 5px 5px;
  font-family:Tahoma,Century gothic, Arial, sans-serif;
  border-bottom:1px solid #DFD2C3;
  border-left:1px solid #DFD2C3;
  border-right:1px solid #DFD2C3;
  }
.tabdiv a:link,.tabdiv  a:visited {

          color:#333;

  }
.tabdiv a:hover{

  color: #2676A1;
  }
.tabdiv ul{

  list-style-type:none;
  margin:0px 0px;
  padding:0px 0px;

          }

.tabdiv ul li{

  height:100%;
  line-height:28px;
  padding: 0px 0px 0px 0px;
  color:#333;

}

.tabdiv li a:link,.tabdiv li a:visited{
  background:#f9f5f1;
  display:block;
  margin-left:5px;
  overflow:hidden;
  line-height:24px;
  padding:2px 5px ;
  margin:2px 0px;
  color:#6F6B53;
  font-size:13px;
}

.tabdiv li a:hover {
  background:#fff;
  color: #3F200C;
  text-decoration:none;
          }
.ui-tabs-hide {
  display: none;
          }
</style>

4.Now go to Layout-->Page Element and click on "Add a gadget".

5.Select "html/java script" and add the code given below and click save.

<script type="text/javascript">
var $jx = jQuery.noConflict();
$jx(document).ready(function() {
$jx('#tabzine> ul').tabs({ fx: { height: 'toggle', opacity: 'toggle' } });

});
</script>
<div id="tabzine" class="widgets545">
<ul class="tabnav">
<li><a href="#tab11"> Recent </a></li>
<li><a href="#tab22"> Popular </a></li>
<li><a href=" #tab33"> Comments  </a></li>
</ul>

<div id="tab11" class="tabdiv">

Tab 1 Content

</div>


<div id="tab22" class="tabdiv">

Tab 2 Content

</div>


<div id="tab33" class="tabdiv">

Tab 3 Content

</div>

</div>

Note : Replace Tab 1 Content,Tab 2 Content,Tab 3 Content with your contents.

Featured Images Slideshow+Slider to Blogger/Websites

2010-01-16T01:59:00.001-08:00

This article explains how to add very beautiful featured images slideshow+slider to your blogger blog or any other website.This is easy to setup and no need to host any external javascript files.You can see a demo for this widget here.

Now if you want to add this beautiful widget to your site follow the steps below:

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

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

3.Now copy and paste below code just before the </head> tag.

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

//** Featured Content Slider script- (c) Dynamic Drive DHTML code library: http://www.dynamicdrive.com.
//** May 2nd, 08'- Script rewritten and updated to 2.0.
//** June 12th, 08'- Script updated to v 2.3, which adds the following features:
 //1) Changed behavior of script to actually collapse the previous content when the active one is shown, instead of just tucking it underneath the later.
 //2) Added setting to reveal a content either via "click" or "mouseover" of pagination links (default is former).
 //3) Added public function for jumping to a particular slide within a Featured Content instance using an arbitrary link, for example.

//** July 11th, 08'- Script updated to v 2.4:
 //1) Added ability to select a particular slide when the page first loads using a URL parameter (ie: mypage.htm?myslider=4 to select 4th slide in "myslider")
 //2) Fixed bug where the first slide disappears when the mouse clicks or mouses over it when page first loads.

var featuredcontentslider={

//3 variables below you can customize if desired:
ajaxloadingmsg: '<div style="margin: 20px 0 0 20px"><img src="loading.gif" /> Fetching slider Contents. Please wait...</div>',
bustajaxcache: true, //bust caching of external ajax page after 1st request?
enablepersist: true, //persist to last content viewed when returning to page?

settingcaches: {}, //object to cache "setting" object of each script instance

jumpTo:function(fcsid, pagenumber){ //public function to go to a slide manually.
this.turnpage(this.settingcaches[fcsid], pagenumber)
},

ajaxconnect:function(setting){
var page_request = false
if (window.ActiveXObject){ //Test for support for ActiveXObject in IE first (as XMLHttpRequest in IE7 is broken)
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e){
 try{
 page_request = new ActiveXObject("Microsoft.XMLHTTP")
 }
 catch (e){}
}
}
else if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else
return false
var pageurl=setting.contentsource[1]
page_request.onreadystatechange=function(){
featuredcontentslider.ajaxpopulate(page_request, setting)
}
document.getElementById(setting.id).innerHTML=this.ajaxloadingmsg
var bustcache=(!this.bustajaxcache)? "" : (pageurl.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
page_request.open('GET', pageurl+bustcache, true)
page_request.send(null)
},

ajaxpopulate:function(page_request, setting){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)){
document.getElementById(setting.id).innerHTML=page_request.responseText
this.buildpaginate(setting)
}
},

buildcontentdivs:function(setting){
var alldivs=document.getElementById(setting.id).getElementsByTagName("div")
for (var i=0; i<alldivs.length; i++){
if (this.css(alldivs[i], "contentdiv", "check")){ //check for DIVs with class "contentdiv"
 setting.contentdivs.push(alldivs[i])
  alldivs[i].style.display="none" //collapse all content DIVs to begin with
}
}
},

buildpaginate:function(setting){
this.buildcontentdivs(setting)
var sliderdiv=document.getElementById(setting.id)
var pdiv=document.getElementById("paginate-"+setting.id)
var phtml=""
var toc=setting.toc
var nextprev=setting.nextprev
if (typeof toc=="string" && toc!="markup" || typeof toc=="object"){
for (var i=1; i<=setting.contentdivs.length; i++){
 phtml+='<a href="#'+i+'" class="toc">'+(typeof toc=="string"? toc.replace(/#increment/, i) : toc[i-1])+'</a> '
}
phtml=(nextprev[0]!=''? '<a href="#prev" class="prev">'+nextprev[0]+'</a> ' : '') + phtml + (nextprev[1]!=''? '<a href="#next" class="next">'+nextprev[1]+'</a>' : '')
pdiv.innerHTML=phtml
}
var pdivlinks=pdiv.getElementsByTagName("a")
var toclinkscount=0 //var to keep track of actual # of toc links
for (var i=0; i<pdivlinks.length; i++){
if (this.css(pdivlinks[i], "toc", "check")){
 if (toclinkscount>setting.contentdivs.length-1){ //if this toc link is out of range (user defined more toc links then there are contents)
  pdivlinks[i].style.display="none" //hide this toc link
  continue
 }
 pdivlinks[i].setAttribute("rel", ++toclinkscount) //store page number inside toc link
 pdivlinks[i][setting.revealtype]=function(){
  featuredcontentslider.turnpage(setting, this.getAttribute("rel"))
  return false
 }
 setting.toclinks.push(pdivlinks[i])
}
else if (this.css(pdivlinks[i], "prev", "check") || this.css(pdivlinks[i], "next", "check")){ //check for links with class "prev" or "next"
 pdivlinks[i].onclick=function(){
  featuredcontentslider.turnpage(setting, this.className)
  return false
 }
}
}
this.turnpage(setting, setting.currentpage, true)
if (setting.autorotate[0]){ //if auto rotate enabled
pdiv[setting.revealtype]=function(){
 featuredcontentslider.cleartimer(setting, window["fcsautorun"+setting.id])
}
sliderdiv["onclick"]=function(){ //stop content slider when slides themselves are clicked on
 featuredcontentslider.cleartimer(setting, window["fcsautorun"+setting.id])
}
setting.autorotate[1]=setting.autorotate[1]+(1/setting.enablefade[1]*50) //add time to run fade animation (roughly) to delay between rotation
this.autorotate(setting)
}
},

urlparamselect:function(fcsid){
var result=window.location.search.match(new RegExp(fcsid+"=(\\d+)", "i")) //check for "?featuredcontentsliderid=2" in URL
return (result==null)? null : parseInt(RegExp.$1) //returns null or index, where index (int) is the selected tab's index
},

turnpage:function(setting, thepage, autocall){
var currentpage=setting.currentpage //current page # before change
var totalpages=setting.contentdivs.length
var turntopage=(/prev/i.test(thepage))? currentpage-1 : (/next/i.test(thepage))? currentpage+1 : parseInt(thepage)
turntopage=(turntopage<1)? totalpages : (turntopage>totalpages)? 1 : turntopage //test for out of bound and adjust
if (turntopage==setting.currentpage && typeof autocall=="undefined") //if a pagination link is clicked on repeatedly
return
setting.currentpage=turntopage
setting.contentdivs[turntopage-1].style.zIndex=++setting.topzindex
this.cleartimer(setting, window["fcsfade"+setting.id])
setting.cacheprevpage=setting.prevpage
if (setting.enablefade[0]==true){
setting.curopacity=0
this.fadeup(setting)
}
if (setting.enablefade[0]==false){ //if fade is disabled, fire onChange event immediately (verus after fade is complete)
setting.contentdivs[setting.prevpage-1].style.display="none" //collapse last content div shown (it was set to "block")
setting.onChange(setting.prevpage, setting.currentpage)
}
setting.contentdivs[turntopage-1].style.visibility="visible"
setting.contentdivs[turntopage-1].style.display="block"
if (setting.prevpage<=setting.toclinks.length) //make sure pagination link exists (may not if manually defined via "markup", and user omitted)
this.css(setting.toclinks[setting.prevpage-1], "selected", "remove")
if (turntopage<=setting.toclinks.length) //make sure pagination link exists (may not if manually defined via "markup", and user omitted)
this.css(setting.toclinks[turntopage-1], "selected", "add")
setting.prevpage=turntopage
if (this.enablepersist)
this.setCookie("fcspersist"+setting.id, turntopage)
},

setopacity:function(setting, value){ //Sets the opacity of targetobject based on the passed in value setting (0 to 1 and in between)
var targetobject=setting.contentdivs[setting.currentpage-1]
if (targetobject.filters && targetobject.filters[0]){ //IE syntax
if (typeof targetobject.filters[0].opacity=="number") //IE6
 targetobject.filters[0].opacity=value*100
else //IE 5.5
 targetobject.style.filter="alpha(opacity="+value*100+")"
}
else if (typeof targetobject.style.MozOpacity!="undefined") //Old Mozilla syntax
targetobject.style.MozOpacity=value
else if (typeof targetobject.style.opacity!="undefined") //Standard opacity syntax
targetobject.style.opacity=value
setting.curopacity=value
},

fadeup:function(setting){
if (setting.curopacity<1){
this.setopacity(setting, setting.curopacity+setting.enablefade[1])
window["fcsfade"+setting.id]=setTimeout(function(){featuredcontentslider.fadeup(setting)}, 50)
}
else{ //when fade is complete
if (setting.cacheprevpage!=setting.currentpage) //if previous content isn't the same as the current shown div (happens the first time the page loads/ script is run)
 setting.contentdivs[setting.cacheprevpage-1].style.display="none" //collapse last content div shown (it was set to "block")
setting.onChange(setting.cacheprevpage, setting.currentpage)
}
},

cleartimer:function(setting, timervar){
if (typeof timervar!="undefined"){
clearTimeout(timervar)
clearInterval(timervar)
if (setting.cacheprevpage!=setting.currentpage){ //if previous content isn't the same as the current shown div
 setting.contentdivs[setting.cacheprevpage-1].style.display="none"
}
}
},

css:function(el, targetclass, action){
var needle=new RegExp("(^|\\s+)"+targetclass+"($|\\s+)", "ig")
if (action=="check")
return needle.test(el.className)
else if (action=="remove")
el.className=el.className.replace(needle, "")
else if (action=="add")
el.className+=" "+targetclass
},

autorotate:function(setting){
window["fcsautorun"+setting.id]=setInterval(function(){featuredcontentslider.turnpage(setting, "next")}, setting.autorotate[1])
},

getCookie:function(Name){
var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
if (document.cookie.match(re)) //if cookie found
return document.cookie.match(re)[0].split("=")[1] //return its value
return null
},

setCookie:function(name, value){
document.cookie = name+"="+value

},


init:function(setting){
var persistedpage=this.getCookie("fcspersist"+setting.id) || 1
var urlselectedpage=this.urlparamselect(setting.id) //returns null or index from: mypage.htm?featuredcontentsliderid=index
this.settingcaches[setting.id]=setting //cache "setting" object
setting.contentdivs=[]
setting.toclinks=[]
setting.topzindex=0
setting.currentpage=urlselectedpage || ((this.enablepersist)? persistedpage : 1)
setting.prevpage=setting.currentpage
setting.revealtype="on"+(setting.revealtype || "click")
setting.curopacity=0
setting.onChange=setting.onChange || function(){}
if (setting.contentsource[0]=="inline")
this.buildpaginate(setting)
if (setting.contentsource[0]=="ajax")
this.ajaxconnect(setting)
}

}

//]]>
</script>

<style>
#slider4{
border: 2px solid #181818;
background: #ffffff;
margin-left: 9px;
}
#paginate-slider4{
border-color: #181818;
margin-left: 9px;
margin-top: 4px;
}
#paginate-slider4 a img{
width: 80px;
height: 60px;
border: 2px solid #181818;
margin-top: 5px;
}
#paginate-slider4 a img:hover, #paginate-slider4 a.selected img{
border: 2px solid #ffc04e;
}
.sliderwrapper{
position: relative; /*leave as is*/
overflow: hidden; /*leave as is*/
border: 10px solid navy;
width: 500px; /*width of featured content slider*/
height: 325px;
}
.sliderwrapper .contentdiv{
visibility: hidden; /*leave as is*/
position: absolute; /*leave as is*/
left: 0;  /*leave as is*/
top: 0;  /*leave as is*/
padding: 5px;
background: white;
width: 500px; /*width of content DIVs within slider. Total width should equal slider&#39;s inner width */
height: 100%;
filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}
.pagination{
width: 500px; /*Width of pagination DIV. Total width should equal slider&#39;s outer width */
text-align: right;
background-color: #ffffff;
padding: 0px 5px;
}
.pagination a{
padding: 0 5px;
text-decoration: none;
color: #181818;
background: #ffffff;
}
.pagination a:hover, .pagination a.selected{
color: #181818;
background-color: #ffffff;
}
</style>

Note : You can change width,height,... as you like.

4.Now save your template.

5.Go to Layout-->Page Elements and click on "Add a gadget".

6.Select "html/java script" and add the code given below and click save.

<div style="float:left;">

<div id="slider4" class="sliderwrapper">

<div style="background: url('IMAGE-1-LINK') center left no-repeat" class="contentdiv">
</div>

<div style="background: url('IMAGE-2-LINK') center left no-repeat" class="contentdiv">
</div>

<div style="background: url('IMAGE-3-LINK') center left no-repeat" class="contentdiv">
</div>

<div style="background: url('IMAGE-4-LINK') center left no-repeat" class="contentdiv">
</div>

<div style="background: url('IMAGE-5-LINK') center left no-repeat" class="contentdiv">
</div>

</div>

<div id="paginate-slider4">

<a href="#" class="toc"><img alt="IMAGE-1" src="IMAGE-1-THUMBNAIL-LINK"/></a>

<a href="#" class="toc"><img alt="IMAGE-2" src="IMAGE-2-THUMBNAIL-LINK"/></a>

<a href="#" class="toc"><img alt="IMAGE-3" src="IMAGE-3-THUMBNAIL-LINK"/></a>

<a href="#" class="toc"><img alt="IMAGE-4" src="IMAGE-4-THUMBNAIL-LINK"/></a>

<a href="#" class="toc"><img alt="IMAGE-5" src="IMAGE-5-THUMBNAIL-LINK"/></a>

</div>

<script type="text/javascript">
featuredcontentslider.init({
id: "slider4", //id of main slider DIV
contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
toc: "markup", //Valid values: "#increment", "markup", ["label1", "label2", etc]
nextprev: ["", "Next"], //labels for "prev" and "next" links. Set to "" to hide.
revealtype: "mouseover", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
enablefade: [true, 0.1], //[true/false, fadedegree]
autorotate: [true, 5000], //[true/false, pausetime]
onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
}
})
</script>

</div>

Note : Replace IMAGE-X-LINKs and IMAGE-X-THUMBNAIL-LINKs with your image links.

Now you are done.Look at the,

DEMO of Featured Images Slideshow+Slider

Attractive CSS Horizontal Menu For Blogger/Websites

2010-01-08T02:42:00.000-08:00

This is a another nice css horizontal menu for your blogspot blog or website.To add it to your site 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'>
#nav {
width:100%;
margin-left:-40px;
background: url(http://4.bp.blogspot.com/_4HKUHirY_2U/S0b_iTEmRGI/AAAAAAAAAlc/zRdPcwzXDo4/mainbg.jpg) repeat-x;
}

#nav li {
float: left;
display: block;
}

#nav li a {
float: left;
display: block;
padding: 12px 18px 12px 18px;
text-transform: uppercase;
text-decoration:none;
background: url(http://3.bp.blogspot.com/_4HKUHirY_2U/S0cJCnJveiI/AAAAAAAAAl8/7kmtn2X1s2Q/navi-bg.jpg) no-repeat top right;
color:#ffffff;
}

#nav li a:hover {
background: url(http://3.bp.blogspot.com/_4HKUHirY_2U/S0cJCnJveiI/AAAAAAAAAl8/7kmtn2X1s2Q/navi-bg.jpg) no-repeat right -40px;
color:#ffffff;
text-decoration:none;
}

ul#nav li.current_page_item a, ul#nav li.current-cat a {
color: #fff;
background: url(http://3.bp.blogspot.com/_4HKUHirY_2U/S0cJCnJveiI/AAAAAAAAAl8/7kmtn2X1s2Q/navi-bg.jpg) no-repeat right -80px;
}

#nav li ul {
display: none;
}
</style>

Note : Host mainbg.jpg and navi-bg.jpg images yourself.

4.Now save your template.

5.Go to Layout-->Page Elements and click on "Add a gadget".

6.Select "html/java script" and add the code given below and click save.

<ul id="nav">
    
<li class="current_page_item"><a href="#">Home</a></li>
            
<li><a href="#" title="#">HTML</a></li>

<li><a href="#" title="#">CSS</a></li>

<li><a href="#" title="#">PHP</a></li>

<li><a href="#" title="#">MySQL</a></li>

<li><a href="#" title="#">About</a></li>

<li><a href="#" title="#">Contact</a></li>

</ul>
    
<div class="clear"></div>

You are done.

Demo

Charm CSS Horizontal Menu For Blogger/Websites

2009-12-29T01:10:00.000-08:00

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

#menu {text-align:left;height:36px;background:url(http://3.bp.blogspot.com/_4HKUHirY_2U/SznEaEVrk3I/AAAAAAAAAkc/BNOaqEMWQjY/menu.gif) repeat-x top;padding:0px 10px 0px 10px;vertical-align: top;margin:0px 4px 0px 4px;}

#menu ul {height:36px; width:100%;overflow:hidden;}

#menu li {  font: 15px Arial, Helvetica, sans-serif; display: inline;  margin-right: 10px; padding:5px 0px 5px 0px; font-weight:bold; line-height:36px;height:36px;}

#menu li a {  color: #494949;  text-decoration: none;}

#menu li a:hover {color: #333;text-decoration: underline;}

</style>

Note : You can change height,width,... as you like.Host menu.gif yourself.

4.Now save your template.

5.Go to Layout-->Page Elements and click on "Add a gadget".

6.Select "html/java script" and add the code given below and click save.

<div id="menu">

<ul>
 
<li><a href="#" title="#">Home</a></li>

<li><a href="#" title="#">Blogging Tips</a></li>

<li><a href="#" title="#">HTML</a></li>

<li><a href="#" title="#">CSS</a></li>

<li><a href="#" title="#">JQuery</a></li>

<li><a href="#" title="#">About</a></li>

<li><a href="#" title="#">Support</a></li>

<li><a href="#" title="#">Contact</a></li>

</ul>

</div>

You are done.

Demo

How To Become Blogger Blogroll Nofollow

2009-12-27T18:23:00.000-08:00

This is very important if you consider about your site SEO.Adding the nofollow attribute to your blogroll, would nullify any link juice with Google.If you like to add Nofollow attribute to your blogspot blogroll simply follow the steps below:

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

2.Click on "Expand Widget Templates"

3.Scroll down to till you see your Blogroll widget code :

(Note : You may also can find it by searching <b:widget id='BlogList )

Your Blogroll widget code will look like this:

<b:widget id='BlogList1' locked='false' title='Blogroll' type='BlogList'>
<b:includable id='main'>
 <!-- only display title if it's non-empty -->
 <b:if cond='data:title != &quot;&quot;'>
   <div id='blog-list-title'>
     <h2 class='title'><data:title/></h2>
   </div>
 </b:if>

 <div class='widget-content'>
   <div class='blog-list-container' expr:id='data:widget.instanceId + &quot;_container&quot;'>
     <ul expr:id='data:widget.instanceId + &quot;_blogs&quot;'>
       <b:loop values='data:items' var='item'>
         <li expr:style='data:item.displayStyle'>
           <div class='blog-icon'>
             <b:if cond='data:showIcon == &quot;true&quot;'>
               <input expr:value='data:item.blogIconUrl' type='hidden'/>
             </b:if>
           </div>
           <div class='blog-content'>
             <div class='blog-title'>
               <a expr:href='data:item.blogUrl' target='_blank'>
                 <data:item.blogTitle/></a>
             </div>
             <div class='item-content'>
               <b:if cond='data:showItemThumbnail == &quot;true&quot;'>
                 <b:if cond='data:item.itemThumbnail'>
                   <div class='item-thumbnail'>
                     <a expr:href='data:item.blogUrl' target='_blank'>
                       <img alt='' border='0' expr:height='data:item.itemThumbnail.height' expr:src='data:item.itemThumbnail.url' expr:width='data:item.itemThumbnail.width'/>
                     </a>
                   </div>
                 </b:if>
               </b:if>
               <b:if cond='data:showItemTitle == &quot;true&quot;'>
                 <span class='item-title'>
                   <b:if cond='data:item.itemUrl != &quot;&quot;'>
                     <a expr:href='data:item.itemUrl' target='_blank'>
                       <data:item.itemTitle/></a>
                   <b:else/>
                     <data:item.itemTitle/>
                   </b:if>
                 </span>
               </b:if>
               <b:if cond='data:showItemSnippet == &quot;true&quot;'>
                 <b:if cond='data:showItemTitle == &quot;true&quot;'>
                   -
                 </b:if>
                 <span class='item-snippet'>
                   <data:item.itemSnippet/>
                 </span>
               </b:if>
               <b:if cond='data:showTimePeriodSinceLastUpdate == &quot;true&quot;'>
                 <div class='item-time'>
                   <data:item.timePeriodSinceLastUpdate/>
                 </div>
               </b:if>
             </div>
           </div>
           <div style='clear: both;'/>
         </li>
       </b:loop>
     </ul>

     <b:if cond='data:numItemsToShow != 0'>
       <b:if cond='data:totalItems &gt; data:numItemsToShow'>
         <div class='show-option'>
           <span expr:id='data:widget.instanceId + &quot;_show-n&quot;' style='display: none;'>
             <a href='javascript:void(0)' onclick='return false;'><data:showNText/></a>
           </span>
           <span expr:id='data:widget.instanceId + &quot;_show-all&quot;' style='margin-left: 5px;'>
             <a href='javascript:void(0)' onclick='return false;'><data:showAllText/></a>
           </span>
         </div>
       </b:if>
     </b:if>

     <b:include name='quickedit'/>
   </div>
 </div>
</b:includable>
</b:widget>

4.Now add rel='nofollow' to your blogroll widget code as the example below:

<b:widget id='BlogList1' locked='false' title='Blogroll' type='BlogList'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
  <div id='blog-list-title'>
    <h2 class='title'><data:title/></h2>
  </div>
</b:if>

<div class='widget-content'>
  <div class='blog-list-container' expr:id='data:widget.instanceId + &quot;_container&quot;'>
    <ul expr:id='data:widget.instanceId + &quot;_blogs&quot;'>
      <b:loop values='data:items' var='item'>
        <li expr:style='data:item.displayStyle'>
          <div class='blog-icon'>
            <b:if cond='data:showIcon == &quot;true&quot;'>
              <input expr:value='data:item.blogIconUrl' type='hidden'/>
            </b:if>
          </div>
          <div class='blog-content'>
            <div class='blog-title'>
              <a expr:href='data:item.blogUrl' rel='nofollow' target='_blank'>
                <data:item.blogTitle/></a>
            </div>
            <div class='item-content'>
              <b:if cond='data:showItemThumbnail == &quot;true&quot;'>
                <b:if cond='data:item.itemThumbnail'>
                  <div class='item-thumbnail'>
                    <a expr:href='data:item.blogUrl' rel='nofollow' target='_blank'>
                      <img alt='' border='0' expr:height='data:item.itemThumbnail.height' expr:src='data:item.itemThumbnail.url' expr:width='data:item.itemThumbnail.width'/>
                    </a>
                  </div>
                </b:if>
              </b:if>
              <b:if cond='data:showItemTitle == &quot;true&quot;'>
                <span class='item-title'>
                  <b:if cond='data:item.itemUrl != &quot;&quot;'>
                    <a expr:href='data:item.itemUrl' rel='nofollow' target='_blank'>
                      <data:item.itemTitle/></a>
                  <b:else/>
                    <data:item.itemTitle/>
                  </b:if>
                </span>
              </b:if>
              <b:if cond='data:showItemSnippet == &quot;true&quot;'>
                <b:if cond='data:showItemTitle == &quot;true&quot;'>
                  -
                </b:if>
                <span class='item-snippet'>
                  <data:item.itemSnippet/>
                </span>
              </b:if>
              <b:if cond='data:showTimePeriodSinceLastUpdate == &quot;true&quot;'>
                <div class='item-time'>
                  <data:item.timePeriodSinceLastUpdate/>
                </div>
              </b:if>
            </div>
          </div>
          <div style='clear: both;'/>
        </li>
      </b:loop>
    </ul>

    <b:if cond='data:numItemsToShow != 0'>
      <b:if cond='data:totalItems &gt; data:numItemsToShow'>
        <div class='show-option'>
          <span expr:id='data:widget.instanceId + &quot;_show-n&quot;' style='display: none;'>
            <a href='javascript:void(0)' onclick='return false;'><data:showNText/></a>
          </span>
          <span expr:id='data:widget.instanceId + &quot;_show-all&quot;' style='margin-left: 5px;'>
            <a href='javascript:void(0)' onclick='return false;'><data:showAllText/></a>
          </span>
        </div>
      </b:if>
    </b:if>

    <b:include name='quickedit'/>
  </div>
</div>
</b:includable>
</b:widget>

5.Now save your template and you are done.

How To Remove Post Count From Blog Archive

2009-12-27T01:46:00.000-08:00

When you add a blog archive to your blogger blog it shows the number of post for time periods.But if you don't like it, you can remove this post count feature from your blog archive easily.To do it,follow the steps below:

1.Log in to your dashboard--> layout- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see your blog archive code:

Note : Your blog archive code will look like this:

<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 + &quot;_ArchiveList&quot;'>
<b:if cond='data:style == &quot;HIERARCHY&quot;'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == &quot;FLAT&quot;'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == &quot;MENU&quot;'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div>
<b:include name='quickedit'/>
</div>
</b:includable>
<b:includable id='flat' var='data'>
<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>
</b:includable>
<b:includable id='menu' var='data'>
<select expr:id='data:widget.instanceId + &quot;_ArchiveMenu&quot;'>
<option value=''><data:title/></option>
<b:loop values='data:data' var='i'>
<option expr:value='data:i.url'><data:i.name/> (<data:i.post-count/>)</option>
</b:loop>
</select>
</b:includable>
<b:includable id='interval' var='intervalData'>
<b:loop values='data:intervalData' var='i'>
<ul>
<li expr:class='&quot;archivedate &quot; + data:i.expclass'>
<b:include data='i' name='toggle'/>
<a class='post-count-link' expr:href='data:i.url'><data:i.name/></a>
<span class='post-count' dir='ltr'>(<data:i.post-count/>)</span>
<b:if cond='data:i.data'>
<b:include data='i.data' name='interval'/>
</b:if>
<b:if cond='data:i.posts'>
<b:include data='i.posts' name='posts'/>
</b:if>
</li>
</ul>
</b:loop>
</b:includable>
<b:includable id='toggle' var='interval'>
<b:if cond='data:interval.toggleId'>
<b:if cond='data:interval.expclass == &quot;expanded&quot;'>
<a class='toggle' href='javascript:void(0)'>
<span class='zippy toggle-open'>&#9660;&#160;</span>
</a>
<b:else/>
<a class='toggle' href='javascript:void(0)'>
<span class='zippy'>
<b:if cond='data:blog.languageDirection == &quot;rtl&quot;'>
&#9668;&#160;
<b:else/>
&#9658;&#160;
</b:if>
</span>
</a>
</b:if>
</b:if>
</b:includable>
<b:includable id='posts' var='posts'>
<ul class='posts'>
<b:loop values='data:posts' var='i'>
<li><a expr:href='data:i.url'><data:i.title/></a></li>
</b:loop>
</ul>
</b:includable>
</b:widget>

4.Now Remove below code from your blog archive code:

(<data:i.post-count/>)

Note : You can find it 3 times.

5.Now save your template and you are done.Look at the picture below:

How To Add Comment Feeds For Individual Blogger Posts

2009-12-27T00:54:00.000-08:00

This is very useful for your visitors to Subscribe to comments for the special blog posts of your blogger blog.

1.Log in to your dashboard--> layout- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see this:

<data:post.body/>

4.Copy below code and paste it immediately after the line <data:post.body/>.

<p style='background-color:#ffffc6;'><a expr:href='"http://YOURBLOG.blogspot.com/feeds/" + data:post.id + "/comments/default?alt=rss"'>Comments Feed For This Post</a></p>

Note:Replace YOURBLOG with your blog url name.

5.Now save your template and you are done.

Awesome Multi-Tabbed Widget For Bloggers/Websites

2009-12-24T18:34:00.000-08:00

This is a very good multi-tabbed widget for your blogger blog or any other website.You can add or remove tabs to this widget easily as your choice.To add this tab view widget to your website simply 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.

<script type='text/javascript'>
//<![CDATA[
document.write('<style type="text/css">.tabber{display:none;}<\/style>');
function tabberObj(argsObj)
{
var arg;
this.div = null;
this.classMain = "tabber";
this.classMainLive = "tabberlive";
this.classTab = "tabbertab";
this.classTabDefault = "tabbertabdefault";
this.classNav = "tabbernav";
this.classTabHide = "tabbertabhide";
this.classNavActive = "tabberactive";
this.titleElements = ['h2','h3','h4','h5','h6'];
this.titleElementsStripHTML = true;
this.removeTitle = true;
this.addLinkId = false;
this.linkIdFormat = '<tabberid>nav<tabnumberone>';
for (arg in argsObj) { this[arg] = argsObj[arg]; }
this.REclassMain = new RegExp('\\b' + this.classMain + '\\b', 'gi');
this.REclassMainLive = new RegExp('\\b' + this.classMainLive + '\\b', 'gi');
this.REclassTab = new RegExp('\\b' + this.classTab + '\\b', 'gi');
this.REclassTabDefault = new RegExp('\\b' + this.classTabDefault + '\\b', 'gi');
this.REclassTabHide = new RegExp('\\b' + this.classTabHide + '\\b', 'gi');
this.tabs = new Array();
if (this.div) {
this.init(this.div);
this.div = null;
}
}

tabberObj.prototype.init = function(e)
{

var
childNodes,
i, i2,
t,
defaultTab=0,
DOM_ul,
DOM_li,
DOM_a,
aId,
headingElement;
if (!document.getElementsByTagName) { return false; }
if (e.id) {
this.id = e.id;
}
this.tabs.length = 0;
childNodes = e.childNodes;
for(i=0; i < childNodes.length; i++) {
if(childNodes[i].className &&
childNodes[i].className.match(this.REclassTab)) {
t = new Object();
t.div = childNodes[i];
this.tabs[this.tabs.length] = t;


if (childNodes[i].className.match(this.REclassTabDefault)) {
defaultTab = this.tabs.length-1;
}
}
}
DOM_ul = document.createElement("ul");
DOM_ul.className = this.classNav;

for (i=0; i < this.tabs.length; i++) {

t = this.tabs[i];


t.headingText = t.div.title;

if (this.removeTitle) { t.div.title = ''; }

if (!t.headingText) {


for (i2=0; i2<this.titleElements.length; i2++) {
headingElement = t.div.getElementsByTagName(this.titleElements[i2])[0];
if (headingElement) {
  t.headingText = headingElement.innerHTML;
  if (this.titleElementsStripHTML) {
    t.headingText.replace(/<br>/gi," ");
    t.headingText = t.headingText.replace(/<[^>]+>/g,"");
  }
  break;
}
}
}

if (!t.headingText) {

t.headingText = i + 1;
}


DOM_li = document.createElement("li");


t.li = DOM_li;


DOM_a = document.createElement("a");
DOM_a.appendChild(document.createTextNode(t.headingText));
DOM_a.href = "javascript:void(null);";
DOM_a.title = t.headingText;
DOM_a.onclick = this.navClick;


DOM_a.tabber = this;
DOM_a.tabberIndex = i;


if (this.addLinkId && this.linkIdFormat) {


aId = this.linkIdFormat;
aId = aId.replace(/<tabberid>/gi, this.id);
aId = aId.replace(/<tabnumberzero>/gi, i);
aId = aId.replace(/<tabnumberone>/gi, i+1);
aId = aId.replace(/<tabtitle>/gi, t.headingText.replace(/[^a-zA-Z0-9\-]/gi, ''));

DOM_a.id = aId;
}


DOM_li.appendChild(DOM_a);


DOM_ul.appendChild(DOM_li);
}


e.insertBefore(DOM_ul, e.firstChild);


e.className = e.className.replace(this.REclassMain, this.classMainLive);


this.tabShow(defaultTab);


if (typeof this.onLoad == 'function') {
this.onLoad({tabber:this});
}

return this;
};


tabberObj.prototype.navClick = function(event)
{


var
rVal,
a,
self,
tabberIndex,
onClickArgs;

a = this;
if (!a.tabber) { return false; }

self = a.tabber;
tabberIndex = a.tabberIndex;


a.blur();


if (typeof self.onClick == 'function') {

onClickArgs = {'tabber':self, 'index':tabberIndex, 'event':event};

/* IE uses a different way to access the event object */
if (!event) { onClickArgs.event = window.event; }

rVal = self.onClick(onClickArgs);
if (rVal === false) { return false; }
}

self.tabShow(tabberIndex);

return false;
};


tabberObj.prototype.tabHideAll = function()
{
var i;


for (i = 0; i < this.tabs.length; i++) {
this.tabHide(i);
}
};


tabberObj.prototype.tabHide = function(tabberIndex)
{
var div;

if (!this.tabs[tabberIndex]) { return false; }


div = this.tabs[tabberIndex].div;


if (!div.className.match(this.REclassTabHide)) {
div.className += ' ' + this.classTabHide;
}
this.navClearActive(tabberIndex);

return this;
};


tabberObj.prototype.tabShow = function(tabberIndex)
{


var div;

if (!this.tabs[tabberIndex]) { return false; }


this.tabHideAll();


div = this.tabs[tabberIndex].div;


div.className = div.className.replace(this.REclassTabHide, '');


this.navSetActive(tabberIndex);


if (typeof this.onTabDisplay == 'function') {
this.onTabDisplay({'tabber':this, 'index':tabberIndex});
}

return this;
};

tabberObj.prototype.navSetActive = function(tabberIndex)
{



this.tabs[tabberIndex].li.className = this.classNavActive;

return this;
};


tabberObj.prototype.navClearActive = function(tabberIndex)
{



this.tabs[tabberIndex].li.className = '';

return this;
};


function tabberAutomatic(tabberArgs)
{

var
tempObj,
divs,
i;

if (!tabberArgs) { tabberArgs = {}; }


tempObj = new tabberObj(tabberArgs);




divs = document.getElementsByTagName("div");
for (i=0; i < divs.length; i++) {


if (divs[i].className &&
divs[i].className.match(tempObj.REclassMain)) {


tabberArgs.div = divs[i];
divs[i].tabber = new tabberObj(tabberArgs);
}
}

return this;
}
function tabberAutomaticOnLoad(tabberArgs)
{

var oldOnLoad;

if (!tabberArgs) { tabberArgs = {}; }

oldOnLoad = window.onload;
if (typeof window.onload != 'function') {
window.onload = function() {
tabberAutomatic(tabberArgs);
};
} else {
window.onload = function() {
oldOnLoad();
tabberAutomatic(tabberArgs);
};
}
}


/* Run tabberAutomaticOnload() unless the "manualStartup" option was specified */

if (typeof tabberOptions == 'undefined') {

tabberAutomaticOnLoad();

} else {

if (!tabberOptions['manualStartup']) {
tabberAutomaticOnLoad(tabberOptions);
}

}

//]]>
</script>

<style type='text/css'>
.tabberlive{
margin:0;
padding:5px;
clear:both;
background:#f8f8f8;
border:1px solid #DDD;
}
.tabbernav {
margin:0;
padding: 3px 0;
border-bottom: 1px solid #ddd;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
font-weight:bold;
}
.tabbernav li {
list-style:none;
margin:0;
display:inline;
}
.tabbernav li a {
padding:3px 0.5em;
margin-right:1px;
border:1px solid #DDD;
border-bottom:none;
background:#6c6c6c;
text-decoration:none;
color:#ffffff;
}
.tabbernav li a:hover {
color:#6c6c6c;
background:#ffffff;
border:1px solid #DDD;
text-decoration:none;
}
.tabbernav li.tabberactive a,
.tabbernav li.tabberactive a:hover {
background:#ffffff;
color:#6c6c6c;
border-bottom: 1px solid #ffffff;
}
.tabberlive .tabbertab {
padding:5px;
border:1px solid #DDD;
border-top:0;
background:#ffffff;
}
.tabberlive .tabbertab h2,
.tabberlive .tabbertabhide {
display:none;
}
.tabbertab .widget-content ul{
list-style:none;
margin:0 0 10px 0;
padding:0;
}
.tabbertab .widget-content li {
border-bottom:1px solid #ddd;
margin:0 5px;
padding:2px 0 5px 0;
}
</style>

4.Now save your template.

5.Go to Layout-->Page Elements and click on "Add a gadget".

6.Select "html/java script" and add the code given below and click save.

<div class='tabber'>


<div class='tabbertab section' id='tab1'>
<h2>Recent</h2>

<!--ENTER-TAB1-CONTENT-HERE-->

</div>
<div class='clear'></div>

<div class='tabbertab section' id='tab2'>
<h2 class='title'>Popular Posts</h2>

<!--ENTER-TAB2-CONTENT-HERE-->

</div>
<div class='clear'></div>


<div class='tabbertab section' id='tab3'>
<h2>Comments</h2>

<!--ENTER-TAB3-CONTENT-HERE-->

</div>
<div class='clear'></div>


<div class='tabbertab section' id='tab4'>
<h2 class='title'>About me</h2>

<!--ENTER-TAB4-CONTENT-HERE-->

</div>
<div class='clear'></div>


<div class='tabbertab section' id='tab5'>
<h2 class='title'>Contact</h2>

<!--ENTER-TAB5-CONTENT-HERE-->

</div>
<div class='clear'></div>


<div class='tabbertab section' id='tab6'>
<h2 class='title'>Support</h2>

<!--ENTER-TAB6-CONTENT-HERE-->

</div>
<div class='clear'></div>

</div>

Note:Replace  with your contents.

If you want to add a another tab or remove a tab simply add or remove this:

<div class='tabbertab section' id='tabX'>
<h2 class='title'>YOUR-TAB-NAME</h2>

<!--ENTER-TABX-CONTENT-HERE-->

</div>
<div class='clear'></div>

You are done.

Demo

How To Redirect a Blogger Post to Another URL

2009-12-21T23:34:00.000-08:00

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 after the <head> tag.

<b:if cond='data:blog.url == "YOUR-BLOG-POST-URL"'>
<meta http-equiv="refresh" content="5; url=REDIRECT-URL" />
</b:if>

4.Replace YOUR-BLOG-POST-URL and REDIRECT-URL as your need.Look at the example below.

<b:if cond='data:blog.url == "http://www.bloggertipandtrick.net/2009/01/contact-me.html"'>
<meta http-equiv="refresh" content="5; url=http://www.bloggertipandtrick.net" />
</b:if>

If I add above code to my template,When someone go to my contact us page/post he will be redirected to my home page after 5 seconds.To redirect without waiting replace 5 with 0.

5.Now save your template and you are done.

How To Refresh Your Blog or Website Automatically

2009-12-14T23:37:00.000-08:00

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 after the <head> tag.

<meta HTTP-EQUIV='refresh' content='15;URL=http://yoursite.com'/>

Note: Replace http://yoursite.com with your blog or website URL.

15 is the time period between 2 page refresh.Change it as your choice.

4.Now save your template and you are done.

How To Add Automatically Link To This Post Widget To Blogger

2009-12-10T22:01:00.000-08:00

Do you like to add "Link To This Post Widget" under your blog post?This will help you to increase your site's backlinks for better SEO.So if you interested to add this useful widget to your blogspot blog follow the simple steps below.

1.Log in to your dashboard--> layout- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see this:

<data:post.body/>

4.Copy below code and paste it immediately after the line <data:post.body/> .

<div style='border: 0px solid #646464; padding: 2px 2px; margin:2px 2px;background-color:#ffffff;font-size:11px;'>
<p>If you like this please Link Back to this article...</p>
<textarea cols='60' id='bloglinking' name='bloglinking' onclick='this.focus();this.select()' onfocus='this.select()' onmouseover='this.focus()' readonly='readonly' rows='2'>&lt;a href=&quot;<data:post.url/>&quot;&gt;<data:post.title/>&lt;/a&gt;</textarea><br/>
</div><br/>

Note:You can change colors,font,... if you like.

5.Click on "Save Templates" and now you are done.

Excellent Content SlideShow+Slider to Blogger/WebSite

2009-12-05T17:37:00.000-08:00

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'>
#slideshow {list-style:none; color:#fff}
#slideshow span {display:none}
#wrapper {width:506px; margin:50px auto; display:none}
#wrapper * {margin:0; padding:0}
#fullsize {position:relative; width:500px; height:300px; padding:2px; border:1px solid #ccc; background:#000}
#information {position:absolute; bottom:0; width:500px; height:0; background:#000; color:#fff; overflow:hidden; z-index:200; opacity:.7; filter:alpha(opacity=70)}
#information h3 {padding:4px 8px 3px; font-size:14px}
#information p {padding:0 8px 8px}
#image {width:500px}
#image img {position:absolute; z-index:25; width:auto}
.imgnav {position:absolute; width:25%; height:306px; cursor:pointer; z-index:150}
#imgprev {left:0; background:url(http://4.bp.blogspot.com/_4HKUHirY_2U/SxIRDLhbFvI/AAAAAAAAAZM/4N4RrfeWPdA/left.gif) left center no-repeat}
#imgnext {right:0; background:url(http://4.bp.blogspot.com/_4HKUHirY_2U/SxIRJLGnjKI/AAAAAAAAAZc/Z99UWtjYHeo/right.gif) right center no-repeat}
#imglink {position:absolute; height:306px; width:100%; z-index:100; opacity:.4; filter:alpha(opacity=40)}
.linkhover {background:url(http://2.bp.blogspot.com/_4HKUHirY_2U/SxIRGajwsfI/AAAAAAAAAZU/9e3kt7Z5Bjo/link.gif) center center no-repeat}
#thumbnails {margin-top:15px}
#slideleft {float:left; width:20px; height:81px; background:url(http://2.bp.blogspot.com/_4HKUHirY_2U/SxIRMN8VUeI/AAAAAAAAAZk/BTNwDZsGQhw/scroll-left.gif) center center no-repeat; background-color:#222}
#slideleft:hover {background-color:#333}
#slideright {float:right; width:20px; height:81px; background:#222 url(http://2.bp.blogspot.com/_4HKUHirY_2U/SxIRPJktr1I/AAAAAAAAAZs/Z3Qj8DTDrMw/scroll-right.gif) center center no-repeat}
#slideright:hover {background-color:#333}
#slidearea {float:left; position:relative; width:456px; margin-left:5px; height:81px; overflow:hidden}
#slider {position:absolute; left:0; height:81px}
#slider img {cursor:pointer; border:1px solid #666; padding:2px}
</style>

4.Now again Scroll down to where you see </body> tag .

5.Copy below code and paste it just before the </body> tag.

<script src='compressed.js' type='text/javascript'/>

<script type='text/javascript'>
$(&#39;slideshow&#39;).style.display=&#39;none&#39;;
$(&#39;wrapper&#39;).style.display=&#39;block&#39;;
var slideshow=new TINY.slideshow(&quot;slideshow&quot;);
window.onload=function(){
        slideshow.auto=true;
        slideshow.speed=5;
        slideshow.link=&quot;linkhover&quot;;
        slideshow.info=&quot;information&quot;;
        slideshow.thumbs=&quot;slider&quot;;
        slideshow.left=&quot;slideleft&quot;;
        slideshow.right=&quot;slideright&quot;;
        slideshow.scrollSpeed=4;
        slideshow.spacing=5;
        slideshow.active=&quot;#fff&quot;;
        slideshow.init(&quot;slideshow&quot;,&quot;image&quot;,&quot;imgprev&quot;,&quot;imgnext&quot;,&quot;imglink&quot;);
}
</script>

Important !!! : Download compressed.js and 5 images as a zip file, from here and host compressed.js and images yourself.

6.Now save your template.

7.Go to Layout-->Page Elements and click on "Add a gadget".

8.Select "html/java script" and add the code given below and click save.

<ul id="slideshow">


<li>
<h3>Enter Title 1 Here</h3>

<span>http://2.bp.blogspot.com/_4HKUHirY_2U/SxIRTF4hqFI/AAAAAAAAAZ0/a0rDe2UC838/slideshow+1+big.jpg</span>

<p>Enter Description 1 Here.</p>
<a href="#"><img src="http://1.bp.blogspot.com/_4HKUHirY_2U/SxIRWePfVYI/AAAAAAAAAZ8/MSmCLCmWA8k/slideshow+1+small.jpg" alt="Bionic" /></a>
</li>


<li>
<h3>Enter Title 2 Here</h3>

<span>http://3.bp.blogspot.com/_4HKUHirY_2U/SxIRePsmefI/AAAAAAAAAaE/1bEo7Jhje7Y/slideshow+2+big.jpg</span>

<p>Enter Description 2 Here.</p>
<img src="http://1.bp.blogspot.com/_4HKUHirY_2U/SxIRhli6o6I/AAAAAAAAAaM/fmkIOf7MPtE/slideshow+2+small.jpg" alt="MOH" />
</li>


<li>
<h3>Enter Title 3 Here</h3>

<span>http://1.bp.blogspot.com/_4HKUHirY_2U/SxIRlhta4NI/AAAAAAAAAaU/91As7SkDIZE/slideshow+3+big.jpg</span>

<p>Enter Description 3 Here.</p>
<a href="#"><img src="http://3.bp.blogspot.com/_4HKUHirY_2U/SxIRonaYyII/AAAAAAAAAac/ls3j_gSduPk/slideshow+3+small.jpg" alt="Fear" /></a>
</li>


<li>
<h3>Enter Title 4 Here</h3>

<span>http://2.bp.blogspot.com/_4HKUHirY_2U/SxIRudm44wI/AAAAAAAAAak/xPjT8DtBq9s/slideshow+4+big.jpg</span>

<p>Enter Description 4 Here.</p>
<a href="#"><img src="http://1.bp.blogspot.com/_4HKUHirY_2U/SxIRxSG7ulI/AAAAAAAAAas/ct3UpnpLKAM/slideshow+4+small.jpg" alt="Farcry" /></a>
</li>


<li>
<h3>Enter Title 5 Here</h3>

<span>http://1.bp.blogspot.com/_4HKUHirY_2U/SxIR4NEkreI/AAAAAAAAAa0/B0ab0ypP_z4/slideshow+5+big.jpg</span>

<p>Enter Description 5 Here.</p>
<img src="http://4.bp.blogspot.com/_4HKUHirY_2U/SxIR8SoimVI/AAAAAAAAAa8/LJ0Ggp_2Wz4/slideshow+5+small.jpg" alt="Farcry 2" />
</li>


<li>
<h3>Enter Title 6 Here</h3>

<span>http://1.bp.blogspot.com/_4HKUHirY_2U/SxISBN5s6XI/AAAAAAAAAbE/jYBV3sn5y8o/slideshow+6+big.jpg</span>

<p>Enter Description 6 Here.</p>
<a href="#"><img src="http://4.bp.blogspot.com/_4HKUHirY_2U/SxISEGMzIAI/AAAAAAAAAbM/FrFClSn_PIQ/slideshow+6+small.jpg" alt="Crysis" /></a>
</li>


<li>
<h3>Enter Title 7 Here</h3>

<span>http://1.bp.blogspot.com/_4HKUHirY_2U/SxISHlkmzLI/AAAAAAAAAbU/gbpIfiAelH0/slideshow+7+big.jpeg</span>

<p>Enter Description 7 Here.</p>
<a href="#"><img src="http://1.bp.blogspot.com/_4HKUHirY_2U/SxISKamDHFI/AAAAAAAAAbc/ZX9bd600VUg/slideshow+7+small.jpg" alt="Tomb Raider" /></a>
</li>


<li>
<h3>Enter Title 8 Here</h3>

<span>http://3.bp.blogspot.com/_4HKUHirY_2U/SxISPRJ9FyI/AAAAAAAAAbk/col8cO-Gtc8/slideshow+8+big.jpg</span>

<p>Enter Description 8 Here.</p>
<a href="#"><img src="http://1.bp.blogspot.com/_4HKUHirY_2U/SxISSu6GVHI/AAAAAAAAAbs/xR3wq05rsIc/slideshow+8+small.jpg" alt="Game" /></a>
</li>


<li>
<h3>Enter Title 9 Here</h3>

<span>http://1.bp.blogspot.com/_4HKUHirY_2U/SxISVrBaCgI/AAAAAAAAAb0/7TyVFfKbqyc/slideshow+9+big.jpg</span>

<p>Enter Description 9 Here.</p>
<a href="#"><img src="http://4.bp.blogspot.com/_4HKUHirY_2U/SxISYRyCfUI/AAAAAAAAAb8/930A4vUML_Q/slideshow+9+small.jpg" alt="Medal of honor" /></a>
</li>

</ul>

<div id="wrapper">

<div id="fullsize">

<div id="imgprev" class="imgnav" title="Previous Image"></div>

<div id="imglink"></div>

<div id="imgnext" class="imgnav" title="Next Image"></div>

<div id="image"></div>

<div id="information">
<h3></h3>
<p></p>
</div>
</div>

<div id="thumbnails">

<div id="slideleft" title="Slide Left"></div>

<div id="slidearea">

<div id="slider"></div>

</div>

<div id="slideright" title="Slide Right"></div>

</div>

</div>

</div>

You are done.

Demo

How To Add Pure CSS Horizontal Menu For Bloggers

2009-11-19T01:47:00.000-08:00

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

div#navmenu { margin: 0 0 0 0px; padding: 0; height: 44px; float: left;overflow:hidden;background-color:#323232;width:100%; }
div#navmenu ul { display: block; margin: 0; padding: 0 0 0 2px; height: 44px; float: left; }
div#navmenu ul li { display: block; margin: 0; padding: 0 2px 0 0; float: left; height: 44px; }
div#navmenu ul li a, div#navmenu ul li a:visited {
display: block; margin: 0; padding: 5px 0 0 0; height: 39px; line-height: 39px;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px; text-transform: uppercase;
color: #ffffff;float: left;
}
div#navmenu ul li a span, div#navmenu ul li a:visited span {
display: block; float: left; margin: 0; padding: 0 0 0 26px;
height: 39px; line-height: 39px;
color: #ffffff;
}
div#navmenu ul li a span span, div#navmenu ul li a:visited span span {
display: block; float: left; margin: 0; padding: 0 26px 0 0;
height: 39px; line-height: 39px;
color: #ffffff;
}
div#navmenu ul li a:hover, div#navmenu ul li.current_page_item a, div#navmenu ul li.current_page a:visited {
color: #ff9600;
background: transparent url(&#39;http://2.bp.blogspot.com/_4HKUHirY_2U/SwZk5XI8d4I/AAAAAAAAAQ8/X-VXbYI8vb8/navmenu-hover-c.gif&#39;) repeat-x scroll left bottom; text-decoration: none;
}
div#navmenu ul li a:hover span, div#navmenu ul li.current_page_item a span, div#navmenu ul li.current_page_item a:visited span {
background: transparent url(&#39;http://2.bp.blogspot.com/_4HKUHirY_2U/SwZk8cBshII/AAAAAAAAARE/dbd4iSPKA3A/navmenu-hover-l.gif&#39;) no-repeat scroll left bottom; text-decoration: none;
color: #ff9600;
}
div#navmenu ul li a:hover span span, div#navmenu ul li.current_page_item a span span, div#navmenu ul li.current_page_item a:visited span span {
background: transparent url(&#39;http://2.bp.blogspot.com/_4HKUHirY_2U/SwZk-5fuFnI/AAAAAAAAARM/QjKN0nrtUFw/navmenu-hover-r.gif&#39;) no-repeat scroll right bottom; text-decoration: none;
color: #ff9600;
}

</style>

Note:Host above 3 images yourself.

4.Now save your template.

5.Go to Layout-->Page Elements and click on "Add a gadget".

6.Select "html/java script" and add the code given below and click save.

<div id='navmenu'>
<ul>

<li class='current_page_item'><a href='#'><span><span>Home</span></span></a></li>

<li class='page_item page-item-2'><a href='#' title='HTML Tutorials'><span><span>HTML</span></span></a></li>

<li class='page_item page-item-3'><a href='#' title='CSS Tutorials'><span><span>CSS</span></span></a></li>

<li class='page_item page-item-4'><a href='#' title='JS Tutorials'><span><span>Java Script</span></span></a></li>

<li class='page_item page-item-5'><a href='#' title='About us'><span><span>About</span></span></a></li>

<li class='page_item page-item-6'><a href='#' title='Contact us'><span><span>Contact</span></span></a></li>

</ul>
</div>

You are done.Look at the picture below.

Demo

Beautiful CSS Search Box For Blogspot Blogs

2009-11-18T23:19:00.000-08:00

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

div#search { background: transparent url(&#39;http://3.bp.blogspot.com/_4HKUHirY_2U/SwZCwFFG_yI/AAAAAAAAAQ0/ulhHnhO8ruI/search.gif&#39;) no-repeat scroll left top;margin: 0; float: right; width: 320px; height: 44px; }

div#search form { height: 44px; }
div#search form p { display: block; margin: 0; padding: 14px 0 0 30px; }
div#search form p input { width: 285px; border: 0; background: transparent none; color: #ffffff; }

</style>

4.Now save your template.

5.Go to Layout-->Page Elements and click on "Add a gadget".

6.Select "html/java script" and add the code given below and click save.

<div id='search'>
<form action="http://YOURBLOG.blogspot.com/search" id='search form' method='get'>

<p><input id='searchform' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Type your search here...&quot;;}' onfocus='if (this.value == &quot;Type your search here...&quot;) {this.value = &quot;&quot;}' type='text' value='Type your search here...'/></p>

</form>
</div>

Note : Replace "YOURBLOG" with your blog name.

You are done.Look at the picture below.

Search Box For Blogspot Blogs

How To Add CSS Vertical Menu to blogger

2009-11-18T02:33:00.000-08:00

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'>
ul {list-style: none;
margin: 0;
padding: 0;
}

img {
border: none;
}
#menu4 {
   width: 200px;
   margin: 10px;
   border-style: solid solid none solid;
   border-color: #000;
   border-size: 1px;
   border-width: 1px;
   }

#menu4 li a {
   height: 32px;
     voice-family: &quot;\&quot;}\&quot;&quot;;
     voice-family: inherit;
     height: 24px;
   text-decoration: none;
   }

#menu4 li a:link, #menu4 li a:visited {
   color: #CCC;
   display: block;
   background:  url(http://4.bp.blogspot.com/_4HKUHirY_2U/SwPLoH-qOFI/AAAAAAAAAN0/YxdNJOqujKM/menu4.gif);
   padding: 8px 0 0 10px;
   }

#menu4 li a:hover, #menu4 li #current {
   color: #FFF;
   background:  url(http://4.bp.blogspot.com/_4HKUHirY_2U/SwPLoH-qOFI/AAAAAAAAAN0/YxdNJOqujKM/menu4.gif) 0 -32px;
   padding: 8px 0 0 10px;
   }
</style>

Note : Please Host image yourself.

4.Save your template.

5.Now Go to Layout-->Page Elements and click on "Add a gadget".

6.Select "html/java script" and add the code given below and click save.

<div id="menu4">
<ul>

<li><a href="#">Home</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">Java Script</a></li>
<li><a href="#">Photoshop</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>

</ul>
</div>

7.Now you are done.It will look like this:

CSS Black Vertical Menu

Demo

CSS Vertical Menu Tutorials-Menu 3

2009-11-18T01:06:00.000-08:00

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'>
ul {
   list-style: none;
   margin: 0;
   padding: 0;
   }
#menu3 {
   width: 200px;
   border: 1px solid #ccc;
   margin: 10px;
   }

#menu3 li a {
     height: 32px;
     voice-family: &quot;\&quot;}\&quot;&quot;;
     voice-family: inherit;
     height: 24px;
   text-decoration: none;
   }

#menu3 li a:link, #menu3 li a:visited {
   color: #888;
   display: block;
   background: url(http://1.bp.blogspot.com/_4HKUHirY_2U/SwPURj-ZiQI/AAAAAAAAAN8/9leFXbCWnzw/menu3.gif);
   padding: 8px 0 0 30px;
   }

#menu3 li a:hover, #menu3 li #current, #menu3 li a:active {
   color: #283A50;
   background: url(http://1.bp.blogspot.com/_4HKUHirY_2U/SwPURj-ZiQI/AAAAAAAAAN8/9leFXbCWnzw/menu3.gif) 0 -32px;
   padding: 8px 0 0 30px;
   }
</style>

Note : Please Host above image yourself.

4.Save your template.

5.Now Go to Layout-->Page Elements and click on "Add a gadget".

6.Select "html/java script" from header section and add the code given below and click save.

<div id="menu3">
<ul>

<li><a href="#">Home</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">Java Script</a></li>
<li><a href="#">Photoshop</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>

</ul>
</div>

You are done.It will look like this:

CSS Vertical Menu Tutorials-Menu 3

Demo

How To Create Horizontal Menu Using CSS in blogger

2009-11-18T00:42:00.000-08:00

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'>
#tabs26 {
  float:left;
  width:100%;
  background:#000;
  font-size:93%;
  line-height:normal;

  }
#tabs26 ul {
 margin:0;
 padding:10px 10px 0 50px;
 list-style:none;
  }
#tabs26 li {
  display:inline;
  margin:0;
  padding:0;
  }
#tabs26 a {
  float:left;
  background:url(&quot;http://2.bp.blogspot.com/_4HKUHirY_2U/SwO0C_gNhKI/AAAAAAAAANU/FMa7w4ZkTs4/left.gif&quot;) no-repeat left top;
  margin:0;
  padding:0 0 0 4px;
  text-decoration:none;
  }
#tabs26 a span {
  float:left;
  display:block;
  background:url(&quot;http://2.bp.blogspot.com/_4HKUHirY_2U/SwO0GFQwdKI/AAAAAAAAANc/MPQGBY1DG_U/s1600/right.gif&quot;) no-repeat right top;
  padding:5px 15px 4px 6px;
  color:#FFF;
  }
#tabs26 a span {float:none;}

#tabsE a:hover span {
  color:#FFF;
  }
#tabs26 a:hover {
  background-position:0% -42px;
  }
#tabs26 a:hover span {
  background-position:100% -42px;
  }
</style>

Note: Please host above 2 images yourself.

4.Now save your template.

5.Go to Layout-->Page Elements and click on "Add a gadget".

6.Select "html/java script" and add the code given below and click save.

<div id="tabs26">

<ul>
<li><a href="#"><span>Home</span></a></li>
<li><a href="#"><span>HTML</span></a></li>
<li><a href="#"><span>CSS</span></a></li>
<li><a href="#"><span>Java Script</span></a></li>
<li><a href="#"><span>About</span></a></li>
<li><a href="#"><span>Contact</span></a></li>
<li><a href="#"><span>Privacy Policy</span></a></li>
</ul>

</div>

You are done.It will look like this:

How To Create Horizontal Menu Using CSS

Horizontal CSS Menu Tutorial to blogger

2009-11-16T21:22:00.000-08:00

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'>
#tabs24 {
  float:left;
  width:100%;
  background:#BBD9EE;
  font-size:93%;
  line-height:normal;
  }
#tabs24 ul {
 margin:0;
 padding:10px 10px 0 50px;
 list-style:none;
  }
#tabs24 li {
  display:inline;
  margin:0;
  padding:0;
  }
#tabs24 a {
  float:left;
  background:url(&quot;http://3.bp.blogspot.com/_4HKUHirY_2U/SwIsrl_4pRI/AAAAAAAAAMM/6ekfoySymgo/left.gif&quot;) no-repeat left top;
  margin:0;
  padding:0 0 0 4px;
  text-decoration:none;
  }
#tabs24 a span {
  float:left;
  display:block;
  background:url(&quot;http://1.bp.blogspot.com/_4HKUHirY_2U/SwIsvQdvAVI/AAAAAAAAAMU/7BhI82yCGpo/right.gif&quot;) no-repeat right top;
  padding:5px 15px 4px 6px;
  color:#666;
  }

#tabs24 a span {float:none;}
/* End IE5-Mac hack */
#tabs a:hover span {
  color:#FF9834;
  }
#tabs24 a:hover {
  background-position:0% -42px;
  }
#tabs24 a:hover span {
  background-position:100% -42px;
  }
</style>

Note : Please Host above 2 images yourself.

4.Save your template.

5.Now Go to Layout-->Page Elements and click on "Add a gadget".

6.Select "html/java script" from header section and add the code given below and click save.

<div id="tabs24">

<ul>
<li><a href="#"><span>Home</span></a></li>
<li><a href="#"><span>HTML</span></a></li>
<li><a href="#"><span>CSS</span></a></li>
<li><a href="#"><span>Java Script</span></a></li>
<li><a href="#"><span>About</span></a></li>
<li><a href="#"><span>Contact</span></a></li>
<li><a href="#"><span>Privacy Policy</span></a></li>
</ul>

</div>

7.Now you are done.It will look like this:

Horizontal CSS Menu Tutorial to blogger

How To Add Nice CSS Horizontal Menu to blogger

2009-11-15T20:28:00.000-08:00

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'>
 #tabs20 {
 float:left;
 width:100%;
 background:#000;
 font-size:93%;
 line-height:normal;
 }
#tabs20 ul {
 margin:0;
 padding:10px 10px 0 50px;
 list-style:none;
 }
#tabs20 li {
 display:inline;
 margin:0;
 padding:0;
 }
#tabs20 a {
 float:left;
 background:url(&quot;http://4.bp.blogspot.com/_4HKUHirY_2U/SwDTm3I-EiI/AAAAAAAAALs/CHbK3Jk9edo/left.gif&quot;) no-repeat left top;
 margin:0;
 padding:0 0 0 4px;
 text-decoration:none;
 }
#tabs20 a span {
 float:left;
 display:block;
 background:url(&quot;http://4.bp.blogspot.com/_4HKUHirY_2U/SwDTprizcnI/AAAAAAAAAL0/dklu1kGiQ8U/right.gif&quot;) no-repeat right top;
 padding:5px 15px 4px 6px;
 color:#FFF;
 }

#tabs20 a span {float:none;}
/* End IE5-Mac hack */
#tabsH a:hover span {
 color:#FFF;
 }
#tabs20 a:hover {
 background-position:0% -42px;
 }
#tabs20 a:hover span {
 background-position:100% -42px;
 }
</style>

<div id="tabs20">

<ul>
<li><a href="#"><span>Home</span></a></li>
<li><a href="#"><span>HTML</span></a></li>
<li><a href="#"><span>CSS</span></a></li>
<li><a href="#"><span>Java Script</span></a></li>
<li><a href="#"><span>About</span></a></li>
<li><a href="#"><span>Contact</span></a></li>
<li><a href="#"><span>Privacy Policy</span></a></li>
</ul>

</div>

7.Now you are done.It will look like this:

CSS Horizontal Menu For Website/blog

How To Replace Submit Button With A Image

2009-11-15T03:40:00.000-08:00

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'>
.formbutton{
cursor:pointer;
border:outset 1px #ccc;
background:#999;
color:#fff;
font-weight:bold;
padding: 1px 2px;
background:url(http://3.bp.blogspot.com/_ar9PeTUrwMY/SuunWOFRlRI/AAAAAAAAAzo/sxOoBETSuD8/s400/topnav_stretch.gif) repeat-x left top;
}
</style>

NOTE:You can use another image instead of above image and can change colors as your choice.

4.Now save your template.

5.Now add class="formbutton" into your input tag.Look at the example below.

<form>
<input type="text" style="width: 200px; border: 1px />
<input type="submit" class="formbutton" value="Subscribe" />
</form>

It will look like this:

Replace Submit Button With A Image

How To Add a Border To Images in blogger

2009-11-13T02:04:00.001-08:00

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

2.Scroll down to where you see ]]></b:skin> tag.

3.Copy below code and paste it just before ]]></b:skin> tag.

img {
border: 15px solid #000;
background: #000;
filter:alpha(opacity=60);
opacity:0.6;
padding: 1px;
}

4.Now save your template and you are done.

Add a Border To Images

How To Add jQuery Color Fading Menu to Blogger

2009-11-12T03:40:00.000-08:00

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 .

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

/*
* jQuery Color Animations
* Copyright 2007 John Resig
* Released under the MIT and GPL licenses.
*/

(function(jQuery){

// We override the animation for all of these color styles
jQuery.each(['backgroundColor', 'borderBottomColor', 'borderLeftColor', 'borderRightColor', 'borderTopColor', 'color', 'outlineColor'], function(i,attr){
 jQuery.fx.step[attr] = function(fx){
  if ( fx.state == 0 ) {
   fx.start = getColor( fx.elem, attr );
   fx.end = getRGB( fx.end );
  }

  fx.elem.style[attr] = "rgb(" + [
   Math.max(Math.min( parseInt((fx.pos * (fx.end[0] - fx.start[0])) + fx.start[0]), 255), 0),
   Math.max(Math.min( parseInt((fx.pos * (fx.end[1] - fx.start[1])) + fx.start[1]), 255), 0),
   Math.max(Math.min( parseInt((fx.pos * (fx.end[2] - fx.start[2])) + fx.start[2]), 255), 0)
  ].join(",") + ")";
 }
});

// Color Conversion functions from highlightFade
// By Blair Mitchelmore
// http://jquery.offput.ca/highlightFade/

// Parse strings looking for color tuples [255,255,255]
function getRGB(color) {
 var result;

 // Check if we're already dealing with an array of colors
 if ( color && color.constructor == Array && color.length == 3 )
  return color;

 // Look for rgb(num,num,num)
 if (result = /rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(color))
  return [parseInt(result[1]), parseInt(result[2]), parseInt(result[3])];

 // Look for rgb(num%,num%,num%)
 if (result = /rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(color))
  return [parseFloat(result[1])*2.55, parseFloat(result[2])*2.55, parseFloat(result[3])*2.55];

 // Look for #a0b1c2
 if (result = /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(color))
  return [parseInt(result[1],16), parseInt(result[2],16), parseInt(result[3],16)];

 // Look for #fff
 if (result = /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(color))
  return [parseInt(result[1]+result[1],16), parseInt(result[2]+result[2],16), parseInt(result[3]+result[3],16)];

 // Otherwise, we're most likely dealing with a named color
 return colors[jQuery.trim(color).toLowerCase()];
}

function getColor(elem, attr) {
 var color;

 do {
  color = jQuery.curCSS(elem, attr);

  // Keep going until we find an element that has color, or we hit the body
  if ( color != '' && color != 'transparent' || jQuery.nodeName(elem, "body") )
   break;

  attr = "backgroundColor";
 } while ( elem = elem.parentNode );

 return getRGB(color);
};

// Some named colors to work with
// From Interface by Stefan Petre
// http://interface.eyecon.ro/

var colors = {
 aqua:[0,255,255],
 azure:[240,255,255],
 beige:[245,245,220],
 black:[0,0,0],
 blue:[0,0,255],
 brown:[165,42,42],
 cyan:[0,255,255],
 darkblue:[0,0,139],
 darkcyan:[0,139,139],
 darkgrey:[169,169,169],
 darkgreen:[0,100,0],
 darkkhaki:[189,183,107],
 darkmagenta:[139,0,139],
 darkolivegreen:[85,107,47],
 darkorange:[255,140,0],
 darkorchid:[153,50,204],
 darkred:[139,0,0],
 darksalmon:[233,150,122],
 darkviolet:[148,0,211],
 fuchsia:[255,0,255],
 gold:[255,215,0],
 green:[0,128,0],
 indigo:[75,0,130],
 khaki:[240,230,140],
 lightblue:[173,216,230],
 lightcyan:[224,255,255],
 lightgreen:[144,238,144],
 lightgrey:[211,211,211],
 lightpink:[255,182,193],
 lightyellow:[255,255,224],
 lime:[0,255,0],
 magenta:[255,0,255],
 maroon:[128,0,0],
 navy:[0,0,128],
 olive:[128,128,0],
 orange:[255,165,0],
 pink:[255,192,203],
 purple:[128,0,128],
 violet:[128,0,128],
 red:[255,0,0],
 silver:[192,192,192],
 white:[255,255,255],
 yellow:[255,255,0]
};

})(jQuery);

//]]>
</script>

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

var hoverColour = "#FFF";

$(function(){
$("a.hoverBtn").show("fast", function() {
 $(this).wrap("<div class=\"hoverBtn\">");
 $(this).attr("class", "");
});

//display the hover div
$("div.hoverBtn").show("fast", function() {
 //append the background div
 $(this).append("<div></div>");

 //get link's size
 var wid = $(this).children("a").width();
 var hei = $(this).children("a").height();

 //set div's size
 $(this).width(wid);
 $(this).height(hei);
 $(this).children("div").width(wid);
 $(this).children("div").height(hei);

 //on link hover
 $(this).children("a").hover(function(){
  //store initial link colour
  if ($(this).attr("rel") == "") {
   $(this).attr("rel", $(this).css("color"));
  }
  //fade in the background
  $(this).parent().children("div")
   .stop()
   .css({"display": "none", "opacity": "1"})
   .fadeIn("fast");
  //fade the colour
  $(this) .stop()
   .css({"color": $(this).attr("rel")})
   .animate({"color": hoverColour}, 350);
 },function(){
  //fade out the background
  $(this).parent().children("div")
   .stop()
   .fadeOut("slow");
  //fade the colour
  $(this) .stop()
   .animate({"color": $(this).attr("rel")}, 250);
 });
});
});

//]]>
</script>

<style type='text/css'>
div.hoverBtn {
position:   relative;
float:   left;
background:  #000000 url(http://3.bp.blogspot.com/_4HKUHirY_2U/SvvwhZbkLRI/AAAAAAAAAK8/r6Z4VoAIi1c/navBG.png) repeat-x 0 0 scroll;
}
div.hoverBtn a {
position:   relative;
z-index:   2;
display:   block;
width:    100px;
height:   30px;
line-height:   30px;
text-align:   center;
font-size:  1.1em;
text-decoration: none;
color:   #000;
background:  transparent none repeat-x 0 0 scroll;
}
div.hoverBtn div {
display:  none;
position:   absolute;
z-index:   1;
top:    0px;
background:  #ffffff url(http://1.bp.blogspot.com/_4HKUHirY_2U/SvvwkpzFInI/AAAAAAAAALE/-MOpUEFRUtY/navHover.png) repeat-x 0 0 scroll;
</style>

NOTE: Please host images yourself.

4.Now go to Layout-->Page Element and click on "Add a gadget" from header section.

5.Select "html/java script" and add the code given below and click save.

<a class="hoverBtn" href="#">Home</a>
<a class="hoverBtn" href="#">HTML</a>
<a class="hoverBtn" href="#">CSS</a>
<a class="hoverBtn" href="#">About</a>
<a class="hoverBtn" href="#">Contact</a>

You are done.

Demo | Source