Blogspot Tutorial

How To Add Snow Effect On The Blogger Mouse Cursor Area

noreply@blogger.com (admin) — Mon, 20 May 2013 16:26:00 +0000

Hello! `How are you guys? Adding snow effect when you move the mouse cursor will change the look of your blog. here is the effect of fresh snow in your area simple mouse blog. This will make your blog more cold than snow falling from the mouse cursor. Effect is very simple gadget to use. So this is very fast. I tested this effect in Internet Explorer, Mozilla Firefox and many other web browsers. This simple and not flash based image works great! I hope you enjoy using this very cool snow effect gadget. So, let's see how to Add Snow Effect On The Mouse Cursor On The Blog..

Live Demo

Snow Effect On The Blogger Mouse Cursor Area Generator

How To Add Snow Cursor Mouse Cursor Area Widget To Blogger?

Choose a type of Mouse Cursor below
Click on "Genetate" button
Finally click on "Add to Blogger" to add it to your blog.

Note: We are going to add more cursor, cursor pointer, cursors, mouse cursor, Totally Free Cursors, Myspace Cursors, Animated Cursors and cursors oftenly so keep visiting this page.

How to Install Blogger Snow Cursor Code Generator Widget

Now let's start adding it...

Step 1. Login to Your Blogger Account.Go to your Blogger Dashboard.Click on Layout tab from left pane and click on Add a Gadget link.

Step 2. After click on Add a Gadget link A pop-up box will open now
with many gadget list, Choose HTML/JavaScript from the gadget options by clicking the blue plus sign for that gadget.

Step 3. Select 'HTML/Javascript' and add the one of code given below.

Step 4. Now Click On Save 'JavaScript' You are done.

How to make snow cursor in blogspot

Follow these very simple steps make a snow effect on the mouse cursor on the blog.

Step 1 : Go To Blogger > Design > Page Elements

Step 2: Click on "Add a Gadget" link

Step 3: From the pop-up window, choose HTML/JavaScript

Step 4: Copy and paste the following code below

And now click Save

# you can change :

var colour="black";

How to Make Sparkling Cursor [Starry Cursor] Snow Effect

never seen a blog with a star-studded Cursor ? follow these steps: Make a Starry Cursor

1. Go to Blogger Dashboard >> Layout >> Add a gadget >> Add HTML/Javascript Box.

2. Paste the following code in HTML/Javascript Box.

And now click Save

# you can change :

var colour="black";

Color Code Generator

Snow Effect for Blogger Blogs! Make snow fall from your blog!

Show Falling Christmas Snow on your Blogs!

That’s All!

Hope you have enjoyed the post.

How to change mouse cursor in blogger blog to animated cursors

noreply@blogger.com (admin) — Wed, 15 May 2013 17:49:00 +0000

How to change mouse cursor in blogger blog to animated cursors.One of the best way to add extra fun to your blog is, changing mouse cursor on your blog. Changing the mouse cursor in blogger or blogspot blogs is very easy.This tutorial will help you to change the mouse cursor of your blog to animated cursors.Many bloggers are asking such kind of questions but there is no tutorial available on the internet.I created this post because there are a blogger friend who asked how to change the pointer / cursor on the blogger. This you can do to decorate the look of blog.

Live Demo

I take the cursor image from http://www.cursors-4u.com and http://rw-designer.com you can change it anytime depends on your festive moods.

How to Install mouse cursor in blogger blog to animated cursors

How to add HTML-CSS-Javascript Codes to your Blog ?

This is very simple and easy you only follow below steps and add this widget in your blog.

Step 1 Log-in to your Blogger account.

Step 2 Backup your Template.

Step 3 Click on The Template>> Edit HTML>> Proceed.

Step 4 Now find [by pressing Ctrl + F ] this code in the template:

</head>

And immediately Before it, paste this code:

And now click Save Template

Change Mouse Cursor Generator by 24work.blogspot.com

How To Add Mouse Cursor Widget To Blogger?

Choose a type of Mouse Cursor below
Click on "Genetate" button
Finally click on "Add to Blogger" to add it to your blog.

Note: We are going to add more cursor, cursor pointer, cursors, mouse cursor, Totally Free Cursors, Myspace Cursors, Animated Cursors and cursors oftenly so keep visiting this page.

Blogger MySpace Cursor Code Generate

You can change the appearance of the cursor on the MySpace profile page (the cursor is the little that moves on the screen by moving the mouse). For example, you could make the appearance of the cursor as a question mark when the user hovers over an object.The widget is originally developed by code-generator.net, i just changed something in the widget.

How to Install Blogger MySpace Cursor Code Generator Widget

Now let's start adding it...

Step 1. Login to Your Blogger Account.Go to your Blogger Dashboard.Click on Layout tab from left pane and click on Add a Gadget link.

Step 2. After click on Add a Gadget link A pop-up box will open now
with many gadget list, Choose HTML/JavaScript from the gadget options by clicking the blue plus sign for that gadget.

Step 3. Select 'HTML/Javascript' and add the one of code given below.

Step 4. Now Click On Save 'JavaScript' You are done.

Animated Recent posts for Blogger / Blogspot with thumbnails - Simple Spy

noreply@blogger.com (admin) — Wed, 15 May 2013 15:48:00 +0000

Animated recent post is a fantastic way to present headlines updates to your readers.The effect of smooth scrolling attract readers and generate more clicks to your site.This gadget displays your most recent posts and includes a small thumbnail, but has the added bonus of using an animated effect that moves smoothly through the posts.There are a lot of great tutorials discussing on how to add Animated Recent posts for blogger with thumbnails and Simple Spy, but most of the tutorials I've found are not really suitable for a beginner.

Live Demo

How to Install Animated Recent posts for blogger with thumbnails and Simple Spy

Now let's start adding it...

Step 1. Login to Your Blogger Account.Go to your Blogger Dashboard.Click on Layout tab from left pane and click on Add a Gadget link.

Step 2. After click on Add a Gadget link A pop-up box will open now

with many gadget list, Choose HTML/JavaScript from the gadget options by clicking the blue plus sign for that gadget.

Step 3. Select 'HTML/Javascript' and add the one of code given below.

Step 4. Now Click On Save 'JavaScript' You are done.

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

<style type="text/css" media="screen">


</style><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Grab this"><img src="https://bitly.com/24workpng" alt="Blogger Tips And Tricks|Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Free Backlinks"><img src="https://bitly.com/24workpng" alt="Free Backlinks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Free"><img src="https://bitly.com/24workpng" alt="Blogger Tips And Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><script language='JavaScript'>

imgr = new Array();
imgr[0] = "http://3.bp.blogspot.com/-Q1rsi1mma6I/UZDiiNy6guI/AAAAAAAAAYE/W9qgYs331f8/s1600/noimage.png";
imgr[1] = "http://3.bp.blogspot.com/-Q1rsi1mma6I/UZDiiNy6guI/AAAAAAAAAYE/W9qgYs331f8/s1600/noimage.png";
imgr[2] = "http://3.bp.blogspot.com/-Q1rsi1mma6I/UZDiiNy6guI/AAAAAAAAAYE/W9qgYs331f8/s1600/noimage.png";
imgr[3] = "http://3.bp.blogspot.com/-Q1rsi1mma6I/UZDiiNy6guI/AAAAAAAAAYE/W9qgYs331f8/s1600/noimage.png";
imgr[4] = "http://3.bp.blogspot.com/-Q1rsi1mma6I/UZDiiNy6guI/AAAAAAAAAYE/W9qgYs331f8/s1600/noimage.png";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 70;
thumbheight = 70;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;

home_page = "http://bdlab.blogspot.com/";

limitspy=4
intervalspy=4000
</script>
<div id="spylist">
<script src='http://24work.ucoz.com/24work-blogspot/recent-posts/animated-recent-posts-24work-blogspot-com.js' type='text/javascript'></script>

</div>

And now click Save

Note :If your template already have a jquery do not put again, just copy after it
Html from above a few things could be replaced :

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

1. homepage address

home_page = “http://bdlab.blogspot.com/”;

2. Style

from above style/css, you can change :

width : 220px;

width:208px:

customize base on your template

and

background:#fff url(http://1.bp.blogspot.com/-yp42zoYRFkg/UZDjUlgLHCI/AAAAAAAAAYM/SGHerEtqkgc/s1600/24work-blogspot-com.jpg) repeat-x;

Customize the colors of backuground

3. image size

thumbwidth = 70;

thumbheight = 70;

Match your needs

4. How many post you will show

numposts = 10;

Base on what you need to show

Stylish Scrolling Recent Posts Widget For Blogger

Live Demo

1. Go to Blogger Dashboard >> Layout >> Add a gadget >> Add HTML/Javascript Box.

2. Paste the following code in HTML/Javascript Box.

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

<style type="text/css" media="screen">
#workwidget {
overflow: hidden;
margin-top: 5px;
padding: 0px 0px;
height: 385px;
}

#workwidget ul {
width: 295px;
overflow: hidden;
list-style-type: none;
padding: 0px 0px;
margin: 0px 0px;
}

#workwidget li {
width: 282px;
padding: 5px 5px;
margin: 0px 0px 5px 0px;
list-style-type: none;
float: none;
height: 80px;
overflow: hidden;
background: #fff url(http://1.bp.blogspot.com/-yp42zoYRFkg/UZDjUlgLHCI/AAAAAAAAAYM/SGHerEtqkgc/s1600/24work-blogspot-com.jpg) repeat-x;
border: 1px solid #ddd;
}

#workwidget li a {
text-decoration: none;
color: #4B545B;
font-size: 15px;
height: 18px;
overflow: hidden;
margin: 0px 0px;
padding: 0px 0px 2px 0px;
}

#workwidget img {
float: left;
margin-top: 10px;
margin-right: 15px;
background: #EFEFEF;
border: 0;
}

#workwidget img {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
padding: 4px;
background: #eee;
background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));
background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 0 3px rgba(0,0,0,.7);
-moz-box-shadow: 0 0 3px rgba(0,0,0,.7);
box-shadow: 0 0 3px rgba(0,0,0,.7);
}

#workwidget img:hover {
-moz-transform: scale(1.2) rotate(-350deg);
-webkit-transform: scale(1.2) rotate(-350deg);
-o-transform: scale(1.2) rotate(-350deg);
-ms-transform: scale(1.2) rotate(-350deg);
transform: scale(1.2) rotate(-350deg);
-webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
-moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
}

.spydate {
overflow: hidden;
font-size: 10px;
color: #0284C2;
padding: 2px 0px;
margin: 1px 0px 0px 0px;
height: 15px;
font-family: Tahoma,Arial,verdana, sans-serif;
}

.spycomment {
overflow: hidden;
font-family: Tahoma,Arial,verdana, sans-serif;
font-size: 10px;
color: #262B2F;
padding: 0px 0px;
margin: 0px 0px;
}

</style>
<a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Grab this"><img src="https://bitly.com/24workpng" alt="Blogger Tips And Tricks|Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Free Backlinks"><img src="https://bitly.com/24workpng" alt="Free Backlinks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Free"><img src="https://bitly.com/24workpng" alt="Blogger Tips And Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a>
<script language='JavaScript'>
imgr = new Array();
imgr[0] = "http://3.bp.blogspot.com/-Q1rsi1mma6I/UZDiiNy6guI/AAAAAAAAAYE/W9qgYs331f8/s1600/noimage.png";
imgr[1] = "http://3.bp.blogspot.com/-Q1rsi1mma6I/UZDiiNy6guI/AAAAAAAAAYE/W9qgYs331f8/s1600/noimage.png";
imgr[2] = "http://3.bp.blogspot.com/-Q1rsi1mma6I/UZDiiNy6guI/AAAAAAAAAYE/W9qgYs331f8/s1600/noimage.png";
imgr[3] = "http://3.bp.blogspot.com/-Q1rsi1mma6I/UZDiiNy6guI/AAAAAAAAAYE/W9qgYs331f8/s1600/noimage.png";
imgr[4] = "http://3.bp.blogspot.com/-Q1rsi1mma6I/UZDiiNy6guI/AAAAAAAAAYE/W9qgYs331f8/s1600/noimage.png";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 50;
thumbheight = 50;
fntsize = 15;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://bdlab.blogspot.com/";
limitspy=4;
intervalspy=4000;
</script>

<div id="workwidget">
<script src='http://24work.ucoz.com/24work-blogspot/recent-posts/animated-recent-posts-24work-blogspot-com-3.js' type='text/javascript'></script>
</div>

And now click Save

Note :If your template already have a jquery do not put again, just copy after it
Html from above a few things could be replaced :

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

Now Replace the http://bdlab.blogspot.com with your blog Url.

You Can Also CUSTOMIZE The CODE According to Your Need

numposts = 10; Total number of posts which you wants to scroll by this widget
limitspy=4; Number of the posts to appear on the widget
intervalspy=4000; Scrolling speed of the widget,if you decreased the value speed of widget will increases.

Add Animated Recent Post Widget Sliding Recent Post Widget for Bloggers

Live Demo

Go to blogger > Open layout tab

Now Add A new HTML/JavaScript widget

Now paste the code given below :

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

<style type="text/css">
#rp_plus_img{height:377px;}
#rp_plus_img li {height:60px;padding:5px;list-style:none;
background-color:#ffffff;
border:solid 1px #000000;}
#rp_plus_img a{color:#00000;}
#rp_plus_img .news-title{display:block;font-weight:bold ;margin-bottom:4px;font-size:11px;
text-align:justify;
-moz-border-radius: 5px;}
#rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #00000;width:55px;height:55px;}
</style><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Grab this"><img src="https://bitly.com/24workpng" alt="Blogger Tips And Tricks|Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Free Backlinks"><img src="https://bitly.com/24workpng" alt="Free Backlinks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Free"><img src="https://bitly.com/24workpng" alt="Blogger Tips And Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><script type="text/javascript" src="http://24work.ucoz.com/24work-blogspot/recent-posts/animated-recent-posts-24work-blogspot-com-2.js"></script>
<script type="text/javascript">
var speed = 1500;
var pause = 3500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img">
<script style="text/javascript">
var numposts = 5;
var numchars = 0;
</script>
<script src="http://bdlab.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script></ul>

And now click Save

Note :If your template already have a jquery do not put again, just copy after it
Html from above a few things could be replaced :

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

Now Replace the http://bdlab.blogspot.com with your blog Url.

numposts = 5; Total number of posts which you wants to scroll by this widget

Stylish Animated Blogger Recent Posts Widget

Live Demo

Go to blogger > Open layout tab

Now Add A new HTML/JavaScript widget

Now paste the code given below :

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

<style type="text/css" media="screen">
#workwidget {
overflow: hidden;
margin-top: 5px;
padding: 0px 0px;
height: 385px;
}

#workwidget ul {
width: 295px;
overflow: hidden;
list-style-type: none;
padding: 0px 0px;
margin: 0px 0px;
}

#workwidget li {
width:230px;
background: #1ed2f2;
list-style-type: none;
margin:0 0 5px 0px;
padding:5px 5px 1px 10px !important;
-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;-o-transition:all 0.2s ease;border: 0 none !important;-webkit-border-top-left-radius:40px;-webkit-border-bottom-right-radius:40px;-moz-border-radius-topleft:40px;-moz-border-radius-bottomright:40px;border-top-left-radius:40px;border-bottom-right-radius:40px;
}

#workwidget li a {
text-decoration: none;
color: #4B545B;
font-size: 15px;
height: 18px;
overflow: hidden;
margin: 0px 0px;
padding: 0px 0px 2px 0px;
}

#workwidget img {
float: left;
margin-top: 10px;
margin-right: 15px;
background: #EFEFEF;
border: 0;
}

#workwidget img {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
padding: 4px;
background: #eee;
background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));
background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 0 3px rgba(0,0,0,.7);
-moz-box-shadow: 0 0 3px rgba(0,0,0,.7);
box-shadow: 0 0 3px rgba(0,0,0,.7);
}

#workwidget li:hover {
background: #84f6f5;

}

#workwidget img:hover {
-moz-transform: scale(1.2) rotate(-350deg);
-webkit-transform: scale(1.2) rotate(-350deg);
-o-transform: scale(1.2) rotate(-350deg);
-ms-transform: scale(1.2) rotate(-350deg);
transform: scale(1.2) rotate(-350deg);
-webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
-moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
}

.spydate {
overflow: hidden;
font-size: 10px;
color: #0284C2;
padding: 2px 0px;
margin: 1px 0px 0px 0px;
height: 15px;
font-family: Tahoma,Arial,verdana, sans-serif;
}

.spycomment {
overflow: hidden;
font-family: Tahoma,Arial,verdana, sans-serif;
font-size: 10px;
color: #262B2F;
padding: 0px 0px;
margin: 0px 0px;
}

</style>
<a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Grab this"><img src="https://bitly.com/24workpng" alt="Blogger Tips And Tricks|Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Free Backlinks"><img src="https://bitly.com/24workpng" alt="Free Backlinks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Free"><img src="https://bitly.com/24workpng" alt="Blogger Tips And Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a>
<script language='JavaScript'>
imgr = new Array();
imgr[0] = "http://3.bp.blogspot.com/-Q1rsi1mma6I/UZDiiNy6guI/AAAAAAAAAYE/W9qgYs331f8/s1600/noimage.png";
imgr[1] = "http://3.bp.blogspot.com/-Q1rsi1mma6I/UZDiiNy6guI/AAAAAAAAAYE/W9qgYs331f8/s1600/noimage.png";
imgr[2] = "http://3.bp.blogspot.com/-Q1rsi1mma6I/UZDiiNy6guI/AAAAAAAAAYE/W9qgYs331f8/s1600/noimage.png";
imgr[3] = "http://3.bp.blogspot.com/-Q1rsi1mma6I/UZDiiNy6guI/AAAAAAAAAYE/W9qgYs331f8/s1600/noimage.png";
imgr[4] = "http://3.bp.blogspot.com/-Q1rsi1mma6I/UZDiiNy6guI/AAAAAAAAAYE/W9qgYs331f8/s1600/noimage.png";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 50;
thumbheight = 50;
fntsize = 15;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://bdlab.blogspot.com/";
limitspy=4;
intervalspy=4000;
</script>

<div id="workwidget">
<script src='http://24work.ucoz.com/24work-blogspot/recent-posts/animated-recent-posts-24work-blogspot-com-3.js' type='text/javascript'></script>
</div>

And now click Save

Note :If your template already have a jquery do not put again, just copy after it
Html from above a few things could be replaced :

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

Now Replace the http://bdlab.blogspot.com with your blog Url.

Settings:

Change http://bdlab.blogspot.com to Your Blog address
Change numposts = 10 to Show number of Recent posts with thumbnails

Scrolling Recent Post Gadget For Blogger

Live Demo

Adding The Widget To Blogger

Go to Blogger >> Layout >> Add Gadget >> Select an HTML/JavaScript Gadget

Copy the following code and paste inside an HTML/JavaScript widget

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

<style>img.recent_thumb {padding:1px;width:55px;height:55px;border:0;float:right;margin:0 0 5px 10px;}.recent_posts_with_thumbs {float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px;}.recent_posts_with_thumbs a {text-decoration:none;}.recent_posts_with_thumbs strong {font-size:10px;}</style><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Grab this"><img src="https://bitly.com/24workpng" alt="Blogger Tips And Tricks|Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Free Backlinks"><img src="https://bitly.com/24workpng" alt="Free Backlinks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Free"><img src="https://bitly.com/24workpng" alt="Blogger Tips And Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><script style='text/javascript' src="http://24work.ucoz.com/24work-blogspot/recent-posts/hb-recentposts-2.js" ></script>
<script style='text/javascript' src='http://24work.ucoz.com/24work-blogspot/recent-posts/hb-jquery-ticker.js'></script>
<script style='text/javascript'>
var numposts = 7;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = false;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = true;
var numchars = 100;
$(document).ready(function () {$('#sai').vTicker({
speed: 500,
pause: 3000,
showItems: 3,
animation: 'fade',
mousePause: false,
height: 0,
direction: 'up'
});});
</script>
<div id="sai">
<script src='http://bdlab.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>
</div>

And now click Save

Note :If your template already have a jquery do not put again, just copy after it
Html from above a few things could be replaced :

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

Now Replace the http://bdlab.blogspot.com with your blog Url.

Optional Customizations

To change total number of posts find this code var numposts = 7;
If you don't want to show post thumbnails then change this value var showpostthumbnails = true; to false.

New and Flexible Recent Posts Widget With Thumbnail for Blogger

Live Demo

Follow the step by step instructions to add this widget in Blogger:
Sign in to Blogger
Go to Layout > Add a Gadget
Select HTML / JavaScript
Paste the code given below in the field and Save.

Customization:
var numposts = 5; (Number of Posts to be shown)
var showpostthumbnails = true; (Post Image)
var displaymore = true; (More Button)
var showcommentnum = false; (No of Comments)
var showpostdate = false; (Post Date)
var showpostsummary = false; (Post Summry)
var numchars = 80; (Characters in post summary)
True is for Display item and False for not to display. Change According to your needs.

Change http://bdlab.blogspot.com with your Website/ Blog URL.

Tooltips Recent Post Widget For Blogger With Thumbnail

Live Demo

Follow these very simple steps to add the "Tooltips Recent Post Widget For Blogger With Thumbnail " in your blog.

Step 1 : Go To Blogger > Design > Page Elements
Step 2: Click on "Add a Gadget" link
Step 3: From the pop-up window, choose HTML/JavaScript
Step 4: Copy and paste the following code below

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

<style type="text/css">
#post-gallery {
width:304px;
margin:0px auto;
font:normal 11px Arial,Sans-Serif;
color:##000000
;
padding:8px;
background-color:#1BA1E2
;
-webkit-box-shadow:0px 10px 30px rgba(0, 0, 0, 0.4);
-moz-box-shadow:0px 10px 30px rgba(0, 0, 0, 0.4);
box-shadow:0px 10px 30px rgba(0, 0, 0, 0.4);
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
}
#post-gallery h2 {
font:20px Arial,Sans-Serif;
color:white;
text-shadow:0px 3px 2px black;
text-transform:uppercase;
margin:2px 2px 2px;
padding:7px 14px;
background-color:#000000;
text-align: center;
}
#post-gallery .rp-item {
float:left;
display:inline;
position:relative;
margin:2px;
padding:0px 0px;
background:#fff url('http://2.bp.blogspot.com/-tSc2YP0efDM/UZMmX6KYHTI/AAAAAAAAAaI/abgAdbNEHH4/s1600/24work.blogspot.com.loading.gif') no-repeat 50% 50%;
width:72px;
height:72px;
}
#post-gallery .rp-item img {
width:72px;
height:72px;
border:none !important;
margin:0px 0px !important;
padding:0px 0px !important;
background:transparent !important;
display:none;
}
#post-gallery .rp-item .rp-child {
position:relative;
top:10%!important;
left:10%!important;
z-index:1000;
width:200px;
background-color:white;
border-top:5px solid #1BA1E2;
-webkit-box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);
-moz-box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);
box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);
padding:10px 15px;
overflow:hidden;
word-wrap:break-word;
display:none;
opacity: 0.9;
}
#post-gallery .rp-item .rp-child h4 {
font-size:12px;
margin:0px 0px 5px;
color:#1BA1E2;
}
#post-gallery .rp-item:hover .hidden {display:block;}
</style><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Grab this"><img src="https://bitly.com/24workpng" alt="Blogger Tips And Tricks|Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Free Backlinks"><img src="https://bitly.com/24workpng" alt="Free Backlinks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Free"><img src="https://bitly.com/24workpng" alt="Blogger Tips And Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a>
<script type="text/javascript">

var rpTitle = "Latest Post", // Widget Title

numposts = 20, // The number of thumbnails / posts to display
numchar = 200, // Number of characters in the description tooltip
rcFadeSpeed = 600, // Speed of the effect. fadeIn () tooltip appears

pBlank = "http://3.bp.blogspot.com/-Q1rsi1mma6I/UZDiiNy6guI/AAAAAAAAAYE/W9qgYs331f8/s1600/noimage.png", // Image that show up if the post doesn't have a image
blogURL = "http://bdlab.blogspot.com/"; // Your Blog Address
</script><script src="http://24work.ucoz.com/24work-blogspot/recent-posts/animated-recent-posts-24work-blogspot-com-6.js" type="text/javascript"></script>

And now click Save

Note :If your template already have a jquery do not put again, just copy after it
Html from above a few things could be replaced :

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

Now Replace the http://bdlab.blogspot.com with your blog Url.

Customization

numposts = 20, // The number of thumbnails / posts to display
numchar = 200, // Number of characters in the description tooltip
rcFadeSpeed = 600, // Speed of the effect. fadeIn () tooltip appears

Many thanks to abu-farhan And Rahul for making this code and I just tested and modified to work on blogger

How To Add Animated Flash Clock To Your Blogger Blog

noreply@blogger.com (admin) — Wed, 24 Apr 2013 10:42:00 +0000

Hello! `How are you guys? here's the cool Clock.this tutorial will show you how to Add animated flash clock gadget your Blogger blog. A clock gives a beautiful look to a website. A clock is a necessity for a personal website, forum, blog etc.Isn’t it exciting when you get a highly quality flash Clock absolutely Free? you can add this flash animated clock your blog easily.i've tested this Flash Clock on internet explorer, mozzilla firefox & many other web browsers. it's very fast and fresh.You simply have to copy the code below each clock and add it to your blog.

How To Add Aniamted Flash Clock Widget To Blogger?

Choose a type of clock below
Provide Require widget title
Fill Height and Width of the Widget
Click on "Genetate" button
Finally click on "Add to Blogger" to add it to your blog.

Add Animated Flash Clock To Your Blogger blog

Now let's start adding it...

Step 1. Login to Your Blogger Account.Go to your Blogger Dashboard.Click on Layout tab from left pane and click on Add a Gadget link.

Step 2. After click on Add a Gadget link A pop-up box will open now
with many gadget list, Choose HTML/JavaScript from the gadget options by clicking the blue plus sign for that gadget.

Step 3. Select 'HTML/Javascript' and add the one of code given below.

Step 4. Now Click On Save 'JavaScript' You are done.

Happy blogging!

Special Thanks http://flash-clocks.com

Picture From http://www.2dayblog.com/2009/10/19/manual-digital-clock/

22+ Google Flag Translate Widget For Blogger / Blogspot

noreply@blogger.com (admin) — Tue, 23 Apr 2013 07:00:00 +0000

Installing translete on blogs is very necessary because there could be visitors from foreign countries who stray blog you, but that should be taken to ensure that no errors occur then translate your blog must use the official language, not language or slang market.Let your readers easily translate your blog with this highly compact widget. This blog translator is powered by Google Translate. The languages available at the click of a flag are Arabic, Bulgarian, Chinese (simplified and traditional), Croatian, Czech, Danish, Dutch, Finnish, French, German, Greek, Hindi, Italian, Japanese, Korean, Norwegian, Polish, Portuguese, Romanian, Russian, Spanish and Swedish.I hope no one could have seen a huge list anywhere. Now This widget gives your readers easily translate your blog.

How to add the Google Translate Widget to your blog:

Blogger

Now let's start adding it...

Step 1. Login to Your Blogger Account.Go to your Blogger Dashboard.Click on Layout tab from left pane and click on Add a Gadget link.

Step 2. After click on Add a Gadget link A pop-up box will open now
with many gadget list, Choose HTML/JavaScript from the gadget options by clicking the blue plus sign for that gadget.

Step 3. Select 'HTML/Javascript' and add the one of code given below.

Step 4. Now Click On Save 'JavaScript' You are done. ..............

WordPress

1. Login to your Admin panel > Presentation tab > Widgets tab

2. Paste the code into the Text Widget. If there’s no Text Widget available, add one.

3. Add a title. Ex: Translate, Translate this page, Google Translate (Optional)

4. Save.

Joomla site

1. Login to your Admin panel > Modules – Site Modules > click New

2. Paste the code into the Custom Output content box

3. Adjust module details and menu item links if necessary

4. Click Apply or Save.

...............................

Google Flag Translate Widget For Blogger / Blogspot 01

Google Flag Translate Widget For Blogger / Blogspot 02

<div class='24work' style="padding: 3px 3px 3px 3px; text-align: center;">
<div align="center" style="padding:11px 0px 0px 0px;">
<a class="translate-flag" onclick="href='http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto|ar&hl=en'" title="Translate to Arabic" target="_blank"><img border="0" style="cursor: pointer;" src="http://4.bp.blogspot.com/-D36iJZM_O8I/TvLfGVEj4vI/AAAAAAAAAfE/xo7nXajyg3k/s1600/sa-Arabic.png" /></a>
<a class="translate-flag" onclick="href='http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto|ms&hl=en'" title="Translate to Malay" target="_blank"><img border="0" style="cursor: pointer;" src="http://2.bp.blogspot.com/-yd4PRN2Xjpg/TvLe_9j2ICI/AAAAAAAAAeI/qoWOSWedfrQ/s1600/my-Malesia.png" /></a>
<a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Grab this"><img src="https://bitly.com/24workpng" alt="Blogger Tips And Tricks|Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Free Backlinks"><img src="https://bitly.com/24workpng" alt="Free Backlinks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Free"><img src="https://bitly.com/24workpng" alt="Blogger Tips And Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a>
<a class="translate-flag" onclick="href='http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto|zh-CN&hl=en'" title="Translate to Chinese" target="_blank"><img border="0" style="cursor: pointer;" src="http://4.bp.blogspot.com/-AbzprXTIK_Y/TvLe4GqJwQI/AAAAAAAAAdE/Cxnz_qy5cyY/s1600/cn-china.png" /></a>
<a class="translate-flag" onclick="href='http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto|et&hl=en'" title="Translate to Estonian" target="_blank"><img border="0" style="cursor: pointer;" src="http://3.bp.blogspot.com/-i2jy-2iW-YM/TvLe5KTlwMI/AAAAAAAAAdQ/PjhDrTypzaE/s1600/ee-Estonia.png" /></a>
<a class="translate-flag" onclick="href='http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto|fn&hl=en'" title="Translate to Finnish" target="_blank"><img border="0" style="cursor: pointer;" src="http://1.bp.blogspot.com/--RkWlNVMwGU/TvLe5_7pdvI/AAAAAAAAAdc/KoE_Beld8Ps/s1600/fi-Finland.png" /></a>
<a class="translate-flag" onclick="href='http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto|fr&hl=en'" title="Translate to French" target="_blank"><img border="0" style="cursor: pointer;" src="http://3.bp.blogspot.com/-n85FPBfSADw/TvLe7cowf-I/AAAAAAAAAdk/J8EjftuvVZ0/s1600/fr-France.png" /></a>
<a class="translate-flag" onclick="href='http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto|de&hl=en'" title="Translate to German" target="_blank"><img border="0" style="cursor: pointer;" src="http://3.bp.blogspot.com/-37xyQnPsQE4/TvLe4vEYeRI/AAAAAAAAAdI/4h0f8Lr18VQ/s1600/de-German.png" /></a>
<a class="translate-flag" onclick="href='http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto|el&hl=en'" title="Translate to Greek" target="_blank"><img border="0" style="cursor: pointer;" src="http://3.bp.blogspot.com/-BHht5b3nGlI/TvLe8Qy5fdI/AAAAAAAAAds/r55OasvuGag/s1600/gr-Greek.png" /></a>
<a class="translate-flag" onclick="href='http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto|hi&hl=en'" title="Translate to Hindi" target="_blank"><img border="0" style="cursor: pointer;" src="http://2.bp.blogspot.com/-5D2Z6Kn8_Rg/TvLe9362OCI/AAAAAAAAAd4/UOxbPWwUexU/s1600/in-Hindi.png" /></a>
<a class="translate-flag" onclick="href='http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto|id&hl=en'" title="Translate to Indonasian" target="_blank"><img border="0" style="cursor: pointer;" src="http://3.bp.blogspot.com/-UpErgjyGc-s/TvLe9eUBvBI/AAAAAAAAAd0/gk9RTGGG_50/s1600/id-Indonesia.png" /></a>
<a class="translate-flag" onclick="href='http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto|it&hl=en'" title="Translate to Italian" target="_blank"><img border="0" style="cursor: pointer;" src="http://3.bp.blogspot.com/-Q0386DleJ40/TvLe-nunqOI/AAAAAAAAAd8/L8Xj8YoDXCg/s1600/it-Italy.png" /></a>
<a class="translate-flag" onclick="href='http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto|ja&hl=en'" title="Translate to Japanese" target="_blank"><img border="0" style="cursor: pointer;" src="http://1.bp.blogspot.com/-TdmTlXoEloQ/TvLe_e44tLI/AAAAAAAAAeA/AZrNux98XVI/s1600/jp-Japan.png" /></a>
<a class="translate-flag" onclick="href='http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto|fa&hl=en'" title="Translate to Persian" target="_blank"><img border="0" style="cursor: pointer;" src="http://2.bp.blogspot.com/-Xh9eTlna-sA/TvLfAnQA8jI/AAAAAAAAAeQ/PkfRxUs-N-0/s1600/ne-Niger.png" /></a>
<a class="translate-flag" onclick="href='http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto|no&hl=en'" title="Translate to Norwegian" target="_blank"><img border="0" style="cursor: pointer;" src="http://3.bp.blogspot.com/-UgO7EMT6Bpk/TvLfBW61DuI/AAAAAAAAAec/BYaoRX0rl0k/s1600/no-Norway.png" /></a>
<a class="translate-flag" onclick="href='http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto|pt&hl=en'" title="Translate to Portuguese" target="_blank"><img border="0" style="cursor: pointer;" src="http://3.bp.blogspot.com/-15HJuleYwiY/TvLfCLdy5BI/AAAAAAAAAeo/eaT0k6YkglQ/s1600/pt-Portugeese.png" /></a>
<a class="translate-flag" onclick="href='http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto|ro&hl=en'" title="Translate to Romanian" target="_blank"><img border="0" style="cursor: pointer;" src="http://2.bp.blogspot.com/-hVnmm-D3RBw/TvLfDKgAyBI/AAAAAAAAAew/pTA1b-sQvOg/s1600/ro-Romania.png" /></a>
<a class="translate-flag" onclick="href='http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto|ru&hl=en'" title="Translate to Russian" target="_blank"><img border="0" style="cursor: pointer;" src="http://2.bp.blogspot.com/-_XB2B1UQ2_g/TvLfEbhw7AI/AAAAAAAAAe8/cJJAk24Bgx4/s1600/ru-Russia.png" /></a>
<a class="translate-flag" onclick="href='http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto|sk&hl=en'" title="Translate to Slovak" target="_blank"><img border="0" style="cursor: pointer;" src="http://3.bp.blogspot.com/-6N1uVI8mlGY/TvLfIcIfPGI/AAAAAAAAAfU/0v9gbOEjIY4/s1600/sk-Slovakia.png" /></a>
<a class="translate-flag" onclick="href='http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto|sw&hl=en'" title="Translate to Swedish" target="_blank"><img border="0" style="cursor: pointer;" src="http://1.bp.blogspot.com/-SuZ9iG52m80/TvLfHVpFIAI/AAAAAAAAAfM/_aSXAagCuSE/s1600/se-Sweedan.png" /></a>
<a class="translate-flag" onclick="href='http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto|th&hl=en'" title="Translate to Thai" target="_blank"><img border="0" style="cursor: pointer;" src="http://2.bp.blogspot.com/-IWdIovUKGqI/TvLfJUUUtMI/AAAAAAAAAfc/8l55NV5MRr0/s1600/th-Thailand.png" /></a>
<a class="translate-flag" onclick="href='http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto|tr&hl=en'" title="Translate to Turkish" target="_blank"><img border="0" style="cursor: pointer;" src="http://2.bp.blogspot.com/-Hg-ylc9PnuI/TvLfKUewRkI/AAAAAAAAAfk/dJxjj_FNY1g/s1600/tr-Turkey.png" /></a>
<a class="translate-flag" onclick="href='http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto|vi&hl=en'" title="Translate to Viatnamese" target="_blank"><img border="0" style="cursor: pointer;" src="http://1.bp.blogspot.com/-iXBOrWcAZnA/TvLfK79pxLI/AAAAAAAAAfs/vdalhxuqmIE/s1600/vn-Viet+nam.png" /> </a>
</div></div><div style="text-align:center;width:200px;height:20px;"> <small>↑ Google Translator</small>
</div>

Google Flag Translate Widget For Blogger / Blogspot 03

<form action="http://www.google.com/translate"><script language="javascript" type="text/javascript"><br /><br /></script><input name="u" type="hidden" value="http://YOUR_BLOG_ADDRESS" />
<noscript>&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;input value="http://24works.blogspot.com" name="u" type="hidden"/&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;</noscript> <input name="hl" type="hidden" value="en" /> <input name="ie" type="hidden" value="UTF8" /> <input name="langpair" type="hidden" value="" />
<center>
<table border="1"><tbody><tr> <td>
<input height="20" name="langpair" src="http://2.bp.blogspot.com/-XmSBchMAmEY/UQ-YHMR4eYI/AAAAAAAAFmw/g7JEwDDGb9M/s1600/Andorra%2B-%2BCatalan.%2B%2Bda.%2Bflag.png" title="Andorra / Catalan" type="image" value="en|ca" width="30" onclick="this.form.langpair.value=this.value" /> | <input height="20" name="langpair" src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/358406/gse_multipart12399.png" title="العربية / Arabic" type="image" value="en|ar" width="30" onclick="this.form.langpair.value=this.value" /> | <input height="20" name="langpair" src="http://2.bp.blogspot.com/-HCYlnjvvqXQ/UQ-TwFTkEAI/AAAAAAAAFmc/yJ5sdg349N8/s1600/Bulgaria%2Bbg%2Bflag.png" title=" България / Bulgaria" type="image" value="en|bg" width="30" onclick="this.form.langpair.value=this.value" /> | <input height="20" name="langpair" src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/546049/gse_multipart12397.png" title="中文（简体） / Chinese (Simplified)" type="image" value="en|zh-CN" width="30" onclick="this.form.langpair.value=this.value" /> | <input height="20" name="langpair" src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/208681/gse_multipart12398.png" title="中文（繁体） / Chinese (Traditional)" type="image" value="en|zh-TW" width="30" onclick="this.form.langpair.value=this.value" /> | <input height="20" name="langpair" src="http://4.bp.blogspot.com/-Ewiie0npl3M/URAS8VyME8I/AAAAAAAAFnE/HwlCC2bThaQ/s1600/Croatia.hr.flag.png" title="Hrvatska / Croatian" type="image" value="en|hr" width="30" onclick="this.form.langpair.value=this.value" /> | <input height="20" name="langpair" src="http://4.bp.blogspot.com/-Fx5vNXNmGRU/URAU33x-KrI/AAAAAAAAFnQ/lXBrRT99Ve8/s1600/Czech_Republic.cz.flag.png" title="Česká Republika / Czech Republic " type="image" value="en|cs" width="30" onclick="this.form.langpair.value=this.value" /> |
<a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Grab this"><img src="https://bitly.com/24workpng" alt="Blogger Tips And Tricks|Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Free Backlinks"><img src="https://bitly.com/24workpng" alt="Free Backlinks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Free"><img src="https://bitly.com/24workpng" alt="Blogger Tips And Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a>
<input height="20" name="langpair" src="http://2.bp.blogspot.com/-bvOQeqC7h3I/URAW3esi3MI/AAAAAAAAFnc/J-6kng2pVQ4/s1600/Denmark.dk.flag.png" title="Danmark / Denmark" type="image" value="en|da" width="30" onclick="this.form.langpair.value=this.value" /> | <input height="20" name="langpair" src="http://3.bp.blogspot.com/-jOjTYDYcORE/URAa-C045oI/AAAAAAAAFn0/VLSGIf5bAVg/s1600/Finland.fi.flag.png" title="Suomi / Finnish" type="image" value="en|fi" width="30" onclick="this.form.langpair.value=this.value" /> | <input height="20" name="langpair" src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/327620/gse_multipart12413.png" title="Français / French" type="image" value="en|fr" width="30" onclick="this.form.langpair.value=this.value" /> | <input height="20" name="langpair" src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/734899/gse_multipart12400.png" title="Deutsch / German" type="image" value="en|de" width="30" onclick="this.form.langpair.value=this.value" /> | <input height="20" name="langpair" src="http://4.bp.blogspot.com/_pzC_7PLtN-0/R7CKOqA_bjI/AAAAAAAAA8A/7bmPVwaFDcQ/s320/Greek+Flag+36x24.png" title="Ελλάς / Greek" type="image" value="en|el" width="30" onclick="this.form.langpair.value=this.value" /> | <input height="20" name="langpair" src="http://4.bp.blogspot.com/-857UiinU6GA/URAkNp03poI/AAAAAAAAFoM/H3eCPhSK_4o/s1600/Israel.il.flag.png" title="ישראל / Hebrew" type="image" value="en|iw" width="30" onclick="this.form.langpair.value=this.value" /> |
<input height="20" name="langpair" src="http://4.bp.blogspot.com/-o9baXqasnbY/URAmxu9D1vI/AAAAAAAAFog/nFAQ72IEncI/s1600/India.in.flag.png" title="Hindi / India" type="image" value="en|hi" width="30" onclick="this.form.langpair.value=this.value" /> | <input height="20" name="langpair" src="http://3.bp.blogspot.com/-iebG-eopl2g/URAoV9MJiLI/AAAAAAAAFos/aQo2o5W-ros/s1600/Indonesia.id.flag.png" title="Bahasa / Indonesian" type="image" value="en|id" width="30" onclick="this.form.langpair.value=this.value" /> | <input height="20" name="langpair" src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/306145/gse_multipart12401.png" title="Italiano / Italian" type="image" value="en|it" width="30" onclick="this.form.langpair.value=this.value" /> | <input height="20" name="langpair" src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/443122/gse_multipart12402.png" title="日本語 / Japanese" type="image" value="en|ja" width="30" onclick="this.form.langpair.value=this.value" /> | <input height="20" name="langpair" src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/581031/gse_multipart12403.png" title="한국어 / Korean" type="image" value="en|ko" width="30" onclick="this.form.langpair.value=this.value" /> | <input height="20" name="langpair" src="http://1.bp.blogspot.com/-ixXE8W-sjbU/URAqMSY1YEI/AAAAAAAAFo4/w9zaIHK3Bv4/s1600/Latvia.lv.flag.png" title="Latvija / Latvian" type="image" value="en|lv" width="30" onclick="this.form.langpair.value=this.value" /> | <input height="20" name="langpair" src="http://2.bp.blogspot.com/-taul66x8QsI/URArYRRuZ2I/AAAAAAAAFpE/Rs0tTs14E_A/s1600/Lithuania.lt.flag.png" title="Lietuvos / Lithuania" type="image" value="en|lt" width="30" onclick="this.form.langpair.value=this.value" /> |
<input height="20" name="langpair" src="http://3.bp.blogspot.com/-w4lul2m6axI/URAZUWTXj9I/AAAAAAAAFno/q5F3OpCYJhw/s1600/Netherlands.nl.flag.png" title="Nederland / Dutch" type="image" value="en|nl" width="30" onclick="this.form.langpair.value=this.value" /> | <input height="20" name="langpair" src="http://3.bp.blogspot.com/-cCJ6g1-2dIY/URAsxng6fJI/AAAAAAAAFpQ/zjADA2D6pRI/s1600/Norway.no.flag.png" title="Norge / Norwegian" type="image" value="en|no" width="30" onclick="this.form.langpair.value=this.value" /> | <input height="20" name="langpair" src="http://3.bp.blogspot.com/-E0voo_iD314/URA6qrB20WI/AAAAAAAAFqM/oF8oc5H5iGQ/s1600/Philippines.ph.flag.png" title="Pilipinas / Philipines" type="image" value="en|tl" width="30" onclick="this.form.langpair.value=this.value" /> | <input height="20" name="langpair" src="http://2.bp.blogspot.com/_pzC_7PLtN-0/R7CAvKA_bgI/AAAAAAAAA7o/pKLqrW8EpD4/s320/Polish+Flag+36x24.png" title="Polska / Polish" type="image" value="en|pl" width="30" onclick="this.form.langpair.value=this.value" /> | <input height="20" name="langpair" src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/670301/gse_multipart12404.png" title="Português / Portuguese" type="image" value="en|pt" width="30" onclick="this.form.langpair.value=this.value" /> | <input height="20" name="langpair" src="http://3.bp.blogspot.com/_pzC_7PLtN-0/R7CAvaA_bhI/AAAAAAAAA7w/HTWQoR8M6lQ/s320/Romainian+Flag+36x24.png" title="România / Romanian" type="image" value="en|ro" width="30" onclick="this.form.langpair.value=this.value" /> | <input height="20" name="langpair" src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/111692/gse_multipart12405.png" title="Русский / Russian" type="image" value="en|ru" width="30" onclick="this.form.langpair.value=this.value" /> |
<input height="20" name="langpair" src="http://4.bp.blogspot.com/-4fg_z8d4Wys/URA3ke8MYPI/AAAAAAAAFpc/fDbatr6pSAc/s1600/Serbia.rs.flag.png" title="Србија / Serbia" type="image" value="en|sr" width="30" onclick="this.form.langpair.value=this.value" /> | <input height="20" name="langpair" src="http://4.bp.blogspot.com/-ChKhP8iWQd8/URA3kkhDPuI/AAAAAAAAFpo/yld9GoCW0C0/s1600/Slovakia.sk.flag.png" title="Slovenčina / Slovak" type="image" value="en|sk" width="30" onclick="this.form.langpair.value=this.value" /> | <input height="20" name="langpair" src="http://4.bp.blogspot.com/-MYEjpXNOaoA/URA3lJJVQkI/AAAAAAAAFp0/aN7IVVnYfPk/s1600/Slovenia.sl.flag.png" title="Slovenija / Slovenia" type="image" value="en|sl" width="30" onclick="this.form.langpair.value=this.value" /> | <input height="20" name="langpair" src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/998398/gse_multipart12407.png" title="Español / Spanish" type="image" value="en|es" width="30" onclick="this.form.langpair.value=this.value" /> | <input height="20" name="langpair" src="http://1.bp.blogspot.com/-uPkpSxUDT-4/URA6qfptcKI/AAAAAAAAFqA/vlyjJ3zgyOw/s1600/Sweden.se.flag.png" title="Sverige / Swedish" type="image" value="en|sv" width="30" onclick="this.form.langpair.value=this.value" /> | <input height="20" name="langpair" src="http://3.bp.blogspot.com/-X97YdOZMLyg/URA9PvvSwOI/AAAAAAAAFqY/EMnrpA0i5qU/s1600/Ukraine.ua.flag.png" title="Україна / Ukraine" type="image" value="en|uk" width="30" onclick="this.form.langpair.value=this.value" /> | <input height="20" name="langpair" src="http://4.bp.blogspot.com/-IbnoMZYDrGY/URA9QOLh5UI/AAAAAAAAFqk/uZlSGs-9rHM/s1600/Vietnam.vn.flag.png" title="tiếng Việt / Vietnam" type="image" value="en|vi" width="30" onclick="this.form.langpair.value=this.value" /></td> </tr></tbody></table></center></form>

Google Flag Translate Widget For Blogger / Blogspot 04

<center><b>Google Translate</b></center><style> .google_translate img { filter:alpha(opacity=100); -moz-opacity: 1.0; opacity: 1.0; } .google_translate:hover img { filter:alpha(opacity=30); -moz-opacity: 0.30; opacity: 0.30; } .google_translatextra:hover img { filter:alpha(opacity=0.30); -moz-opacity: 0.30; opacity: 0.30; }</style><center><a class="google_translate" title="Arabic" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Car&hl=en'); return false;" href="#" target="_blank" rel="nofollow"><img title="Arabic" style="cursor: pointer; margin-right: 3px" alt="Arabic" src="http://2.bp.blogspot.com/-LBd1ypE8JOY/Tvb8gDKM52I/AAAAAAAAAh0/jelMzYlgCig/s1600/arabic.gif" align="absBottom" border="0" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Grab this"><img src="https://bitly.com/24workpng" alt="Blogger Tips And Tricks|Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Free Backlinks"><img src="https://bitly.com/24workpng" alt="Free Backlinks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Free"><img src="https://bitly.com/24workpng" alt="Blogger Tips And Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a> <a class="google_translate" title="Korean" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cko&hl=en'); return false;" href="#" target="_blank" rel="nofollow"><img title="Korean" style="cursor: pointer; margin-right: 3px" alt="Korean" src="http://2.bp.blogspot.com/-vn5pYYCgXJE/Tvb8laDGbXI/AAAAAAAAAig/8TT_o0LLrZA/s1600/korean.gif" align="absBottom" border="0" /></a> <a class="google_translate" title="Japanese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cja&hl=en'); return false;" href="#" target="_blank" rel="nofollow"><img title="Japanese" style="cursor: pointer; margin-right: 3px" alt="Japanese" src="http://3.bp.blogspot.com/-h0ahP2ouIq0/Tvb8kCB39PI/AAAAAAAAAic/D4YE0MnD8ag/s1600/korea.gif" align="absBottom" border="0" /></a> <a class="google_translate" title="Chinese Simplified" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Czh-CN&hl=en'); return false;" href="#" target="_blank" rel="nofollow"><img title="Chinese Simplified" style="cursor: pointer; margin-right: 3px" alt="Chinese Simplified" src="http://3.bp.blogspot.com/-Bv19O98JgEQ/Tvb8mjsRAEI/AAAAAAAAAis/g2ImKciX-nQ/s1600/pinginbelajarchina.gif" align="absBottom" border="0" /></a> <a class="google_translate" title="Russian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cru&hl=en'); return false;" href="#" target="_blank" rel="nofollow"><img title="Russian" style="cursor: pointer; margin-right: 3px" alt="Russian" src="http://4.bp.blogspot.com/-nYPIZdA7xYw/Tvb8pJLVQwI/AAAAAAAAAjE/fM3yoNbo7e0/s1600/russian.gif" align="absBottom" border="0" /></a> <a class="google_translate" title="Portuguese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cpt&hl=en'); return false;" href="#" target="_blank" rel="nofollow"><img title="Portuguese" style="cursor: pointer; margin-right: 0px" alt="Portuguese" src="http://2.bp.blogspot.com/-d7eUmq5EoZ0/Tvb8oaMgYBI/AAAAAAAAAi4/ZQ7cK136ULg/s1600/portuguese.gif" align="absBottom" border="0" /></a> </center> <center><a class="google_translate" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cen&hl=en'); return false;" href="#" target="_blank" rel="nofollow"><img title="English" style="cursor: pointer; margin-right: 3px" alt="English" src="http://2.bp.blogspot.com/-v3MDOLU-eyw/Tvb8h7ahzEI/AAAAAAAAAiE/H9Hf7gV7XPw/s1600/english.gif" align="absBottom" border="0" /></a> <a class="google_translate" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cfr&hl=en'); return false;" href="#" target="_blank" rel="nofollow"><img title="French" style="cursor: pointer; margin-right: 3px" alt="French" src="http://3.bp.blogspot.com/-9SLpHDntAN8/Tvb8ng1sHWI/AAAAAAAAAi0/cHi2whH_Y78/s1600/pinginbelajarfrance.gif" align="absBottom" border="0" /></a> <a class="google_translate" title="German" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cde&hl=en'); return false;" href="#" target="_blank" rel="nofollow"><img title="German" style="cursor: pointer; margin-right: 3px" alt="German" src="http://3.bp.blogspot.com/-ZOAFEguhr-c/Tvb8imJEf0I/AAAAAAAAAiM/Ksy9nFFHiOM/s1600/german.gif" align="absBottom" border="0" /></a> <a class="google_translate" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Ces&hl=en'); return false;" href="#" target="_blank" rel="nofollow"><img title="Spain" style="cursor: pointer; margin-right: 3px" alt="Spain" src="http://4.bp.blogspot.com/-mqdJx7vj5ds/Tvb8qR4AFoI/AAAAAAAAAjM/uSw80yl7hJ0/s1600/spain.gif" align="absBottom" border="0" /></a> <a class="google_translate" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cit&hl=en'); return false;" href="#" target="_blank" rel="nofollow"><img title="Italian" style="cursor: pointer; margin-right: 3px" alt="Italian" src="http://1.bp.blogspot.com/-E7wj8VKDYBY/Tvb8jc33l8I/AAAAAAAAAiQ/62Ow6YLZa9I/s1600/italian.gif" align="absBottom" border="0" /></a> <a class="google_translate" title="Dutch" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cnl&hl=en'); return false;" href="#" target="_blank" rel="nofollow"><img title="Dutch" style="cursor: pointer; margin-right: 0px" alt="Dutch" src="http://2.bp.blogspot.com/-y7ZdBeuouxI/Tvb8gzJuKoI/AAAAAAAAAh8/yo0CyckbeA0/s1600/dutch.gif" align="absBottom" border="0" /></a> </center>

Google Flag Translate Widget For Blogger / Blogspot 05

<center><b>Google Translate</b></center><style> .google_translate img { filter:alpha(opacity=100); -moz-opacity: 1.0; opacity: 1.0; } .google_translate:hover img { filter:alpha(opacity=30); -moz-opacity: 0.30; opacity: 0.30; } .google_translatextra:hover img { filter:alpha(opacity=0.30); -moz-opacity: 0.30; opacity: 0.30; }</style> <center><a class="google_translate" title="Arabic" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Car&hl=en'); return false;" href="#" target="_blank" rel="nofollow"><img title="Arabic" style="cursor: pointer; margin-right: 3px" alt="Arabic" src="http://2.bp.blogspot.com/-LBd1ypE8JOY/Tvb8gDKM52I/AAAAAAAAAh0/jelMzYlgCig/s1600/arabic.gif" align="absBottom" border="0" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Grab this"><img src="https://bitly.com/24workpng" alt="Blogger Tips And Tricks|Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Free Backlinks"><img src="https://bitly.com/24workpng" alt="Free Backlinks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Free"><img src="https://bitly.com/24workpng" alt="Blogger Tips And Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a> <a class="google_translate" title="Korean" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cko&hl=en'); return false;" href="#" target="_blank" rel="nofollow"><img title="Korean" style="cursor: pointer; margin-right: 3px" alt="Korean" src="http://2.bp.blogspot.com/-vn5pYYCgXJE/Tvb8laDGbXI/AAAAAAAAAig/8TT_o0LLrZA/s1600/korean.gif" align="absBottom" border="0" /></a> <a class="google_translate" title="Japanese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cja&hl=en'); return false;" href="#" target="_blank" rel="nofollow"><img title="Japanese" style="cursor: pointer; margin-right: 3px" alt="Japanese" src="http://3.bp.blogspot.com/-h0ahP2ouIq0/Tvb8kCB39PI/AAAAAAAAAic/D4YE0MnD8ag/s1600/korea.gif" align="absBottom" border="0" /></a> <a class="google_translate" title="Chinese Simplified" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Czh-CN&hl=en'); return false;" href="#" target="_blank" rel="nofollow"><img title="Chinese Simplified" style="cursor: pointer; margin-right: 3px" alt="Chinese Simplified" src="http://3.bp.blogspot.com/-Bv19O98JgEQ/Tvb8mjsRAEI/AAAAAAAAAis/g2ImKciX-nQ/s1600/pinginbelajarchina.gif" align="absBottom" border="0" /></a></center> <center> <a class="google_translate" title="Russian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cru&hl=en'); return false;" href="#" target="_blank" rel="nofollow"><img title="Russian" style="cursor: pointer; margin-right: 3px" alt="Russian" src="http://4.bp.blogspot.com/-nYPIZdA7xYw/Tvb8pJLVQwI/AAAAAAAAAjE/fM3yoNbo7e0/s1600/russian.gif" align="absBottom" border="0" /></a> <a class="google_translate" title="Portuguese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cpt&hl=en'); return false;" href="#" target="_blank" rel="nofollow"><img title="Portuguese" style="cursor: pointer; margin-right: 0px" alt="Portuguese" src="http://2.bp.blogspot.com/-d7eUmq5EoZ0/Tvb8oaMgYBI/AAAAAAAAAi4/ZQ7cK136ULg/s1600/portuguese.gif" align="absBottom" border="0" /></a> <a class="google_translate" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cen&hl=en'); return false;" href="#" target="_blank" rel="nofollow"><img title="English" style="cursor: pointer; margin-right: 3px" alt="English" src="http://2.bp.blogspot.com/-v3MDOLU-eyw/Tvb8h7ahzEI/AAAAAAAAAiE/H9Hf7gV7XPw/s1600/english.gif" align="absBottom" border="0" /></a> <a class="google_translate" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cfr&hl=en'); return false;" href="#" target="_blank" rel="nofollow"><img title="French" style="cursor: pointer; margin-right: 3px" alt="French" src="http://3.bp.blogspot.com/-9SLpHDntAN8/Tvb8ng1sHWI/AAAAAAAAAi0/cHi2whH_Y78/s1600/pinginbelajarfrance.gif" align="absBottom" border="0" /></a></center> <center> <a class="google_translate" title="German" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cde&hl=en'); return false;" href="#" target="_blank" rel="nofollow"><img title="German" style="cursor: pointer; margin-right: 3px" alt="German" src="http://3.bp.blogspot.com/-ZOAFEguhr-c/Tvb8imJEf0I/AAAAAAAAAiM/Ksy9nFFHiOM/s1600/german.gif" align="absBottom" border="0" /></a> <a class="google_translate" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Ces&hl=en'); return false;" href="#" target="_blank" rel="nofollow"><img title="Spain" style="cursor: pointer; margin-right: 3px" alt="Spain" src="http://4.bp.blogspot.com/-mqdJx7vj5ds/Tvb8qR4AFoI/AAAAAAAAAjM/uSw80yl7hJ0/s1600/spain.gif" align="absBottom" border="0" /></a> <a class="google_translate" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cit&hl=en'); return false;" href="#" target="_blank" rel="nofollow"><img title="Italian" style="cursor: pointer; margin-right: 3px" alt="Italian" src="http://1.bp.blogspot.com/-E7wj8VKDYBY/Tvb8jc33l8I/AAAAAAAAAiQ/62Ow6YLZa9I/s1600/italian.gif" align="absBottom" border="0" /></a> <a class="google_translate" title="Dutch" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cnl&hl=en'); return false;" href="#" target="_blank" rel="nofollow"><img title="Dutch" style="cursor: pointer; margin-right: 0px" alt="Dutch" src="http://2.bp.blogspot.com/-y7ZdBeuouxI/Tvb8gzJuKoI/AAAAAAAAAh8/yo0CyckbeA0/s1600/dutch.gif" align="absBottom" border="0" /></a> </center>

Google Flag Translate Widget For Blogger / Blogspot 06

<center><b>Google Translate</b></center><style> .google_translate img { filter:alpha(opacity=100); -moz-opacity: 1.0; opacity: 1.0; } .google_translate:hover img { filter:alpha(opacity=30); -moz-opacity: 0.30; opacity: 0.30; } .google_translatextra:hover img { filter:alpha(opacity=0.30); -moz-opacity: 0.30; opacity: 0.30; }</style><center><a class="google_translate" title="Arabic" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Car&hl=en'); return false;" href="#" target="_blank" rel="nofollow"><img title="Arabic" style="cursor: pointer; margin-right: 3px" alt="Arabic" src="http://2.bp.blogspot.com/-LBd1ypE8JOY/Tvb8gDKM52I/AAAAAAAAAh0/jelMzYlgCig/s1600/arabic.gif" align="absBottom" border="0" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Grab this"><img src="https://bitly.com/24workpng" alt="Blogger Tips And Tricks|Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Free Backlinks"><img src="https://bitly.com/24workpng" alt="Free Backlinks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Free"><img src="https://bitly.com/24workpng" alt="Blogger Tips And Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a> <a class="google_translate" title="Korean" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cko&hl=en'); return false;" href="#" target="_blank" rel="nofollow"><img title="Korean" style="cursor: pointer; margin-right: 3px" alt="Korean" src="http://2.bp.blogspot.com/-vn5pYYCgXJE/Tvb8laDGbXI/AAAAAAAAAig/8TT_o0LLrZA/s1600/korean.gif" align="absBottom" border="0" /></a> <a class="google_translate" title="Japanese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cja&hl=en'); return false;" href="#" target="_blank" rel="nofollow"><img title="Japanese" style="cursor: pointer; margin-right: 3px" alt="Japanese" src="http://3.bp.blogspot.com/-h0ahP2ouIq0/Tvb8kCB39PI/AAAAAAAAAic/D4YE0MnD8ag/s1600/korea.gif" align="absBottom" border="0" /></a></center> <center> <a class="google_translate" title="Chinese Simplified" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Czh-CN&hl=en'); return false;" href="#" target="_blank" rel="nofollow"><img title="Chinese Simplified" style="cursor: pointer; margin-right: 3px" alt="Chinese Simplified" src="http://3.bp.blogspot.com/-Bv19O98JgEQ/Tvb8mjsRAEI/AAAAAAAAAis/g2ImKciX-nQ/s1600/pinginbelajarchina.gif" align="absBottom" border="0" /></a><a class="google_translate" title="Russian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cru&hl=en'); return false;" href="#" target="_blank" rel="nofollow"><img title="Russian" style="cursor: pointer; margin-right: 3px" alt="Russian" src="http://4.bp.blogspot.com/-nYPIZdA7xYw/Tvb8pJLVQwI/AAAAAAAAAjE/fM3yoNbo7e0/s1600/russian.gif" align="absBottom" border="0" /></a> <a class="google_translate" title="Portuguese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cpt&hl=en'); return false;" href="#" target="_blank" rel="nofollow"><img title="Portuguese" style="cursor: pointer; margin-right: 0px" alt="Portuguese" src="http://2.bp.blogspot.com/-d7eUmq5EoZ0/Tvb8oaMgYBI/AAAAAAAAAi4/ZQ7cK136ULg/s1600/portuguese.gif" align="absBottom" border="0" /></a> </center> <center><a class="google_translate" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cen&hl=en'); return false;" href="#" target="_blank" rel="nofollow"><img title="English" style="cursor: pointer; margin-right: 3px" alt="English" src="http://2.bp.blogspot.com/-v3MDOLU-eyw/Tvb8h7ahzEI/AAAAAAAAAiE/H9Hf7gV7XPw/s1600/english.gif" align="absBottom" border="0" /></a> <a class="google_translate" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cfr&hl=en'); return false;" href="#" target="_blank" rel="nofollow"><img title="French" style="cursor: pointer; margin-right: 3px" alt="French" src="http://3.bp.blogspot.com/-9SLpHDntAN8/Tvb8ng1sHWI/AAAAAAAAAi0/cHi2whH_Y78/s1600/pinginbelajarfrance.gif" align="absBottom" border="0" /></a> <a class="google_translate" title="German" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cde&hl=en'); return false;" href="#" target="_blank" rel="nofollow"><img title="German" style="cursor: pointer; margin-right: 3px" alt="German" src="http://3.bp.blogspot.com/-ZOAFEguhr-c/Tvb8imJEf0I/AAAAAAAAAiM/Ksy9nFFHiOM/s1600/german.gif" align="absBottom" border="0" /></a></center> <center> <a class="google_translate" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Ces&hl=en'); return false;" href="#" target="_blank" rel="nofollow"><img title="Spain" style="cursor: pointer; margin-right: 3px" alt="Spain" src="http://4.bp.blogspot.com/-mqdJx7vj5ds/Tvb8qR4AFoI/AAAAAAAAAjM/uSw80yl7hJ0/s1600/spain.gif" align="absBottom" border="0" /></a> <a class="google_translate" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cit&hl=en'); return false;" href="#" target="_blank" rel="nofollow"><img title="Italian" style="cursor: pointer; margin-right: 3px" alt="Italian" src="http://1.bp.blogspot.com/-E7wj8VKDYBY/Tvb8jc33l8I/AAAAAAAAAiQ/62Ow6YLZa9I/s1600/italian.gif" align="absBottom" border="0" /></a> <a class="google_translate" title="Dutch" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cnl&hl=en'); return false;" href="#" target="_blank" rel="nofollow"><img title="Dutch" style="cursor: pointer; margin-right: 0px" alt="Dutch" src="http://2.bp.blogspot.com/-y7ZdBeuouxI/Tvb8gzJuKoI/AAAAAAAAAh8/yo0CyckbeA0/s1600/dutch.gif" align="absBottom" border="0" /></a> </center>

Google Flag Translate Widget For Blogger / Blogspot 07

Google Flag Translate Widget For Blogger / Blogspot 08

Google Flag Translate Widget For Blogger / Blogspot 09

<div class='24work' style="padding: 3px 3px 3px 3px; text-align: center;">

<div align="left">
<a style="cursor: pointer;" target="_blank" rel="nofollow" title="Google-Translate-English to Chinese (Simplified) " onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Czh-CN&hl=en&ie=UTF8'); return false;"><img alt="Chinese" border="0" align="absbottom" title="Google-Translate-Chinese (Simplified) BETA" height="24" src="http://1.bp.blogspot.com/-471V_cK43CA/TvHYKf03MFI/AAAAAAAAAXA/IgeMdy20D1Q/s1600/chineeseoq9.png" style="cursor: pointer;" width="24"/></a>
<a style="cursor: pointer;" target="_blank" rel="nofollow" title="Google-Translate-English to French " onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cfr&hl=en&ie=UTF8'); return false;"><img alt="French" border="0" align="absbottom" title="Google-Translate-English to French " height="24" src="http://2.bp.blogspot.com/-Aj2a7KE5ASo/TvHYLaZ1H7I/AAAAAAAAAXI/KmEaMlDI_6I/s1600/frenchflagkf9.png" style="cursor: pointer;" width="24"/></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Grab this"><img src="https://bitly.com/24workpng" alt="Blogger Tips And Tricks|Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Free Backlinks"><img src="https://bitly.com/24workpng" alt="Free Backlinks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Free"><img src="https://bitly.com/24workpng" alt="Blogger Tips And Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a>
<a style="cursor: pointer;" target="_blank" rel="nofollow" title="Google-Translate-English to German" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cde&hl=en&ie=UTF8'); return false;"><img alt="German" border="0" align="absbottom" title="Google-Translate-English to German" height="24" src="http://1.bp.blogspot.com/-kQRJsgWSpdw/TvHYMEeuZoI/AAAAAAAAAXQ/g01198DM-4k/s1600/germanke6.png" style="cursor: pointer;" width="24"/></a>
<a style="cursor: pointer;" target="_blank" rel="nofollow" title="Google-Translate-English to Japanese BETA" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cja&hl=en&ie=UTF8'); return false;"><img alt="Japanese" border="0" align="absbottom" title="Google-Translate-English to Japanese BETA" height="24" src="http://1.bp.blogspot.com/-mTOA5OG3jZ4/TvHYOSgWEiI/AAAAAAAAAXg/aLFkNflkW_U/s1600/japaneseyq6.png" style="cursor: pointer;" width="24"/></a>
<a style="cursor: pointer;" target="_blank" rel="nofollow" title="Google-Translate-English to Korean BETA" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cko&hl=en&ie=UTF8'); return false;"><img alt="Korean" border="0" align="absbottom" title="Google-Translate-English to Korean BETA" height="24" src="http://3.bp.blogspot.com/-jFu2N-MJGVw/TvHdicxv8rI/AAAAAAAAAYA/INCS5g-MyvE/s1600/koreanfa6.png" style="cursor: pointer;" width="24"/></a>
<a style="cursor: pointer;" target="_blank" rel="nofollow" title="Google-Translate-English to Russian BETA " onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cru&hl=en&ie=UTF8'); return false;"><img alt="Russian" border="0" align="absbottom" title="Google-Translate-English to Russian BETA " height="24" src="http://4.bp.blogspot.com/-E70ZponbVzs/TvHYQewYrGI/AAAAAAAAAXw/D3lKzProfLw/s1600/russianvr7.png" style="cursor: pointer;" width="24"/></a>
<a style="cursor: pointer;" target="_blank" rel="nofollow" title="Google-Translate-English to Spanish " onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Ces&hl=en&ie=UTF8'); return false;"><img alt="Spanish" border="0" align="absbottom" title="Google-Translate-English to Spanish " height="24" src="http://2.bp.blogspot.com/-fEiHxI6Hvpc/TvHcLto_sGI/AAAAAAAAAX4/azDiRN6SlHs/s1600/spanishvq3.png" style="cursor: pointer;" width="24"/></a>
</div>
<div style="float: left;">
<sup> Powered By </sup><img style="border:none;" alt="google" src="http://2.bp.blogspot.com/-FptNG7_IHrc/TvHYNWbc_vI/AAAAAAAAAXY/7Uk5p1u4b0c/s1600/googlelogode0kn0.png" class="gsc-branding-img-noclear" title="Google Translation Widget"/> </div>
</div>

Google Flag Translate Widget For Blogger / Blogspot 10

Google Flag Translate Widget For Blogger / Blogspot 11

Google Flag Translate Widget For Blogger / Blogspot 12

Google Flag Translate Widget For Blogger / Blogspot 13

Google Flag Translate Widget For Blogger / Blogspot 14

Google Flag Translate Widget For Blogger / Blogspot 15

Google Flag Translate Widget For Blogger / Blogspot 16

Google Flag Translate Widget For Blogger / Blogspot 17

<div style="border:0px dotted #ccc;padding:3px 3px 3px 0px;background-color:none;margin:7px 0 7px 0;">


<div align="left">

<a target="_blank" rel="nofollow" style="cursor:pointer; cursor:hand;" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Czh-CN&hl=en&ie=UTF8'); return false;" title="Google-Translate-Chinese (Simplified) BETA"><img border="0" style="cursor:pointer; cursor:hand;" width="19" align="absbottom" alt="Google-Translate-Chinese (Simplified) BETA" src="http://1.bp.blogspot.com/-8kZwAp35zes/TvHlCY5FBCI/AAAAAAAAAYo/h_crnpHGYhk/s1600/1_chinese_s.png" height="19" title="Google-Translate-Chinese (Simplified) BETA"/> Chinese</a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Grab this"><img src="https://bitly.com/24workpng" alt="Blogger Tips And Tricks|Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Free Backlinks"><img src="https://bitly.com/24workpng" alt="Free Backlinks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Free"><img src="https://bitly.com/24workpng" alt="Blogger Tips And Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a>

<br/>

<a target="_blank" rel="nofollow" style="cursor:pointer; cursor:hand;" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cfr&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to French "><img border="0" style="cursor:pointer; cursor:hand;" width="19" align="absbottom" alt="Google-Translate-English to French " src="http://1.bp.blogspot.com/-UYtmoxnnXaE/TvHlDFHwtmI/AAAAAAAAAYs/5GOfiqhtgQM/s1600/2_french_s.png" height="19" title="Google-Translate-English to French "/> French</a>

<br/>

<a target="_blank" rel="nofollow" style="cursor:pointer; cursor:hand;" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cde&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to German"><img border="0" style="cursor:pointer; cursor:hand;" width="19" align="absbottom" alt="Google-Translate-English to German" src="http://2.bp.blogspot.com/-H2Bimq1BPvc/TvHlD3EgzFI/AAAAAAAAAYw/NWUJDMbcOak/s1600/3_german_s.png" height="19" title="Google-Translate-English to German"/> German</a>

<br/>

<a target="_blank" rel="nofollow" style="cursor:pointer; cursor:hand;" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cit&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to Italian"><img border="0" style="cursor:pointer; cursor:hand;" width="19" align="absbottom" alt="Google-Translate-English to Italian" src="http://1.bp.blogspot.com/-dN9HIZeP-mg/TvHlEtWGDxI/AAAAAAAAAY0/AkqhRzMOmKA/s1600/4_italian_s.png" height="19" title="Google-Translate-English to Italian"/> Italian</a>

<br/>

<a target="_blank" rel="nofollow" style="cursor:pointer; cursor:hand;" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cja&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to Japanese BETA"><img border="0" style="cursor:pointer; cursor:hand;" width="19" align="absbottom" alt="Google-Translate-English to Japanese BETA" src="http://3.bp.blogspot.com/-9f016WASOCY/TvHlGCb27aI/AAAAAAAAAY8/6nkoI18nnm8/s1600/5_japanese_s.png" height="19" title="Google-Translate-English to Japanese BETA"/> Japanese</a>

<br/>

<a target="_blank" rel="nofollow" style="cursor:pointer; cursor:hand;" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cko&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to Korean BETA"><img border="0" style="cursor:pointer; cursor:hand;" width="19" align="absbottom" alt="Google-Translate-English to Korean BETA" src="http://1.bp.blogspot.com/-V5BOVbEKs9o/TvHlHq46HpI/AAAAAAAAAZM/3lmXEUtnWZ4/s1600/6_korean_s.png" height="19" title="Google-Translate-English to Korean BETA"/> Korean</a>

<br/>

<a target="_blank" rel="nofollow" style="cursor:pointer; cursor:hand;" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cru&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to Russian BETA "><img border="0" style="cursor:pointer; cursor:hand;" width="19" align="absbottom" alt="Google-Translate-English to Russian BETA " src="http://3.bp.blogspot.com/-OEtXA4O7aKo/TvHlJO3HTnI/AAAAAAAAAZY/mLq7sQ3xHEc/s1600/7_russian_s.png" height="19" title="Google-Translate-English to Russian BETA "/> Russian</a>

<br/>

<a target="_blank" rel="nofollow" style="cursor:pointer; cursor:hand;" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Ces&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to Spanish "><img border="0" style="cursor:pointer; cursor:hand;" width="19" align="absbottom" alt="Google-Translate-English to Spanish " src="http://4.bp.blogspot.com/-J-np-1DqJvk/TvHlBiHP5xI/AAAAAAAAAYg/i4T9IKAIYOY/s1600/8_spanish_s.png" height="19" title="Google-Translate-English to Spanish "/> Spanish</a>

</div>
<div style="float: left;">
<sup> Powered By </sup><img style="border:none;" alt="google" src="http://2.bp.blogspot.com/-FptNG7_IHrc/TvHYNWbc_vI/AAAAAAAAAXY/7Uk5p1u4b0c/s1600/googlelogode0kn0.png" class="gsc-branding-img-noclear" title="Google Translation Widget"/> </div>
</div>

Google Flag Translate Widget For Blogger / Blogspot 18

<div style="border:0px solid #ccc;padding:10px 0px 3px 0px;text-align:center;background-color:none;min-width:235px; margin: 5px 0 5px 0;">


<div align="center" style="width:auto;">


<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Czh-CN&hl=en&ie=UTF8'); return false;" title="Google-Translate-Chinese (Simplified) BETA"><img border="0" style="cursor:pointer; cursor:hand;" width="19" alt="Google-Translate-Chinese (Simplified) BETA" src="http://1.bp.blogspot.com/-8kZwAp35zes/TvHlCY5FBCI/AAAAAAAAAYo/h_crnpHGYhk/s1600/1_chinese_s.png" height="19" title="Google-Translate-Chinese (Simplified) BETA"/></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Grab this"><img src="https://bitly.com/24workpng" alt="Blogger Tips And Tricks|Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Free Backlinks"><img src="https://bitly.com/24workpng" alt="Free Backlinks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Free"><img src="https://bitly.com/24workpng" alt="Blogger Tips And Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a>


<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cfr&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to French "><img border="0" style="cursor:pointer; cursor:hand;" width="19" alt="Google-Translate-English to French " src="http://1.bp.blogspot.com/-UYtmoxnnXaE/TvHlDFHwtmI/AAAAAAAAAYs/5GOfiqhtgQM/s1600/2_french_s.png" height="19" title="Google-Translate-English to French "/></a>


<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cde&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to German"><img border="0" style="cursor:pointer; cursor:hand;" width="19" alt="Google-Translate-English to German" src="http://2.bp.blogspot.com/-H2Bimq1BPvc/TvHlD3EgzFI/AAAAAAAAAYw/NWUJDMbcOak/s1600/3_german_s.png" height="19" title="Google-Translate-English to German"/></a>


<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cit&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to Italian"><img border="0" style="cursor:pointer; cursor:hand;" width="19" alt="Google-Translate-English to Italian" src="http://1.bp.blogspot.com/-dN9HIZeP-mg/TvHlEtWGDxI/AAAAAAAAAY0/AkqhRzMOmKA/s1600/4_italian_s.png" height="19" title="Google-Translate-English to Italian"/></a>


<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cja&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to Japanese BETA"><img border="0" style="cursor:pointer; cursor:hand;" width="19" alt="Google-Translate-English to Japanese BETA" src="http://3.bp.blogspot.com/-9f016WASOCY/TvHlGCb27aI/AAAAAAAAAY8/6nkoI18nnm8/s1600/5_japanese_s.png" height="19" title="Google-Translate-English to Japanese BETA"/></a>


<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cko&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to Korean BETA"><img border="0" style="cursor:pointer; cursor:hand;" width="19" alt="Google-Translate-English to Korean BETA" src="http://1.bp.blogspot.com/-V5BOVbEKs9o/TvHlHq46HpI/AAAAAAAAAZM/3lmXEUtnWZ4/s1600/6_korean_s.png" height="19" title="Google-Translate-English to Korean BETA"/></a>


<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cru&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to Russian BETA "><img border="0" style="cursor:pointer; cursor:hand;" width="19" alt="Google-Translate-English to Russian BETA " src="http://3.bp.blogspot.com/-OEtXA4O7aKo/TvHlJO3HTnI/AAAAAAAAAZY/mLq7sQ3xHEc/s1600/7_russian_s.png" height="19" title="Google-Translate-English to Russian BETA "/></a>


<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Ces&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to Spanish "><img border="0" style="cursor:pointer; cursor:hand;" width="19" alt="Google-Translate-English to Spanish " src="http://4.bp.blogspot.com/-J-np-1DqJvk/TvHlBiHP5xI/AAAAAAAAAYg/i4T9IKAIYOY/s1600/8_spanish_s.png" height="19" title="Google-Translate-English to Spanish "/></a>

</div>
<small>↑ Google Translation </small><br/>
</div>

Google Flag Translate Widget For Blogger / Blogspot 19

<div style="border:0px solid #ccc;padding:10px 0px 3px 0px;text-align:center;background-color:none;min-width:180px; margin: 5px 0 5px 0;">

<div align="center" style="width:auto;">

<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Czh-CN&hl=en&ie=UTF8'); return false;" title="Google-Translate-Chinese (Simplified) BETA"><img border="0" style="cursor:pointer; cursor:hand;" width="19" alt="Google-Translate-Chinese (Simplified) BETA" src="http://1.bp.blogspot.com/-8kZwAp35zes/TvHlCY5FBCI/AAAAAAAAAYo/h_crnpHGYhk/s1600/1_chinese_s.png" height="19" title="Google-Translate-Chinese (Simplified) BETA"/></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Grab this"><img src="https://bitly.com/24workpng" alt="Blogger Tips And Tricks|Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Free Backlinks"><img src="https://bitly.com/24workpng" alt="Free Backlinks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Free"><img src="https://bitly.com/24workpng" alt="Blogger Tips And Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a>


<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cfr&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to French "><img border="0" style="cursor:pointer; cursor:hand;" width="19" alt="Google-Translate-English to French " src="http://1.bp.blogspot.com/-UYtmoxnnXaE/TvHlDFHwtmI/AAAAAAAAAYs/5GOfiqhtgQM/s1600/2_french_s.png" height="19" title="Google-Translate-English to French "/></a>


<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cde&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to German"><img border="0" style="cursor:pointer; cursor:hand;" width="19" alt="Google-Translate-English to German" src="http://2.bp.blogspot.com/-H2Bimq1BPvc/TvHlD3EgzFI/AAAAAAAAAYw/NWUJDMbcOak/s1600/3_german_s.png" height="19" title="Google-Translate-English to German"/></a>


<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cit&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to Italian"><img border="0" style="cursor:pointer; cursor:hand;" width="19" alt="Google-Translate-English to Italian" src="http://1.bp.blogspot.com/-dN9HIZeP-mg/TvHlEtWGDxI/AAAAAAAAAY0/AkqhRzMOmKA/s1600/4_italian_s.png" height="19" title="Google-Translate-English to Italian"/></a><br/><a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cja&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to Japanese BETA"><img border="0" style="cursor:pointer; cursor:hand;" width="19" alt="Google-Translate-English to Japanese BETA" src="http://3.bp.blogspot.com/-9f016WASOCY/TvHlGCb27aI/AAAAAAAAAY8/6nkoI18nnm8/s1600/5_japanese_s.png" height="19" title="Google-Translate-English to Japanese BETA"/></a>


<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cko&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to Korean BETA"><img border="0" style="cursor:pointer; cursor:hand;" width="19" alt="Google-Translate-English to Korean BETA" src="http://1.bp.blogspot.com/-V5BOVbEKs9o/TvHlHq46HpI/AAAAAAAAAZM/3lmXEUtnWZ4/s1600/6_korean_s.png" height="19" title="Google-Translate-English to Korean BETA"/></a>


<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cru&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to Russian BETA "><img border="0" style="cursor:pointer; cursor:hand;" width="19" alt="Google-Translate-English to Russian BETA " src="http://3.bp.blogspot.com/-OEtXA4O7aKo/TvHlJO3HTnI/AAAAAAAAAZY/mLq7sQ3xHEc/s1600/7_russian_s.png" height="19" title="Google-Translate-English to Russian BETA "/></a>


<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Ces&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to Spanish "><img border="0" style="cursor:pointer; cursor:hand;" width="19" alt="Google-Translate-English to Spanish " src="http://4.bp.blogspot.com/-J-np-1DqJvk/TvHlBiHP5xI/AAAAAAAAAYg/i4T9IKAIYOY/s1600/8_spanish_s.png" height="19" title="Google-Translate-English to Spanish "/></a>

</div>
<small>↑ Google Translation </small><br/>
</div>

Google Flag Translate Widget For Blogger / Blogspot 20

<div id="google_translate_element"></div><script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en'
}, 'google_translate_element');
}
</script><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Grab this"><img src="https://bitly.com/24workpng" alt="Blogger Tips And Tricks|Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Free Backlinks"><img src="https://bitly.com/24workpng" alt="Free Backlinks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Free"><img src="https://bitly.com/24workpng" alt="Blogger Tips And Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

Google Flag Translate Widget For Blogger / Blogspot 21

Google Flag Translate Widget For Blogger / Blogspot 22

<div style="border:1px dotted #ccc;padding:10px 3px 3px 10px;background-color:none;margin:7px 0 7px 0;">


<div align="left">

<a target="_blank" rel="nofollow" style="cursor:pointer; cursor:hand;" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Czh-CN&hl=en&ie=UTF8'); return false;" title="Google-Translate-Chinese (Simplified) BETA"><img border="0" style="cursor:pointer; cursor:hand;" width="24" align="absbottom" alt="Google-Translate-Chinese (Simplified) BETA" src="http://1.bp.blogspot.com/-8kZwAp35zes/TvHlCY5FBCI/AAAAAAAAAYo/h_crnpHGYhk/s1600/1_chinese_s.png" height="24" title="Google-Translate-Chinese (Simplified) BETA"/> Chinese</a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Grab this"><img src="https://bitly.com/24workpng" alt="Blogger Tips And Tricks|Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Free Backlinks"><img src="https://bitly.com/24workpng" alt="Free Backlinks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Free"><img src="https://bitly.com/24workpng" alt="Blogger Tips And Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a>

<br/>

<a target="_blank" rel="nofollow" style="cursor:pointer; cursor:hand;" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cfr&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to French "><img border="0" style="cursor:pointer; cursor:hand;" width="24" align="absbottom" alt="Google-Translate-English to French " src="http://1.bp.blogspot.com/-UYtmoxnnXaE/TvHlDFHwtmI/AAAAAAAAAYs/5GOfiqhtgQM/s1600/2_french_s.png" height="24" title="Google-Translate-English to French "/> French</a>

<br/>

<a target="_blank" rel="nofollow" style="cursor:pointer; cursor:hand;" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cde&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to German"><img border="0" style="cursor:pointer; cursor:hand;" width="24" align="absbottom" alt="Google-Translate-English to German" src="http://2.bp.blogspot.com/-H2Bimq1BPvc/TvHlD3EgzFI/AAAAAAAAAYw/NWUJDMbcOak/s1600/3_german_s.png" height="24" title="Google-Translate-English to German"/> German</a>

<br/>

<a target="_blank" rel="nofollow" style="cursor:pointer; cursor:hand;" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cit&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to Italian"><img border="0" style="cursor:pointer; cursor:hand;" width="24" align="absbottom" alt="Google-Translate-English to Italian" src="http://1.bp.blogspot.com/-dN9HIZeP-mg/TvHlEtWGDxI/AAAAAAAAAY0/AkqhRzMOmKA/s1600/4_italian_s.png" height="24" title="Google-Translate-English to Italian"/> Italian</a>

<br/>

<a target="_blank" rel="nofollow" style="cursor:pointer; cursor:hand;" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cja&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to Japanese BETA"><img border="0" style="cursor:pointer; cursor:hand;" width="24" align="absbottom" alt="Google-Translate-English to Japanese BETA" src="http://3.bp.blogspot.com/-9f016WASOCY/TvHlGCb27aI/AAAAAAAAAY8/6nkoI18nnm8/s1600/5_japanese_s.png" height="24" title="Google-Translate-English to Japanese BETA"/> Japanese</a>

<br/>

<a target="_blank" rel="nofollow" style="cursor:pointer; cursor:hand;" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cko&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to Korean BETA"><img border="0" style="cursor:pointer; cursor:hand;" width="24" align="absbottom" alt="Google-Translate-English to Korean BETA" src="http://1.bp.blogspot.com/-V5BOVbEKs9o/TvHlHq46HpI/AAAAAAAAAZM/3lmXEUtnWZ4/s1600/6_korean_s.png" height="24" title="Google-Translate-English to Korean BETA"/> Korean</a>

<br/>

<a target="_blank" rel="nofollow" style="cursor:pointer; cursor:hand;" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cru&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to Russian BETA "><img border="0" style="cursor:pointer; cursor:hand;" width="24" align="absbottom" alt="Google-Translate-English to Russian BETA " src="http://3.bp.blogspot.com/-OEtXA4O7aKo/TvHlJO3HTnI/AAAAAAAAAZY/mLq7sQ3xHEc/s1600/7_russian_s.png" height="24" title="Google-Translate-English to Russian BETA "/> Russian</a>

<br/>

<a target="_blank" rel="nofollow" style="cursor:pointer; cursor:hand;" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Ces&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to Spanish "><img border="0" style="cursor:pointer; cursor:hand;" width="24" align="absbottom" alt="Google-Translate-English to Spanish " src="http://4.bp.blogspot.com/-J-np-1DqJvk/TvHlBiHP5xI/AAAAAAAAAYg/i4T9IKAIYOY/s1600/8_spanish_s.png" height="24" title="Google-Translate-English to Spanish "/> Spanish</a>

</div>
<small>↑ Google Translation™ </small><br/>
</div>

Google translator bar language code

Language name	Code	Language name	Code	Language name	Code
Albanian	sq	Hungarian	hu	Turkish	tr
Arabic	ar	Indonesian	id	Ukrainian	uk
Bulgarian	bg	Italian	it	Vietnamese	vi
Catalan	ca	Japanese	ja	Afrikaans	af
Chinese (Simplified)	zh-CN	Korean	ko	Belarusian	be
Chinese (Traditional)	zh-TW	Latvian	lv	Icelandic	is
Croatian	hr	Lithuanian	lt	Irish	ga
Czech	cs	Maltese	mt	Macedonian	mk
Danish	da	Norwegian	no	Malay	ms
Dutch	nl	Persian	fa	Swahili	sw
English	en	Polish	pl	Welsh	cy
Estonian	et	Portuguese	pt	Yiddish	yi
Filipino	tl	Romanian	ro	Afrikaans	af
Finnish	fi	Russian	ru	Belarusian	be
French	fr	Serbian	sr	Icelandic	is
Galician	gl	Slovak	sk	Zulu	zu
German	de	Slovenian	sl	Bengali	bn
Greek	el	Spanish	es
Hebrew	iw	Swedish	sv
Hindi	hi	Thai	th

Falling Objects / Falling Text / Marquee Scrolling Text Generator for Blogger

noreply@blogger.com (admin) — Tue, 23 Apr 2013 04:32:00 +0000

You can show the falling objects or graphics to your Blogger profile page. This generator falling objects to specify an image of your choice. Once you paste the HTML code to your Blogger profile page, you see several copies of the image of all that fall on the page!

For this to work, make sure you specify the exact location of an image. Also note that some browsers can not display the objects that fall as planned.The widget is originally developed by www.bdlab.blogspot.com, i just changed something in the widget.

Blogger Falling Object Generator Code

Blogger Falling Text Code Generate

Here's a cool way to get that "falling text" effect on your Blogger profile page. Elsewhere, you can use JavaScript for the effect of the fall of text - but not on Blogger. Fortunately, you can use a little HTML trick to get the same effect!

Use the form below to generate text fall into your Blogger profile page. You can then copy and paste the HTML code on your profile page.The widget is originally developed by www.bdlab.blogspot.com, i just changed something in the widget.

Marquee Scrolling Text Generator for Blogger

In HTML, allows you to have a marquee scrolling text and images. Tents are perfect for your Blogger page, allowing you to do things that normally require JavaScript (which does not allow Blogger).

You can create a Blogger marquee to scroll horizontally or vertically. You can also change other things as the speed at which it moves.

Use the form below to generate the code for Blogger marquee. Simply select the values you need, click "Generate Marquee and Preview", then copy and paste in your profile page.The widget is originally developed by www.bdlab.blogspot.com, i just changed something in the widget.

How to Install Blogger Code Generator Widget

Now let's start adding it...

Step 1. Login to Your Blogger Account.Go to your Blogger Dashboard.Click on Layout tab from left pane and click on Add a Gadget link.

Step 2. After click on Add a Gadget link A pop-up box will open now
with many gadget list, Choose HTML/JavaScript from the gadget options by clicking the blue plus sign for that gadget.

Step 3. Select 'HTML/Javascript' and add the one of code given below.

Step 4. Now Click On Save 'JavaScript' You are done.

17+ Featured Content Slider for Blogger Using jQuery

noreply@blogger.com (admin) — Thu, 23 Feb 2012 05:44:00 +0000

You should already know about JQuery Featured Content Slider.Today we will see how to add 17+ jQuery featured content sliders / slideshows for your blog or website.Almost all bloggers use the contents, which included slider.Contents are a great way to show a lot of content in a smaller area of a web page or a blog. Automatic sliding doors are dynamic content in many popular websites on the web.This is a great technique to represent different types of content in a limited space and a good way to involve the user.You have probably noticed that a lot of websites recently a working area with content that slides or changes in any way.

Are you interested in implementing a content slider in your website? Checkout this list!Here I am going to teach you, how to add a featured content slider to your blogger / blogspot blogs.You're not sure what is it exactly? You`ll see below ;)

Featured Content Slider for Blogger Using jQuery

How to Install This Widget on Blogger?

Steps...

A. Adding CSS Theme Code

B. Adding Script Code

C. Adding HTML Code

Adding CSS Theme Code

I have to write two set of instructions for each steps, as some of you are using the default layout, and some of you are using the new layout.Backup your template before attempting this tutorial.

Step 1:

In old layout: Go to Dashboard - Design - Edit HTML - Expand Widget Templates.

In new layout: Go to Dashboard - Template - Edit Template HTML - Expand Widget Templates.

Now find (CTRL+F) this code in the template:

]]></b:skin>

And immediately before it, paste this code:

#featured{
width:400px;
padding-right:250px;
position:relative;
height:250px;
background:#fff;
border:5px solid #ccc;
}
#featured ul.ui-tabs-nav{
position:absolute;
top:0; left:400px;
list-style:none;
padding:0; margin:0;
width:250px;
}
#featured ul.ui-tabs-nav li{
padding:1px 0; padding-left:13px;
font-size:12px;
color:#666;
}
#featured ul.ui-tabs-nav li span{
font-size:11px; font-family:Verdana;
line-height:18px;
}

#featured .ui-tabs-panel{
width:400px; height:250px;
background:#999; position:relative;
overflow:hidden;
}
#featured .ui-tabs-hide{
display:none;
}

#featured li.ui-tabs-nav-item a{/*On Hover Style*/
display:block;
height:60px;
color:#333; background:#fff;
line-height:20px;
outline:none;
}
#featured li.ui-tabs-nav-item a:hover{
background:#f2f2f2;
}
#featured li.ui-tabs-selected{ /*Selected tab style*/
background:url('selected-item.gif') top left no-repeat;
}
#featured ul.ui-tabs-nav li.ui-tabs-selected a{
background:#ccc;
}

#featured ul.ui-tabs-nav li img{
float:left; margin:2px 5px;
background:#fff;
padding:2px;
border:1px solid #eee;
}
#featured .ui-tabs-panel .info{
position:absolute;
top:180px; left:0;
height:70px; width: 400px;
background: url('transparent-bg.png');
}
#featured .info h2{
font-size:18px; font-family:Georgia, serif;
color:#fff; padding:5px; margin:0;
overflow:hidden;
}
#featured .info p{
margin:0 5px;
font-family:Verdana; font-size:11px;
line-height:15px; color:#f0f0f0;
}
#featured .info a{
text-decoration:none;
color:#fff;
}
#featured .info a:hover{
text-decoration:underline;
}

Adding Script Code

Now find (CTRL+F) this code in the template:

Step 2:And find the code </head>
Step 3: Now add the following code just before the </head> tag.

And now click Save Template

Adding HTML Code

I have to write two set of instructions for each steps, as some of you are using the default layout, and some of you are using the new layout. So, let's see how to install this cool widget in your blog..

Step 4:

If you're using the old Blogger interface: Go to Dashboard - Design - Page Elements - Add a Gadget.

Add a Gadget of HTML/JavaScript type.

If you're using the new Blogger interface: Go to Dashboard - Layout - Add a Gadget

2.Click on 'Add a Gadget' on the sidebar.

3.Select 'HTML/Javascript' and add the one of code given below

4. Now Click On Save 'JavaScript' You are done.

<div id='featured'>
<ul class='ui-tabs-nav'>
<li class='ui-tabs-nav-item ui-tabs-selected' id='nav-fragment-1'><a href='#fragment-1'><img alt='pic1' src='http://i49.tinypic.com/e1aohv.jpg'/><span>Install Mac OS X on Intel/AMD PC using iATKOS v7</span></a></li>
<li class='ui-tabs-nav-item' id='nav-fragment-2'><a href='#fragment-2'><img alt='blogger' src='http://i438.photobucket.com/albums/qq108/fooble11/image2-small.jpg'/><span>How to remove "showing post with label" in Blogger</span></a></li>
<li class='ui-tabs-nav-item' id='nav-fragment-3'><a href='#fragment-3'><img alt='buzz' src='http://i438.photobucket.com/albums/qq108/fooble11/new1.jpg'/><span>How to add Google Buzz to Blogspot blog</span></a></li>
<li class='ui-tabs-nav-item' id='nav-fragment-4'><a href='#fragment-4'><img alt='chat' src='http://i50.tinypic.com/34xfg4m.jpg'/><span>Chat live with your blog visitors using Yahoo Pingbox</span></a></li>
</ul>

<div class='ui-tabs-panel' id='fragment-1' style=''>
<img alt='mac' src='http://i47.tinypic.com/rsbi80.jpg'/>
<div class='info'>
<h3><a href='#'>Install Mac OS X on Intel/AMD PC using iATKOS v7</a></h3>
<p>Description goes here, this is just a test description....<a href='http://bdlab.blogspot.com/'>read more</a></p>
</div>
</div>

<div class='ui-tabs-panel ui-tabs-hide' id='fragment-2' style=''>
<img alt='' src='http://i50.tinypic.com/33kprh5.jpg'/>
<div class='info'>
<h3><a href='#'>How to remove "showing post with label" in Blogger</a></h3>
<p>Description goes here, this is just a test description....<a href='#'>read more</a></p>
</div>
</div>

<div class='ui-tabs-panel ui-tabs-hide' id='fragment-3' style=''>
<img alt='' src='http://i47.tinypic.com/2191lqt.jpg'/>
<div class='info'>
<h3><a href='#'>How to add Google Buzz to Blogspot blog</a></h3>
<p>Description goes here, this is just a test description....<a href='#'>read more</a></p>
</div>
</div>

<div class='ui-tabs-panel ui-tabs-hide' id='fragment-4' style=''>
<img alt='' src='http://i48.tinypic.com/10pwp3o.jpg'/>
<div class='info'>
<h3><a href='#'>Chat live with your blog visitors using yahoo</a></h3>
<p>Description goes here, this is just a test description....<a href='#'>read more</a></p>
</div>
</div> </div>

And now click Save

................................................................................................
................................................................................................
................................................................................................

Simple jQuery Featured Content Slider for Blogger Blog

How to Install This Widget on Blogger?

Steps...

A. Adding CSS Theme Code

B. Adding Script Code

C. Adding HTML Code

Adding CSS Theme Code

In old layout: Go to Dashboard - Design - Edit HTML - Expand Widget Templates.

In new layout: Go to Dashboard - Template - Edit Template HTML - Expand Widget Templates.

Now find (CTRL+F) this code in the template:

]]></b:skin>

And immediately before it, paste this code:

#jFlowSlide{ background:#f8f8f8; font-family: Georgia; }
#myController { font-family: Georgia; padding:2px 0; width:610px; background:#000000; }
#myController span.jFlowSelected { background:#43A0D5;margin-right:0px; }

.slide-wrapper { padding: 5px; }
.slide-thumbnail { width:300px; float:left; }
.slide-thumbnail img {max-width:300px; }
.slide-details { width:290px; float:right; margin-left:10px;}
.slide-details h2 { font-size:1.5em; font-style: italic; font-weight:normal; line-height: 1; margin:0; }
.slide-details .description { margin-top:10px; }

.jFlowControl, .jFlowPrev, .jFlowNext { color:#FFF; cursor:pointer; padding-left:5px; padding-right:5px; padding-top:2px; padding-bottom:2px; }
.jFlowControl:hover, .jFlowPrev:hover, .jFlowNext:hover { background: #43A0D5; }

Adding Script Code

Now find (CTRL+F) this code in the template:

Step 2:And find the code </head>
Step 3: Now add the following code just before the </head> tag.

And now click Save Template

Adding HTML Code

So, let's see how to install this cool widget in your blog..

1. Sign into Blogger dashboard

old Blogger interface: Go to Dashboard - Design - Page Elements - Add a Gadget.If you're using the new Blogger interface: Go to Dashboard - Layout - Add a Gadget.Select 'HTML/Javascript' and add the one of code given below.Just copy and paste this code..

<div class="jflow-content-slider">

<div id="slides">

<-! Slide #1 Starts-->

<div class="slide-wrapper">

<div class="slide-thumbnail">

<img alt="" src="IMAGE-LINK"/>

</div>

<div class="slide-details">

<span style="font-size: large;"><b> TITLE-OF-THE-SLIDE </b></span>

<div class="description">

TEXT-OF-THE-SLIDE

</div>

</div>

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

</div>



<-! Slide #2 Starts-->

<div class="slide-wrapper">

<div class="slide-thumbnail">

<img alt="" src="IMAGE-LINK"/>

</div>

<div class="slide-details">

<span style="font-size: large;"><b> TITLE-OF-THE-SLIDE </b></span>

<div class="description">

TEXT-OF-THE-SLIDE

</div>

</div>

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

</div>



<-! Slide #3 Starts-->

<div class="slide-wrapper">

<div class="slide-thumbnail">

<img alt="" src="IMAGE-LINK"/>

</div>

<div class="slide-details">

<span style="font-size: large;"><b> TITLE-OF-THE-SLIDE </b></span>

<div class="description">

TEXT-OF-THE-SLIDE

</div>

</div>

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

</div>





</div>

<div id="myController">

<span class="jFlowPrev">Prev</span>

<span class="jFlowControl">1</span>

<span class="jFlowControl">2</span>

<span class="jFlowControl">3</span>



<span class="jFlowNext">Next</span>

</div>

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

</div>

And now click Save

t's Done.

Customization

Code 1. You can change the background colors in code 1 to suit your blog.

Code 2. First of all download http://safir85.ucoz.com/24work-blogspot/featured-post-s/freebloggerhelp-jquery.flow.1.2.auto.js and upload it to google sites.

You can change width, height and duration speed.

Code 3. As you look on code 3 there are 3 slide codes. First give the image link, add title and finally add description. Do same with all three codes. You can add more slide by adding the code:

<div class="slide-wrapper">

<div class="slide-thumbnail">

<img alt="" src="IMAGE-LINK"/>

</div>

<div class="slide-details">

<span style="font-size: large;"><b> TITLE-OF-THE-SLIDE </b></span>

<div class="description">

TEXT-OF-THE-SLIDE

</div>

</div>

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

</div>

Also you have to add

4
after
3
and so on for next slides.

................................................................................................
................................................................................................
................................................................................................

How To Add Smart Jquery Featured Slider to Blogger / Websites

How to Install This Widget on Blogger?

Steps...

A. Adding Script Code

B. Adding HTML Code

Adding Script Code

In old layout: Go to Dashboard - Design - Edit HTML - Expand Widget Templates.

In new layout: Go to Dashboard - Template - Edit Template HTML - Expand Widget Templates.

Now find (CTRL+F) this code in the template:

Step 2:And find the code </head>
Step 3: Now add the following code just before the </head> tag.

And now click Save

NOTE : Replace,

SLIDE-X-LINK-HERE with your real featured posts links.

SLIDE-X-IMAGE-ADDRESS-HERE with your real slide images addresses.

Look at the example below:

You are done.

................................................................................................
................................................................................................
................................................................................................

How To Create JQuery Featured Content Slideshow

And now click Save

You can add more slides as you like.

Note : Replace images URLs,"This is featured post X title","Replace This Text With Your Featured Post X Description" with your content.

You are done.

................................................................................................
................................................................................................
................................................................................................

How To Add jQuery Featured Post Slider to blogger

And now click Save Template

Note: Please host above images yourself.

Adding HTML Code

So, let's see how to install this cool widget in your blog..

1. Sign into Blogger dashboard

old Blogger interface: Go to Dashboard - Design - Page Elements - Add a Gadget.If you're using the new Blogger interface: Go to Dashboard - Layout - Add a Gadget.Select 'HTML/Javascript' and add the one of code given below.Just copy and paste this code..

<div id="content">
<script type="text/javascript">
featuredcontentglider.init({
gliderid: "glidercontent",
contentclass: "glidecontent",
togglerid: "togglebox",
remotecontent: "",
selected: 0,
persiststate: true,
speed: 500,
direction: "leftright",
autorotate: true,
autorotateconfig: [10000, 1] //if auto rotate enabled, set [milliseconds_btw_rotations, cycles_before_stopping]
})
</script>


<div id="glidercontent" class="glidecontentwrapper">
<div id="togglebox" class="glidecontenttoggler">
<a class="prev" href="#"></a>
<a class="next" href="#"></a>
</div>
<div id="glidecontent1" class="glidecontent1 section"><div id="HTML98" class="widget HTML">
<div class="widget-content">

<div class="glidecontent">

<h2><a href="http://bdlab.blogspot.com" title="Adsense Tips And Secrets">Adsense Tips And Secrets</a></h2>

<p>AdSense Tip 1: Find Best keywords for your content
Before serving ads on a web page, check its keyword density. You can find many free keyword analyzer tools in internet searching the word "free keyword analyzer".
AdSense Tip 2: Improve your keywords
Get keyword suggestions from Google AdWords Sandbox. Get new keywords that can help you improve your ad relevance.
AdSense Tip 3: Make content rich websites
This means that content-rich websites of a popular topic should attract a large amount of ads.
AdSense Tip 4: Write a new page/blog post every day
 <a href="http://bdlab.blogspot.com">Read More →</a></p></div>

<div class="glidecontent">

<h2><a href="http://bdlab.blogspot.com" title="Use Adsense Section Targeting">Use Adsense Section Targeting</a></h2>

<p>What is Google Adsense Section targeting? Here is the official information on Adsense Help Center:
Section targeting allows you to suggest sections of your text and HTML content that you'd like us to emphasize or downplay when matching ads to your site's content. By providing us with your suggestions, you can assist us in improving your ad targeting. We recommend that only those familiar with HTML attempt to implement section targeting.
To implement section targeting, you'll need to add a set of special HTML comment tags to your code. These tags will mark the beginning and end of whichever section(s) you'd like to emphasize or de-emphasize for ad targeting.
The HTML tags to emphasize a page section take the following format:
 <a href="http://bdlab.blogspot.com">Read More →</a></p></div>

<div class="glidecontent">

<h2><a href="http://bdlab.blogspot.com" title="Remove Low paying Adsense Ads">Remove Low paying Adsense Ads</a></h2>

<p>To increase your Adsense Earnings by removing the lowpaying adsense ads from your account,follow the steps below.
1.First go to www.adsblacklist.com .
2.Now Signup for a account.it's free and very simple.
3.Now login to your account.
4.Now Click on My Account.
5.Now click on 'Add New Domain'
6.Submit your URL,TITLE and Keywords.Look at the example below.
6.Now go to Generate Filter List.
7.Drag and drop your domain name into 'Keywords from selected domains:' box.Then you can see keywords,you give in step 4.
 <a href="http://bdlab.blogspot.com">Read More →</a></p></div>

<div class="glidecontent">

<h2><a href="http://bdlab.blogspot.com" title="Comment Box is made DO FOLLOW">Comment Box is made DO FOLLOW</a></h2>

<p>Above Title Means comments on this blog are made do follow and will be spidered.Comments field in blogger are made NOFOLLOW by default.This is done as a measure to reduce spam.To Become comments on your blog are made "do follow",follow the easy 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:-
<a expr:href='data:comment.authorUrl' rel='nofollow'>
4.Replace it with below code.
<a expr:href='data:comment.authorUrl'>
5.Click on Save Templates and you are done.
Now you must to make other bloggers know that you are comments are made do follow.For this add below code to your blog... <a href="http://bdlab.blogspot.com">(more...)</a></p></div>

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

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

And now click Save Template

Note : You can change width value as your choice.

Adding HTML Code

So, let's see how to install this cool widget in your blog..

1. Sign into Blogger dashboard

old Blogger interface: Go to Dashboard - Design - Page Elements - Add a Gadget.If you're using the new Blogger interface: Go to Dashboard - Layout - Add a Gadget.Select 'HTML/Javascript' and add the one of code given below.Just copy and paste this code..

<div id="myslides">

<script type="text/javascript">
stepcarousel.setup({
galleryid: 'mygallery', //id of carousel DIV
beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
panelclass: 'panel', //class of panel DIVs each holding content
panelbehavior: {speed:500, wraparound:true, persist:true},
defaultbuttons: {enable: true, moveby: 2, leftnav: ['http://3.bp.blogspot.com/_4HKUHirY_2U/Swp_uMVeIBI/AAAAAAAAATs/53m4n9dGzso/rem1.jpg', -14, 60], rightnav: ['http://3.bp.blogspot.com/_4HKUHirY_2U/Swp_x-EbbHI/AAAAAAAAAT0/W5WfkjVPzdE/rem2.jpg', 0, 60]},
statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: ['external'] //content setting ['inline'] or ['external', 'path_to_external_file']
})
</script>

<div id="mygallery" class="stepcarousel">
<div class="belt">

<div class="panel">
<a href="#" title="NFS Most Wanted">
<img alt="NFS Most Wanted" width="200" src="http://4.bp.blogspot.com/_4HKUHirY_2U/Swp3aiu5SZI/AAAAAAAAASk/yizi7snG_Bg/NFS+Most+Wanted.jpg" height="120"/>
</a>
</div>

<div class="panel">
<a href="#" title="Call Of Duty">
<img alt="Call Of Duty" width="200" src="http://1.bp.blogspot.com/_4HKUHirY_2U/Swp3ntj2moI/AAAAAAAAASs/yE5UW180uuw/Call+Of+Duty.jpg" height="120"/>
</a>
</div>

<div class="panel">
<a href="#" title="MaxPayne3 Game">
<img alt="MaxPayne3 Game" width="200" src="http://3.bp.blogspot.com/_4HKUHirY_2U/Swp5VFoWHVI/AAAAAAAAATk/pFK49oX63xY/maxpayne3+game.gif" height="120"/>
</a>
</div>

<div class="panel">
<a href="#" title="Tomb Raider">
<img alt="Tomb Raider" width="200" src="http://3.bp.blogspot.com/_4HKUHirY_2U/Swp4F6x_GwI/AAAAAAAAATc/zSWizc86amA/Tomb+Rider.jpg" height="120"/>
</a>
</div>

<div class="panel">
<a href="#" title="Harry Potter">
<img alt="Harry Potter" width="200" src="http://2.bp.blogspot.com/_4HKUHirY_2U/Swp37ci8djI/AAAAAAAAATM/h4EWIfrRQUs/harry+potter.jpg" height="120"/>
</a>
</div>

<div class="panel">
<a href="#" title="NFS ProStreet">
<img alt="NFS ProStreet" width="200" src="http://2.bp.blogspot.com/_4HKUHirY_2U/Swp3sTBAurI/AAAAAAAAAS0/luZtbZH5kdQ/NFS+ProStreet.jpg" height="120"/>
</a>
</div>

<div class="panel">
<a href="#" title="MaxPayne Movie">
<img alt="MaxPayne Movie" width="200" src="http://2.bp.blogspot.com/_4HKUHirY_2U/Swp31-yKvyI/AAAAAAAAATE/R9DDNeyELg0/MaxPayne3+movie.jpg" height="120"/>
</a>
</div>

<div class="panel">
<a href="#" title="NFS Undercover">
<img alt="NFS Undercover" width="200" src="http://3.bp.blogspot.com/_4HKUHirY_2U/Swp3_TDx6gI/AAAAAAAAATU/3f5FAgdoT-I/NFS+Undercover.jpg" height="120"/>
</a>
</div>

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

And now click Save

Note: Host above 2 images yourself.

................................................................................................
................................................................................................
................................................................................................

How To Add MooTools Featured Content Slider to blogger

And now click Save Template

Important !!! : Download mootools.svn.js as a zip file and hostmootools.svn.js yourself.

You can change height,width,color,... if you like.

Adding HTML Code

So, let's see how to install this cool widget in your blog..

1. Sign into Blogger dashboard

old Blogger interface: Go to Dashboard - Design - Page Elements - Add a Gadget.If you're using the new Blogger interface: Go to Dashboard - Layout - Add a Gadget.Select 'HTML/Javascript' and add the one of code given below.Just copy and paste this code..

<div id="slider-stage">

<ul id="slider-list">

<li id="l1"><a href="#" title="#"><img alt="#" width="200" src="http://4.bp.blogspot.com/_4HKUHirY_2U/SxEB37QtNcI/AAAAAAAAAX0/pCTR9-G_eB8/1.jpg" height="200"/></a></li>

<li id="l2"><a href="#" title="#"><img alt="#" width="200" src="http://3.bp.blogspot.com/_4HKUHirY_2U/SxEB7oOhYOI/AAAAAAAAAX8/fUr3ZlPpS38/2.jpg" height="200"/></a></li>

<li id="l3"><a href="#" title="#"><img alt="#" width="200" src="http://2.bp.blogspot.com/_4HKUHirY_2U/SxEB_sqE6wI/AAAAAAAAAYE/w4jo11g5hBc/3.jpg" height="200"/></a></li>

<li id="l4"><a href="#" title="#"><img alt="#" width="200" src="http://1.bp.blogspot.com/_4HKUHirY_2U/SxECDRFc_NI/AAAAAAAAAYM/Wx0LKwVEKW8/4.jpeg" height="200"/></a></li>

<li id="l5"><a href="#" title="#"><img alt="#" width="200" src="http://4.bp.blogspot.com/_4HKUHirY_2U/SxECJ16VZmI/AAAAAAAAAYU/42yvYTr73fY/5.jpg" height="200"/></a></li>

<li id="l6"><a href="#" title="#"><img alt="#" width="200" src="http://1.bp.blogspot.com/_4HKUHirY_2U/SxECNkV__aI/AAAAAAAAAYc/gLKK6geuCJw/6.jpg" height="200"/></a></li>

<li id="l7"><a href="#" title="#"><img alt="#" width="200" src="http://1.bp.blogspot.com/_4HKUHirY_2U/SxECRhJHnwI/AAAAAAAAAYk/JuLnodmNxsA/7.jpg" height="200"/></a></li>

<li id="l8"><a href="#" title="#"><img alt="#" width="200" src="http://3.bp.blogspot.com/_4HKUHirY_2U/SxECVOyja0I/AAAAAAAAAYs/nqfSWp_GRoE/8.png" height="200"/></a></li>

<li id="l9"><a href="#" title="#"><img alt="#" width="200" src="http://4.bp.blogspot.com/_4HKUHirY_2U/SxECdbX_-MI/AAAAAAAAAY8/qwr28O1jL6k/9.jpg" height="200"/></a></li>

<li id="l10"><a href="#" title="#"><img alt="#" width="200" src="http://4.bp.blogspot.com/_4HKUHirY_2U/SxECj5CtPmI/AAAAAAAAAZE/n97iYa8Ee_Q/10.jpg" height="200"/></a></li>

</ul>

</div>

<div id="slider-buttons">
<a id="previous" href="#">Previous</a> | <a id="next" href="#">Next</a>
</div>

And now click Save

................................................................................................
................................................................................................
................................................................................................

Excellent Content SlideShow Slider to Blogger / WebSite

]]></b:skin>

And immediately before it, paste this code:

#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}

Adding Script Code

Now find (CTRL+F) this code in the template:

Step 2:And find the code </body>
Step 3: Now add the following code just before the </body> tag.

And now click Save Template

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

Adding HTML Code

So, let's see how to install this cool widget in your blog..

1. Sign into Blogger dashboard

old Blogger interface: Go to Dashboard - Design - Page Elements - Add a Gadget.If you're using the new Blogger interface: Go to Dashboard - Layout - Add a Gadget.Select 'HTML/Javascript' and add the one of code given below.Just copy and paste this code..

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

And now click Save

Featured Images Slideshow Slider to Blogger / Websites

And now click Save Template

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

Adding HTML Code

So, let's see how to install this cool widget in your blog..

1. Sign into Blogger dashboard

old Blogger interface: Go to Dashboard - Design - Page Elements - Add a Gadget.If you're using the new Blogger interface: Go to Dashboard - Layout - Add a Gadget.Select 'HTML/Javascript' and add the one of code given below.Just copy and paste this code..

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

And now click Save

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

................................................................................................
................................................................................................
................................................................................................

Smooth Jquery Featured Post Slideshow For Blogger

And now click Save Template

NOTE : To change the speed of slideshow, change the value 4000.

Adding HTML Code

So, let's see how to install this cool widget in your blog..

1. Sign into Blogger dashboard

old Blogger interface: Go to Dashboard - Design - Page Elements - Add a Gadget.If you're using the new Blogger interface: Go to Dashboard - Layout - Add a Gadget.Select 'HTML/Javascript' and add the one of code given below.Just copy and paste this code..

<div id="s3slider">
<ul id="s3sliderContent">

<li class="s3sliderImage">
<a href="YOUR-LINK-HERE"><img style="width:550px;height:200px;" src="http://3.bp.blogspot.com/_4HKUHirY_2U/S9aKt3KHrsI/AAAAAAAAA-w/I2U4SlmRPss/s1600/Crysis-11.jpg" />
<span>Crysis : Download Full Version</span></a>
</li>

<li class="s3sliderImage">
<a href="YOUR-LINK-HERE"><img style="width:550px;height:200px;" src="http://1.bp.blogspot.com/_4HKUHirY_2U/S9aKuMsQ8wI/AAAAAAAAA-4/-cMpslEWrDI/halo-11.jpg" />
<span>Halo 3 : Play Game Online</span></a>
</li>

<li class="s3sliderImage">
<a href="YOUR-LINK-HERE"><img style="width:550px;height:200px;" src="http://2.bp.blogspot.com/_4HKUHirY_2U/S9aKtHKBCTI/AAAAAAAAA-g/mzOzqFjF2FQ/avatar-11.jpg" />
<span>Avatar : Watch Movie Now !!!</span></a>
</li>

<li class="s3sliderImage">
<a href="YOUR-LINK-HERE"><img style="width:550px;height:200px;" src="http://2.bp.blogspot.com/_4HKUHirY_2U/S9aKtosfYNI/AAAAAAAAA-o/GTCV0pnicVk/s1600/call+of+duty-11.jpg" />
<span>Call Of Duty 4 : Get Here</span></a>
</li>

</ul>
</div>

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

And now click Save

NOTE : Replace YOUR-LINK-HERE and images with your content.

................................................................................................
................................................................................................
................................................................................................

How To Add Featured Post Content Slider to Blogger

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

And now click Save Template

NOTE : To change the speed of slideshow, change the value 4000.

Adding HTML Code

So, let's see how to install this cool widget in your blog..

1. Sign into Blogger dashboard

old Blogger interface: Go to Dashboard - Design - Page Elements - Add a Gadget.If you're using the new Blogger interface: Go to Dashboard - Layout - Add a Gadget.Select 'HTML/Javascript' and add the one of code given below.Just copy and paste this code..

And now click Save

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.

................................................................................................
................................................................................................
................................................................................................

How To Add Mootools Recent Post Slider to blogger

How to Install This Widget on Blogger?

Steps...

Adding Script Code

In old layout: Go to Dashboard - Design - Edit HTML - Expand Widget Templates.

In new layout: Go to Dashboard - Template - Edit Template HTML - Expand Widget Templates.

Now find (CTRL+F) this code in the template:

Step 2:And find the code </head>
Step 3: Now add the following code just before the </head> tag.

<a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><script type='text/javascript'>
//<![CDATA[

//MooTools, My Object Oriented Javascript Tools. Copyright (c) 2006 Valerio Proietti, <http://mad4milk.net>, MIT Style License.

eval(function(p,a,c,k,e,d){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--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[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}('m 9F={af:\'1.11\'};h $5k(L){k(L!=7D)};h $t(L){o(!$5k(L))k V;o(L.3T)k\'B\';m t=57 L;o(t==\'2w\'&&L.a7){2k(L.6m){17 1:k\'B\';17 3:k(/\\S/).2U(L.8q)?\'ak\':\'ad\'}}o(t==\'2w\'||t==\'h\'){2k(L.7A){17 2b:k\'1p\';17 6N:k\'6d\';17 19:k\'4k\'}o(57 L.M==\'4w\'){o(L.2M)k\'9U\';o(L.7p)k\'12\'}}k t};h $1X(){m 4Q={};G(m i=0;i<12.M;i++){G(m C 15 12[i]){m ap=12[i][C];m 4X=4Q[C];o(4X&&$t(ap)==\'2w\'&&$t(4X)==\'2w\')4Q[C]=$1X(4X,ap);14 4Q[C]=ap}}k 4Q};m $N=h(){m 1b=12;o(!1b[1])1b=[c,1b[0]];G(m C 15 1b[1])1b[0][C]=1b[1][C];k 1b[0]};m $4a=h(){G(m i=0,l=12.M;i<l;i++){12[i].N=h(1F){G(m 1H 15 1F){o(!c.1z[1H])c.1z[1H]=1F[1H];o(!c[1H])c[1H]=$4a.5F(1H)}}}};$4a.5F=h(1H){k h(Q){k c.1z[1H].3m(Q,2b.1z.7M.1Q(12,1))}};$4a(62,2b,6p,7I);h $2i(L){k!!(L||L===0)};h $7m(L,7C){k $5k(L)?L:7C};h $6J(3O,22){k 1c.9W(1c.6J()*(22-3O+1)+3O)};h $3e(){k J 98().99()};h $4c(1w){9T(1w);9Q(1w);k 1r};m 33=h(L){L=L||{};L.N=$N;k L};m 9R=J 33(P);m aX=J 33(K);K.5K=K.3i(\'5K\')[0];P.3p=!!(K.79);o(P.aV)P.2t=P[P.aQ?\'b0\':\'7B\']=1a;14 o(K.8o&&!K.bb&&!bc.b6)P.3A=P[P.3p?\'aO\':\'5j\']=1a;14 o(K.aN!=1r)P.6k=1a;P.aw=P.3A;ax.N=$N;o(57 4N==\'7D\'){m 4N=h(){};o(P.3A)K.8j("av");4N.1z=(P.3A)?P["[[aq.1z]]"]:{}}4N.1z.3T=h(){};o(P.7B)6o{K.ar("at",V,1a)}6f(e){};m 19=h(1v){m 4H=h(){k(12[0]!==1r&&c.1n&&$t(c.1n)==\'h\')?c.1n.3m(c,12):c};$N(4H,c);4H.1z=1v;4H.7A=19;k 4H};19.1u=h(){};19.1z={N:h(1v){m 5N=J c(1r);G(m C 15 1v){m 7E=5N[C];5N[C]=19.7F(7E,1v[C])}k J 19(5N)},3o:h(){G(m i=0,l=12.M;i<l;i++)$N(c.1z,12[i])}};19.7F=h(3u,21){o(3u&&3u!=21){m t=$t(21);o(t!=$t(3u))k 21;2k(t){17\'h\':m 7s=h(){c.1q=12.7p.1q;k 21.3m(c,12)};7s.1q=3u;k 7s;17\'2w\':k $1X(3u,21)}}k 21};m 8E=J 19({aI:h(O){c.3F=c.3F||[];c.3F.1f(O);k c},8Q:h(){o(c.3F&&c.3F.M)c.3F.89().1V(10,c)},aH:h(){c.3F=[]}});m 2e=J 19({1L:h(t,O){o(O!=19.1u){c.$X=c.$X||{};c.$X[t]=c.$X[t]||[];c.$X[t].6F(O)}k c},1o:h(t,1b,1V){o(c.$X&&c.$X[t]){c.$X[t].1D(h(O){O.2v({\'Q\':c,\'1V\':1V,\'12\':1b})()},c)}k c},49:h(t,O){o(c.$X&&c.$X[t])c.$X[t].2y(O);k c}});m 44=J 19({3v:h(){c.r=$1X.3m(1r,[c.r].N(12));o(c.1L){G(m 4z 15 c.r){o($t(c.r[4z]==\'h\')&&(/^4W[A-Z]/).2U(4z))c.1L(4z,c.r[4z])}}k c}});2b.N({4Z:h(O,Q){G(m i=0,j=c.M;i<j;i++)O.1Q(Q,c[i],i,c)},2D:h(O,Q){m 4d=[];G(m i=0,j=c.M;i<j;i++){o(O.1Q(Q,c[i],i,c))4d.1f(c[i])}k 4d},2E:h(O,Q){m 4d=[];G(m i=0,j=c.M;i<j;i++)4d[i]=O.1Q(Q,c[i],i,c);k 4d},5O:h(O,Q){G(m i=0,j=c.M;i<j;i++){o(!O.1Q(Q,c[i],i,c))k V}k 1a},aC:h(O,Q){G(m i=0,j=c.M;i<j;i++){o(O.1Q(Q,c[i],i,c))k 1a}k V},48:h(2M,R){m 4g=c.M;G(m i=(R<0)?1c.22(0,4g+R):R||0;i<4g;i++){o(c[i]===2M)k i}k-1},7x:h(1d,M){1d=1d||0;o(1d<0)1d=c.M+1d;M=M||(c.M-1d);m 7g=[];G(m i=0;i<M;i++)7g[i]=c[1d++];k 7g},2y:h(2M){m i=0;m 4g=c.M;6g(i<4g){o(c[i]===2M){c.5t(i,1);4g--}14{i++}}k c},1e:h(2M,R){k c.48(2M,R)!=-1},aE:h(1C){m L={},M=1c.3O(c.M,1C.M);G(m i=0;i<M;i++)L[1C[i]]=c[i];k L},N:h(1p){G(m i=0,j=1p.M;i<j;i++)c.1f(1p[i]);k c},1X:h(1p){G(m i=0,l=1p.M;i<l;i++)c.6F(1p[i]);k c},6F:h(2M){o(!c.1e(2M))c.1f(2M);k c},aG:h(){k c[$6J(0,c.M-1)]||1r},6z:h(){k c[c.M-1]||1r}});2b.1z.1D=2b.1z.4Z;2b.1D=2b.4Z;h $A(1p){k 2b.7x(1p)};h $1D(3q,O,Q){o(3q&&57 3q.M==\'4w\'&&$t(3q)!=\'2w\'){2b.4Z(3q,O,Q)}14{G(m 1E 15 3q)O.1Q(Q||3q,3q[1E],1E)}};2b.1z.2U=2b.1z.1e;6p.N({2U:h(5p,2p){k(($t(5p)==\'2L\')?J 6N(5p,2p):5p).2U(c)},2G:h(){k 4t(c,10)},8i:h(){k 4G(c)},6V:h(){k c.2Z(/-\\D/g,h(2B){k 2B.6W(1).7G()})},8t:h(){k c.2Z(/\\w[A-Z]/g,h(2B){k(2B.6W(0)+\'-\'+2B.6W(1).4M())})},70:h(){k c.2Z(/\\b[a-z]/g,h(2B){k 2B.7G()})},4m:h(){k c.2Z(/^\\s+|\\s+$/g,\'\')},6S:h(){k c.2Z(/\\s{2,}/g,\' \').4m()},5T:h(1p){m 2n=c.2B(/\\d{1,3}/g);k(2n)?2n.5T(1p):V},5z:h(1p){m 3G=c.2B(/^#?(\\w{1,2})(\\w{1,2})(\\w{1,2})$/);k(3G)?3G.7M(1).5z(1p):V},1e:h(2L,s){k(s)?(s+c+s).48(s+2L+s)>-1:c.48(2L)>-1},9f:h(){k c.2Z(/([.*+?^${}()|[\\]\\/\\\\])/g,\'\\\\$1\')}});2b.N({5T:h(1p){o(c.M<3)k V;o(c.M==4&&c[3]==0&&!1p)k\'aM\';m 3G=[];G(m i=0;i<3;i++){m 3U=(c[i]-0).8J(16);3G.1f((3U.M==1)?\'0\'+3U:3U)}k 1p?3G:\'#\'+3G.2u(\'\')},5z:h(1p){o(c.M!=3)k V;m 2n=[];G(m i=0;i<3;i++){2n.1f(4t((c[i].M==1)?c[i]+c[i]:c[i],16))}k 1p?2n:\'2n(\'+2n.2u(\',\')+\')\'}});62.N({2v:h(r){m O=c;r=$1X({\'Q\':O,\'u\':V,\'12\':1r,\'1V\':V,\'3s\':V,\'5V\':V},r);o($2i(r.12)&&$t(r.12)!=\'1p\')r.12=[r.12];k h(u){m 1b;o(r.u){u=u||P.u;1b=[(r.u===1a)?u:J r.u(u)];o(r.12)1b.N(r.12)}14 1b=r.12||12;m 35=h(){k O.3m($7m(r.Q,O),1b)};o(r.1V)k aL(35,r.1V);o(r.3s)k aK(35,r.3s);o(r.5V)6o{k 35()}6f(aJ){k V};k 35()}},aB:h(1b,Q){k c.2v({\'12\':1b,\'Q\':Q})},5V:h(1b,Q){k c.2v({\'12\':1b,\'Q\':Q,\'5V\':1a})()},Q:h(Q,1b){k c.2v({\'Q\':Q,\'12\':1b})},aA:h(Q,1b){k c.2v({\'Q\':Q,\'u\':1a,\'12\':1b})},1V:h(1V,Q,1b){k c.2v({\'1V\':1V,\'Q\':Q,\'12\':1b})()},3s:h(7v,Q,1b){k c.2v({\'3s\':7v,\'Q\':Q,\'12\':1b})()}});7I.N({2G:h(){k 4t(c)},8i:h(){k 4G(c)},1t:h(3O,22){k 1c.3O(22,1c.22(3O,c))},3w:h(4n){4n=1c.3d(10,4n||0);k 1c.3w(c*4n)/4n},as:h(O){G(m i=0;i<c;i++)O(i)}});m I=J 19({1n:h(q,1F){o($t(q)==\'2L\'){o(P.2t&&1F&&(1F.1E||1F.t)){m 1E=(1F.1E)?\' 1E="\'+1F.1E+\'"\':\'\';m t=(1F.t)?\' t="\'+1F.t+\'"\':\'\';4b 1F.1E;4b 1F.t;q=\'<\'+q+1E+t+\'>\'}q=K.8j(q)}q=$(q);k(!1F||!q)?q:q.1U(1F)}});m 1M=J 19({1n:h(U){k(U)?$N(U,c):c}});1M.N=h(1F){G(m 1H 15 1F){c.1z[1H]=1F[1H];c[1H]=$4a.5F(1H)}};h $(q){o(!q)k 1r;o(q.3T)k 2a.4e(q);o([P,K].1e(q))k q;m t=$t(q);o(t==\'2L\'){q=K.5o(q);t=(q)?\'B\':V}o(t!=\'B\')k 1r;o(q.3T)k 2a.4e(q);o([\'2w\',\'ao\'].1e(q.59.4M()))k q;$N(q,I.1z);q.3T=h(){};k 2a.4e(q)};K.5s=K.3i;h $$(){m U=[];G(m i=0,j=12.M;i<j;i++){m 1B=12[i];2k($t(1B)){17\'B\':U.1f(1B);17\'au\':1J;17 V:1J;17\'2L\':1B=K.5s(1B,1a);6P:U.N(1B)}}k $$.4C(U)};$$.4C=h(1p){m U=[];G(m i=0,l=1p.M;i<l;i++){o(1p[i].$5u)54;m B=$(1p[i]);o(B&&!B.$5u){B.$5u=1a;U.1f(B)}}G(m n=0,d=U.M;n<d;n++)U[n].$5u=1r;k J 1M(U)};1M.5y=h(C){k h(){m 1b=12;m 1k=[];m U=1a;G(m i=0,j=c.M,35;i<j;i++){35=c[i][C].3m(c[i],1b);o($t(35)!=\'B\')U=V;1k.1f(35)};k(U)?$$.4C(1k):1k}};I.N=h(1v){G(m C 15 1v){4N.1z[C]=1v[C];I.1z[C]=1v[C];I[C]=$4a.5F(C);m 8k=(2b.1z[C])?C+\'1M\':C;1M.1z[8k]=1M.5y(C)}};I.N({1U:h(1F){G(m 1H 15 1F){m 4P=1F[1H];2k(1H){17\'6I\':c.5H(4P);1J;17\'X\':o(c.5r)c.5r(4P);1J;17\'1v\':c.5J(4P);1J;6P:c.58(1H,4P)}}k c},28:h(q,8l){q=$(q);2k(8l){17\'8g\':q.2K.6D(c,q);1J;17\'7N\':m 4v=q.8s();o(!4v)q.2K.6M(c);14 q.2K.6D(c,4v);1J;17\'1j\':m 6X=q.6H;o(6X){q.6D(c,6X);1J}6P:q.6M(c)}k c},b8:h(q){k c.28(q,\'8g\')},9e:h(q){k c.28(q,\'7N\')},b1:h(q){k c.28(q,\'4E\')},aT:h(q){k c.28(q,\'1j\')},9i:h(){m U=[];$1D(12,h(8d){U=U.6i(8d)});$$(U).28(c);k c},2y:h(){k c.2K.8r(c)},aR:h(8e){m q=$(c.aP(8e!==V));o(!q.$X)k q;q.$X={};G(m t 15 c.$X)q.$X[t]={\'1C\':$A(c.$X[t].1C),\'1I\':$A(c.$X[t].1I)};k q.5C()},aU:h(q){q=$(q);c.2K.an(q,c);k q},8b:h(2s){c.6M(K.aY(2s));k c},6Y:h(1l){k c.1l.1e(1l,\' \')},8m:h(1l){o(!c.6Y(1l))c.1l=(c.1l+\' \'+1l).6S();k c},8f:h(1l){c.1l=c.1l.2Z(J 6N(\'(^|\\\\s)\'+1l+\'(?:\\\\s|$)\'),\'$1\').6S();k c},aW:h(1l){k c.6Y(1l)?c.8f(1l):c.8m(1l)},26:h(C,F){2k(C){17\'29\':k c.8n(4G(F));17\'9P\':C=(P.2t)?\'9O\':\'9S\'}C=C.6V();2k($t(F)){17\'4w\':o(![\'9V\',\'8u\'].1e(C))F+=\'3Y\';1J;17\'1p\':F=\'2n(\'+F.2u(\',\')+\')\'}c.1A[C]=F;k c},5H:h(1W){2k($t(1W)){17\'2w\':I.5v(c,\'26\',1W);1J;17\'2L\':c.1A.71=1W}k c},8n:h(29){o(29==0){o(c.1A.3C!="4K")c.1A.3C="4K"}14{o(c.1A.3C!="6y")c.1A.3C="6y"}o(!c.5R||!c.5R.9N)c.1A.8u=1;o(P.2t)c.1A.2D=(29==1)?\'\':"9X(29="+29*56+")";c.1A.29=c.$1G.29=29;k c},1R:h(C){C=C.6V();m 1y=c.1A[C];o(!$2i(1y)){o(C==\'29\')k c.$1G.29;1y=[];G(m 1A 15 I.3y){o(C==1A){I.3y[1A].1D(h(s){m 1A=c.1R(s);1y.1f(4t(1A)?1A:\'7T\')},c);o(C==\'3t\'){m 5O=1y.5O(h(3U){k(3U==1y[0])});k(5O)?1y[0]:V}k 1y.2u(\' \')}}o(C.1e(\'3t\')){o(I.3y.3t.1e(C)){k[\'7X\',\'63\',\'6u\'].2E(h(p){k c.1R(C+p)},c).2u(\' \')}14 o(I.87.1e(C)){k[\'7S\',\'7O\',\'7P\',\'7Y\'].2E(h(p){k c.1R(\'3t\'+p+C.2Z(\'3t\',\'\'))},c).2u(\' \')}}o(K.8v)1y=K.8v.9D(c,1r).9L(C.8t());14 o(c.5R)1y=c.5R[C]}o(P.2t)1y=I.7W(C,1y,c);o(1y&&C.2U(/5P/i)&&1y.1e(\'2n\')){k 1y.4r(\'2n\').5t(1,4).2E(h(5P){k 5P.5T()}).2u(\' \')}k 1y},9b:h(){k I.74(c,\'1R\',12)},4x:h(5U,1d){5U+=\'9I\';m q=(1d)?c[1d]:c[5U];6g(q&&$t(q)!=\'B\')q=q[5U];k $(q)},9G:h(){k c.4x(\'3u\')},8s:h(){k c.4x(\'4v\')},am:h(){k c.4x(\'4v\',\'6H\')},6z:h(){k c.4x(\'3u\',\'ac\')},ag:h(){k $(c.2K)},ah:h(){k $$(c.8o)},6e:h(q){k!!$A(c.3i(\'*\')).1e(q)},5d:h(C){m 3c=I.5h[C];o(3c)k c[3c];m 6w=I.82[C]||0;o(!P.2t||6w)k c.aj(C,6w);m 6C=c.ab[C];k(6C)?6C.8q:1r},a2:h(C){m 3c=I.5h[C];o(3c)c[3c]=\'\';14 c.9y(C);k c},a1:h(){k I.74(c,\'5d\',12)},58:h(C,F){m 3c=I.5h[C];o(3c)c[3c]=F;14 c.a4(C,F);k c},5J:h(1W){k I.5v(c,\'58\',1W)},5L:h(){c.7U=$A(12).2u(\'\');k c},a5:h(2s){m 2J=c.4l();o([\'1A\',\'3f\'].1e(2J)){o(P.2t){o(2J==\'1A\')c.8a.71=2s;14 o(2J==\'3f\')c.58(\'2s\',2s);k c}14{c.8r(c.6H);k c.8b(2s)}}c[$5k(c.7l)?\'7l\':\'7V\']=2s;k c},a6:h(){m 2J=c.4l();o([\'1A\',\'3f\'].1e(2J)){o(P.2t){o(2J==\'1A\')k c.8a.71;14 o(2J==\'3f\')k c.5d(\'2s\')}14{k c.7U}}k($7m(c.7l,c.7V))},4l:h(){k c.59.4M()},1u:h(){2a.4q(c.3i(\'*\'));k c.5L(\'\')}});I.7W=h(C,1y,B){o($2i(4t(1y)))k 1y;o([\'34\',\'2A\'].1e(C)){m 1I=(C==\'2A\')?[\'1m\',\'4F\']:[\'1j\',\'4E\'];m 2P=0;1I.1D(h(F){2P+=B.1R(\'3t-\'+F+\'-2A\').2G()+B.1R(\'7t-\'+F).2G()});k B[\'1x\'+C.70()]-2P+\'3Y\'}14 o(C.2U(/3t(.+)7X|2I|7t/)){k\'7T\'}k 1y};I.3y={\'3t\':[],\'7t\':[],\'2I\':[]};[\'7S\',\'7O\',\'7P\',\'7Y\'].1D(h(86){G(m 1A 15 I.3y)I.3y[1A].1f(1A+86)});I.87=[\'cC\',\'cA\',\'cB\'];I.74=h(q,2N,1C){m 1y={};$1D(1C,h(1g){1y[1g]=q[2N](1g)});k 1y};I.5v=h(q,2N,72){G(m 1g 15 72)q[2N](1g,72[1g]);k q};I.5h=J 33({\'4k\':\'1l\',\'G\':\'cg\',\'cf\':\'cd\',\'ce\':\'cj\',\'ck\':\'cp\',\'co\':\'cn\',\'cG\':\'cm\',\'cF\':\'cL\',\'d0\':\'cZ\',\'F\':\'F\',\'85\':\'85\',\'84\':\'84\',\'80\':\'80\',\'81\':\'81\'});I.82={\'4Y\':2,\'3N\':2};I.2c={51:{2C:h(t,O){o(c.6s)c.6s(t,O,V);14 c.d4(\'4W\'+t,O);k c},3L:h(t,O){o(c.8c)c.8c(t,O,V);14 c.d3(\'4W\'+t,O);k c}}};P.N(I.2c.51);K.N(I.2c.51);I.N(I.2c.51);m 2a={U:[],4e:h(q){o(!q.$1G){2a.U.1f(q);q.$1G={\'29\':1}}k q},4q:h(U){G(m i=0,j=U.M,q;i<j;i++){o(!(q=U[i])||!q.$1G)54;o(q.$X)q.1o(\'4q\').5C();G(m p 15 q.$1G)q.$1G[p]=1r;G(m d 15 I.1z)q[d]=1r;2a.U[2a.U.48(q)]=1r;q.3T=q.$1G=q=1r}2a.U.2y(1r)},1u:h(){2a.4e(P);2a.4e(K);2a.4q(2a.U)}};P.2C(\'7H\',h(){P.2C(\'66\',2a.1u);o(P.2t)P.2C(\'66\',cJ)});m 2l=J 19({1n:h(u){o(u&&u.$83)k u;c.$83=1a;u=u||P.u;c.u=u;c.t=u.t;c.2X=u.2X||u.cI;o(c.2X.6m==3)c.2X=c.2X.2K;c.89=u.cN;c.cO=u.cT;c.cS=u.cP;c.cQ=u.cl;o([\'6n\',\'47\'].1e(c.t)){c.cb=(u.88)?u.88/cc:-(u.bz||0)/3}14 o(c.t.1e(\'1g\')){c.5a=u.7Q||u.bx;G(m 1E 15 2l.1C){o(2l.1C[1E]==c.5a){c.1g=1E;1J}}o(c.t==\'7w\'){m 5b=c.5a-bw;o(5b>0&&5b<13)c.1g=\'f\'+5b}c.1g=c.1g||6p.bA(c.5a).4M()}14 o(c.t.2U(/(8x|2O|bG)/)){c.1Y={\'x\':u.6q||u.7Z+K.2r.4I,\'y\':u.6r||u.7R+K.2r.4J};c.8C={\'x\':u.6q?u.6q-P.8P:u.7Z,\'y\':u.6r?u.6r-P.8O:u.7R};c.bC=(u.7Q==3)||(u.bt==2);2k(c.t){17\'6c\':c.1Z=u.1Z||u.bs;1J;17\'69\':c.1Z=u.1Z||u.9c}c.8p()}k c},1K:h(){k c.5g().5e()},5g:h(){o(c.u.5g)c.u.5g();14 c.u.bk=1a;k c},5e:h(){o(c.u.5e)c.u.5e();14 c.u.bi=V;k c}});2l.5x={1Z:h(){o(c.1Z&&c.1Z.6m==3)c.1Z=c.1Z.2K},8w:h(){6o{2l.5x.1Z.1Q(c)}6f(e){c.1Z=c.2X}}};2l.1z.8p=(P.6k)?2l.5x.8w:2l.5x.1Z;2l.1C=J 33({\'bq\':13,\'bn\':38,\'bI\':40,\'1m\':37,\'4F\':39,\'bY\':27,\'c4\':32,\'c9\':8,\'c6\':9,\'4b\':46});I.2c.2e={1L:h(t,O){c.$X=c.$X||{};c.$X[t]=c.$X[t]||{\'1C\':[],\'1I\':[]};o(c.$X[t].1C.1e(O))k c;c.$X[t].1C.1f(O);m 5w=t;m 23=I.2e[t];o(23){o(23.6j)23.6j.1Q(c,O);o(23.2E)O=23.2E;o(23.t)5w=23.t}o(!c.6s)O=O.2v({\'Q\':c,\'u\':1a});c.$X[t].1I.1f(O);k(I.6h.1e(5w))?c.2C(5w,O):c},49:h(t,O){o(!c.$X||!c.$X[t])k c;m 1h=c.$X[t].1C.48(O);o(1h==-1)k c;m 1g=c.$X[t].1C.5t(1h,1)[0];m F=c.$X[t].1I.5t(1h,1)[0];m 23=I.2e[t];o(23){o(23.2y)23.2y.1Q(c,O);o(23.t)t=23.t}k(I.6h.1e(t))?c.3L(t,F):c},5r:h(1W){k I.5v(c,\'1L\',1W)},5C:h(t){o(!c.$X)k c;o(!t){G(m 5D 15 c.$X)c.5C(5D);c.$X=1r}14 o(c.$X[t]){c.$X[t].1C.1D(h(O){c.49(t,O)},c);c.$X[t]=1r}k c},1o:h(t,1b,1V){o(c.$X&&c.$X[t]){c.$X[t].1C.1D(h(O){O.2v({\'Q\':c,\'1V\':1V,\'12\':1b})()},c)}k c},8h:h(R,t){o(!R.$X)k c;o(!t){G(m 5D 15 R.$X)c.8h(R,5D)}14 o(R.$X[t]){R.$X[t].1C.1D(h(O){c.1L(t,O)},c)}k c}};P.N(I.2c.2e);K.N(I.2c.2e);I.N(I.2c.2e);I.2e=J 33({\'7o\':{t:\'6c\',2E:h(u){u=J 2l(u);o(u.1Z!=c&&!c.6e(u.1Z))c.1o(\'7o\',u)}},\'7r\':{t:\'69\',2E:h(u){u=J 2l(u);o(u.1Z!=c&&!c.6e(u.1Z))c.1o(\'7r\',u)}},\'47\':{t:(P.6k)?\'6n\':\'47\'}});I.6h=[\'8x\',\'bJ\',\'6x\',\'5X\',\'47\',\'6n\',\'6c\',\'69\',\'2Y\',\'7w\',\'bT\',\'by\',\'3n\',\'66\',\'7H\',\'bK\',\'bM\',\'bN\',\'bX\',\'2S\',\'c7\',\'c8\',\'3Z\',\'8W\',\'8X\',\'ca\',\'2f\'];62.N({3I:h(Q,1b){k c.2v({\'Q\':Q,\'12\':1b,\'u\':2l})}});1M.N({c3:h(2J){k J 1M(c.2D(h(q){k(I.4l(q)==2J)}))},7L:h(1l,2d){m U=c.2D(h(q){k(q.1l&&q.1l.1e(1l,\' \'))});k(2d)?U:J 1M(U)},7J:h(3B,2d){m U=c.2D(h(q){k(q.3B==3B)});k(2d)?U:J 1M(U)},7K:h(1E,65,F,2d){m U=c.2D(h(q){m 21=I.5d(q,1E);o(!21)k V;o(!65)k 1a;2k(65){17\'=\':k(21==F);17\'*=\':k(21.1e(F));17\'^=\':k(21.7i(0,F.M)==F);17\'$=\':k(21.7i(21.M-F.M)==F);17\'!=\':k(21!=F);17\'~=\':k 21.1e(F,\' \')}k V});k(2d)?U:J 1M(U)}});h $E(1B,2D){k($(2D)||K).9r(1B)};h $br(1B,2D){k($(2D)||K).5s(1B)};$$.2W={\'6d\':/^(\\w*|\\*)(?:#([\\w-]+)|\\.([\\w-]+))?(?:\\[(\\w+)(?:([!*^$]?=)["\']?([^"\'\\]]*)["\']?)?])?$/,\'3p\':{64:h(1k,2H,Y,i){m 2h=[2H.bl?\'6R:\':\'\',Y[1]];o(Y[2])2h.1f(\'[@3B="\',Y[2],\'"]\');o(Y[3])2h.1f(\'[1e(6i(" ", @4k, " "), " \',Y[3],\' ")]\');o(Y[4]){o(Y[5]&&Y[6]){2k(Y[5]){17\'*=\':2h.1f(\'[1e(@\',Y[4],\', "\',Y[6],\'")]\');1J;17\'^=\':2h.1f(\'[bf-bu(@\',Y[4],\', "\',Y[6],\'")]\');1J;17\'$=\':2h.1f(\'[cR(@\',Y[4],\', 2L-M(@\',Y[4],\') - \',Y[6].M,\' + 1) = "\',Y[6],\'"]\');1J;17\'=\':2h.1f(\'[@\',Y[4],\'="\',Y[6],\'"]\');1J;17\'!=\':2h.1f(\'[@\',Y[4],\'!="\',Y[6],\'"]\')}}14{2h.1f(\'[@\',Y[4],\']\')}}1k.1f(2h.2u(\'\'));k 1k},67:h(1k,2H,2d){m U=[];m 3p=K.79(\'.//\'+1k.2u(\'//\'),2H,$$.2W.7z,cM.cV,1r);G(m i=0,j=3p.cU;i<j;i++)U.1f(3p.cr(i));k(2d)?U:J 1M(U.2E($))}},\'9p\':{64:h(1k,2H,Y,i){o(i==0){o(Y[2]){m q=2H.5o(Y[2]);o(!q||((Y[1]!=\'*\')&&(I.4l(q)!=Y[1])))k V;1k=[q]}14{1k=$A(2H.3i(Y[1]))}}14{1k=$$.2W.3i(1k,Y[1]);o(Y[2])1k=1M.7J(1k,Y[2],1a)}o(Y[3])1k=1M.7L(1k,Y[3],1a);o(Y[4])1k=1M.7K(1k,Y[4],Y[5],Y[6],1a);k 1k},67:h(1k,2H,2d){k(2d)?1k:$$.4C(1k)}},7z:h(7y){k(7y==\'6R\')?\'9C://cv.cx.cw/ay/6R\':V},3i:h(2H,59){m 6b=[];G(m i=0,j=2H.M;i<j;i++)6b.N(2H[i].3i(59));k 6b}};$$.2W.2N=(P.3p)?\'3p\':\'9p\';I.2c.6a={5M:h(1B,2d){m 1k=[];1B=1B.4m().4r(\' \');G(m i=0,j=1B.M;i<j;i++){m 9q=1B[i];m Y=9q.2B($$.2W.6d);o(!Y)1J;Y[1]=Y[1]||\'*\';m 2h=$$.2W[$$.2W.2N].64(1k,c,Y,i);o(!2h)1J;1k=2h}k $$.2W[$$.2W.2N].67(1k,c,2d)},9r:h(1B){k $(c.5M(1B,1a)[0]||V)},5s:h(1B,2d){m U=[];1B=1B.4r(\',\');G(m i=0,j=1B.M;i<j;i++)U=U.6i(c.5M(1B[i],1a));k(2d)?U:$$.4C(U)}};I.N({5o:h(3B){m q=K.5o(3B);o(!q)k V;G(m 1q=q.2K;1q!=c;1q=1q.2K){o(!1q)k V}k q},ct:h(1l){k c.5M(\'.\'+1l)}});K.N(I.2c.6a);I.N(I.2c.6a);I.N({31:h(x,y){c.4I=x;c.4J=y},5S:h(){k{\'2f\':{\'x\':c.4I,\'y\':c.4J},\'2P\':{\'x\':c.3M,\'y\':c.3D},\'5Z\':{\'x\':c.5B,\'y\':c.5Q}}},3g:h(1S){1S=1S||[];m q=c,1m=0,1j=0;bp{1m+=q.bo||0;1j+=q.bH||0;q=q.c2}6g(q);1S.1D(h(B){1m-=B.4I||0;1j-=B.4J||0});k{\'x\':1m,\'y\':1j}},8Y:h(1S){k c.3g(1S).y},8Z:h(1S){k c.3g(1S).x},61:h(1S){m 1s=c.3g(1S);m L={\'2A\':c.3M,\'34\':c.3D,\'1m\':1s.x,\'1j\':1s.y};L.4F=L.1m+L.2A;L.4E=L.1j+L.34;k L}});I.2e.6t={6j:h(O){o(P.5l){O.1Q(c);k}m 4p=h(){o(P.5l)k;P.5l=1a;P.1w=$4c(P.1w);c.1o(\'6t\')}.Q(c);o(K.4T&&P.3A){P.1w=h(){o([\'5l\',\'6v\'].1e(K.4T))4p()}.3s(50)}14 o(K.4T&&P.2t){o(!$(\'68\')){m 3N=(P.c1.c0==\'bZ:\')?\'://0\':\'9a:c5(0)\';K.bR(\'<3f 3B="68" bS 3N="\'+3N+\'"><\\/3f>\');$(\'68\').bU=h(){o(c.4T==\'6v\')4p()}}}14{P.2C("3n",4p);K.2C("bV",4p)}}};P.bQ=h(O){k c.1L(\'6t\',O)};P.N({7h:h(){o(c.5j)k c.bP;o(c.9s)k K.4i.9A;k K.2r.9A},76:h(){o(c.5j)k c.bL;o(c.9s)k K.4i.9k;k K.2r.9k},8N:h(){o(c.2t)k 1c.22(K.2r.3M,K.2r.5B);o(c.3A)k K.4i.5B;k K.2r.5B},8M:h(){o(c.2t)k 1c.22(K.2r.3D,K.2r.5Q);o(c.3A)k K.4i.5Q;k K.2r.5Q},77:h(){k c.8P||K.2r.4I},75:h(){k c.8O||K.2r.4J},5S:h(){k{\'2P\':{\'x\':c.7h(),\'y\':c.76()},\'5Z\':{\'x\':c.8N(),\'y\':c.8M()},\'2f\':{\'x\':c.77(),\'y\':c.75()}}},3g:h(){k{\'x\':0,\'y\':0}}});m 18={};18.2m=J 19({r:{4f:19.1u,2o:19.1u,8U:19.1u,1N:h(p){k-(1c.94(1c.7k*p)-1)/2},3h:bO,25:\'3Y\',45:1a,8V:50},1n:h(r){c.B=c.B||1r;c.3v(r);o(c.r.1n)c.r.1n.1Q(c)},1T:h(){m 3e=$3e();o(3e<c.3e+c.r.3h){c.8R=c.r.1N((3e-c.3e)/c.r.3h);c.3J();c.3K()}14{c.1K(1a);c.1U(c.T);c.1o(\'2o\',c.B,10);c.8Q()}},1U:h(T){c.W=T;c.3K();k c},3J:h(){c.W=c.3H(c.R,c.T)},3H:h(R,T){k(T-R)*c.8R+R},1d:h(R,T){o(!c.r.45)c.1K();14 o(c.1w)k c;c.R=R;c.T=T;c.2S=c.T-c.R;c.3e=$3e();c.1w=c.1T.3s(1c.3w(9j/c.r.8V),c);c.1o(\'4f\',c.B);k c},1K:h(2j){o(!c.1w)k c;c.1w=$4c(c.1w);o(!2j)c.1o(\'8U\',c.B);k c},23:h(R,T){k c.1d(R,T)},bW:h(2j){k c.1K(2j)}});18.2m.3o(J 8E,J 2e,J 44);18.2R={3Z:h(C,T){o(C.2U(/5P/i))k c.6u;m t=$t(T);o((t==\'1p\')||(t==\'2L\'&&T.1e(\' \')))k c.5y;k c.8y},2q:h(q,C,43){o(!43.1f)43=[43];m R=43[0],T=43[1];o(!$2i(T)){T=R;R=q.1R(C)}m 1i=c.3Z(C,T);k{\'R\':1i.2q(R),\'T\':1i.2q(T),\'1i\':1i}}};18.2R.8y={2q:h(F){k 4G(F)},3X:h(R,T,41){k 41.3H(R,T)},3W:h(F,25,C){o(25==\'3Y\'&&C!=\'29\')F=1c.3w(F);k F+25}};18.2R.5y={2q:h(F){k F.1f?F:F.4r(\' \').2E(h(v){k 4G(v)})},3X:h(R,T,41){m W=[];G(m i=0;i<R.M;i++)W[i]=41.3H(R[i],T[i]);k W},3W:h(F,25,C){o(25==\'3Y\'&&C!=\'29\')F=F.2E(1c.3w);k F.2u(25+\' \')+25}};18.2R.6u={2q:h(F){k F.1f?F:F.5z(1a)},3X:h(R,T,41){m W=[];G(m i=0;i<R.M;i++)W[i]=1c.3w(41.3H(R[i],T[i]));k W},3W:h(F){k\'2n(\'+F.2u(\',\')+\')\'}};18.63=18.2m.N({1n:h(q,C,r){c.B=$(q);c.C=C;c.1q(r)},4U:h(){k c.1U(0)},3J:h(){c.W=c.1i.3X(c.R,c.T,c)},1U:h(T){c.1i=18.2R.3Z(c.C,T);k c.1q(c.1i.2q(T))},1d:h(R,T){o(c.1w&&c.r.45)k c;m 1O=18.2R.2q(c.B,c.C,[R,T]);c.1i=1O.1i;k c.1q(1O.R,1O.T)},3K:h(){c.B.26(c.C,c.1i.3W(c.W,c.r.25,c.C))}});I.N({bm:h(C,r){k J 18.63(c,C,r)}});18.3y=18.2m.N({1n:h(q,r){c.B=$(q);c.1q(r)},3J:h(){G(m p 15 c.R)c.W[p]=c.1i[p].3X(c.R[p],c.T[p],c)},1U:h(T){m 1O={};c.1i={};G(m p 15 T){c.1i[p]=18.2R.3Z(p,T[p]);1O[p]=c.1i[p].2q(T[p])}k c.1q(1O)},1d:h(L){o(c.1w&&c.r.45)k c;c.W={};c.1i={};m R={},T={};G(m p 15 L){m 1O=18.2R.2q(c.B,p,L[p]);R[p]=1O.R;T[p]=1O.T;c.1i[p]=1O.1i}k c.1q(R,T)},3K:h(){G(m p 15 c.W)c.B.26(p,c.1i[p].3W(c.W[p],c.r.25,p))}});I.N({bg:h(r){k J 18.3y(c,r)}});18.1M=18.2m.N({1n:h(U,r){c.U=$$(U);c.1q(r)},3J:h(){G(m i 15 c.R){m 4o=c.R[i],3j=c.T[i],3b=c.1i[i],4s=c.W[i]={};G(m p 15 4o)4s[p]=3b[p].3X(4o[p],3j[p],c)}},1U:h(T){m 1O={};c.1i={};G(m i 15 T){m 3j=T[i],3b=c.1i[i]={},9l=1O[i]={};G(m p 15 3j){3b[p]=18.2R.3Z(p,3j[p]);9l[p]=3b[p].2q(3j[p])}}k c.1q(1O)},1d:h(L){o(c.1w&&c.r.45)k c;c.W={};c.1i={};m R={},T={};G(m i 15 L){m 6l=L[i],4o=R[i]={},3j=T[i]={},3b=c.1i[i]={};G(m p 15 6l){m 1O=18.2R.2q(c.U[i],p,6l[p]);4o[p]=1O.R;3j[p]=1O.T;3b[p]=1O.1i}}k c.1q(R,T)},3K:h(){G(m i 15 c.W){m 4s=c.W[i],3b=c.1i[i];G(m p 15 4s)c.U[i].26(p,3b[p].3W(4s[p],c.r.25,p))}}});18.bh=18.2m.N({r:{1S:[],1x:{\'x\':0,\'y\':0},8G:1a},1n:h(B,r){c.W=[];c.B=$(B);c.2g={\'1K\':c.1K.Q(c,V)};c.1q(r);o(c.r.8G){c.1L(\'4f\',h(){K.1L(\'47\',c.2g.1K)}.Q(c));c.1L(\'2o\',h(){K.49(\'47\',c.2g.1K)}.Q(c))}},3J:h(){G(m i=0;i<2;i++)c.W[i]=c.3H(c.R[i],c.T[i])},31:h(x,y){o(c.1w&&c.r.45)k c;m q=c.B.5S();m 1I={\'x\':x,\'y\':y};G(m z 15 q.2P){m 22=q.5Z[z]-q.2P[z];o($2i(1I[z]))1I[z]=($t(1I[z])==\'4w\')?1I[z].1t(0,22):22;14 1I[z]=q.2f[z];1I[z]+=c.r.1x[z]}k c.1d([q.2f.x,q.2f.y],[1I.x,1I.y])},bj:h(){k c.31(V,0)},bD:h(){k c.31(V,\'9d\')},bE:h(){k c.31(0,V)},bF:h(){k c.31(\'9d\',V)},9c:h(q){m 1q=c.B.3g(c.r.1S);m 2X=$(q).3g(c.r.1S);k c.31(2X.x-1q.x,2X.y-1q.y)},3K:h(){c.B.31(c.W[0],c.W[1])}});18.bB=18.2m.N({r:{1P:\'7u\'},1n:h(q,r){c.B=$(q);c.2z=J I(\'4L\',{\'6I\':$N(c.B.9b(\'2I\'),{\'bv\':\'4K\'})}).9e(c.B).9i(c.B);c.B.26(\'2I\',0);c.3v(r);c.W=[];c.1q(c.r);c.4O=1a;c.1L(\'2o\',h(){c.4O=(c.W[0]===0)});o(P.5j)c.1L(\'2o\',h(){o(c.4O)c.B.2y().28(c.2z)})},3J:h(){G(m i=0;i<2;i++)c.W[i]=c.3H(c.R[i],c.T[i])},7u:h(){c.2I=\'2I-1j\';c.4S=\'34\';c.1x=c.B.3D},7e:h(){c.2I=\'2I-1m\';c.4S=\'2A\';c.1x=c.B.3M},9h:h(1P){c[1P||c.r.1P]();k c.1d([c.B.1R(c.2I).2G(),c.2z.1R(c.4S).2G()],[0,c.1x])},9g:h(1P){c[1P||c.r.1P]();k c.1d([c.B.1R(c.2I).2G(),c.2z.1R(c.4S).2G()],[-c.1x,0])},4U:h(1P){c[1P||c.r.1P]();c.4O=V;k c.1U([-c.1x,0])},7a:h(1P){c[1P||c.r.1P]();c.4O=1a;k c.1U([0,c.1x])},cH:h(1P){o(c.2z.3D==0||c.2z.3M==0)k c.9h(1P);k c.9g(1P)},3K:h(){c.B.26(c.2I,c.W[0]+c.r.25);c.2z.26(c.4S,c.W[1]+c.r.25)}});18.6E=h(1N,2p){2p=2p||[];o($t(2p)!=\'1p\')2p=[2p];k $N(1N,{cK:h(1h){k 1N(1h,2p)},d1:h(1h){k 1-1N(1-1h,2p)},d5:h(1h){k(1h<=0.5)?1N(2*1h,2p)/2:(2-1N(2*(1-1h),2p))/2}})};18.2Q=J 33({d2:h(p){k p}});18.2Q.N=h(7c){G(m 1N 15 7c){18.2Q[1N]=J 18.6E(7c[1N]);18.2Q.6G(1N)}};18.2Q.6G=h(1N){[\'cX\',\'cW\',\'cY\'].1D(h(73){18.2Q[1N.4M()+73]=18.2Q[1N][\'ci\'+73]})};18.2Q.N({ch:h(p,x){k 1c.3d(p,x[0]||6)},cq:h(p){k 1c.3d(2,8*(p-1))},cD:h(p){k 1-1c.96(1c.cE(p))},cz:h(p){k 1-1c.96((1-p)*1c.7k/2)},cy:h(p,x){x=x[0]||1.cs;k 1c.3d(p,2)*((x+1)*p-x)},cu:h(p){m F;G(m a=0,b=1;1;a+=b,b/=2){o(p>=(7-4*a)/11){F=-1c.3d((11-6*a-11*p)/4,2)+b*b;1J}}k F},be:h(p,x){k 1c.3d(2,10*--p)*1c.94(20*p*1c.7k*(x[0]||1)/3)}});[\'aa\',\'a3\',\'a0\',\'a9\'].1D(h(1N,i){18.2Q[1N]=J 18.6E(h(p){k 1c.3d(p,[i+2])});18.2Q.6G(1N)});m 3z={};3z.2m=J 19({r:{4B:V,25:\'3Y\',4f:19.1u,97:19.1u,2o:19.1u,92:19.1u,6Z:19.1u,1t:V,3a:{x:\'1m\',y:\'1j\'},3E:V,6O:6},1n:h(q,r){c.3v(r);c.B=$(q);c.4B=$(c.r.4B)||c.B;c.2O={\'W\':{},\'1h\':{}};c.F={\'1d\':{},\'W\':{}};c.2g={\'1d\':c.1d.3I(c),\'3V\':c.3V.3I(c),\'36\':c.36.3I(c),\'1K\':c.1K.Q(c)};c.95();o(c.r.1n)c.r.1n.1Q(c)},95:h(){c.4B.1L(\'5X\',c.2g.1d);k c},a8:h(){c.4B.49(\'5X\',c.2g.1d);k c},1d:h(u){c.1o(\'97\',c.B);c.2O.1d=u.1Y;m 1t=c.r.1t;c.1t={\'x\':[],\'y\':[]};G(m z 15 c.r.3a){o(!c.r.3a[z])54;c.F.W[z]=c.B.1R(c.r.3a[z]).2G();c.2O.1h[z]=u.1Y[z]-c.F.W[z];o(1t&&1t[z]){G(m i=0;i<2;i++){o($2i(1t[z][i]))c.1t[z][i]=($t(1t[z][i])==\'h\')?1t[z][i]():1t[z][i]}}}o($t(c.r.3E)==\'4w\')c.r.3E={\'x\':c.r.3E,\'y\':c.r.3E};K.2C(\'2Y\',c.2g.3V);K.2C(\'6x\',c.2g.1K);c.1o(\'4f\',c.B);u.1K()},3V:h(u){m 93=1c.3w(1c.9Z(1c.3d(u.1Y.x-c.2O.1d.x,2)+1c.3d(u.1Y.y-c.2O.1d.y,2)));o(93>c.r.6O){K.3L(\'2Y\',c.2g.3V);K.2C(\'2Y\',c.2g.36);c.36(u);c.1o(\'92\',c.B)}u.1K()},36:h(u){c.4u=V;c.2O.W=u.1Y;G(m z 15 c.r.3a){o(!c.r.3a[z])54;c.F.W[z]=c.2O.W[z]-c.2O.1h[z];o(c.1t[z]){o($2i(c.1t[z][1])&&(c.F.W[z]>c.1t[z][1])){c.F.W[z]=c.1t[z][1];c.4u=1a}14 o($2i(c.1t[z][0])&&(c.F.W[z]<c.1t[z][0])){c.F.W[z]=c.1t[z][0];c.4u=1a}}o(c.r.3E[z])c.F.W[z]-=(c.F.W[z]%c.r.3E[z]);c.B.26(c.r.3a[z],c.F.W[z]+c.r.25)}c.1o(\'6Z\',c.B);u.1K()},1K:h(){K.3L(\'2Y\',c.2g.3V);K.3L(\'2Y\',c.2g.36);K.3L(\'6x\',c.2g.1K);c.1o(\'2o\',c.B)}});3z.2m.3o(J 2e,J 44);I.N({ai:h(r){k J 3z.2m(c,$1X({3a:{x:\'2A\',y:\'34\'}},r))}});3z.91=3z.2m.N({r:{5q:[],2F:V,1S:[]},1n:h(q,r){c.3v(r);c.B=$(q);c.5q=$$(c.r.5q);c.2F=$(c.r.2F);c.1s={\'B\':c.B.1R(\'1s\'),\'2F\':V};o(c.2F)c.1s.2F=c.2F.1R(\'1s\');o(![\'52\',\'3P\',\'4j\'].1e(c.1s.B))c.1s.B=\'3P\';m 1j=c.B.1R(\'1j\').2G();m 1m=c.B.1R(\'1m\').2G();o(c.1s.B==\'3P\'&&![\'52\',\'3P\',\'4j\'].1e(c.1s.2F)){1j=$2i(1j)?1j:c.B.8Y(c.r.1S);1m=$2i(1m)?1m:c.B.8Z(c.r.1S)}14{1j=$2i(1j)?1j:0;1m=$2i(1m)?1m:0}c.B.5H({\'1j\':1j,\'1m\':1m,\'1s\':c.1s.B});c.1q(c.B)},1d:h(u){c.2x=1r;o(c.2F){m 3R=c.2F.61();m q=c.B.61();o(c.1s.B==\'3P\'&&![\'52\',\'3P\',\'4j\'].1e(c.1s.2F)){c.r.1t={\'x\':[3R.1m,3R.4F-q.2A],\'y\':[3R.1j,3R.4E-q.34]}}14{c.r.1t={\'y\':[0,3R.34-q.34],\'x\':[0,3R.2A-q.2A]}}}c.1q(u)},36:h(u){c.1q(u);m 2x=c.4u?V:c.5q.2D(c.90,c).6z();o(c.2x!=2x){o(c.2x)c.2x.1o(\'ae\',[c.B,c]);c.2x=2x?2x.1o(\'9Y\',[c.B,c]):1r}k c},90:h(q){q=q.61(c.r.1S);m W=c.2O.W;k(W.x>q.1m&&W.x<q.4F&&W.y<q.4E&&W.y>q.1j)},1K:h(){o(c.2x&&!c.4u)c.2x.1o(\'9H\',[c.B,c]);14 c.B.1o(\'9J\',c);c.1q();k c}});I.N({9M:h(r){k J 3z.91(c,r)}});m 2V=J 33({r:{5W:V,5Y:V,3h:V,6T:V},1U:h(1g,F,r){r=$1X(c.r,r);F=9E(F);o(r.5W)F+=\'; 5W=\'+r.5W;o(r.5Y)F+=\'; 5Y=\'+r.5Y;o(r.3h){m 5A=J 98();5A.9K(5A.99()+r.3h*24*60*60*9j);F+=\'; al=\'+5A.bd()}o(r.6T)F+=\'; 6T\';K.3Q=1g+\'=\'+F;k $N(r,{\'1g\':1g,\'F\':F})},53:h(1g){m F=K.3Q.2B(\'(?:^|;)\\\\s*\'+1g.9f()+\'=([^;]*)\');k F?aZ(F[1]):V},2y:h(3Q,r){o($t(3Q)==\'2w\')c.1U(3Q.1g,\'\',$1X(3Q,{3h:-1}));14 c.1U(3Q,\'\',$1X(r,{3h:-1}))}});m 8H=J 33({9a:h(1W,1v){1v=$1X({\'4R\':19.1u},1v);m 3f=J I(\'3f\',{\'3N\':1W}).5r({\'3n\':1v.4R,\'aS\':h(){o(c.4T==\'6v\')c.1o(\'3n\')}});4b 1v.4R;k 3f.5J(1v).28(K.5K)},1i:h(1W,1v){k J I(\'b9\',$1X({\'9z\':\'ba\',\'b7\':\'b3\',\'t\':\'2s/1i\',\'4Y\':1W},1v)).28(K.5K)},3S:h(1W,1v){1v=$1X({\'4R\':19.1u,\'b2\':19.1u,\'b4\':19.1u},1v);m 3S=J b5();3S.3N=1W;m B=J I(\'7q\',{\'3N\':1W});[\'3n\',\'8X\',\'8W\'].1D(h(t){m u=1v[\'4W\'+t];4b 1v[\'4W\'+t];B.1L(t,h(){c.49(t,12.7p);u.1Q(c)})});o(3S.2A&&3S.34)B.1o(\'3n\',B,1);k B.5J(1v)},5E:h(42,r){r=$1X({2o:19.1u,8I:19.1u},r);o(!42.1f)42=[42];m 5E=[];m 5G=0;42.1D(h(1W){m 7q=J 8H.3S(1W,{\'4R\':h(){r.8I.1Q(c,5G);5G++;o(5G==42.M)r.2o()}});5E.1f(7q)});k J 1M(5E)}});m 2T=J 19({M:0,1n:h(2w){c.L=2w||{};c.4D()},53:h(1g){k(c.5I(1g))?c.L[1g]:1r},5I:h(1g){k(1g 15 c.L)},1U:h(1g,F){o(!c.5I(1g))c.M++;c.L[1g]=F;k c},4D:h(){c.M=0;G(m p 15 c.L)c.M++;k c},2y:h(1g){o(c.5I(1g)){4b c.L[1g];c.M--}k c},1D:h(O,Q){$1D(c.L,O,Q)},N:h(L){$N(c.L,L);k c.4D()},1X:h(){c.L=$1X.3m(1r,[c.L].N(12));k c.4D()},1u:h(){c.L={};c.M=0;k c},1C:h(){m 1C=[];G(m C 15 c.L)1C.1f(C);k 1C},1I:h(){m 1I=[];G(m C 15 c.L)1I.1f(c.L[C]);k 1I}});h $H(L){k J 2T(L)};2T.2V=2T.N({1n:h(1E,r){c.1E=1E;c.r=$N({\'8A\':1a},r||{});c.3n()},8z:h(){o(c.M==0){2V.2y(c.1E,c.r);k 1a}m 78=8F.8J(c.L);o(78.M>az)k V;2V.1U(c.1E,78,c.r);k 1a},3n:h(){c.L=8F.79(2V.53(c.1E),1a)||{};c.4D()}});2T.2V.2c={};[\'N\',\'1U\',\'1X\',\'1u\',\'2y\'].1D(h(2N){2T.2V.2c[2N]=h(){2T.1z[2N].3m(c,12);o(c.r.8A)c.8z();k c}});2T.2V.3o(2T.2V.2c);m 8D=J 19({r:{4y:20,7b:1,5i:h(x,y){c.B.31(x,y)}},1n:h(B,r){c.3v(r);c.B=$(B);c.7f=([P,K].1e(B))?$(K.4i):c.B},1d:h(){c.7d=c.8B.3I(c);c.7f.2C(\'2Y\',c.7d)},1K:h(){c.7f.3L(\'2Y\',c.7d);c.1w=$4c(c.1w)},8B:h(u){c.1Y=(c.B==P)?u.8C:u.1Y;o(!c.1w)c.1w=c.2f.3s(50,c)},2f:h(){m q=c.B.5S();m 1h=c.B.3g();m 2S={\'x\':0,\'y\':0};G(m z 15 c.1Y){o(c.1Y[z]<(c.r.4y+1h[z])&&q.2f[z]!=0)2S[z]=(c.1Y[z]-c.r.4y-1h[z])*c.r.7b;14 o(c.1Y[z]+c.r.4y>(q.2P[z]+1h[z])&&q.2f[z]+q.2P[z]!=q.5Z[z])2S[z]=(c.1Y[z]-q.2P[z]+c.r.4y-1h[z])*c.r.7b}o(2S.y||2S.x)c.1o(\'5i\',[q.2f.x+2S.x,q.2f.y+2S.y])}});8D.3o(J 2e,J 44);m 6B=J 19({r:{5i:19.1u,2o:19.1u,6U:h(1h){c.3x.26(c.p,1h)},1P:\'7e\',5f:56,1x:0},1n:h(q,3x,r){c.B=$(q);c.3x=$(3x);c.3v(r);c.6L=-1;c.6K=-1;c.1T=-1;c.B.1L(\'5X\',c.8K.3I(c));m 55,1x;2k(c.r.1P){17\'7e\':c.z=\'x\';c.p=\'1m\';55={\'x\':\'1m\',\'y\':V};1x=\'3M\';1J;17\'7u\':c.z=\'y\';c.p=\'1j\';55={\'x\':V,\'y\':\'1j\'};1x=\'3D\'}c.22=c.B[1x]-c.3x[1x]+(c.r.1x*2);c.8S=c.3x[1x]/2;c.8L=c.B[\'53\'+c.p.70()].Q(c.B);c.3x.26(\'1s\',\'52\').26(c.p,-c.r.1x);m 6Q={};6Q[c.z]=[-c.r.1x,c.22-c.r.1x];c.36=J 3z.2m(c.3x,{1t:6Q,3a:55,6O:0,4f:h(){c.5m()}.Q(c),6Z:h(){c.5m()}.Q(c),2o:h(){c.5m();c.2j()}.Q(c)});o(c.r.1n)c.r.1n.1Q(c)},1U:h(1T){c.1T=1T.1t(0,c.r.5f);c.5n();c.2j();c.1o(\'6U\',c.8T(c.1T));k c},8K:h(u){m 1s=u.1Y[c.z]-c.8L()-c.8S;1s=1s.1t(-c.r.1x,c.22-c.r.1x);c.1T=c.6A(1s);c.5n();c.2j();c.1o(\'6U\',1s)},5m:h(){c.1T=c.6A(c.36.F.W[c.z]);c.5n()},5n:h(){o(c.6L!=c.1T){c.6L=c.1T;c.1o(\'5i\',c.1T)}},2j:h(){o(c.6K!==c.1T){c.6K=c.1T;c.1o(\'2o\',c.1T+\'\')}},6A:h(1s){k 1c.3w((1s+c.r.1x)/c.22*c.r.5f)},8T:h(1T){k c.22*1T/c.r.5f}});6B.3o(J 2e);6B.3o(J 44);m 9v=J 19({r:{9t:h(3r){3r.26(\'3C\',\'6y\')},9u:h(3r){3r.26(\'3C\',\'4K\')},7j:30,9o:56,9n:56,1l:\'aF\',4A:{\'x\':16,\'y\':16},4j:V},1n:h(U,r){c.3v(r);c.3l=J I(\'4L\',{\'4k\':c.r.1l+\'-3r\',\'6I\':{\'1s\':\'3P\',\'1j\':\'0\',\'1m\':\'0\',\'3C\':\'4K\'}}).28(K.4i);c.2z=J I(\'4L\').28(c.3l);$$(U).1D(c.9B,c);o(c.r.1n)c.r.1n.1Q(c)},9B:h(q){q.$1G.3k=(q.4Y&&q.4l()==\'a\')?q.4Y.2Z(\'9C://\',\'\'):(q.9z||V);o(q.4h){m 5c=q.4h.4r(\'::\');o(5c.M>1){q.$1G.3k=5c[0].4m();q.$1G.4V=5c[1].4m()}14{q.$1G.4V=q.4h}q.9y(\'4h\')}14{q.$1G.4V=V}o(q.$1G.3k&&q.$1G.3k.M>c.r.7j)q.$1G.3k=q.$1G.3k.7i(0,c.r.7j-1)+"&aD;";q.1L(\'7o\',h(u){c.1d(q);o(!c.r.4j)c.7n(u);14 c.1s(q)}.Q(c));o(!c.r.4j)q.1L(\'2Y\',c.7n.3I(c));m 2j=c.2j.Q(c);q.1L(\'7r\',2j);q.1L(\'4q\',2j)},1d:h(q){c.2z.1u();o(q.$1G.3k){c.4h=J I(\'9w\').28(J I(\'4L\',{\'4k\':c.r.1l+\'-4h\'}).28(c.2z)).5L(q.$1G.3k)}o(q.$1G.4V){c.2s=J I(\'9w\').28(J I(\'4L\',{\'4k\':c.r.1l+\'-2s\'}).28(c.2z)).5L(q.$1G.4V)}$4c(c.1w);c.1w=c.7a.1V(c.r.9o,c)},2j:h(u){$4c(c.1w);c.1w=c.4U.1V(c.r.9n,c)},1s:h(B){m 1h=B.3g();c.3l.5H({\'1m\':1h.x+c.r.4A.x,\'1j\':1h.y+c.r.4A.y})},7n:h(u){m 9m={\'x\':P.7h(),\'y\':P.76()};m 2f={\'x\':P.77(),\'y\':P.75()};m 3r={\'x\':c.3l.3M,\'y\':c.3l.3D};m 1H={\'x\':\'1m\',\'y\':\'1j\'};G(m z 15 1H){m 1h=u.1Y[z]+c.r.4A[z];o((1h+3r[z]-2f[z])>9m[z])1h=u.1Y[z]-c.r.4A[z]-3r[z];c.3l.26(1H[z],1h)}},7a:h(){o(c.r.9x)c.1w=c.4U.1V(c.r.9x,c);c.1o(\'9t\',[c.3l])},4U:h(){c.1o(\'9u\',[c.3l])}});9v.3o(J 2e,J 44);',62,812,'||||||||||||this|||||function|||return||var||if||el|options||type|event|||||||element|property|||value|for||Element|new|document|obj|length|extend|fn|window|bind|from||to|elements|false|now|events|param||||arguments||else|in||case|Fx|Class|true|args|Math|start|contains|push|key|pos|css|top|items|className|left|initialize|fireEvent|array|parent|null|position|limit|empty|properties|timer|offset|result|prototype|style|selector|keys|each|name|props|tmp|prop|values|break|stop|addEvent|Elements|transition|parsed|mode|call|getStyle|overflown|step|set|delay|source|merge|page|relatedTarget||current|max|custom||unit|setStyle||inject|opacity|Garbage|Array|Methods|nocash|Events|scroll|bound|temp|chk|end|switch|Event|Base|rgb|onComplete|params|parse|documentElement|text|ie|join|create|object|overed|remove|wrapper|width|match|addListener|filter|map|container|toInt|context|margin|tag|parentNode|string|item|method|mouse|size|Transitions|CSS|change|Hash|test|Cookie|shared|target|mousemove|replace||scrollTo||Abstract|height|returns|drag||||modifiers|iCss|index|pow|time|script|getPosition|duration|getElementsByTagName|iTo|myTitle|toolTip|apply|load|implement|xpath|iterable|tip|periodical|border|previous|setOptions|round|knob|Styles|Drag|webkit|id|visibility|offsetHeight|grid|chains|hex|compute|bindWithEvent|setNow|increase|removeListener|offsetWidth|src|min|absolute|cookie|cont|image|htmlElement|bit|check|getValue|getNow|px|select||fx|sources|fromTo|Options|wait||mousewheel|indexOf|removeEvent|native|delete|clear|results|collect|onStart|len|title|body|fixed|class|getTag|trim|precision|iFrom|domReady|trash|split|iNow|parseInt|out|next|number|walk|area|option|offsets|handle|unique|setLength|bottom|right|parseFloat|klass|scrollLeft|scrollTop|hidden|div|toLowerCase|HTMLElement|open|val|mix|onload|layout|readyState|hide|myText|on|mp|href|forEach||Listeners|relative|get|continue|mod|100|typeof|setProperty|tagName|code|fKey|dual|getProperty|preventDefault|steps|stopPropagation|Properties|onChange|webkit419|defined|loaded|draggedKnob|checkStep|getElementById|regex|droppables|addEvents|getElementsBySelector|splice|included|setMany|realType|fix|Multi|hexToRgb|date|scrollWidth|removeEvents|evType|images|generic|counter|setStyles|hasKey|setProperties|head|setHTML|getElements|proto|every|color|scrollHeight|currentStyle|getSize|rgbToHex|brother|attempt|domain|mousedown|path|scrollSize||getCoordinates|Function|Style|getParam|operator|unload|getItems|ie_ready|mouseout|Dom|found|mouseover|regexp|hasChild|catch|while|NativeEvents|concat|add|gecko|iProps|nodeType|DOMMouseScroll|try|String|pageX|pageY|addEventListener|domready|Color|complete|flag|mouseup|visible|getLast|toStep|Slider|node|insertBefore|Transition|include|compat|firstChild|styles|random|previousEnd|previousChange|appendChild|RegExp|snap|default|lim|xhtml|clean|secure|onTick|camelCase|charAt|first|hasClass|onDrag|capitalize|cssText|pairs|easeType|getMany|getScrollTop|getHeight|getScrollLeft|str|evaluate|show|velocity|transitions|coord|horizontal|mousemover|newArray|getWidth|substr|maxTitleChars|PI|innerText|pick|locate|mouseenter|callee|img|mouseleave|merged|padding|vertical|interval|keydown|copy|prefix|resolver|constructor|ie6|picked|undefined|pp|Merge|toUpperCase|beforeunload|Number|filterById|filterByAttribute|filterByClass|slice|after|Right|Bottom|which|clientY|Top|0px|innerHTML|textContent|fixStyle|Width|Left|clientX|multiple|selected|PropertiesIFlag|extended|checked|disabled|direction|borderShort|wheelDelta|shift|styleSheet|appendText|removeEventListener|argument|contents|removeClass|before|cloneEvents|toFloat|createElement|elementsProperty|where|addClass|setOpacity|childNodes|fixRelatedTarget|nodeValue|removeChild|getNext|hyphenate|zoom|defaultView|relatedTargetGecko|click|Single|save|autoSave|getCoords|client|Scroller|Chain|Json|wheelStops|Asset|onProgress|toString|clickedElement|getPos|getScrollHeight|getScrollWidth|pageYOffset|pageXOffset|callChain|delta|half|toPosition|onCancel|fps|error|abort|getTop|getLeft|checkAgainst|Move|onSnap|distance|cos|attach|sin|onBeforeStart|Date|getTime|javascript|getStyles|toElement|full|injectAfter|escapeRegExp|slideOut|slideIn|adopt|1000|clientHeight|iParsed|win|hideDelay|showDelay|normal|sel|getElement|opera|onShow|onHide|Tips|span|timeout|removeAttribute|rel|clientWidth|build|http|getComputedStyle|encodeURIComponent|MooTools|getPrevious|drop|Sibling|emptydrop|setTime|getPropertyValue|makeDraggable|hasLayout|styleFloat|float|clearInterval|Window|cssFloat|clearTimeout|collection|zIndex|floor|alpha|over|sqrt|Quart|getProperties|removeProperty|Cubic|setAttribute|setText|getText|nodeName|detach|Quint|Quad|attributes|lastChild|whitespace|leave|version|getParent|getChildren|makeResizable|getAttribute|textnode|expires|getFirst|replaceChild|embed||DOMElement|execCommand|times|BackgroundImageCache|boolean|iframe|khtml|Object|1999|4096|bindAsEventListener|pass|some|hellip|associate|tool|getRandom|clearChain|chain|err|setInterval|setTimeout|transparent|getBoxObjectFor|webkit420|cloneNode|XMLHttpRequest|clone|readystatechange|injectTop|replaceWith|ActiveXObject|toggleClass|Document|createTextNode|decodeURIComponent|ie7|injectInside|onabort|screen|onerror|Image|taintEnabled|media|injectBefore|link|stylesheet|all|navigator|toGMTString|Elastic|starts|effects|Scroll|returnValue|toTop|cancelBubble|namespaceURI|effect|up|offsetLeft|do|enter|ES|fromElement|button|with|overflow|111|keyCode|keyup|detail|fromCharCode|Slide|rightClick|toBottom|toLeft|toRight|menu|offsetTop|down|dblclick|resize|innerHeight|move|focus|500|innerWidth|onDomReady|write|defer|keypress|onreadystatechange|DOMContentLoaded|clearTimer|blur|esc|https|protocol|location|offsetParent|filterByTag|space|void|tab|submit|reset|backspace|contextmenu|wheel|120|colSpan|rowspan|colspan|htmlFor|Pow|ease|rowSpan|accesskey|metaKey|maxLength|tabIndex|tabindex|accessKey|Expo|snapshotItem|618|getElementsByClassName|Bounce|www|org|w3|Back|Sine|borderStyle|borderColor|borderWidth|Circ|acos|readonly|maxlength|toggle|srcElement|CollectGarbage|easeIn|readOnly|XPathResult|shiftKey|control|altKey|meta|substring|alt|ctrlKey|snapshotLength|UNORDERED_NODE_SNAPSHOT_TYPE|Out|In|InOut|frameBorder|frameborder|easeOut|linear|detachEvent|attachEvent|easeInOut'.split('|'),0,{}))

//]]>
</script>

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

/*
This file is part of JonDesign's SmoothGallery v2.0.

JonDesign's SmoothGallery is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation; either version 3 of the License, or
(at your option) any later version.

JonDesign's SmoothGallery is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with JonDesign's SmoothGallery; if not, write to the Free Software
Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA

Main Developer: Jonathan Schemoul (JonDesign: http://www.jondesign.net/)
Contributed code by:
- Christian Ehret (bugfix)
- Nitrix (bugfix)
- Valerio from Mad4Milk for his great help with the carousel scrolling and many other things.
- Archie Cowan for helping me find a bugfix on carousel inner width problem.
- Tomocchino from #mootools for the preloader class
Many thanks to:
- The mootools team for the great mootools lib, and it's help and support throughout the project.
*/

// declaring the class
var gallery = {
initialize: function(element, options) {
this.setOptions({
showArrows: true,
showCarousel: true,
showInfopane: true,
embedLinks: true,
fadeDuration: 500,
timed: false,
delay: 9000,
preloader: true,
preloaderImage: true,
preloaderErrorImage: true,
/* Data retrieval */
manualData: [],
populateFrom: false,
populateData: true,
destroyAfterPopulate: true,
elementSelector: "div.imageElement",
titleSelector: "h2",
subtitleSelector: "p",
linkSelector: "a.open",
imageSelector: "img.full",
thumbnailSelector: "img.thumbnail",
defaultTransition: "fade",
/* InfoPane options */
slideInfoZoneOpacity: 0.7,
slideInfoZoneSlide: true,
/* Carousel options */
carouselMinimizedOpacity: 0.4,
carouselMinimizedHeight: 20,
carouselMaximizedOpacity: 0.9,
thumbHeight: 75,
thumbWidth: 100,
thumbSpacing: 10,
thumbIdleOpacity: 0.2,
textShowCarousel: 'Featured Content',
showCarouselLabel: true,
thumbCloseCarousel: true,
useThumbGenerator: false,
thumbGenerator: 'resizer.php',
useExternalCarousel: false,
carouselElement: false,
carouselHorizontal: true,
activateCarouselScroller: true,
carouselPreloader: true,
textPreloadingCarousel: 'Loading...',
/* CSS Classes */
baseClass: 'jdGallery',
withArrowsClass: 'withArrows',
/* Plugins: HistoryManager */
useHistoryManager: false,
customHistoryKey: false
}, options);
this.fireEvent('onInit');
this.currentIter = 0;
this.lastIter = 0;
this.maxIter = 0;
this.galleryElement = element;
this.galleryData = this.options.manualData;
this.galleryInit = 1;
this.galleryElements = Array();
this.thumbnailElements = Array();
this.galleryElement.addClass(this.options.baseClass);

this.populateFrom = element;
if (this.options.populateFrom)
this.populateFrom = this.options.populateFrom;
if (this.options.populateData)
this.populateData();
element.style.display="block";

if (this.options.useHistoryManager)
this.initHistory();

if (this.options.embedLinks)
{
this.currentLink = new Element('a').addClass('open').setProperties({
href: '#',
title: ''
}).injectInside(element);
if ((!this.options.showArrows) && (!this.options.showCarousel))
this.galleryElement = element = this.currentLink;
else
this.currentLink.setStyle('display', 'none');
}

this.constructElements();
if ((this.galleryData.length>1)&&(this.options.showArrows))
{
var leftArrow = new Element('a').addClass('left').addEvent(
'click',
this.prevItem.bind(this)
).injectInside(element);
var rightArrow = new Element('a').addClass('right').addEvent(
'click',
this.nextItem.bind(this)
).injectInside(element);
this.galleryElement.addClass(this.options.withArrowsClass);
}
this.loadingElement = new Element('div').addClass('loadingElement').injectInside(element);
if (this.options.showInfopane) this.initInfoSlideshow();
if (this.options.showCarousel) this.initCarousel();
this.doSlideShow(1);
},
populateData: function() {
currentArrayPlace = this.galleryData.length;
options = this.options;
var data = $A(this.galleryData);
data.extend(this.populateGallery(this.populateFrom, currentArrayPlace));
this.galleryData = data;
this.fireEvent('onPopulated');
},
populateGallery: function(element, startNumber) {
var data = [];
options = this.options;
currentArrayPlace = startNumber;
element.getElements(options.elementSelector).each(function(el) {
elementDict = {
image: el.getElement(options.imageSelector).getProperty('src'),
number: currentArrayPlace,
transition: this.options.defaultTransition
};
elementDict.extend = $extend;
if ((options.showInfopane) | (options.showCarousel))
elementDict.extend({
title: el.getElement(options.titleSelector).innerHTML,
description: el.getElement(options.subtitleSelector).innerHTML
});
if (options.embedLinks)
elementDict.extend({
link: el.getElement(options.linkSelector).href||false,
linkTitle: el.getElement(options.linkSelector).title||false,
linkTarget: el.getElement(options.linkSelector).getProperty('target')||false
});
if ((!options.useThumbGenerator) && (options.showCarousel))
elementDict.extend({
thumbnail: el.getElement(options.thumbnailSelector).getProperty('src')
});
else if (options.useThumbGenerator)
elementDict.extend({
thumbnail: options.thumbGenerator + '?imgfile=' + elementDict.image + '&max_width=' + options.thumbWidth + '&max_height=' + options.thumbHeight
});

data.extend([elementDict]);
currentArrayPlace++;
if (this.options.destroyAfterPopulate)
el.remove();
});
return data;
},
constructElements: function() {
el = this.galleryElement;
this.maxIter = this.galleryData.length;
var currentImg;
for(i=0;i<this.galleryData.length;i++)
{
var currentImg = new Fx.Styles(
new Element('div').addClass('slideElement').setStyles({
'position':'absolute',
'left':'0px',
'right':'0px',
'margin':'0px',
'padding':'0px',
'backgroundPosition':"center center",
'opacity':'0'
}).injectInside(el),
'opacity',
{duration: this.options.fadeDuration}
);
if (this.options.preloader)
{
currentImg.source = this.galleryData[i].image;
currentImg.loaded = false;
currentImg.load = function(imageStyle) {
if (!imageStyle.loaded) {
new Asset.image(imageStyle.source, {
'onload' : function(img){
img.element.setStyle(
'backgroundImage',
"url('" + img.source + "')")
img.loaded = true;
}.bind(this, imageStyle)
});
}
}.pass(currentImg, this);
} else {
currentImg.element.setStyle('backgroundImage',
"url('" + this.galleryData[i].image + "')");
}
this.galleryElements[parseInt(i)] = currentImg;
}
},
destroySlideShow: function(element) {
var myClassName = element.className;
var newElement = new Element('div').addClass('myClassName');
element.parentNode.replaceChild(newElement, element);
},
startSlideShow: function() {
this.fireEvent('onStart');
this.loadingElement.style.display = "none";
this.lastIter = this.maxIter - 1;
this.currentIter = 0;
this.galleryInit = 0;
this.galleryElements[parseInt(this.currentIter)].set({opacity: 1});
if (this.options.showInfopane)
this.showInfoSlideShow.delay(1000, this);
var textShowCarousel = formatString(this.options.textShowCarousel, this.currentIter+1, this.maxIter);
if (this.options.showCarousel&&(!this.options.carouselPreloader))
this.carouselBtn.setHTML(textShowCarousel).setProperty('title', textShowCarousel);
this.prepareTimer();
if (this.options.embedLinks)
this.makeLink(this.currentIter);
},
nextItem: function() {
this.fireEvent('onNextCalled');
this.nextIter = this.currentIter+1;
if (this.nextIter >= this.maxIter)
this.nextIter = 0;
this.galleryInit = 0;
this.goTo(this.nextIter);
},
prevItem: function() {
this.fireEvent('onPreviousCalled');
this.nextIter = this.currentIter-1;
if (this.nextIter <= -1)
this.nextIter = this.maxIter - 1;
this.galleryInit = 0;
this.goTo(this.nextIter);
},
goTo: function(num) {
this.clearTimer();
if(this.options.preloader)
{
this.galleryElements[num].load();
if (num==0)
this.galleryElements[this.maxIter - 1].load();
else
this.galleryElements[num - 1].load();
if (num==(this.maxIter - 1))
this.galleryElements[0].load();
else
this.galleryElements[num + 1].load();

}
if (this.options.embedLinks)
this.clearLink();
if (this.options.showInfopane)
{
this.slideInfoZone.clearChain();
this.hideInfoSlideShow().chain(this.changeItem.pass(num, this));
} else
this.currentChangeDelay = this.changeItem.delay(500, this, num);
if (this.options.embedLinks)
this.makeLink(num);
this.prepareTimer();
/*if (this.options.showCarousel)
this.clearThumbnailsHighlights();*/
},
changeItem: function(num) {
this.fireEvent('onStartChanging');
this.galleryInit = 0;
if (this.currentIter != num)
{
for(i=0;i<this.maxIter;i++)
{
if ((i != this.currentIter)) this.galleryElements[i].set({opacity: 0});
}
gallery.Transitions[this.galleryData[num].transition].pass([
this.galleryElements[this.currentIter],
this.galleryElements[num],
this.currentIter,
num], this)();
this.currentIter = num;
}
var textShowCarousel = formatString(this.options.textShowCarousel, num+1, this.maxIter);
if (this.options.showCarousel)
this.carouselBtn.setHTML(textShowCarousel).setProperty('title', textShowCarousel);
this.doSlideShow.bind(this)();
this.fireEvent('onChanged');
},
clearTimer: function() {
if (this.options.timed)
$clear(this.timer);
},
prepareTimer: function() {
if (this.options.timed)
this.timer = this.nextItem.delay(this.options.delay, this);
},
doSlideShow: function(position) {
if (this.galleryInit == 1)
{
imgPreloader = new Image();
imgPreloader.onload=function(){
this.startSlideShow.delay(10, this);
}.bind(this);
imgPreloader.src = this.galleryData[0].image;
if(this.options.preloader)
this.galleryElements[0].load();
} else {
if (this.options.showInfopane)
{
if (this.options.showInfopane)
{
this.showInfoSlideShow.delay((500 + this.options.fadeDuration), this);
} else
if ((this.options.showCarousel)&&(this.options.activateCarouselScroller))
this.centerCarouselOn(position);
}
}
},
createCarousel: function() {
var carouselElement;
if (!this.options.useExternalCarousel)
{
var carouselContainerElement = new Element('div').addClass('carouselContainer').injectInside(this.galleryElement);
this.carouselContainer = new Fx.Styles(carouselContainerElement, {transition: Fx.Transitions.expoOut});
this.carouselContainer.normalHeight = carouselContainerElement.offsetHeight;
this.carouselContainer.set({'opacity': this.options.carouselMinimizedOpacity, 'top': (this.options.carouselMinimizedHeight - this.carouselContainer.normalHeight)});
this.carouselBtn = new Element('a').addClass('carouselBtn').setProperties({
title: this.options.textShowCarousel
}).injectInside(carouselContainerElement);
if(this.options.carouselPreloader)
this.carouselBtn.setHTML(this.options.textPreloadingCarousel);
else
this.carouselBtn.setHTML(this.options.textShowCarousel);
this.carouselBtn.addEvent(
'click',
function () {
this.carouselContainer.clearTimer();
this.toggleCarousel();
}.bind(this)
);
this.carouselActive = false;

carouselElement = new Element('div').addClass('carousel').injectInside(carouselContainerElement);
this.carousel = new Fx.Styles(carouselElement);
} else {
carouselElement = $(this.options.carouselElement).addClass('jdExtCarousel');
}
this.carouselElement = new Fx.Styles(carouselElement, {transition: Fx.Transitions.expoOut});
this.carouselElement.normalHeight = carouselElement.offsetHeight;
if (this.options.showCarouselLabel)
this.carouselLabel = new Element('p').addClass('label').injectInside(carouselElement);
carouselWrapper = new Element('div').addClass('carouselWrapper').injectInside(carouselElement);
this.carouselWrapper = new Fx.Styles(carouselWrapper, {transition: Fx.Transitions.expoOut});
this.carouselWrapper.normalHeight = carouselWrapper.offsetHeight;
this.carouselInner = new Element('div').addClass('carouselInner').injectInside(carouselWrapper);
if (this.options.activateCarouselScroller)
{
this.carouselWrapper.scroller = new Scroller(carouselWrapper, {
area: 100,
velocity: 0.2
})

this.carouselWrapper.elementScroller = new Fx.Scroll(carouselWrapper, {
duration: 400,
onStart: this.carouselWrapper.scroller.stop.bind(this.carouselWrapper.scroller),
onComplete: this.carouselWrapper.scroller.start.bind(this.carouselWrapper.scroller)
});
}
},
fillCarousel: function() {
this.constructThumbnails();
this.carouselInner.normalWidth = ((this.maxIter * (this.options.thumbWidth + this.options.thumbSpacing + 2))+this.options.thumbSpacing) + "px";
this.carouselInner.style.width = this.carouselInner.normalWidth;
},
initCarousel: function () {
this.createCarousel();
this.fillCarousel();
if (this.options.carouselPreloader)
this.preloadThumbnails();
},
flushCarousel: function() {
this.thumbnailElements.each(function(myFx) {
myFx.element.remove();
myFx = myFx.element = null;
});
this.thumbnailElements = [];
},
toggleCarousel: function() {
if (this.carouselActive)
this.hideCarousel();
else
this.showCarousel();
},
showCarousel: function () {
this.fireEvent('onShowCarousel');
this.carouselContainer.start({
'opacity': this.options.carouselMaximizedOpacity,
'top': 0
}).chain(function() {
this.carouselActive = true;
this.carouselWrapper.scroller.start();
this.fireEvent('onCarouselShown');
this.carouselContainer.options.onComplete = null;
}.bind(this));
},
hideCarousel: function () {
this.fireEvent('onHideCarousel');
var targetTop = this.options.carouselMinimizedHeight - this.carouselContainer.normalHeight;
this.carouselContainer.start({
'opacity': this.options.carouselMinimizedOpacity,
'top': targetTop
}).chain(function() {
this.carouselActive = false;
this.carouselWrapper.scroller.stop();
this.fireEvent('onCarouselHidden');
this.carouselContainer.options.onComplete = null;
}.bind(this));
},
constructThumbnails: function () {
element = this.carouselInner;
for(i=0;i<this.galleryData.length;i++)
{
var currentImg = new Fx.Style(new Element ('div').addClass("thumbnail").setStyles({
backgroundImage: "url('" + this.galleryData[i].thumbnail + "')",
backgroundPosition: "center center",
backgroundRepeat: 'no-repeat',
marginLeft: this.options.thumbSpacing + "px",
width: this.options.thumbWidth + "px",
height: this.options.thumbHeight + "px"
}).injectInside(element), "opacity", {duration: 200}).set(this.options.thumbIdleOpacity);
currentImg.element.addEvents({
'mouseover': function (myself) {
myself.clearTimer();
myself.start(0.99);
if (this.options.showCarouselLabel)
$(this.carouselLabel).setHTML('<span class="number">' + (myself.relatedImage.number + 1) + "/" + this.maxIter + ":</span> " + myself.relatedImage.title);
}.pass(currentImg, this),
'mouseout': function (myself) {
myself.clearTimer();
myself.start(this.options.thumbIdleOpacity);
}.pass(currentImg, this),
'click': function (myself) {
this.goTo(myself.relatedImage.number);
if (this.options.thumbCloseCarousel)
this.hideCarousel();
}.pass(currentImg, this)
});

currentImg.relatedImage = this.galleryData[i];
this.thumbnailElements[parseInt(i)] = currentImg;
}
},
log: function(value) {
if(console.log)
console.log(value);
},
preloadThumbnails: function() {
var thumbnails = [];
for(i=0;i<this.galleryData.length;i++)
{
thumbnails[parseInt(i)] = this.galleryData[i].thumbnail;
}
this.thumbnailPreloader = new Preloader();
this.thumbnailPreloader.addEvent('onComplete', function() {
var textShowCarousel = formatString(this.options.textShowCarousel, this.currentIter+1, this.maxIter);
this.carouselBtn.setHTML(textShowCarousel).setProperty('title', textShowCarousel);
}.bind(this));
this.thumbnailPreloader.load(thumbnails);
},
clearThumbnailsHighlights: function()
{
for(i=0;i<this.galleryData.length;i++)
{
this.thumbnailElements[i].clearTimer();
this.thumbnailElements[i].start(0.2);
}
},
changeThumbnailsSize: function(width, height)
{
for(i=0;i<this.galleryData.length;i++)
{
this.thumbnailElements[i].clearTimer();
this.thumbnailElements[i].element.setStyles({
'width': width + "px",
'height': height + "px"
});
}
},
centerCarouselOn: function(num) {
if (!this.carouselWallMode)
{
var carouselElement = this.thumbnailElements[num];
var position = carouselElement.element.offsetLeft + (carouselElement.element.offsetWidth / 2);
var carouselWidth = this.carouselWrapper.element.offsetWidth;
var carouselInnerWidth = this.carouselInner.offsetWidth;
var diffWidth = carouselWidth / 2;
var scrollPos = position-diffWidth;
this.carouselWrapper.elementScroller.scrollTo = (scrollPos,0);
}
},
initInfoSlideshow: function() {
/*if (this.slideInfoZone.element)
this.slideInfoZone.element.remove();*/
this.slideInfoZone = new Fx.Styles(new Element('div').addClass('slideInfoZone').injectInside($(this.galleryElement))).set({'opacity':0});
var slideInfoZoneTitle = new Element('h2').injectInside(this.slideInfoZone.element);
var slideInfoZoneDescription = new Element('p').injectInside(this.slideInfoZone.element);
this.slideInfoZone.normalHeight = this.slideInfoZone.element.offsetHeight;
this.slideInfoZone.element.setStyle('opacity',0);
},
changeInfoSlideShow: function()
{
this.hideInfoSlideShow.delay(10, this);
this.showInfoSlideShow.delay(500, this);
},
showInfoSlideShow: function() {
this.fireEvent('onShowInfopane');
this.slideInfoZone.clearTimer();
element = this.slideInfoZone.element;
element.getElement('h2').setHTML(this.galleryData[this.currentIter].title);
element.getElement('p').setHTML(this.galleryData[this.currentIter].description);
if(this.options.slideInfoZoneSlide)
this.slideInfoZone.start({'opacity': [0, this.options.slideInfoZoneOpacity], 'height': [0, this.slideInfoZone.normalHeight]});
else
this.slideInfoZone.start({'opacity': [0, this.options.slideInfoZoneOpacity]});
if (this.options.showCarousel)
this.slideInfoZone.chain(this.centerCarouselOn.pass(this.currentIter, this));
return this.slideInfoZone;
},
hideInfoSlideShow: function() {
this.fireEvent('onHideInfopane');
this.slideInfoZone.clearTimer();
if(this.options.slideInfoZoneSlide)
this.slideInfoZone.start({'opacity': 0, 'height': 0});
else
this.slideInfoZone.start({'opacity': 0});
return this.slideInfoZone;
},
makeLink: function(num) {
this.currentLink.setProperties({
href: this.galleryData[num].link,
title: this.galleryData[num].linkTitle
})
if (!((this.options.embedLinks) && (!this.options.showArrows) && (!this.options.showCarousel)))
this.currentLink.setStyle('display', 'block');
},
clearLink: function() {
this.currentLink.setProperties({href: '', title: ''});
if (!((this.options.embedLinks) && (!this.options.showArrows) && (!this.options.showCarousel)))
this.currentLink.setStyle('display', 'none');
},
/* To change the gallery data, those two functions : */
flushGallery: function() {
this.galleryElements.each(function(myFx) {
myFx.element.remove();
myFx = myFx.element = null;
});
this.galleryElements = [];
},
changeData: function(data) {
this.galleryData = data;
this.clearTimer();
this.flushGallery();
if (this.options.showCarousel) this.flushCarousel();
this.constructElements();
if (this.options.showCarousel) this.fillCarousel();
if (this.options.showInfopane) this.hideInfoSlideShow();
this.galleryInit=1;
this.lastIter=0;
this.currentIter=0;
this.doSlideShow(1);
},
/* Plugins: HistoryManager */
initHistory: function() {
this.fireEvent('onHistoryInit');
this.historyKey = this.galleryElement.id + '-picture';
if (this.options.customHistoryKey)
this.historyKey = this.options.customHistoryKey();
this.history = HistoryManager.register(
this.historyKey,
[1],
function(values) {
if (parseInt(values[0])-1 < this.maxIter)
this.goTo(parseInt(values[0])-1);
}.bind(this),
function(values) {
return [this.historyKey, '(', values[0], ')'].join('');
}.bind(this),
this.historyKey + '\$(\\d+)\$');
this.addEvent('onChanged', function(){
this.history.setValue(0, this.currentIter+1);
}.bind(this));
this.fireEvent('onHistoryInited');
}
};
gallery = new Class(gallery);
gallery.implement(new Events);
gallery.implement(new Options);

gallery.Transitions = new Abstract ({
fade: function(oldFx, newFx, oldPos, newPos){
oldFx.options.transition = newFx.options.transition = Fx.Transitions.linear;
oldFx.options.duration = newFx.options.duration = this.options.fadeDuration;
if (newPos > oldPos) newFx.start({opacity: 1});
else
{
newFx.set({opacity: 1});
oldFx.start({opacity: 0});
}
},
crossfade: function(oldFx, newFx, oldPos, newPos){
oldFx.options.transition = newFx.options.transition = Fx.Transitions.linear;
oldFx.options.duration = newFx.options.duration = this.options.fadeDuration;
newFx.start({opacity: 1});
oldFx.start({opacity: 0});
},
fadebg: function(oldFx, newFx, oldPos, newPos){
oldFx.options.transition = newFx.options.transition = Fx.Transitions.linear;
oldFx.options.duration = newFx.options.duration = this.options.fadeDuration / 2;
oldFx.start({opacity: 0}).chain(newFx.start.pass([{opacity: 1}], newFx));
}
});

/* All code copyright 2007 Jonathan Schemoul */

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Follows: Preloader (class)
* Simple class for preloading images with support for progress reporting
* Copyright 2007 Tomocchino.
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

var Preloader = new Class({

Implements: [Events, Options],

options: {
root : '',
period : 100
},

initialize: function(options){
this.setOptions(options);
},

load: function(sources) {
this.index = 0;
this.images = [];
this.sources = this.temps = sources;
this.total = this. sources.length;

this.fireEvent('onStart', [this.index, this.total]);
this.timer = this.progress.periodical(this.options.period, this);

this.sources.each(function(source, index){
this.images[index] = new Asset.image(this.options.root + source, {
'onload' : function(){ this.index++; if(this.images[index]) this.fireEvent('onLoad', [this.images[index], index, source]); }.bind(this),
'onerror' : function(){ this.index++; this.fireEvent('onError', [this.images.splice(index, 1), index, source]); }.bind(this),
'onabort' : function(){ this.index++; this.fireEvent('onError', [this.images.splice(index, 1), index, source]); }.bind(this)
});
}, this);
},

progress: function() {
this.fireEvent('onProgress', [Math.min(this.index, this.total), this.total]);
if(this.index >= this.total) this.complete();
},

complete: function(){
$clear(this.timer);
this.fireEvent('onComplete', [this.images]);
},

cancel: function(){
$clear(this.timer);
}

});

Preloader.implement(new Events, new Options);

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Follows: formatString (function)
* Original name: Yahoo.Tools.printf
* Copyright Yahoo.
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

function formatString() {
var num = arguments.length;
var oStr = arguments[0];
for (var i = 1; i < num; i++) {
var pattern = "\\{" + (i-1) + "\\}";
var re = new RegExp(pattern, "g");
oStr = oStr.replace(re, arguments[i]);
}
return oStr;
}

//]]>
</script>

<b:if cond='data:blog.pageType == "item"'>
<style>#featabout, .extra {display:none; margin:0;padding:0;border:0;}</style>
</b:if>
<script type='text/javascript'> var thumbnail_mode = "no-float" ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 180; </script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

<style type='text/css'>
div#featabout { width: 635px; border-bottom: 1px solid; }
div#featabout-wrapper { margin: 0 auto; padding: 22px 0; width: 635px; height: 235px; }

div#featabout div.featured { float: left; width: 640px; }
div#featabout div.featured div.top { height: 15px; }
div#featabout div.featured div.mid { padding: 0 15px; }
div#featabout div.featured div.mid div#featured { border: 1px solid; }
div#featabout div.featured div.bot { height: 15px; }

div#featabout div.about { float: right; width: 328px; }
div#featabout div.about div.top { height: 15px; }
div#featabout div.about div.mid { padding: 0 15px; height: 224px; }
div#featabout div.about div.bot { height: 15px; }

div#featabout div.ab-box h2 { display: block; margin: 0; padding: 0 0 8px 0; font-size: 12px;
font-family: Georgia, 'Times New Roman', serif;
text-transform: uppercase;
}
div#featabout div.ab-box div.interior { padding: 8px 0; }
div#featabout div.ab-box div.interior p { display: block; margin: 0; padding: 0; }
div#featabout div.ab-box-author div.interior { padding: 8px 0 16px 0; min-height: 60px; }
div#featabout div.ab-box-author div.interior img { padding: 3px; border: 1px solid; float: left; margin: 0 5px 0 0; }
div#featabout div.ab-box-burner div.interior { padding: 8px 0 8px 65px; }
div#featabout div.ab-box-burner div.interior p { display: block; margin: 0; padding: 0; line-height: 28px; }
div#featabout div.ab-box-burner div.interior span { display: block; height: 21px; margin: 0 0 0 0; padding: 6px 0 0 0; }
div#featabout div.ab-box-burner div.interior span input { width: 191px; padding: 0 5px; border: 0; }
div#featabout {
background: #ffffff url('') repeat-x scroll left top;
border-bottom: none;
}
div#featabout div.featured { background: transparent url('') repeat-y scroll left top; }
div#featabout div.featured div.top { background: transparent url('') no-repeat scroll left top; }
div#featabout div.featured div.mid div#featured { border-color: #000; }
div#featabout div.featured div.bot { background: transparent url('') no-repeat scroll left bottom; }
div#featured h2 {
font-family: Georgia, 'Times New Roman', sans-serif; font-size: 24px;
line-height: 30px; font-weight: normal;
}
div#featured p {
font-family: Arial, Helvetica, sans-serif; font-size: 13px;
}

div#featabout div.about { color: #999; background: transparent url('') repeat-y scroll left top; }
div#featabout div.about div.top { background: transparent url('') no-repeat scroll left top; }
div#featabout div.about div.bot { background: transparent url('') no-repeat scroll left bottom; }

div#featabout div.ab-box h2 { color: #e1e1c7; background: transparent url('') repeat-x scroll left bottom; }
div#featabout div.ab-box-burner div.interior { color: #999; background: transparent url('') no-repeat scroll 0px 8px; }
div#featabout div.ab-box-burner div.interior span { background: transparent url('') left top no-repeat; }
div#featabout div.ab-box-burner div.interior span input { background: transparent none; color: #666; }

#flickrGallery
{
width: 500px;
height: 334px;
}
#myGallery img.thumbnail, #myGallerySet img.thumbnail
{
display: none;
}
.jdGallery
{
overflow: hidden;
position: relative;
}
.jdGallery img
{
border: 0;
margin: 0;
}
.jdGallery .slideElement
{
width: 100%;
height: 100%;
background-color: #000;
background-repeat: no-repeat;
background-position: center center;
background-image: url('');
}
.jdGallery .loadingElement
{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background-color: #000;
background-repeat: no-repeat;
background-position: center center;
background-image: url('');
}
* html .jdGallery .slideInfoZone
{
bottom: -1px;
}
.jdGallery .slideInfoZone h2
{
padding: 0;
font-size: 14px;
margin: 0;
margin: 2px 5px;
font-weight: bold;
color: #FFFFFF;
bacground: transparent;
}
.jdGallery .slideInfoZone ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
color: #FFFFFF;
}
.jdGallery .slideInfoZone li {
list-style:none;
margin:0 0 0;
padding:0 0 0;
color: #FFFFFF;
}
.jdGallery .slideInfoZone p
{
padding: 0;
font-size: 11px;
margin: 2px 5px;
color: #FFFFFF;
}
.jdGallery div.carouselContainer
{
position: absolute;
height: 135px;
width: 100%;
z-index: 10;
margin: 0px;
left: 0;
top: 0;
}
.jdGallery a.carouselBtn
{
position: absolute;
bottom: 0;
right: 30px;
height: 20px;
/*width: 100px; background: url('') no-repeat;*/
text-align: center;
padding: 0 10px;
font-size: 13px;
background: #000;
color: #fff;
cursor: pointer;
}
.jdGallery .carousel
{
position: absolute;
width: 100%;
margin: 0px;
left: 0;
top: 0;
height: 115px;
background: #000;
color: #fff;
text-indent: 0;
overflow: hidden;
}
.jdExtCarousel
{
overflow: hidden;
position: relative;
}
.jdGallery .carousel .carouselWrapper, .jdExtCarousel .carouselWrapper
{
position: absolute;
width: 100%;
height: 78px;
top: 10px;
left: 0;
overflow: hidden;
}
.jdGallery .carousel .carouselInner, .jdExtCarousel .carouselInner
{
position: relative;
}
.jdGallery .carousel .carouselInner .thumbnail, .jdExtCarousel .carouselInner .thumbnail
{
cursor: pointer;
background: #000;
background-position: center center;
float: left;
border: solid 1px #fff;
}
.jdGallery .wall .thumbnail, .jdExtCarousel .wall .thumbnail
{
margin-bottom: 10px;
}
.jdGallery .carousel .label, .jdExtCarousel .label
{
font-size: 13px;
position: absolute;
bottom: 5px;
left: 10px;
padding: 0;
margin: 0;
}
.jdGallery .carousel .wallButton, .jdExtCarousel .wallButton
{
font-size: 10px;
position: absolute;
bottom: 5px;
right: 10px;
padding: 1px 2px;
margin: 0;
background: #222;
border: 1px solid #888;
cursor: pointer;
}
.jdGallery .carousel .label .number, .jdExtCarousel .label .number
{
color: #b5b5b5;
}
.jdGallery a, .jdGallery a:hover
{
font-size: 100%;
text-decoration: none;
color: #fff;
}
.jdGallery a.right, .jdGallery a.left
{
position: absolute;
height: 99%;
width: 25%;
cursor: pointer;
z-index:10;
filter:alpha(opacity=20);
-moz-opacity:0.2;
-khtml-opacity: 0.2;
opacity: 0.2;
}
* html .jdGallery a.right, * html .jdGallery a.left
{
filter:alpha(opacity=50);
}
.jdGallery a.right:hover, .jdGallery a.left:hover
{
filter:alpha(opacity=80);
-moz-opacity:0.8;
-khtml-opacity: 0.8;
opacity: 0.8;
}
.jdGallery a.left
{
left: 0;
top: 0;
background: url('img/fleche1.png') no-repeat center left;
}
* html .jdGallery a.left { background: url('img/fleche1.gif') no-repeat center left; }
.jdGallery a.right
{
right: 0;
top: 0;
background: url('') no-repeat center right;
}
* html .jdGallery a.right { background: url('') no-repeat center right; }
.jdGallery a.open
{
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.withArrows a.open
{
position: absolute;
top: 0;
left: 25%;
height: 99%;
width: 50%;
cursor: pointer;
z-index: 10;
background: none;
-moz-opacity:0.8;
-khtml-opacity: 0.8;
opacity: 0.8;
}
.withArrows a.open:hover { background: url('') no-repeat center center; }
* html .withArrows a.open:hover { background: url('') no-repeat center center;
filter:alpha(opacity=80); }
/* Gallery Sets */
.jdGallery a.gallerySelectorBtn
{
z-index: 15;
position: absolute;
top: 0;
left: 30px;
height: 20px;
/*width: 100px; background: url('') no-repeat;*/
text-align: center;
padding: 0 10px;
font-size: 13px;
background: #000;
color: #fff;
cursor: pointer;
opacity: .4;
-moz-opacity: .4;
-khtml-opacity: 0.4;
filter:alpha(opacity=40);
}
.jdGallery .gallerySelector
{
z-index: 20;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: #000;
}
.jdGallery .gallerySelector h2
{
margin: 0;
padding: 10px 20px 10px 20px;
font-size: 20px;
line-height: 30px;
color: #fff;
}
.jdGallery .gallerySelector .gallerySelectorWrapper
{
overflow: hidden;
}
.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton
{
margin-left: 10px;
margin-top: 10px;
border: 1px solid #888;
padding: 5px;
height: 40px;
color: #fff;
cursor: pointer;
float: left;
}
.jdGallery .gallerySelector .gallerySelectorInner div.hover
{
background: #000;
}
.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton div.preview
{
background: #000;
background-position: center center;
float: left;
border: none;
width: 40px;
height: 40px;
margin-right: 5px;
}
.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton h3
{
margin: 0;
padding: 0;
font-size: 12px;
font-weight: normal;
}
.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton p.info
{
margin: 0;
padding: 0;
font-size: 12px;
font-weight: normal;
color: #aaa;
}
.extra div.box { width: 310px; padding: 0px; margin:0;}
.extra div.box-popular { float: left; }
.extra div.box-recent { float: right; }

</style>

Now again scroll down to where you see below code:

And immediately before it, paste this code:

<div id='featabout'>
<div id='featabout-wrapper'>
<div class='featured'>
<div class='top'/>
<div class='mid'>
<div id='featured'>

<style>
#myGallery, #myGallerySet, #flickrGallery {
width: 606px;
height: 220px;
z-index:5;
border: 1px solid #000;
overflow:hidden;
}

.jdGallery .slideInfoZone
{
position: absolute;
z-index: 10;
width: 100%;
margin: 0px;
left: 0;
bottom: 0;
height: 80px;
background: #000;
color: #fff;
text-indent: 0;
overflow: hidden;
}
</style>

<script type='text/javascript'>
function startGallery() {
var myGallery = new gallery($('myGallery'), {
timed: true
});
}
window.addEvent('domready',startGallery);
</script>

<div id='myGallery'>

<script type='text/javascript'>
//<![CDATA[
function rp(json) {

for (var i = startposts; i < numposts; i++) {

var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var posturl;

if (i == json.feed.entry.length) break;

for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}

posttitle = posttitle.link(posturl);
var readmorelink = "(Read More)";
readmorelink = readmorelink.link(posturl);
var postdate = entry.published.$t;
var cdyear = postdate.substring(0,4);
var cdmonth = postdate.substring(5,7);
var cdday = postdate.substring(8,10);
var monthnames = new Array();
monthnames[1] = "Jan";
monthnames[2] = "Feb";
monthnames[3] = "Mar";
monthnames[4] = "Apr";
monthnames[5] = "May";
monthnames[6] = "Jun";
monthnames[7] = "Jul";
monthnames[8] = "Aug";
monthnames[9] = "Sep";
monthnames[10] = "Oct";
monthnames[11] = "Nov";
monthnames[12] = "Dec";

if ("content" in entry) {
var postcontent = entry.content.$t;
} else if ("summary" in entry) {
var postcontent = entry.summary.$t;
} else
var postcontent = "";
var re = /<\S[^>]*>/g;
postcontent = postcontent.replace(re, "");
if (showposttitle == true) document.write(posttitle);

if (showpostdate == true) document.write(' - ' + monthnames[parseInt(cdmonth,10)] + ' ' + cdday);

if (showpostsummary == true) {
if (postcontent.length < numchars) {
document.write(postcontent);
} else {
postcontent = postcontent.substring(0, numchars);
var quoteEnd = postcontent.lastIndexOf(" ");
postcontent = postcontent.substring(0,quoteEnd);

document.write(postcontent);

document.write('...' + readmorelink);
}
}

}

}
//]]>
</script>

<div class='imageElement'>
<h2><script>var startposts = 0; numposts = 1; var showposttitle = true; showpostdate = false; var showpostsummary = false; var numchars = 0; </script><script src="http://bdlab.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp">
</script></h2>
<p><script>var startposts = 0; numposts = 1; var showposttitle = false; showpostdate = false; var showpostsummary = true; var numchars = 150; </script><script src="http://bdlab.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp">
</script></p>

<a class='open' href='#' title='Read More'/>
<img class='full' src='http://4.bp.blogspot.com/_pZaV-NlP_3s/SwYkTmNZtfI/AAAAAAAAAAY/AFA7z-uPRzo/jquery+slider1.jpg'/>
<img class='thumbnail' src='http://4.bp.blogspot.com/_pZaV-NlP_3s/SwYkTmNZtfI/AAAAAAAAAAY/AFA7z-uPRzo/jquery+slider1.jpg'/>
</div>

<div class='imageElement'>
<h2><script>var startposts = 1; numposts = 2; var showposttitle = true; showpostdate = false; var showpostsummary = false; var numchars = 0; </script><script src="http://bdlab.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp">
</script></h2>
<p><script>var startposts = 1; numposts = 2; var showposttitle = false; showpostdate = false; var showpostsummary = true; var numchars = 150; </script><script src="http://bdlab.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp">
</script></p>

<a class='open' href='#' title='Read More'/>
<img class='full' src='http://4.bp.blogspot.com/_pZaV-NlP_3s/SwYkX2_Ie4I/AAAAAAAAAAg/UtcyiDMmQvM/jquery+slider2.jpg'/>
<img class='thumbnail' src='http://4.bp.blogspot.com/_pZaV-NlP_3s/SwYkX2_Ie4I/AAAAAAAAAAg/UtcyiDMmQvM/jquery+slider2.jpg'/>
</div>

<div class='imageElement'>
<h2><script>var startposts = 2; numposts = 3; var showposttitle = true; showpostdate = false; var showpostsummary = false; var numchars = 0; </script><script src="http://bdlab.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp">
</script></h2>
<p><script>var startposts = 2; numposts = 3; var showposttitle = false; showpostdate = false; var showpostsummary = true; var numchars = 150; </script><script src="http://bdlab.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp">
</script></p>

<a class='open' href='#' title='Read More'/>
<img class='full' src='http://4.bp.blogspot.com/_pZaV-NlP_3s/SwYkbtD9zSI/AAAAAAAAAAo/LhX8RCn8SiA/jquery+slider3.jpg'/>
<img class='thumbnail' src='http://4.bp.blogspot.com/_pZaV-NlP_3s/SwYkbtD9zSI/AAAAAAAAAAo/LhX8RCn8SiA/jquery+slider3.jpg'/>
</div>

<div class='imageElement'>
<h2><script>var startposts = 3; numposts = 4; var showposttitle = true; showpostdate = false; var showpostsummary = false; var numchars = 0; </script><script src="http://bdlab.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp">
</script></h2>
<p><script>var startposts = 3; numposts = 4; var showposttitle = false; showpostdate = false; var showpostsummary = true; var numchars = 150; </script><script src="http://bdlab.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp">
</script></p>

<a class='open' href='#' title='Read More'/>
<img class='full' src='http://2.bp.blogspot.com/_pZaV-NlP_3s/SwYkgdPc4aI/AAAAAAAAAAw/prTy94a0Y8k/jquery+slider4.jpg'/>
<img class='thumbnail' src='http://2.bp.blogspot.com/_pZaV-NlP_3s/SwYkgdPc4aI/AAAAAAAAAAw/prTy94a0Y8k/jquery+slider4.jpg'/>
</div>

<div class='imageElement'>
<h2><script>var startposts = 4; numposts = 5; var showposttitle = true; showpostdate = false; var showpostsummary = false; var numchars = 0; </script><script src="http://bdlab.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp">
</script></h2>
<p><script>var startposts = 4; numposts = 5; var showposttitle = false; showpostdate = false; var showpostsummary = true; var numchars = 150; </script><script src="http://bdlab.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp">
</script></p>

<a class='open' href='#' title='Read More'/>
<img class='full' src='http://4.bp.blogspot.com/_pZaV-NlP_3s/SwYkk1JAXgI/AAAAAAAAAA4/kDXw6ZDtCu0/jquery+slider5.jpg'/>
<img class='thumbnail' src='http://4.bp.blogspot.com/_pZaV-NlP_3s/SwYkk1JAXgI/AAAAAAAAAA4/kDXw6ZDtCu0/jquery+slider5.jpg'/>
</div>

</div>
</div>
</div>
<div class='bot'/>
</div></div></div>

Replace "http://bdlab.blogspot.com" with your blog address.
Replace images addresses with your images addresses.

Note: You can place above code as your choice.For explanation I place it just before

And now click Save Template

................................................................................................
................................................................................................
................................................................................................

How To Add jQuery Featured Content Slideshow to Blogger

And now click Save

................................................................................................
................................................................................................
................................................................................................

How To Add jQuery Featured Content Slider to Blogger

<div id="glidercontent" class="glidecontentwrapper">
<div id="togglebox" class="glidecontenttoggler">
<a class="prev" href="#"></a>
<a class="next" href="#"></a>
</div>

<div class="glidecontent">
<div class="glidemeta">
<h2><a href="POST-LINK-HERE" title="LINK-TITLE-HERE">POST-TITLE-HERE</a></h2>
POST-DESCRIPTION-HERE</div>
<a href="POST-LINK-HERE" title="LINK-TITLE-HERE">
<img alt="IMAGE-TITLE-HERE" width="650" src="http://2.bp.blogspot.com/_4HKUHirY_2U/SwUV65-T9VI/AAAAAAAAAQE/zaHZ0QzUVPk/street+fighter.jpg" height="250"/></a>
</div>

<div class="glidecontent">
<div class="glidemeta">
<h2><a href="POST-LINK-HERE" title="LINK-TITLE-HERE">POST-TITLE-HERE</a></h2>
POST-DESCRIPTION-HERE</div>
<a href="POST-LINK-HERE" title="LINK-TITLE-HERE">
<img alt="IMAGE-TITLE-HERE" width="650" src="http://4.bp.blogspot.com/_4HKUHirY_2U/SwUWFlpKGpI/AAAAAAAAAQU/TeS6j_EMVhI/plane.jpg" height="250"/></a>
</div>

<div class="glidecontent">
<div class="glidemeta">
<h2><a href="POST-LINK-HERE" title="LINK-TITLE-HERE">POST-TITLE-HERE</a></h2>
POST-DESCRIPTION-HERE</div>
<a href="POST-LINK-HERE" title="LINK-TITLE-HERE">
<img alt="IMAGE-TITLE-HERE" width="650" src="http://4.bp.blogspot.com/_4HKUHirY_2U/SwUWBFAMJDI/AAAAAAAAAQM/fbKmBIN6lUk/bad+day.jpg" height="250"/></a>
</div>

<div class="glidecontent">
<div class="glidemeta">
<h2><a href="POST-LINK-HERE" title="LINK-TITLE-HERE">POST-TITLE-HERE</a></h2>
POST-DESCRIPTION-HERE</div>
<a href="POST-LINK-HERE" title="LINK-TITLE-HERE">
<img alt="IMAGE-TITLE-HERE" width="650" src="http://2.bp.blogspot.com/_4HKUHirY_2U/SwUZwGtuVGI/AAAAAAAAAQs/omJHsH1JzTs/assassins-creed-2.jpg" height="250"/></a>
</div>

<div class="glidecontent">
<div class="glidemeta">
<h2><a href="POST-LINK-HERE" title="LINK-TITLE-HERE">POST-TITLE-HERE</a></h2>
POST-DESCRIPTION-HERE</div>
<a href="POST-LINK-HERE" title="LINK-TITLE-HERE"><img alt="IMAGE-TITLE-HERE" width="650" src="http://3.bp.blogspot.com/_4HKUHirY_2U/SwUXLWmiJXI/AAAAAAAAAQc/EVn-pRuyUbs/commandos+2.jpeg" height="250"/></a>
</div>

<div class="glidecontent">
<div class="glidemeta">
<h2><a href="POST-LINK-HERE" title="LINK-TITLE-HERE">POST-TITLE-HERE</a></h2>
POST-DESCRIPTION-HERE</div>
<a href="POST-LINK-HERE" title="LINK-TITLE-HERE"><img alt="IMAGE-TITLE-HERE" width="650" src="http://1.bp.blogspot.com/_4HKUHirY_2U/SwUV0aqMhGI/AAAAAAAAAP8/VdOjLq_ypg0/football.jpg" height="250"/></a>
</div>

</div>

And now click Save

Note : Replace POST-LINK-HERE,LINK-TITLE-HERE,POST-TITLE-HERE,POST-DESCRIPTION-HERE,IMAGE-TITLE-HERE and Image Addresses with your details.

................................................................................................
................................................................................................
................................................................................................

Add Beautiful jQuery Auto Playing Featured Content Image Slider to Blogger

]]></b:skin>

And immediately before it, paste this code:

*{

margin:0;

padding:0;

}

html{

height:100%;

}

a img{

border:0;

}

div.wrap{

width:540px;

margin:0 auto;

text-align:left;

}

div#top div#nav{

float:left;

clear:both;

width:540px;

height:52px;

margin:22px 0 0;

background:url url(http://2.bp.blogspot.com/-90OJYGMto3k/Txp3FGzJMSI/AAAAAAAABDs/fShjyg5tprU/s1600/navbgq.png) 0 0 no-repeat;

}

div#top div#nav ul{

float:left;

width:700px;

height:52px;

list-style-type:none;

}

div#nav ul li{

float:left;

height:52px;

}

div#nav ul li a{

border:0;

height:52px;

display:block;

line-height:52px;

text-indent:-9999px;

}

div#header{

margin:-1px 0 0;

}

div#video-header{

height:683px;

margin:-1px 0 0;

}

div#header div#slide-holder{

z-index:40;

width:540px;

height:299px;

position:absolute;

}

div#header div#slide-holder div#slide-runner{

top:9px;

left:9px;

width:540px;

height:278px;

overflow:hidden;

position:absolute;

}

div#header div#slide-holder img{

margin:0;

display:none;

position:absolute;

}

div#header div#slide-holder div#slide-controls{

left:0;

bottom:228px;

width:540px;

height:46px;

display:none;

position:absolute;

background:url(http://4.bp.blogspot.com/-OibbJ0y7Jpk/Txp3ZVypjII/AAAAAAAABD0/XTZyeKydCY0/s1600/slidebg.png) 0 0;

}

div#header div#slide-holder div#slide-controls p.text{

float:left;

color:#fff;

display:inline;

font-size:10px;

line-height:16px;

margin:15px 0 0 20px;

text-transform:uppercase;

}

div#header div#slide-holder div#slide-controls p#slide-nav{

float:right;

height:24px;

display:inline;

margin:11px 15px 0 0;

}

div#header div#slide-holder div#slide-controls p#slide-nav a{

float:left;

width:24px;

height:24px;

display:inline;

font-size:11px;

margin:0 5px 0 0;

line-height:24px;

font-weight:bold;

text-align:center;

text-decoration:none;

background-position:0 0;

background-repeat:no-repeat;

color:#fff;

}

div#header div#slide-holder div#slide-controls p#slide-nav a.on{

background-position:0 -24px;

}

div#header div#slide-holder div#slide-controls p#slide-nav a{background-image:url(http://1.bp.blogspot.com/-XQVPEcrITEY/Txp3vmGlNrI/AAAAAAAABD8/bsPDlSUXkzw/s1600/sildenav.png);}

div#nav ul li a{background:url(images/nav.png) no-repeat;}

Adding Script Code

Now find (CTRL+F) this code in the template:

Step 2:And find the code </head>
Step 3: Now add the following code just before the </head> tag.

Now find (CTRL+F) this code in the template:

Step 2:And find the code </body>
Step 3: Now add the following code just before the </body> tag.

And now click Save

Replace highlighted text with your blog post link,image link and title.

This is the end of the tutorial. I hope you will love it. If you have any kind of problem in implementing this tutorial please feel free to ask me.

................................................................................................
................................................................................................
................................................................................................

Adding jQuery Posts Slider To Blogger Blog

]]></b:skin>

And immediately before it, paste this code:

#slider {

background:url(http://2.bp.blogspot.com/-bYlvMGliFRI/TtMsHAjGnkI/AAAAAAAAANM/eRVwbQk8lU4/s1600/Adding+A+jQuery+Posts+Slider+To+Blogger+Blog.png);

height: 254px;

width: 983px;

overflow: hidden;

position: relative;

margin: 5px 0;

}

#mover {

width: auto;

position:absolute;

overflow:hidden;

}

.slide {

padding: 20px 0px;

width: 1000px;

float: left;

position: relative;

height:200px;

}

.slide h2 {

font-family:georgia, Helvetica, Sans-Serif;

font-size: 24px;

position: absolute;

top: 20px;

left: 1px;

color: #ac0000;

padding:0px 0px 0px 30px;

margin:0px 0px;

width:500px;

overflow:hidden;

}

.slide h2 a:link, .slide h2 a:visited {

color:#fff;

background-color: transparent;

}

.slide h2 a:hover {

color: #ddd;

background-color: transparent;

}

.slide p {

color: #999;

position: absolute;

top: 100px;

left: 1px;

font-size: 12px;

font-family:georgia, Helvetica, Sans-Serif;

line-height: 20px;

width: 500px;

padding:0px 0px 0px 30px;

margin:0px 0px;

}

.slide img {

position: absolute;

top: 20px;

left: 577px;

background:#fff;

padding:10px 10px;

}

#slider-stopper {

position: absolute;

font-family: Georgia, Helvetica, Sans-Serif;

top: 113px;

right: 55px;

color: #AC0000;

padding: 3px 8px;

font-size: 14px;

text-transform: uppercase;

z-index: 1000;

}

Adding Script Code

Now find (CTRL+F) this code in the template:

Step 2:And find the code </head>
Step 3: Now add the following code just before the </head> tag.

<div id='slider'>
<div id='mover'>
<div class='slide'>
<h2><a href='http://bdlab.blogspot.com/' title='26 free ebooks for bloggers '>26 Free eBooks For Bloggers </a></h2>
<p>A collection of 26 Free eBooks which cover almost all the aspects of Blogging and help you to create better blogs. These eBooks which have been written by experts are very useful for bloggers.</p>
<img alt='ebooks' src='http://i44.tinypic.com/2ef0odd.jpg'/>
</div>
<div class='slide'>
<h2><a href='http://bdlab.blogspot.com/' title='largest collection of rss icons '>Largest Collection Of RSS Icons </a></h2>
<p>This is the largest collection of RSS Icons in a post. Its a huge list containing more than 80 RSS Icon Sets.</p>
<img alt='rss icons ' src='http://i40.tinypic.com/2vl4bbm.jpg'/>
</div>
<div class='slide'>
<h2><a href='http://bdlab.blogspot.com/' title='50 beautiful templates converted from wordpress to blogger '>50 Beautiful Templates Converted From Wordpress To Blogger </a></h2>
<p>This is a collection of 50 Beautiful Templates which have been converted from Wordpress to Blogger. </p>
<img alt='blogger templates' src='http://i40.tinypic.com/6egfiu.jpg'/>
</div>
<div class='slide'>
<h2><a href='http://bdlab.blogspot.com/' title='remove the blogger navbar in a simple step'>Remove The Blogger Navbar In A Simple Step</a></h2>
<p>This is a simple copy paste method to remove the Blogger Navbar which is used in all the latest Blogger Templates </p>
<img alt='remove blogger navbar' src='http://i43.tinypic.com/2yvw4sx.jpg'/>
</div>
</div>

</div>

And now click Save

Now its time for you to put your favourite posts in the Posts Slider. If there are some alignment problems with the Post Title or Image or the Stop Button in the slider then dont worry, continue doing what I say. Search  in the blog template. Below it you will see

<div class='slide'>

<h2><a href='Post URL' title='Post Title '>Post Title </a></h2>

<p>Post Description</p>

<img alt='image name' src='Image URL'/>

</div>

If you are having problem with the placement of the Image, search .slide img { in the template. The code will be as shown below

.slide img {

position: absolute;

top: 20px;

left: 577px;

background:#fff;

padding:10px 10px;

}

................................................................................................
................................................................................................
................................................................................................

Simplest jQuery Featured Content Slider in Blogger / Blogspot Blog

]]></b:skin>

And immediately before it, paste this code:

#jFlowSlide{ background:#DBF3FD; font-family: Georgia; }
#myController { font-family: Georgia; padding:2px 0; width:610px; background:#3AB7FF; }
#myController span.jFlowSelected { background:#43A0D5;margin-right:0px; }
.slide-wrapper { padding: 5px; }
.slide-thumbnail { width:300px; float:left; }
.slide-thumbnail img {max-width:300px; }
.slide-details { width:290px; float:right; margin-left:10px;}
.slide-details h2 { font-size:1.5em; font-style: italic; font-weight:normal; line-height: 1; margin:0; }
.slide-details .description { margin-top:10px; }
.jFlowControl, .jFlowPrev, .jFlowNext { color:#FFF; cursor:pointer; padding-left:5px; padding-right:5px; padding-top:2px; padding-bottom:2px; }
.jFlowControl:hover, .jFlowPrev:hover, .jFlowNext:hover { background: #43A0D5; }

Adding Script Code

Now find (CTRL+F) this code in the template:

Step 2:And find the code </head>
Step 3: Now add the following code just before the </head> tag.

<div class="jflow-content-slider">
<div id="slides">

<div class="slide-wrapper">
<div class="slide-thumbnail">
<img alt="Top 5 Blog Search Engines" src="http://1.bp.blogspot.com/_L3S3cG5x4ys/Sgjmoo0QTFI/AAAAAAAAAwo/8YRoORBBiXE/s400/top-5-blog-search-engines.png" />
</div>
<div class="slide-details">
<h7>Top 5 Blog Search Engines</h7>
<div class="description">
TEXT-OF-THE-SLIDE-1.
<a href="http://bdlab.blogspot.com/"><br /><b> Read More »</b></a>
</div>
</div>
<div class="clear"></div>
</div>

<div class="slide-wrapper">
<div class="slide-thumbnail">
<img alt="Twitter Submit button for blogger blog" src="http://4.bp.blogspot.com/_L3S3cG5x4ys/Sp2AhaArJkI/AAAAAAAAA7A/unKMzv1QdpQ/s400/twitter-submit-button-for-blogger.png" />
</div>
<div class="slide-details">
<h7>Add Tweet Button with Tweets Counts in Blogger Posts</h7>
<div class="description">
TEXT-OF-THE-SLIDE-2.
<a href="http://bdlab.blogspot.com/"><br /><b> Read More »</b></a>

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

<div class="slide-wrapper">
<div class="slide-thumbnail">
<img alt="Bitdefender 2010 Products" src="http://1.bp.blogspot.com/_L3S3cG5x4ys/SqFHOoHr0bI/AAAAAAAAA8A/NLKYNaDTNng/s400/BitDefender-2010-packaging.png" />
</div>
<div class="slide-details">
<h7>Download BitDefender 2010 All products with one-click direct download links</h7>
<div class="description">
TEXT-OF-THE-SLIDE-3.
<a href="http://bdlab.blogspot.com/"><br /><b> Read More »</b></a>

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

<div class="slide-wrapper">
<div class="slide-thumbnail">
<img alt="Personas for Firefox" src="http://4.bp.blogspot.com/_L3S3cG5x4ys/SrL6ZmNZg5I/AAAAAAAAA84/DzM7NYpitPc/s400/firefox-personas-logo.png" />
</div>
<div class="slide-details">
<h7>Personas for Firefox - Light weight Skins for Firefox</h7>
<div class="description">
TEXT-OF-THE-SLIDE-4.
<a href="http://bdlab.blogspot.com/"><br /><b> Read More »</b></a>

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

<div class="slide-wrapper">
<div class="slide-thumbnail">
<img alt="Windows 7 Transformation Pack" src="http://1.bp.blogspot.com/_L3S3cG5x4ys/SrYcwPt8g-I/AAAAAAAAA9o/FR6OkoKMi00/s400/windows7-logo.jpg" />
</div>
<div class="slide-details">
<h7>Download Windows 7 Transformation Pack for XP and Vista</h7>
<div class="description">
TEXT-OF-THE-SLIDE-5.
<a href="http://bdlab.blogspot.com/"><br /><b> Read More »</b></a>

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

<div class="slide-wrapper">
<div class="slide-thumbnail">
<img alt="Should I upgrade to Windows 7?" src="http://1.bp.blogspot.com/_L3S3cG5x4ys/SvW1bKNd3AI/AAAAAAAABBQ/hNw_lI-F2iI/s320/Will-my-system-support-Windows7-windows7-compatible-logo.png" />
</div>
<div class="slide-details">
<h7>Can my Computer run Windows 7? Ask Windows 7 Upgrade Advisor</h7>
<div class="description">
TEXT-OF-THE-SLIDE-6.
<a href="http://bdlab.blogspot.com/"><br /><b> Read More »</b></a>

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

<div class="slide-wrapper">
<div class="slide-thumbnail">
<img alt="What is being copied from my blog?" src="http://3.bp.blogspot.com/_L3S3cG5x4ys/Sxgfvw8BAMI/AAAAAAAABJQ/Wucs1gCw77Q/s400/tynt-whats-being-copied-from-your-site.png" />
</div>
<div class="slide-details">
<h7>Do You Know Where Your Blog's Content Is Going?</h7>
<div class="description">
TEXT-OF-THE-SLIDE-7.
<a href="http://bdlab.blogspot.com/"><br /><b> Read More »</b></a>
</div>
</div>
<div class="clear"></div>
</div>

<div class="slide-wrapper">
<div class="slide-thumbnail">
<img alt="download youtube videos" src="http://2.bp.blogspot.com/_L3S3cG5x4ys/SxwCTwasqqI/AAAAAAAABJo/C1rZcKrVbSM/s400/Fastest-way-to-download-Youtube-Videos.png" />
</div>
<div class="slide-details">
<h7>World's Fastest Way to Download Youtube Videos</h7>
<div class="description">
TEXT-OF-THE-SLIDE-8.
<a href="http://bdlab.blogspot.com/"><br /><b> Read More »</b></a>
</div>
</div>
<div class="clear"></div>
</div>

<div class="slide-wrapper">
<div class="slide-thumbnail">
<img alt="" src="http://4.bp.blogspot.com/_L3S3cG5x4ys/SxRNHQFIeGI/AAAAAAAABIk/rmUzK4Gif3Q/s400/Submit-Site-map-to-all-search-engines.png" />
</div>
<div class="slide-details">
<h7>"Submit Blogger Blog's Sitemap to Top Search Engines</h7>
<div class="description">
TEXT-OF-THE-SLIDE-9.
<a href="http://bdlab.blogspot.com/"><b> <br /><b> Read More »</b></b></a>
</div>
</div>
<div class="clear"></div>
</div>

<div class="slide-wrapper">
<div class="slide-thumbnail">
<img alt="" src="http://2.bp.blogspot.com/_L3S3cG5x4ys/SRhztQbu5SI/AAAAAAAAAW8/vdFCBeOqhY0/s320/increase-traffic-to-your-site.jpg" />
</div>
<div class="slide-details">
<h7>Follow Simple Tips to Drive Traffic to your new Blog</h7>
<div class="description">
In TEXT-OF-THE-SLIDE-10.
<a href="http://bdlab.blogspot.com/"><br /><b> Read More »</b></a>
</div>
</div>
<div class="clear"></div>
</div>

<div class="slide-wrapper">
<div class="slide-thumbnail">
<img alt="" src="http://2.bp.blogspot.com/_L3S3cG5x4ys/SZh7Q5i0JjI/AAAAAAAAApM/kcj1Ne8VQyY/s400/tweetergetter.com-logo.JPG" />
</div>
<div class="slide-details">
<h7>Get 1000's of Twitter followers in one button click</h7>
<div class="description">
TEXT-OF-THE-SLIDE-11.
<a href="http://bdlab.blogspot.com/"><br /><b> Read More »</b></a>
</div>
</div>
<div class="clear"></div>
</div>

<div class="slide-wrapper">
<div class="slide-thumbnail">
<img alt="" src="http://1.bp.blogspot.com/_L3S3cG5x4ys/SgSo2YBxgII/AAAAAAAAAvg/Sj5IglcYcMM/s400/Fastest-MP3-Search.png" />
</div>
<div class="slide-details">
<h7>Fastest way to Listen and Download Mp3 Songs</h7>
<div class="description">
TEXT-OF-THE-SLIDE-12.
<a href="http://bdlab.blogspot.com/"><br /><b> Read More »</b></a>
</div>
</div>
<div class="clear"></div>
</div>

<div class="slide-wrapper">
<div class="slide-thumbnail">
<img alt="" src="http://3.bp.blogspot.com/_L3S3cG5x4ys/SoFGU7pUHCI/AAAAAAAAA14/yArjRdyYfOY/s1600/live-traffic-feed-widget-screenshot.png" />
</div>
<div class="slide-details">
<h7>Add Live Traffic Feed Widget to your Blogger Blog</h7>
<div class="description">
TEXT-OF-THE-SLIDE-13.
<a href="http://bdlab.blogspot.com/"><br /><b> Read More »</b></a>
</div>
</div>
<div class="clear"></div>
</div>

<div class="slide-wrapper">
<div class="slide-thumbnail">
<img alt="" src="http://1.bp.blogspot.com/_L3S3cG5x4ys/SkwJU8lLCeI/AAAAAAAAAzc/94bXJbArZ38/s400/fastest-way-to-submit-site-to-multiple-bookmarking-sites-in-one-click.png" />
</div>
<div class="slide-details">
<h7>Fastest way of Social Sites Bookmarking</h7>
<div class="description">
TEXT-OF-THE-SLIDE-14.

<a href="http://bdlab.blogspot.com/"><br /><b> Read More »</b></a>
</div>
</div>
<div class="clear"></div>
</div>

<div class="slide-wrapper">
<div class="slide-thumbnail">
<img alt="" src="http://3.bp.blogspot.com/_L3S3cG5x4ys/SoK9rO5GKSI/AAAAAAAAA2g/puNcYHn1iPU/s1600/inserting-adsense-ads-inside-blogger-blog-posts.png" />
</div>
<div class="slide-details">
<h7>How to Insert Adsense Ads inside Blogger Posts</h7>
<div class="description">
TEXT-OF-THE-SLIDE-15.
<a href="http://bdlab.blogspot.com/"><br /><b> Read More »</b></a>
</div>
</div>
<div class="clear"></div>
</div>

<div class="slide-wrapper">
<div class="slide-thumbnail">
<img alt="" src="http://3.bp.blogspot.com/_L3S3cG5x4ys/SpqkWIiiIhI/AAAAAAAAA6w/wMrkeObbX-Q/s400/Google-Chrome-Beta-4.png" />
</div>
<div class="slide-details">
<h7>Download Google Chorme 4 Offline Installer</h7>
<div class="description">
TEXT-OF-THE-SLIDE-16.
<a href="http://bdlab.blogspot.com/"><br /><b> Read More »</b></a>
</div>
</div>
<div class="clear"></div>
</div>

<div class="slide-wrapper">
<div class="slide-thumbnail">
<img alt="" src="http://1.bp.blogspot.com/_L3S3cG5x4ys/SsXpUMERu0I/AAAAAAAAA_I/nVUN0_TOemA/s400/Windows-Themes-Pack.jpg" />
</div>
<div class="slide-details">
<h7>UXTheme Multi-Patcher - Install Windows Themes/Visual Styles with a Double Click</h7>
<div class="description">
TEXT-OF-THE-SLIDE-17.
<a href="http://bdlab.blogspot.com/"><br /><b> Read More »</b></a>
</div>
</div>
<div class="clear"></div>
</div>

<div class="slide-wrapper">
<div class="slide-thumbnail">
<img alt="" src="http://4.bp.blogspot.com/_L3S3cG5x4ys/Sfb6PIPTdAI/AAAAAAAAAtY/3rrQtG6VBd0/s400/uTorrent-increase-speed.jpg" />
</div>
<div class="slide-details">
<h7>Increase Torrent Download Speed- The Easy Way!</h7>
<div class="description">
TEXT-OF-THE-SLIDE-18.
<a href="http://bdlab.blogspot.com/"> <br /><b> Read More »</b></a>
</div>
</div>
<div class="clear"></div>
</div>

<div class="slide-wrapper">
<div class="slide-thumbnail">
<img alt="" src="http://3.bp.blogspot.com/_L3S3cG5x4ys/SqLK87ZHpUI/AAAAAAAAA8I/7dqwvXvIRwc/s1600/Increase-page-views-of-your-blog.png" />
</div>
<div class="slide-details">
<h7>Increase Your Blog's Page Views Upto 300 Percent By Linkwithin</h7>
<div class="description">
TEXT-OF-THE-SLIDE-19.
<a href="http://bdlab.blogspot.com/"><br /><b> Read More »</b></a>
</div>
</div>
<div class="clear"></div>
</div>

<div class="slide-wrapper">
<div class="slide-thumbnail">
<img alt="" src="" />
</div>
<div class="slide-details">
<h2></h2>
<div class="description">
TEXT-OF-THE-SLIDE-20.
<br /><b> Read More »</b>
</div>
</div>
<div class="clear"></div>
</div>

</div>

<div id="myController">
<span class="jFlowPrev">Prev</span>
<span class="jFlowControl">1</span>
<span class="jFlowControl">2</span>
<span class="jFlowControl">3</span>
<span class="jFlowControl">4</span>
<span class="jFlowControl">5</span>
<span class="jFlowControl">6</span>
<span class="jFlowControl">7</span>
<span class="jFlowControl">8</span>
<span class="jFlowControl">9</span>
<span class="jFlowControl">10</span>
<span class="jFlowControl">11</span>
<span class="jFlowControl">12</span>
<span class="jFlowControl">13</span>
<span class="jFlowControl">14</span>
<span class="jFlowControl">15</span>
<span class="jFlowControl">16</span>
<span class="jFlowControl">17</span>
<span class="jFlowControl">18</span>
<span class="jFlowControl">19</span>

<span class="jFlowNext">Next</span>
</div>
<div class="clear"></div>
</div>

And now click Save

Customizations

Just replace “IMAGE-TITLE“, “TITLE-OF-THE-SLIDE“, “TEXT-OF-THE-SLIDE” with your image, title and text respectively.
You can increase the number of slides according to your need and available space.
- If you increase the number of slides, then don’t forget to increase “jFlowControl” numbering.

<div class="jflow-content-slider">

<div id="slides">

lt;!-- Slide #1 Starts-->

<div class="slide-wrapper">

<div class="slide-thumbnail">

<img alt="" src="IMAGE-LINK"/>

</div>

<div class="slide-details">

TITLE-OF-THE-SLIDE

<div class="description">

TEXT-OF-THE-SLIDE

</div>

</div>

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

</div>





<div class="slide-wrapper">

<div class="slide-thumbnail">

<img alt="" src="IMAGE-LINK"/>

</div>

<div class="slide-details">

TITLE-OF-THE-SLIDE

<div class="description">

TEXT-OF-THE-SLIDE

</div>

</div>

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

</div>





<div class="slide-wrapper">

<div class="slide-thumbnail">

<img alt="" src="IMAGE-LINK"/>

</div>

<div class="slide-details">

TITLE-OF-THE-SLIDE

<div class="description">

TEXT-OF-THE-SLIDE

</div>

</div>

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

</div>



.

.

.

.



</div>

<div id="myController">

<span class="jFlowPrev">Prev</span>

<span class="jFlowControl">1</span>

<span class="jFlowControl">2</span>

<span class="jFlowControl">3</span>



<span class="jFlowNext">Next</span>

</div>

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

</div>

................................................................................................
................................................................................................
................................................................................................

Moving jquery image slider for featured content in Blogger

]]></b:skin>

And immediately before it, paste this code:

#myslides{

background:#000 url(http://1.bp.blogspot.com/_xfdD6S9fOk4/Sd1SjSaUrXI/AAAAAAAAA20/ndvDf0nTslY/s1600/mslid.jpg) repeat-x;

width: 650px;

height:165px;

margin-bottom:5px;

}

.stepcarousel{

position: relative; /*leave this value alone*/

overflow: scroll; /*leave this value alone*/

width: 554px; /*Width of Carousel Viewer itself*/

height: 160px; /*Height should enough to fit largest content's height*/

margin: 0px 48px 5px 48px;

}

.stepcarousel .belt{

position: absolute; /*leave this value alone*/

left: 0;

top: 0;

}

.stepcarousel .panel{

float: left; /*leave this value alone*/

overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/

margin: 20px 10px ; /*margin around each panel*/

width:170px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */

background:#0e1829;

height:120px;

border:1px solid #1d2c44;

}

.stepcarousel .panel p{

text-align: left; /*leave this value alone*/

overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/

margin: 5px 5px ; /*margin around each panel*/

}

.stepcarousel .panel h2{

text-align: left; /*leave this value alone*/

height:20px;

overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/

margin: 2px 5px ; /*margin around each panel*/

font-size:16px;

font-weight:bold;

text-align:center;

font-family:Georgia,century gothic,Arial,verdana, sans-serif;

}

.stepcarousel .panel img{

float: left; /*leave this value alone*/

background:#0E1829; /*clip content that go outside dimensions of holding panel DIV*/

margin: 5px 5px 5px 5px; /*margin around each panel*/

padding:0px 0px;

}

Adding Script Code

Now find (CTRL+F) this code in the template:

Step 2:And find the code </head>
Step 3: Now add the following code just before the </head> tag.

And now click Save

................................................................................................
................................................................................................
................................................................................................

Make A Simple Featured Content SlideShow Using JQuery

]]></b:skin>

And immediately before it, paste this code:

#contentSlide {
background : #ddd; -moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
height : 228px; margin-bottom: 10px;
padding : 10px 0px 10px;
}
#slideshow {
margin : 0 auto;
width : 953px;
height : 230px;
background : #eeeeee none repeat scroll 0 0;
position : relative;
}
#slideshow #slidesContainer {
margin : 0 auto;
width : 845px;
height : 228px;
overflow : auto;
position : relative;
}
#slideshow #slidesContainer .slide {
margin : 0 auto;
width : 845px;
height : 228px;
}
.control {
display : block;
width : 39px;
height : 228px;
text-indent : -10000px;
position : absolute;
cursor : pointer;
}
#leftControl {
top : 0;
left : 0;
width : 55px;
background : transparent url(http://lh6.ggpht.com/_9b1traaMESE/Sms_Pg_IsqI/AAAAAAAAAXU/tTxdiIsFY4g/previous%20gray.jpg)no-repeat scroll 0 0;
}
#rightControl {
top : 0;
right : 0;
background : transparent url(http://lh6.ggpht.com/_9b1traaMESE/Sms-s5qb9iI/AAAAAAAAAXQ/edpXAZIaxCI/next%20gray.jpg) no-repeat scroll 0 0;
width : 55px;
}
.slide h2, .slide p {
margin : 15px;
}
.slide h2 {
font : italic 24px Georgia, "Times New Roman", Times, serif;
color : #212421;
letter-spacing : -1px;
}
.slide img {
float : right;
margin : 0 15px;
padding : 1px;
}

Adding Script Code

Now find (CTRL+F) this code in the template:

Step 2:And find the code </head>
Step 3: Now add the following code just before the </head> tag.

SlideShow Featured Content Using JQuery

<div id='contentslide'><div id='slideshow'>
<div id='slidescontainer'>
<div class='slide'>
<h2>Featured Content Slider Using JQuery!</h2>
<p><a href='http://bdlab.blogspot.com/'><img alt='external links - jquery' height='115' src='http://safir85.ucoz.com/bdlab-blogspot/24work/falling-text/8.gif' width='215'/></a> TEXT-OF-THE-SLIDE-1.
<a href="http://bdlab.blogspot.com/"><br /><b> Read More »</b></a>

</p></div>
<div class='slide'>
<h2>Thumbnail With Caption Using Simple JQuery</h2>
<p><a href='http://bdlab.blogspot.com/'><img alt='external links - jquery' height='115' src='http://safir85.ucoz.com/bdlab-blogspot/24work/falling-text/8.gif' width='215'/></a> TEXT-OF-THE-SLIDE-1.
<a href="http://bdlab.blogspot.com/"><br /><b> Read More »</b></a>

</p></div>
<div class='slide'>
<h2>Multi Level Drop-Down Menu Dengan CSS dan JQuery!</h2>
<p><a href='http://bdlab.blogspot.com/'><img alt='external links - jquery' height='115' src='http://safir85.ucoz.com/bdlab-blogspot/24work/falling-text/8.gif' width='215'/></a> TEXT-OF-THE-SLIDE-1.
<a href="http://bdlab.blogspot.com/"><br /><b> Read More »</b></a>
</p></div>
<div class='slide'>
<h2>Super Sexy Bookmarks Widget for Blogger !</h2>
<p><a href='http://bdlab.blogspot.com/'><img alt='thumbnail image that says sleek button using photoshop that links to a photoshop tutoril.' height='115' src='http://safir85.ucoz.com/bdlab-blogspot/24work/falling-text/8.gif' width='215'/></a> TEXT-OF-THE-SLIDE-1.
<a href="http://bdlab.blogspot.com/"><br /><b> Read More »</b></a>
</p></div>
</div>
</div></div>

And now click Save

Note: Please edit the title of the content buddy, description and link content.

................................................................................................
................................................................................................
................................................................................................

New And Stylish JQuery Featured Post Widget for Blogger Blogs

]]></b:skin>

And immediately before it, paste this code:

#featured{
width:400px;
padding-right:250px;
position:relative;
height:250px;
background:#fff;
border:5px solid #ccc;
}
#featured ul.ui-tabs-nav{
position:absolute;
top:0; left:400px;
list-style:none;
padding:0; margin:0;
width:250px;
}
#featured ul.ui-tabs-nav li{
padding:1px 0; padding-left:13px;
font-size:12px;
color:#666;
}
#featured ul.ui-tabs-nav li span{
font-size:11px; font-family:Verdana;
line-height:18px;
}
#featured .ui-tabs-panel{
width:400px; height:250px;
background:#999; position:relative;
overflow:hidden;
}
#featured .ui-tabs-hide{
display:none;
}
#featured li.ui-tabs-nav-item a{/*On Hover Style*/
display:block;
height:60px;
color:#333; background:#fff;
line-height:20px;
outline:none;
}
#featured li.ui-tabs-nav-item a:hover{
background:#f2f2f2;
}
#featured li.ui-tabs-selected{ /*Selected tab style*/
background:url('http://1.bp.blogspot.com/_5yyQgf23Pco/S3XLK_LqDLI/AAAAAAAABjQ/eaDkjxCw9nc/s320/selected-item.gif') top left no-repeat;
}
#featured ul.ui-tabs-nav li.ui-tabs-selected a{
background:#ccc;
}
#featured ul.ui-tabs-nav li img{
float:left; margin:2px 5px;
background:#fff;
padding:2px;
border:1px solid #eee;
}
#featured .ui-tabs-panel .info{
position:absolute;
top:180px; left:0;
height:70px; width: 400px;
background: url('http://i47.tinypic.com/117s1g9.jpg') ;
}
#featured .info h2{
font-size:14px; font-family:Georgia, serif;
color:#fff; padding:5px; margin:0;
overflow:hidden;
}
#featured .info p{
margin:0 5px;
font-family:Verdana; font-size:11px;
line-height:15px; color:#f0f0f0;
}
#featured .info a{
text-decoration:none;
color:#fff;
}
#featured .info a:hover{
text-decoration:underline;
}

Adding Script Code

Now find (CTRL+F) this code in the template:

Step 2:And find the code </head>
Step 3: Now add the following code just before the </head> tag.

<div id="featured" >
<ul class="ui-tabs-nav">
<li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><img src="http://i49.tinypic.com/qpncrq.jpg" alt="" /><span>Kerinduan Pada Baitullah</span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img src="http://i49.tinypic.com/sqh9cl.jpg" alt="" /><span>6 Kerusakan Valentine day's </span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><img src="http://i45.tinypic.com/sy6p3k.jpg" alt="" /><span>Keajaiban Do'a</span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img src="http://i50.tinypic.com/14jn30n.jpg" alt="" /><span>Wanita yang Lisannya Al-Qur'an</span></a></li>
</ul>

<div id="fragment-1" class="ui-tabs-panel" style="">
<img src="http://i45.tinypic.com/33ue3yo.jpg" alt="" />
<div class="info" >
<h2><a href="#" >Kerinduan Pada Baitullah</a></h2>
<p>Lorem ipsum dolor sit amet, to cancel reply. Used Cars. ....<a href="#" >read more</a></p>
</div>
</div>

<div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">
<img src="http://i48.tinypic.com/mts5sg.jpg" alt="" />
<div class="info" >
<h2><a href="#" >6 Kerusakan Valentine days </a></h2>
<p>Vestibulum leo quam, accumsan nec porttitor a, euismod ac tortor. Sed ipsum lorem, sagittis...<a href="#" >read more</a></p>
</div>
</div>

<div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">
<img src="http://i50.tinypic.com/av23bm.jpg" alt="" />
<div class="info" >
<h2><a href="#" >Keajaiban Do'a</a></h2>
<p>liquam erat volutpat. Proin id volutpat nisi. Nulla facilisi. Curabitur facilisis sollicitudin ornare....<a href="#" >read more</a></p>
</div>
</div>

<div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style="">
<img src="http://i47.tinypic.com/212h1qt.jpg" alt="" />
<div class="info" >
<h2><a href="#" >Wanita yang lisannya al-qur'an</a></h2>
<p>Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus ....<a href="#" >read more</a></p>
</div>
</div>
</div>

And now click Save

Note: Please edit the above code by replacing the title, description and link content

................................................................................................
................................................................................................
................................................................................................

Awesome Automatic Content Slider for Blogger using jQuery

]]></b:skin>

And immediately before it, paste this code:

/* START
--------------------------------------------------------------------
Awesome Automatic Content Sliders for Blogger using jQuery

http://css-tricks.com/889-creating-a-slick-auto-playing-featured-content-slider/

--------------------------------------------------------------------
Featured Content Slider
*/
#slider-wrap { width: 500px; margin: 25px auto; position: relative; min-height: 500px;font-size: 10px; background: url(http://i1133.photobucket.com/albums/m596/abu-farhan/featuredcontentslider-bg.png) top center; }
.slider-wrap{ font-family: Arial, Helvetica, sans-serif; width: 419px; position: absolute; top: 87px; left: 40px; }
.stripViewer .panelContainer
.panel ul{ text-align: left; margin: 0 15px 0 30px; }
.stripViewer{ position: relative; overflow: hidden; width: 419px; height: 285px; }
.stripViewer .panelContainer{ position: relative; left: 0; top: 0; }
.stripViewer .panelContainer .panel { float: left; height: 100%; position: relative; width: 419px; }
.stripNavL, .stripNavR, .stripNav{ display: none; }
.nav-thumb { border: 1px solid black; margin-right: 5px; }
#movers-row { margin: -46px 0 0 62px; }
#movers-row div { width: 20%; float: left; }
#movers-row div a.cross-link { float: right; }
.photo-meta-data{ background: url(http://i1133.photobucket.com/albums/m596/abu-farhan/featuredcontentslider-transpBlack.png); padding: 10px; height: 40px; margin-top: -50px; position: relative; z-index: 9999; color: white; }
.photo-meta-data span { font-size: 13px; }
.cross-link { display: block; width: 62px; margin-top: -10px; position: relative; padding-top: 10px; z-index: 9999; }
.active-thumb { background: transparent url(http://i1133.photobucket.com/albums/m596/abu-farhan/featuredcontentslider-icon-uparrowsmallwhite.png) top center no-repeat; }
/* END
--------------------------------------------------------------------
Awesome Automatic Content Sliders for Blogger using jQuery

--------------------------------------------------------------------
Featured Content Slider
*/

Adding Script Code

Now find (CTRL+F) this code in the template:

Step 2:And find the code </head>
Step 3: Now add the following code just before the </head> tag.

<a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'/>
<script src='http://safir85.ucoz.com/24work-blogspot/featured-post-s/FeaturedContentSlider-01.pack.js' type='text/javascript'/>
<script type='text/javascript'>
var theInt = null;
var $crosslink, $navthumb;
var curclicked = 0;
theInterval = function(cur){
clearInterval(theInt);
if( typeof cur != 'undefined' )
curclicked = cur;
$crosslink.removeClass("active-thumb");
$navthumb.eq(curclicked).parent().addClass("active-thumb");
$(".stripNav ul li a").eq(curclicked).trigger('click');
theInt = setInterval(function(){
$crosslink.removeClass("active-thumb");
$navthumb.eq(curclicked).parent().addClass("active-thumb");
$(".stripNav ul li a").eq(curclicked).trigger('click');
curclicked++;
if( 6 == curclicked )
curclicked = 0;
}, 3000);
};
$(function(){
$("#main-photo-slider").codaSlider();
$navthumb = $(".nav-thumb");
$crosslink = $(".cross-link");
$navthumb
.click(function() {
var $this = $(this);
theInterval($this.parent().attr('href').slice(1) - 1);
return false;
});
theInterval();
});
</script>

<div id="slider-wrap">
<script style="text/javascript" src="http://safir85.ucoz.com/24work-blogspot/featured-post-s/galleryposts-FeaturedContentSlider.js"></script>
<script style="text/javascript">
var numposts_gal = 6; //recommended
var numchars_gal = 150;
var random_posts = false; // random posts
</script>
<script src="http://24works.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script>
</div>

And now click Save

credit by abu-farhan

................................................................................................
................................................................................................
................................................................................................

Using jQuery Slider Featured Posts (glory)

]]></b:skin>

And immediately before it, paste this code:

/* featured fade */
#wrapper-featured{
padding:10px 0 ;
width:650px;
height: 326px;
margin:0 ;
background: url(http://1.bp.blogspot.com/_j82W7u9kZbs/S4PIf5_AoJI/AAAAAAAABTU/fV-Ca8f3_lI/s1600/bg_featured.jpg) no-repeat;
position:relative;
}
#wrapper-myslides {
width:550px;
height:210px;
padding: 0 0 ;
margin: 3px 0 0 10px;
position:relative;
float:left;
}
#myslides {
width:550px;
height:210px;
padding: 0 0 50px;
margin: 0 18px ;
overflow:hidden;
}
.panel{
width:550px;
height:210px;
}
#myslides img.crop-foto {
margin:8px 10px 10px 9px;
border:1px solid #fff;
display:block;
position:absolute;
right:3px;
top:0;
}
.featured-entry {
text-align:left;
line-height:1.5em;
font-style:italic;
font-size:12px;
font-family: georgia,Arial,Verdana, Helvetica, sans-serif;
padding: 20px 10px 0;
width:280px;
color:#fff;
position:absolute;
top:0;
left:0;
}
h3.featured-title {
font-size:22px;
text-align:left;
font-family:Georgia, Arial,Verdana, Helvetica, sans-serif;
margin:10px 0 5px;
padding:0 0 5px;
font-weight:normal;
line-height:1em;
font-style:normal;
}
h3.featured-title a:link, h3.featured-title a:visited{
color:#fff;
}
h3.featured-title a:hover {
color:#b1e1ff;
}
#nav-slides a#prev {
position:absolute;
bottom:105px;
left:135px;
z-index:1;
color:#800;
width:14px;
height:15px;
background: url(http://4.bp.blogspot.com/_j82W7u9kZbs/S4PIgGqiI2I/AAAAAAAABTc/TVJVRxgolPg/s400/prev.jpg) no-repeat;
}
#nav-slides a#prev:hover{
background: url(http://3.bp.blogspot.com/_j82W7u9kZbs/S4PIgrELHJI/AAAAAAAABTk/7fHHap-Uvks/s400/prev_hover.jpg) no-repeat;
}
#nav-slides a#next {
position:absolute;
bottom:105px;
left:160px;
z-index:1;
color:#800;
width:14px;
height:15px;
background: url(http://1.bp.blogspot.com/_j82W7u9kZbs/S4PIg6l0qKI/AAAAAAAABTs/FA8fvPY0wlA/s400/next.jpg) no-repeat;
}
#nav-slides a#next:hover{
background: url(http://1.bp.blogspot.com/_j82W7u9kZbs/S4PIhJz7YvI/AAAAAAAABT0/B6PleC4jlUk/s400/next_hover.jpg) no-repeat;
}

Adding Script Code

Now find (CTRL+F) this code in the template:

Step 2:And find the code </head>
Step 3: Now add the following code just before the </head> tag.

<a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><script src='http://safir85.ucoz.com/24work-blogspot/featured-post-s/jquery-1.3.2.min.js' type='text/javascript'></script>
<script src='http://safir85.ucoz.com/24work-blogspot/featured-post-s/jquery.cycle.all-000-.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" hover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" hover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//]]>
</script>
<script type='text/javascript'>
$(document).ready(function(){
$('#myslides').cycle({
fx: 'fade',
speed: 700,
timeout: 3000,
next: '#next',
prev: '#prev'
});
});
</script>

<div id='wrapper-featured'>
<div id='wrapper-myslides'>
<div id='myslides'>
<div class='panel'>
<div class='image-frame'>
<a href='#' rel='bookmark' title='POST TITLE'>
<img alt='IMAGE TITLE' class='crop-foto' height='185' src='http://farm3.static.flickr.com/2745/4053275401_98d09abea1.jpg' width='205'/></a>
</div>
<div class='featured-entry'>
<h3 class='featured-title'>
<a href='#' rel='bookmark' title='POST TITLE'>Cinta Sejati</a></h3>
<p>Makna ‘Cinta Sejati’ terus dicari dan digali. Manusia dari zaman ke zaman seakan tidak pernah bosan membicarakannya. Sebenarnya? apa itu ‘Cinta Sejati’ dan bagaimana pandangan Islam terhadapnya?...</p>
</div>
</div>
<div class='panel'>
<div class='image-frame'>
<a href='#' rel='bookmark' title='POST TITLE'>
<img alt='IMAGE TITLE' class='crop-foto' height='185' src='http://farm3.static.flickr.com/2676/4053275587_d21ffaab15.jpg' width='205'/></a>
</div>
<div class='featured-entry'>
<h3 class='featured-title'>
<a href='#' rel='bookmark' title='POST TITLE'>Cinta Sepanjang Masa</a></h3>
<p>Ia adalah wanita yang terus hidup dalam hati suaminya sampaipun ia telah meninggal dunia. Tahun-tahun yang terus berganti tidak dapat mengikis kecintaan sang suami padanya. Panjangnya masa tidak dapat menghapus kenangan bersamanya di hati sang suami</p>
</div>
</div>
<div class='panel'>
<div class='image-frame'>
<a href='#' rel='bookmark' title='POST TITLE'>
<img alt='IMAGE TITLE' class='crop-foto' height='185' src='http://farm3.static.flickr.com/2477/4054018014_c5e93695f4.jpg' width='205'/></a>
</div>
<div class='featured-entry'>
<h3 class='featured-title'>
<a href='#' rel='bookmark' title='POST TITLE'>Cinta Sederhana</a></h3>
<p>Cinta sejati...Adalah satu janji...
Yang dibuat oleh hati...Tak dapat ditulis...Tak dapat dibaca...Namun takkan terpisah oleh jarak...Takkan berubah oleh waktu...Sedetik di mata...
Selamanya di jiwa...Abadi tuk selamanya...Do'a di malam hari adalah penawar kerinduannya...Dan Allah adalah tujuannya...</p>
</div>
</div>
</div>
</div>
<div id='nav-slides'>
<a href='#' id='prev'></a>
<a href='#' id='next'></a>
</div>
</div>

And now click Save

Note: Please use the text in red with the post title, a brief description of the post and replace the url of the image or thumbnails slider menu above
Done, do not forget to save / save templates and see the results.

<div id='wrapper-featured'>
<div id='wrapper-myslides'>
<div id='myslides'>
<div class='panel'>
<div class='image-frame'>
<a href='#' rel='bookmark' title='POST TITLE'>
<img alt='IMAGE TITLE' class='crop-foto' height='185' src='http://farm3.static.flickr.com/2745/4053275401_98d09abea1.jpg' width='205'/></a>
</div>
<div class='featured-entry'>
<h3 class='featured-title'>
<a href='#' rel='bookmark' title='POST TITLE'>POST TITLE</a></h3>
<p>WRITE YOUR POST DESCRIPTION HERE</p>
</div>
</div>
<div class='panel'>
<div class='image-frame'>
<a href='#' rel='bookmark' title='POST TITLE'>
<img alt='IMAGE TITLE' class='crop-foto' height='185' src='http://farm3.static.flickr.com/2676/4053275587_d21ffaab15.jpg' width='205'/></a>
</div>
<div class='featured-entry'>
<h3 class='featured-title'>
<a href='#' rel='bookmark' title='POST TITLE'>POST TITLE</a></h3>
<p>WRITE YOUR POST DESCRIPTION HERE</p>
</div>
</div>
<div class='panel'>
<div class='image-frame'>
<a href='#' rel='bookmark' title=POST TITLE>
<img alt='IMAGE TITLE' class='crop-foto' height='185' src='http://farm3.static.flickr.com/2477/4054018014_c5e93695f4.jpg' width='205'/></a>
</div>
<div class='featured-entry'>
<h3 class='featured-title'>
<a href='#' rel='bookmark' title='POST TITLE'>POST TITLE</a></h3>
<p>WRITE YOUR POST DESCRIPTION HERE</p>
</div>
</div>
</div>
</div>
<div id='nav-slides'>
<a href='#' id='prev'/>
<a href='#' id='next'/>
</div>
</div>

]]></b:skin>

And immediately before it, paste this code:

/* Features */
#featured {height: 290px; overflow: hidden; background: url('http://sites.google.com/site/amatullah83/background/slide0002_background.gif') no-repeat top center; clear: both; font-size: 0.85em; margin-bottom: 5px;}
#featured .post {padding: 20px;}
#featured .post .featured-thumb {background: url('http://4.bp.blogspot.com/_j82W7u9kZbs/SywtGF3VD9I/AAAAAAAAAag/nWcaaNanIu8/s400/nothumb.gif') no-repeat center; float: left; border: 5px solid #FFFF99; overflow: hidden; height: 120px; width: 200px; margin-right: 15px;}
#featured .post .featured-thumb img {width: 200px;}
#featured .post .featured-text {padding-bottom: 10px;}
#featured .post .featured-title {font: normal 1.1em Georgia, Times, Serif; line-height: 1.1em;}
#featured .post .featured-comment {background: url('http://1.bp.blogspot.com/_j82W7u9kZbs/SywtHFyKYKI/AAAAAAAAAa4/zOTWVu6RdII/s400/entry-comment.png') no-repeat left center; padding: 5px 0px 5px 20px;margin-right: 20px;}
#featured .post .featured-date {background: url('http://2.bp.blogspot.com/_j82W7u9kZbs/SywtGvlFNpI/AAAAAAAAAao/jO6vscdLAzc/s400/entry-date.gif') no-repeat left center; padding: 5px 0px 5px 20px;margin-right: 20px;}
#featured .post .featured-meta {color: #999; clear: both; padding: 10px 0px; overflow: hidden; font-size: 0.9em;}
#featured .post .featured-read {display: block; float: right; background: #A9F5F2; width: 80px; color: #fff !important; padding: 5px 0px; text-align: center;-moz-border-radius-topleft:5px;-moz-border-radius-topright:5px;-moz-border-radius-bottomleft:5px;-moz-border-radius-bottomright:5px;-webkit-border-bottom-left-radius:5px;-webkit-border-bottom-right-radius:5px;-webkit-border-top-left-radius:5px;-webkit-border-top-right-radius:5px;}

Adding Script Code

Now find (CTRL+F) this code in the template:

Step 2:And find the code </head>
Step 3: Now add the following code just before the </head> tag.

<a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
/*
* jQuery Cycle Plugin (with Transition Definitions)
* Examples and documentation at: http://jquery.malsup.com/cycle/
* Copyright (c) 2007-2009 M. Alsup
* Version: 2.63 (17-MAR-2009)
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
* Requires: jQuery v1.2.6 or later
*
* Originally based on the work of:
* 1) Matt Oakes
* 2) Torsten Baldes (http://medienfreunde.com/lab/innerfade/)
* 3) Benjamin Sterling (http://www.benjaminsterling.com/experiments/jqShuffle/)
*/
;(function($){var ver="2.63";if($.support==undefined){$.support={opacity:!($.browser.msie)};}function log(){if(window.console&&window.console.log){window.console.log("[cycle] "+Array.prototype.join.call(arguments," "));}}$.fn.cycle=function(options,arg2){var o={s:this.selector,c:this.context};if(this.length==0&&options!="stop"){if(!$.isReady&&o.s){log("DOM not ready, queuing slideshow");$(function(){$(o.s,o.c).cycle(options,arg2);});return this;}log("terminating; zero elements found by selector"+($.isReady?"":" (DOM not ready)"));return this;}return this.each(function(){options=handleArguments(this,options,arg2);if(options===false){return;}if(this.cycleTimeout){clearTimeout(this.cycleTimeout);}this.cycleTimeout=this.cyclePause=0;var $cont=$(this);var $slides=options.slideExpr?$(options.slideExpr,this):$cont.children();var els=$slides.get();if(els.length<2){log("terminating; too few slides: "+els.length);return;}var opts=buildOptions($cont,$slides,els,options,o);if(opts===false){return;}if(opts.timeout||opts.continuous){this.cycleTimeout=setTimeout(function(){go(els,opts,0,!opts.rev);},opts.continuous?10:opts.timeout+(opts.delay||0));}});};function handleArguments(cont,options,arg2){if(cont.cycleStop==undefined){cont.cycleStop=0;}if(options===undefined||options===null){options={};}if(options.constructor==String){switch(options){case"stop":cont.cycleStop++;if(cont.cycleTimeout){clearTimeout(cont.cycleTimeout);}cont.cycleTimeout=0;$(cont).removeData("cycle.opts");return false;case"pause":cont.cyclePause=1;return false;case"resume":cont.cyclePause=0;if(arg2===true){options=$(cont).data("cycle.opts");if(!options){log("options not found, can not resume");return false;}if(cont.cycleTimeout){clearTimeout(cont.cycleTimeout);cont.cycleTimeout=0;}go(options.elements,options,1,1);}return false;default:options={fx:options};}}else{if(options.constructor==Number){var num=options;options=$(cont).data("cycle.opts");if(!options){log("options not found, can not advance slide");return false;}if(num<0||num>=options.elements.length){log("invalid slide index: "+num);return false;}options.nextSlide=num;if(cont.cycleTimeout){clearTimeout(this.cycleTimeout);cont.cycleTimeout=0;}if(typeof arg2=="string"){options.oneTimeFx=arg2;}go(options.elements,options,1,num>=options.currSlide);return false;}}return options;}function removeFilter(el,opts){if(!$.support.opacity&&opts.cleartype&&el.style.filter){try{el.style.removeAttribute("filter");}catch(smother){}}}function buildOptions($cont,$slides,els,options,o){var opts=$.extend({},$.fn.cycle.defaults,options||{},$.metadata?$cont.metadata():$.meta?$cont.data():{});if(opts.autostop){opts.countdown=opts.autostopCount||els.length;}var cont=$cont[0];$cont.data("cycle.opts",opts);opts.$cont=$cont;opts.stopCount=cont.cycleStop;opts.elements=els;opts.before=opts.before?[opts.before]:[];opts.after=opts.after?[opts.after]:[];opts.after.unshift(function(){opts.busy=0;});if(!$.support.opacity&&opts.cleartype){opts.after.push(function(){removeFilter(this,opts);});}if(opts.continuous){opts.after.push(function(){go(els,opts,0,!opts.rev);});}saveOriginalOpts(opts);if(!$.support.opacity&&opts.cleartype&&!opts.cleartypeNoBg){clearTypeFix($slides);}if($cont.css("position")=="static"){$cont.css("position","relative");}if(opts.width){$cont.width(opts.width);}if(opts.height&&opts.height!="auto"){$cont.height(opts.height);}if(opts.startingSlide){opts.startingSlide=parseInt(opts.startingSlide);}if(opts.random){opts.randomMap=[];for(var i=0;i<els.length;i++){opts.randomMap.push(i);}opts.randomMap.sort(function(a,b){return Math.random()-0.5;});opts.randomIndex=0;opts.startingSlide=opts.randomMap[0];}else{if(opts.startingSlide>=els.length){opts.startingSlide=0;}}opts.currSlide=opts.startingSlide=opts.startingSlide||0;var first=opts.startingSlide;$slides.css({position:"absolute",top:0,left:0}).hide().each(function(i){var z=first?i>=first?els.length-(i-first):first-i:els.length-i;$(this).css("z-index",z);});$(els[first]).css("opacity",1).show();removeFilter(els[first],opts);if(opts.fit&&opts.width){$slides.width(opts.width);}if(opts.fit&&opts.height&&opts.height!="auto"){$slides.height(opts.height);}var reshape=opts.containerResize&&!$cont.innerHeight();if(reshape){var maxw=0,maxh=0;for(var i=0;i<els.length;i++){var $e=$(els[i]),e=$e[0],w=$e.outerWidth(),h=$e.outerHeight();if(!w){w=e.offsetWidth;}if(!h){h=e.offsetHeight;}maxw=w>maxw?w:maxw;maxh=h>maxh?h:maxh;}if(maxw>0&&maxh>0){$cont.css({width:maxw+"px",height:maxh+"px"});}}if(opts.pause){$cont.hover(function(){this.cyclePause++;},function(){this.cyclePause--;});}if(supportMultiTransitions(opts)===false){return false;}if(!opts.multiFx){var init=$.fn.cycle.transitions[opts.fx];if($.isFunction(init)){init($cont,$slides,opts);}else{if(opts.fx!="custom"&&!opts.multiFx){log("unknown transition: "+opts.fx,"; slideshow terminating");return false;}}}var requeue=false;options.requeueAttempts=options.requeueAttempts||0;$slides.each(function(){var $el=$(this);this.cycleH=(opts.fit&&opts.height)?opts.height:$el.height();this.cycleW=(opts.fit&&opts.width)?opts.width:$el.width();if($el.is("img")){var loadingIE=($.browser.msie&&this.cycleW==28&&this.cycleH==30&&!this.complete);var loadingOp=($.browser.opera&&this.cycleW==42&&this.cycleH==19&&!this.complete);var loadingOther=(this.cycleH==0&&this.cycleW==0&&!this.complete);if(loadingIE||loadingOp||loadingOther){if(o.s&&opts.requeueOnImageNotLoaded&&++options.requeueAttempts<100){log(options.requeueAttempts," - img slide not loaded, requeuing slideshow: ",this.src,this.cycleW,this.cycleH);setTimeout(function(){$(o.s,o.c).cycle(options);},opts.requeueTimeout);requeue=true;return false;}else{log("could not determine size of image: "+this.src,this.cycleW,this.cycleH);}}}return true;});if(requeue){return false;}opts.cssBefore=opts.cssBefore||{};opts.animIn=opts.animIn||{};opts.animOut=opts.animOut||{};$slides.not(":eq("+first+")").css(opts.cssBefore);if(opts.cssFirst){$($slides[first]).css(opts.cssFirst);}if(opts.timeout){opts.timeout=parseInt(opts.timeout);if(opts.speed.constructor==String){opts.speed=$.fx.speeds[opts.speed]||parseInt(opts.speed);}if(!opts.sync){opts.speed=opts.speed/2;}while((opts.timeout-opts.speed)<250){opts.timeout+=opts.speed;}}if(opts.easing){opts.easeIn=opts.easeOut=opts.easing;}if(!opts.speedIn){opts.speedIn=opts.speed;}if(!opts.speedOut){opts.speedOut=opts.speed;}opts.slideCount=els.length;opts.currSlide=opts.lastSlide=first;if(opts.random){opts.nextSlide=opts.currSlide;if(++opts.randomIndex==els.length){opts.randomIndex=0;}opts.nextSlide=opts.randomMap[opts.randomIndex];}else{opts.nextSlide=opts.startingSlide>=(els.length-1)?0:opts.startingSlide+1;}var e0=$slides[first];if(opts.before.length){opts.before[0].apply(e0,[e0,e0,opts,true]);}if(opts.after.length>1){opts.after[1].apply(e0,[e0,e0,opts,true]);}if(opts.next){$(opts.next).click(function(){return advance(opts,opts.rev?-1:1);});}if(opts.prev){$(opts.prev).click(function(){return advance(opts,opts.rev?1:-1);});}if(opts.pager){buildPager(els,opts);}exposeAddSlide(opts,els);return opts;}function saveOriginalOpts(opts){opts.original={before:[],after:[]};opts.original.cssBefore=$.extend({},opts.cssBefore);opts.original.cssAfter=$.extend({},opts.cssAfter);opts.original.animIn=$.extend({},opts.animIn);opts.original.animOut=$.extend({},opts.animOut);$.each(opts.before,function(){opts.original.before.push(this);});$.each(opts.after,function(){opts.original.after.push(this);});}function supportMultiTransitions(opts){var txs=$.fn.cycle.transitions;if(opts.fx.indexOf(",")>0){opts.multiFx=true;opts.fxs=opts.fx.replace(/\s*/g,"").split(",");for(var i=0;i<opts.fxs.length;i++){var fx=opts.fxs[i];var tx=txs[fx];if(!tx||!txs.hasOwnProperty(fx)||!$.isFunction(tx)){log("discarding unknown transition: ",fx);opts.fxs.splice(i,1);i--;}}if(!opts.fxs.length){log("No valid transitions named; slideshow terminating.");return false;}}else{if(opts.fx=="all"){opts.multiFx=true;opts.fxs=[];for(p in txs){var tx=txs[p];if(txs.hasOwnProperty(p)&&$.isFunction(tx)){opts.fxs.push(p);}}}}if(opts.multiFx&&opts.randomizeEffects){var r1=Math.floor(Math.random()*20)+30;for(var i=0;i<r1;i++){var r2=Math.floor(Math.random()*opts.fxs.length);opts.fxs.push(opts.fxs.splice(r2,1)[0]);}log("randomized fx sequence: ",opts.fxs);}return true;}function exposeAddSlide(opts,els){opts.addSlide=function(newSlide,prepend){var $s=$(newSlide),s=$s[0];if(!opts.autostopCount){opts.countdown++;}els[prepend?"unshift":"push"](s);if(opts.els){opts.els[prepend?"unshift":"push"](s);}opts.slideCount=els.length;$s.css("position","absolute");$s[prepend?"prependTo":"appendTo"](opts.$cont);if(prepend){opts.currSlide++;opts.nextSlide++;}if(!$.support.opacity&&opts.cleartype&&!opts.cleartypeNoBg){clearTypeFix($s);}if(opts.fit&&opts.width){$s.width(opts.width);}if(opts.fit&&opts.height&&opts.height!="auto"){$slides.height(opts.height);}s.cycleH=(opts.fit&&opts.height)?opts.height:$s.height();s.cycleW=(opts.fit&&opts.width)?opts.width:$s.width();$s.css(opts.cssBefore);if(opts.pager){$.fn.cycle.createPagerAnchor(els.length-1,s,$(opts.pager),els,opts);}if($.isFunction(opts.onAddSlide)){opts.onAddSlide($s);}else{$s.hide();}};}$.fn.cycle.resetState=function(opts,fx){fx=fx||opts.fx;opts.before=[];opts.after=[];opts.cssBefore=$.extend({},opts.original.cssBefore);opts.cssAfter=$.extend({},opts.original.cssAfter);opts.animIn=$.extend({},opts.original.animIn);opts.animOut=$.extend({},opts.original.animOut);opts.fxFn=null;$.each(opts.original.before,function(){opts.before.push(this);});$.each(opts.original.after,function(){opts.after.push(this);});var init=$.fn.cycle.transitions[fx];if($.isFunction(init)){init(opts.$cont,$(opts.elements),opts);}};function go(els,opts,manual,fwd){if(manual&&opts.busy&&opts.manualTrump){$(els).stop(true,true);opts.busy=false;}if(opts.busy){return;}var p=opts.$cont[0],curr=els[opts.currSlide],next=els[opts.nextSlide];if(p.cycleStop!=opts.stopCount||p.cycleTimeout===0&&!manual){return;}if(!manual&&!p.cyclePause&&((opts.autostop&&(--opts.countdown<=0))||(opts.nowrap&&!opts.random&&opts.nextSlide<opts.currSlide))){if(opts.end){opts.end(opts);}return;}if(manual||!p.cyclePause){var fx=opts.fx;curr.cycleH=curr.cycleH||$(curr).height();curr.cycleW=curr.cycleW||$(curr).width();next.cycleH=next.cycleH||$(next).height();next.cycleW=next.cycleW||$(next).width();if(opts.multiFx){if(opts.lastFx==undefined||++opts.lastFx>=opts.fxs.length){opts.lastFx=0;}fx=opts.fxs[opts.lastFx];opts.currFx=fx;}if(opts.oneTimeFx){fx=opts.oneTimeFx;opts.oneTimeFx=null;}$.fn.cycle.resetState(opts,fx);if(opts.before.length){$.each(opts.before,function(i,o){if(p.cycleStop!=opts.stopCount){return;}o.apply(next,[curr,next,opts,fwd]);});}var after=function(){$.each(opts.after,function(i,o){if(p.cycleStop!=opts.stopCount){return;}o.apply(next,[curr,next,opts,fwd]);});};if(opts.nextSlide!=opts.currSlide){opts.busy=1;if(opts.fxFn){opts.fxFn(curr,next,opts,after,fwd);}else{if($.isFunction($.fn.cycle[opts.fx])){$.fn.cycle[opts.fx](curr,next,opts,after);}else{$.fn.cycle.custom(curr,next,opts,after,manual&&opts.fastOnEvent);}}}opts.lastSlide=opts.currSlide;if(opts.random){opts.currSlide=opts.nextSlide;if(++opts.randomIndex==els.length){opts.randomIndex=0;}opts.nextSlide=opts.randomMap[opts.randomIndex];}else{var roll=(opts.nextSlide+1)==els.length;opts.nextSlide=roll?0:opts.nextSlide+1;opts.currSlide=roll?els.length-1:opts.nextSlide-1;}if(opts.pager){$.fn.cycle.updateActivePagerLink(opts.pager,opts.currSlide);}}var ms=0;if(opts.timeout&&!opts.continuous){ms=getTimeout(curr,next,opts,fwd);}else{if(opts.continuous&&p.cyclePause){ms=10;}}if(ms>0){p.cycleTimeout=setTimeout(function(){go(els,opts,0,!opts.rev);},ms);}}$.fn.cycle.updateActivePagerLink=function(pager,currSlide){$(pager).find("a").removeClass("activeSlide").filter("a:eq("+currSlide+")").addClass("activeSlide");};function getTimeout(curr,next,opts,fwd){if(opts.timeoutFn){var t=opts.timeoutFn(curr,next,opts,fwd);if(t!==false){return t;}}return opts.timeout;}$.fn.cycle.next=function(opts){advance(opts,opts.rev?-1:1);};$.fn.cycle.prev=function(opts){advance(opts,opts.rev?1:-1);};function advance(opts,val){var els=opts.elements;var p=opts.$cont[0],timeout=p.cycleTimeout;if(timeout){clearTimeout(timeout);p.cycleTimeout=0;}if(opts.random&&val<0){opts.randomIndex--;if(--opts.randomIndex==-2){opts.randomIndex=els.length-2;}else{if(opts.randomIndex==-1){opts.randomIndex=els.length-1;}}opts.nextSlide=opts.randomMap[opts.randomIndex];}else{if(opts.random){if(++opts.randomIndex==els.length){opts.randomIndex=0;}opts.nextSlide=opts.randomMap[opts.randomIndex];}else{opts.nextSlide=opts.currSlide+val;if(opts.nextSlide<0){if(opts.nowrap){return false;}opts.nextSlide=els.length-1;}else{if(opts.nextSlide>=els.length){if(opts.nowrap){return false;}opts.nextSlide=0;}}}}if($.isFunction(opts.prevNextClick)){opts.prevNextClick(val>0,opts.nextSlide,els[opts.nextSlide]);}go(els,opts,1,val>=0);return false;}function buildPager(els,opts){var $p=$(opts.pager);$.each(els,function(i,o){$.fn.cycle.createPagerAnchor(i,o,$p,els,opts);});$.fn.cycle.updateActivePagerLink(opts.pager,opts.startingSlide);}$.fn.cycle.createPagerAnchor=function(i,el,$p,els,opts){var a=($.isFunction(opts.pagerAnchorBuilder))?opts.pagerAnchorBuilder(i,el):'<a href="#">'+(i+1)+"</a>";if(!a){return;}var $a=$(a);if($a.parents("body").length==0){$a.appendTo($p);}$a.bind(opts.pagerEvent,function(){opts.nextSlide=i;var p=opts.$cont[0],timeout=p.cycleTimeout;if(timeout){clearTimeout(timeout);p.cycleTimeout=0;}if($.isFunction(opts.pagerClick)){opts.pagerClick(opts.nextSlide,els[opts.nextSlide]);}go(els,opts,1,opts.currSlide<i);return false;});if(opts.pauseOnPagerHover){$a.hover(function(){opts.$cont[0].cyclePause++;},function(){opts.$cont[0].cyclePause--;});}};$.fn.cycle.hopsFromLast=function(opts,fwd){var hops,l=opts.lastSlide,c=opts.currSlide;if(fwd){hops=c>l?c-l:opts.slideCount-l;}else{hops=c<l?l-c:l+opts.slideCount-c;}return hops;};function clearTypeFix($slides){function hex(s){s=parseInt(s).toString(16);return s.length<2?"0"+s:s;}function getBg(e){for(;e&&e.nodeName.toLowerCase()!="html";e=e.parentNode){var v=$.css(e,"background-color");if(v.indexOf("rgb")>=0){var rgb=v.match(/\d+/g);return"#"+hex(rgb[0])+hex(rgb[1])+hex(rgb[2]);}if(v&&v!="transparent"){return v;}}return"#ffffff";}$slides.each(function(){$(this).css("background-color",getBg(this));});}$.fn.cycle.commonReset=function(curr,next,opts,w,h,rev){$(opts.elements).not(curr).hide();opts.cssBefore.opacity=1;opts.cssBefore.display="block";if(w!==false&&next.cycleW>0){opts.cssBefore.width=next.cycleW;}if(h!==false&&next.cycleH>0){opts.cssBefore.height=next.cycleH;}opts.cssAfter=opts.cssAfter||{};opts.cssAfter.display="none";$(curr).css("zIndex",opts.slideCount+(rev===true?1:0));$(next).css("zIndex",opts.slideCount+(rev===true?0:1));};$.fn.cycle.custom=function(curr,next,opts,cb,speedOverride){var $l=$(curr),$n=$(next);var speedIn=opts.speedIn,speedOut=opts.speedOut,easeIn=opts.easeIn,easeOut=opts.easeOut;$n.css(opts.cssBefore);if(speedOverride){if(typeof speedOverride=="number"){speedIn=speedOut=speedOverride;}else{speedIn=speedOut=1;}easeIn=easeOut=null;}var fn=function(){$n.animate(opts.animIn,speedIn,easeIn,cb);};$l.animate(opts.animOut,speedOut,easeOut,function(){if(opts.cssAfter){$l.css(opts.cssAfter);}if(!opts.sync){fn();}});if(opts.sync){fn();}};$.fn.cycle.transitions={fade:function($cont,$slides,opts){$slides.not(":eq("+opts.currSlide+")").css("opacity",0);opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts);opts.cssBefore.opacity=0;});opts.animIn={opacity:1};opts.animOut={opacity:0};opts.cssBefore={top:0,left:0};}};$.fn.cycle.ver=function(){return ver;};$.fn.cycle.defaults={fx:"fade",timeout:4000,timeoutFn:null,continuous:0,speed:1000,speedIn:null,speedOut:null,next:null,prev:null,prevNextClick:null,pager:null,pagerClick:null,pagerEvent:"click",pagerAnchorBuilder:null,before:null,after:null,end:null,easing:null,easeIn:null,easeOut:null,shuffle:null,animIn:null,animOut:null,cssBefore:null,cssAfter:null,fxFn:null,height:"auto",startingSlide:0,sync:1,random:0,fit:0,containerResize:1,pause:0,pauseOnPagerHover:0,autostop:0,autostopCount:0,delay:0,slideExpr:null,cleartype:!$.support.opacity,nowrap:0,fastOnEvent:0,randomizeEffects:1,rev:0,manualTrump:true,requeueOnImageNotLoaded:true,requeueTimeout:250};})(jQuery);
/*
* jQuery Cycle Plugin Transition Definitions
* This script is a plugin for the jQuery Cycle Plugin
* Examples and documentation at: http://malsup.com/jquery/cycle/
* Copyright (c) 2007-2008 M. Alsup
* Version: 2.52
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*/
;(function($){$.fn.cycle.transitions.scrollUp=function($cont,$slides,opts){$cont.css("overflow","hidden");opts.before.push($.fn.cycle.commonReset);var h=$cont.height();opts.cssBefore={top:h,left:0};opts.cssFirst={top:0};opts.animIn={top:0};opts.animOut={top:-h};};$.fn.cycle.transitions.scrollDown=function($cont,$slides,opts){$cont.css("overflow","hidden");opts.before.push($.fn.cycle.commonReset);var h=$cont.height();opts.cssFirst={top:0};opts.cssBefore={top:-h,left:0};opts.animIn={top:0};opts.animOut={top:h};};$.fn.cycle.transitions.scrollLeft=function($cont,$slides,opts){$cont.css("overflow","hidden");opts.before.push($.fn.cycle.commonReset);var w=$cont.width();opts.cssFirst={left:0};opts.cssBefore={left:w,top:0};opts.animIn={left:0};opts.animOut={left:0-w};};$.fn.cycle.transitions.scrollRight=function($cont,$slides,opts){$cont.css("overflow","hidden");opts.before.push($.fn.cycle.commonReset);var w=$cont.width();opts.cssFirst={left:0};opts.cssBefore={left:-w,top:0};opts.animIn={left:0};opts.animOut={left:w};};$.fn.cycle.transitions.scrollHorz=function($cont,$slides,opts){$cont.css("overflow","hidden").width();opts.before.push(function(curr,next,opts,fwd){$.fn.cycle.commonReset(curr,next,opts);opts.cssBefore.left=fwd?(next.cycleW-1):(1-next.cycleW);opts.animOut.left=fwd?-curr.cycleW:curr.cycleW;});opts.cssFirst={left:0};opts.cssBefore={top:0};opts.animIn={left:0};opts.animOut={top:0};};$.fn.cycle.transitions.scrollVert=function($cont,$slides,opts){$cont.css("overflow","hidden");opts.before.push(function(curr,next,opts,fwd){$.fn.cycle.commonReset(curr,next,opts);opts.cssBefore.top=fwd?(1-next.cycleH):(next.cycleH-1);opts.animOut.top=fwd?curr.cycleH:-curr.cycleH;});opts.cssFirst={top:0};opts.cssBefore={left:0};opts.animIn={top:0};opts.animOut={left:0};};$.fn.cycle.transitions.slideX=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$(opts.elements).not(curr).hide();$.fn.cycle.commonReset(curr,next,opts,false,true);opts.animIn.width=next.cycleW;});opts.cssBefore={left:0,top:0,width:0};opts.animIn={width:"show"};opts.animOut={width:0};};$.fn.cycle.transitions.slideY=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$(opts.elements).not(curr).hide();$.fn.cycle.commonReset(curr,next,opts,true,false);opts.animIn.height=next.cycleH;});opts.cssBefore={left:0,top:0,height:0};opts.animIn={height:"show"};opts.animOut={height:0};};$.fn.cycle.transitions.shuffle=function($cont,$slides,opts){var w=$cont.css("overflow","visible").width();$slides.css({left:0,top:0});opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,true,true,true);});opts.speed=opts.speed/2;opts.random=0;opts.shuffle=opts.shuffle||{left:-w,top:15};opts.els=[];for(var i=0;i<$slides.length;i++){opts.els.push($slides[i]);}for(var i=0;i<opts.currSlide;i++){opts.els.push(opts.els.shift());}opts.fxFn=function(curr,next,opts,cb,fwd){var $el=fwd?$(curr):$(next);$(next).css(opts.cssBefore);var count=opts.slideCount;$el.animate(opts.shuffle,opts.speedIn,opts.easeIn,function(){var hops=$.fn.cycle.hopsFromLast(opts,fwd);for(var k=0;k<hops;k++){fwd?opts.els.push(opts.els.shift()):opts.els.unshift(opts.els.pop());}if(fwd){for(var i=0,len=opts.els.length;i<len;i++){$(opts.els[i]).css("z-index",len-i+count);}}else{var z=$(curr).css("z-index");$el.css("z-index",parseInt(z)+1+count);}$el.animate({left:0,top:0},opts.speedOut,opts.easeOut,function(){$(fwd?this:curr).hide();if(cb){cb();}});});};opts.cssBefore={display:"block",opacity:1,top:0,left:0};};$.fn.cycle.transitions.turnUp=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,true,false);opts.cssBefore.top=next.cycleH;opts.animIn.height=next.cycleH;});opts.cssFirst={top:0};opts.cssBefore={left:0,height:0};opts.animIn={top:0};opts.animOut={height:0};};$.fn.cycle.transitions.turnDown=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,true,false);opts.animIn.height=next.cycleH;opts.animOut.top=curr.cycleH;});opts.cssFirst={top:0};opts.cssBefore={left:0,top:0,height:0};opts.animOut={height:0};};$.fn.cycle.transitions.turnLeft=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,false,true);opts.cssBefore.left=next.cycleW;opts.animIn.width=next.cycleW;});opts.cssBefore={top:0,width:0};opts.animIn={left:0};opts.animOut={width:0};};$.fn.cycle.transitions.turnRight=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,false,true);opts.animIn.width=next.cycleW;opts.animOut.left=curr.cycleW;});opts.cssBefore={top:0,left:0,width:0};opts.animIn={left:0};opts.animOut={width:0};};$.fn.cycle.transitions.zoom=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,false,false,true);opts.cssBefore.top=next.cycleH/2;opts.cssBefore.left=next.cycleW/2;opts.animIn={top:0,left:0,width:next.cycleW,height:next.cycleH};opts.animOut={width:0,height:0,top:curr.cycleH/2,left:curr.cycleW/2};});opts.cssFirst={top:0,left:0};opts.cssBefore={width:0,height:0};};$.fn.cycle.transitions.fadeZoom=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,false,false);opts.cssBefore.left=next.cycleW/2;opts.cssBefore.top=next.cycleH/2;opts.animIn={top:0,left:0,width:next.cycleW,height:next.cycleH};});opts.cssBefore={width:0,height:0};opts.animOut={opacity:0};};$.fn.cycle.transitions.blindX=function($cont,$slides,opts){var w=$cont.css("overflow","hidden").width();opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts);opts.animIn.width=next.cycleW;opts.animOut.left=curr.cycleW;});opts.cssBefore={left:w,top:0};opts.animIn={left:0};opts.animOut={left:w};};$.fn.cycle.transitions.blindY=function($cont,$slides,opts){var h=$cont.css("overflow","hidden").height();opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts);opts.animIn.height=next.cycleH;opts.animOut.top=curr.cycleH;});opts.cssBefore={top:h,left:0};opts.animIn={top:0};opts.animOut={top:h};};$.fn.cycle.transitions.blindZ=function($cont,$slides,opts){var h=$cont.css("overflow","hidden").height();var w=$cont.width();opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts);opts.animIn.height=next.cycleH;opts.animOut.top=curr.cycleH;});opts.cssBefore={top:h,left:w};opts.animIn={top:0,left:0};opts.animOut={top:h,left:w};};$.fn.cycle.transitions.growX=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,false,true);opts.cssBefore.left=this.cycleW/2;opts.animIn={left:0,width:this.cycleW};opts.animOut={left:0};});opts.cssBefore={width:0,top:0};};$.fn.cycle.transitions.growY=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,true,false);opts.cssBefore.top=this.cycleH/2;opts.animIn={top:0,height:this.cycleH};opts.animOut={top:0};});opts.cssBefore={height:0,left:0};};$.fn.cycle.transitions.curtainX=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,false,true,true);opts.cssBefore.left=next.cycleW/2;opts.animIn={left:0,width:this.cycleW};opts.animOut={left:curr.cycleW/2,width:0};});opts.cssBefore={top:0,width:0};};$.fn.cycle.transitions.curtainY=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,true,false,true);opts.cssBefore.top=next.cycleH/2;opts.animIn={top:0,height:next.cycleH};opts.animOut={top:curr.cycleH/2,height:0};});opts.cssBefore={left:0,height:0};};$.fn.cycle.transitions.cover=function($cont,$slides,opts){var d=opts.direction||"left";var w=$cont.css("overflow","hidden").width();var h=$cont.height();opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts);if(d=="right"){opts.cssBefore.left=-w;}else{if(d=="up"){opts.cssBefore.top=h;}else{if(d=="down"){opts.cssBefore.top=-h;}else{opts.cssBefore.left=w;}}}});opts.animIn={left:0,top:0};opts.animOut={opacity:1};opts.cssBefore={top:0,left:0};};$.fn.cycle.transitions.uncover=function($cont,$slides,opts){var d=opts.direction||"left";var w=$cont.css("overflow","hidden").width();var h=$cont.height();opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,true,true,true);if(d=="right"){opts.animOut.left=w;}else{if(d=="up"){opts.animOut.top=-h;}else{if(d=="down"){opts.animOut.top=h;}else{opts.animOut.left=-w;}}}});opts.animIn={left:0,top:0};opts.animOut={opacity:1};opts.cssBefore={top:0,left:0};};$.fn.cycle.transitions.toss=function($cont,$slides,opts){var w=$cont.css("overflow","visible").width();var h=$cont.height();opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,true,true,true);if(!opts.animOut.left&&!opts.animOut.top){opts.animOut={left:w*2,top:-h/2,opacity:0};}else{opts.animOut.opacity=0;}});opts.cssBefore={left:0,top:0};opts.animIn={left:0};};$.fn.cycle.transitions.wipe=function($cont,$slides,opts){var w=$cont.css("overflow","hidden").width();var h=$cont.height();opts.cssBefore=opts.cssBefore||{};var clip;if(opts.clip){if(/l2r/.test(opts.clip)){clip="rect(0px 0px "+h+"px 0px)";}else{if(/r2l/.test(opts.clip)){clip="rect(0px "+w+"px "+h+"px "+w+"px)";}else{if(/t2b/.test(opts.clip)){clip="rect(0px "+w+"px 0px 0px)";}else{if(/b2t/.test(opts.clip)){clip="rect("+h+"px "+w+"px "+h+"px 0px)";}else{if(/zoom/.test(opts.clip)){var t=parseInt(h/2);var l=parseInt(w/2);clip="rect("+t+"px "+l+"px "+t+"px "+l+"px)";}}}}}}opts.cssBefore.clip=opts.cssBefore.clip||clip||"rect(0px 0px 0px 0px)";var d=opts.cssBefore.clip.match(/(\d+)/g);var t=parseInt(d[0]),r=parseInt(d[1]),b=parseInt(d[2]),l=parseInt(d[3]);opts.before.push(function(curr,next,opts){if(curr==next){return;}var $curr=$(curr),$next=$(next);$.fn.cycle.commonReset(curr,next,opts,true,true,false);opts.cssAfter.display="block";var step=1,count=parseInt((opts.speedIn/13))-1;(function f(){var tt=t?t-parseInt(step*(t/count)):0;var ll=l?l-parseInt(step*(l/count)):0;var bb=b<h?b+parseInt(step*((h-b)/count||1)):h;var rr=r<w?r+parseInt(step*((w-r)/count||1)):w;$next.css({clip:"rect("+tt+"px "+rr+"px "+bb+"px "+ll+"px)"});(step++<=count)?setTimeout(f,13):$curr.css("display","none");})();});opts.cssBefore={display:"block",opacity:1,top:0,left:0};opts.animIn={left:0};opts.animOut={left:0};};})(jQuery);
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
function showVideo(id) {
document.write("<object width=\"291\" height=\"225\"><param name=\"movie\" value=\"http://www.youtube.com/v/"+id+">&hl=en&fs=1\"></param><param name=\"allowFullScreen\" value=\"true\"></param><param name=\"allowscriptaccess\" value=\"always\"></param><embed src=\"http://www.youtube.com/v/"+id+"&hl=en&fs=1\" type=\"application/x-shockwave-flash\" allowscriptaccess=\"always\" allowfullscreen=\"true\" width=\"291\" height=\"225\"></embed></object>");
}

$(function() {
$('#featured').cycle({
fx: 'scrollLeft',
speed: 700,
timeout: 5000
});
});

$(document).ready(function(){
$(".click").click(function(){
$("#panel").slideToggle("medium");
$(this).toggleClass("active"); return false;
});
});
//]]>
</script>

<div id="featured">

<div class="post">
<div class="featured-text"><h1><a href="#" class="featured-title">Twitter Traffic </a></h1></div>
<div class="featured-thumb"><img src="http://1.bp.blogspot.com/_j82W7u9kZbs/SyYMf2_xTsI/AAAAAAAAAW4/eGINX3BxQgI/s400/twitter_lg2.jpg" /></div>
<p>If you aren’t using twitter as a way of generating free traffic to your website, you’re missing out on one of the easiest marketing strategies ever to hit the Internet.
With so many social communities online, it is easy to see why Internet Marketers with limited time have been drawn to the simplistic interface and speediness...</p>
<div class="featured-meta">
<span class="featured-date">11th October 2009</span>
<span class="featured-comment"><a href="/#comments">1 comment</a></span>
<a href="#" class="featured-read">Read full</a>
</div>
</div>

<div class="post">
<div class="featured-text"><h1><a href="#" class="featured-title">Email Marketing</a></h1></div>
<div class="featured-thumb"><img src="http://4.bp.blogspot.com/_j82W7u9kZbs/SyYMfLhD0zI/AAAAAAAAAWo/mNuMhEfOgko/s400/ebook_350.png" /></div>
<p>Online marketing may have developed a sudden surge these past few years, but many in the know how have felt its rise even from way then. As more internet based businesses are put up, the need to develop new marketing skills and knowledge based on this new medium have arisen. More and more marketing strategies...</p>
<div class="featured-meta">
<span class="featured-date">1st October 2009</span>
<span class="featured-comment"><a href="/#comments">1 comment</a></span>
<a href="#" class="featured-read">Read full</a>
</div>
</div>

<div class="post">
<div class="featured-text"><h1><a href="#" class="featured-title">Get paid to blog at today.com</a></h1></div>
<div class="featured-thumb"><img src="http://1.bp.blogspot.com/_j82W7u9kZbs/SyYMerjCVhI/AAAAAAAAAWg/2YliGo6vctQ/s400/070125_the_traffic_bully.gif" /></div>
<p>Today.com is a free blogging platform that works like Blogger and Wordpress, except that you will be paid for blogging at Today.com. Payment will be made on the 10th of each month via Paypal or check with $50 minimum payment.
How to Earn Money with Today.com
1. $2.00 per 1000 unique visitors for the first 30 days.
2....</p>
<div class="featured-meta">
<span class="featured-date">25th March 2009</span>
<span class="featured-comment"><a href="/#comments">4 comments</a></span>
<a href="#" class="featured-read">Read full</a>
</div>
</div>

<div class="post">
<div class="featured-text"><h1><a href="#" class="featured-title">Free download CPA marketing guide</a></h1></div>
<div class="featured-thumb"><img src="http://1.bp.blogspot.com/_j82W7u9kZbs/SyYMgbSDzTI/AAAAAAAAAXA/rGhNuo6t2og/s400/downloadreport.jpg" /></div>
<p>Gauher Chaudhry, the man behind Pay Per Click Formula, has just released an 89 page insider’s guide to CPA marketing profts for FREE!
That’s right, FREE as in cost you zero cents to get the most comprehensive guides on CPA marketing and learn the way to earn as much as $100,000 per day with CPA...</p>
<div class="featured-meta">
<span class="featured-date">18th March 2009</span>
<span class="featured-comment"><a href="/#comments">10 comments</a></span>
<a href="#" class="featured-read">Read full</a>
</div>
</div>

<div class="post">
<div class="featured-text"><h1><a href="#" class="featured-title">Delicious ice cream post</a></h1></div>
<div class="featured-thumb"><img src="http://4.bp.blogspot.com/_j82W7u9kZbs/SyYMffUehOI/AAAAAAAAAWw/W8jq0N9vI7Y/s400/ice_cream.jpg" /></div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam nec lorem. Duis erat. Mauris faucibus, nibh sed scelerisque commodo, libero lacus posuere diam, at ornare felis quam vitae mauris. Nam in diam. Cras nec metus. Nam suscipit elementum eros. Mauris ut nibh. Maecenas id velit. Nulla pellentesque porttitor dui.
Lorem ipsum dolor sit amet, consectetuer adipiscing...</p>
<div class="featured-meta">
<span class="featured-date">3rd December 2008</span>
<span class="featured-comment"><a href="/#comments" title="Comment on Delicious ice cream post">1 comment</a></span>
<a href="#" class="featured-read">Read full</a>
</div>
</div>

</div>

And now click Save

Note: Please edit the HTML code above adjusted by posting on the blog.
# address or url link posts, post title written in red, green writing a short description of the posts are written in blue url image / thumbnail post

................................................................................................
................................................................................................
................................................................................................

How To Add Auto Featured Posts Using JQuery Slider To Blogger

]]></b:skin>

And immediately before it, paste this code:

/*board*/
#board{
width:977px;
height:276px;
overflow:hidden;
margin:0 0 0 12px;
background:url(http://2.bp.blogspot.com/_jA-SP6SAtfY/SrnOlyLzIMI/AAAAAAAABrc/I_CuXi2Jnaw/s1600/bgr_board.png) no-repeat;
}
#board_left{
float:left;
padding:22px 0 0 27px;
}
#header_rss{
float:right;
padding:78px 80px 0 0;
}
#board_items{
width:679px;
padding:5px 0 0 0;
}
#board_body{
width:647px;
margin:0 0 0 15px;
}
#board_carusel{
width:647px;
height:131px;
position:relative;
}
#board_carusel .belt{
position: absolute; /*leave this value alone*/
left: 0;
top: 0;
}
.board_item{
width:647px;
height:173px;
overflow:hidden;
}
#board_body h2{
color:#000;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:23px;
font-weight:normal;
margin:0 0 28px 0;
}
#board_body strong{
font-size:12px;
color:#000;
line-height:18px;
display:block;
}
#board_body p{
font-size:12px;
color:#000;
line-height:18px;
padding:0 0 10px 0;
}
#board_body p img{
float:left;
border:1px solid #83b2c4;
margin:0 10px 0 0;
width:161px;
height:107px;
}
#board_body p a{
color:#000;
}
#board_body p.more a{
text-decoration:underline;
}
#board_body p.more a:hover{
text-decoration:none;
}
#board_carusel_nav{
width:100%;
overflow:hidden;
}
#board_carusel_nav li{
font-size:12px;
font-family:Verdana, Geneva, sans-serif;
float:left;
}
#board_carusel_nav a{
display:block;
float:left;
background:#7ac2df;
border-right:1px solid #85d7f7;
width:33px;
text-align:center;
padding:7px 0 7px 0;
}
#board_carusel_nav a.selected, #board_carusel_nav a:hover{
text-decoration:underline;
font-weight:bold;
background:#a7e2f9;
border-right:1px solid #a7e2f9;
}

Adding Script Code

Now find (CTRL+F) this code in the template:

Step 2:And find the code </head>
Step 3: Now add the following code just before the </head> tag.

<div id='board'>
<div id='board_left'>
<div id='board_items'>
<div id='board_body'>
<h2>Featured Posts</h2>
<div id='board_carusel'>
<div class='belt'>
<div class='board_item'>

<p><img alt='shafiyyah binti abdul muththalib' src='http://i41.tinypic.com/63ydtv.jpg'/><strong><a href='#'>Shafiyyah Binti Abdul Muththalib</a></strong>Shafiyyah fasih dalam lisannya dan beliau juga ahli bahasa. Tidak hanya itu saja Shafiyyah sosok ibu yang tangguh, beliau merawat dan membesarkan putranya sendiri semenjak suaminya wafat.....</p>
<p class='more'><a href='#'>Readmore</a></p>

</div><div class='board_item'>

<p><img alt='asiyah, wanita yang ditampakkan surga untuknya' src='http://i41.tinypic.com/24q1e68.jpg'/><strong><a href='#'>Asiyah, Wanita yang Ditampakkan Surga Untuknya</a></strong>Iman yang berangkat dari hati yang tulus, apapun yang menimpanya tidak sebanding dengan harapan atas apa yang dijanjikan di sisi Allah Tabaroka wa Ta’ala. Maka Allah pun tidak menyia-nyiakan keteguhan iman wanita ini. Ketika Fir’aun dan algojonya meninggalkan Asiyah, para malaikat pun datang menaunginya....</p>
<p class='more'><a href='#'>Readmore</a></p>

</div><div class='board_item'>

<p><img alt='fathimah binti al-yaman' src='http://i43.tinypic.com/34xjbx3.jpg'/><strong><a href='#'>Fathimah binti Al-Yaman</a></strong>Al-Hasan dan Al-Husain dinamakan anak Fathimah-Fathimah, karena ibu keduanya ialah Fathimah Az-Zahra', nenek keduanya adalah Fathimah binti Asad, dan nenek Nabi Shallallahu Alaihi wa Sallam dari jalur ayah beliau ialah Fathimah binti Abdullah bin Amr bin Imran bin Makhzum....</p>
<p class='more'><a href='#'>Readmore</a></p>

</div><div class='board_item'>

<p><img alt='ummu fadhl' src='http://i40.tinypic.com/1qod9d.jpg'/><strong><a href='#'>Ummu Fadhl</a></strong> Fadhl Rodhiallahu 'anha masuk Islam sebelum hijrah, beliau adalah wanita pertama yang masuk Islam setelah Khadijah (Ummul Mukminin Rodhiallahu 'anha) sebagaimana yang dituturkan oleh putra beliau Abdullah bin Abbas Rodhiallahu 'anhu, "Aku dan Ibuku adalah termasuk orang-orang yang tertindas dari wanita dan anak-anak....</p>
<p class='more'><a href='#'>Readmore</a></p>

</div><div class='board_item'>

<p><img alt='ummu haram binti malhan' src='http://i39.tinypic.com/313j7kw.jpg'/><strong><a href='#'>Ummu Haram Binti Malhan</a></strong>Ummu Haram berangan-angan untuk dapat menyertai peperangan bersama mujahidin yang menaiki kapal untuk menyebarkan dakwah dan membebaskan manusia dari peribadatan kepada sesama hamba menuju peribadatan kepada Allah saja. Akhirnya Allah mengabulkan angan-angannya dan mewujudkan cita-citanya....</p>
<p class='more'><a href='#'>Readmore</a></p>

</div>
</div>
</div>
</div>
<ul id='board_carusel_nav'>
<li id='board_carusel_nav_1'><a class='selected' href='javascript:stepcarousel.stepto('board_carusel', 1)'>1</a></li>
<li id='board_carusel_nav_2'><a href='javascript:stepcarousel.stepto('board_carusel', 2)'>2</a></li>
<li id='board_carusel_nav_3'><a href='javascript:stepcarousel.stepto('board_carusel', 3)'>3</a></li>
<li id='board_carusel_nav_4'><a href='javascript:stepcarousel.stepto('board_carusel', 4)'>4</a></li>
<li id='board_carusel_nav_5'><a href='javascript:stepcarousel.stepto('board_carusel', 5)'>5</a></li>
</ul>

</div>
</div>
<div id="header_rss">
<a href="http://24work.blogspot.com/feeds/posts/default" title="Rss"><img src="http://1.bp.blogspot.com/-l4DYX6WIZrM/TyjPtxWtYGI/AAAAAAAAAMw/19BDjwjZJwo/s1600/button_rss.png" alt="Rss" /></a>
</div>
</div>

And now click Save

Note: Please edit the HTML code above adjusted by posting on the blog.
# address or url link posts, post title written in red, green writing a short description of the posts are written in blue url image / thumbnail post

................................................................................................
................................................................................................
................................................................................................

Shoutmeloud Featured Content Slider for Blogger Using jQuery

]]></b:skin>

And immediately before it, paste this code:

.sliderwrapper{
position: relative; /*leave as is*/
overflow: hidden; /*leave as is*/
border: 5px solid #333333;
border-bottom-width: 5px;
width: 565px; /*width of featured content slider*/
height: 175px;
margin-left:15px;
}
.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: 555px; /*width of content DIVs within slider. Total width should equal slider's inner width (390+5+5=400) */
height: 100%;
filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
margin-top:0px;
}
.pagination{
width: 555px; /*Width of pagination DIV. Total width should equal slider's outer width (400+10+10=420)*/
text-align: right;
background-color: #333333;
padding: 5px 10px;
margin-top:-3px;
height:30px;
margin-left:15px;
}
.pagination a{
padding: 0 5px;
text-decoration: none;
color: #000;
background: #AAAAAA;
}
.pagination a:hover, .pagination a.selected{
color: #000;
background-color: #FFF;
}

Adding Script Code

Now find (CTRL+F) this code in the template:

Step 2:And find the code </head>
Step 3: Now add the following code just before the </head> tag.

<div class='sliderwrapper' id='slider1'>
<div class='contentdiv'>
<div style='color: black; text-align: justify;'>
<div class='separator' style='clear: both; text-align: center;'>
<a href="http://2.bp.blogspot.com/_So-xppeH7x0/TMBwtQPUWtI/AAAAAAAAAcI/8nQP58iSJCg/s200/canon-powershot-g9-front.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 0.5em; margin-right: 1em; margin-top: 1em;"><img height="100" src="http://2.bp.blogspot.com/_So-xppeH7x0/TMBwtQPUWtI/AAAAAAAAAcI/8nQP58iSJCg/s200/canon-powershot-g9-front.jpg" style="border: 0px solid #ddd;" width="145" /></a></div>
<a href='http://24work.blogspot.com/'><h1>Review On Cannon Power G9</h1></a>This Digital Camera comes with 12.1 Mp lens and great performance with tonnes of features. One of my friends purchased this camera and got it delivered few weeks before, after having a thorough analysis read in many websites about digital camera.First of all, lets talk about the package contents which includes...</div>
</div>
<div class='contentdiv'>
<div style='color: black; text-align: justify;'>
<div class='separator' style='clear: both; text-align: justify;'>
<a href='http://24work.blogspot.com/'><h1>Review On Blackberry Storm</h1></a>
The new Vodafone’s BlackBerry Storm has stormed the market and has attracted the whole world. BlackBerry’s parent company says that this phone is something that will really compete with an iPhone. So, here goes an elaborate review about the phone. The Storm has a clickable touch screen, which is really spectacular. On the Storm, the screen moves under your finger’s pressure, so that when you touch the screen it highlights an option and only selects...
</div>
</div>
</div>
<div class='contentdiv'>
Content 3 Here.
</div>
<div class='contentdiv'>
Content 4 Here.
</div>
<div class='contentdiv'>
Content 5 Here.
</div>
</div>
<div class='pagination' id='paginate-slider1'>
</div>
<script type='text/javascript'>
featuredcontentslider.init({
id: "slider1", //id of main slider DIV
contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
toc: "#increment", //Valid values: "#increment", "markup", ["label1", "label2", etc]
nextprev: ["Previous", "Next"], //labels for "prev" and "next" links. Set to "" to hide.
enablefade: [true, 0.2], //[true/false, fadedegree]
autorotate: [true, 3000], //[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>

]]></b:skin>

And immediately before it, paste this code:

/*-------------------- 24work jQuery Image Slider -------------*/
.featuredposts{border:1px solid #E9E7DE;width:608px;background:#FFF;margin:0 0 10px 0;height:400px;overflow:hidden;}
.fp-slides{}
.fp-post{padding:13px;}
.fp-thumbnail{border:3px solid #dddddd; width:580px;height:266px;margin-bottom:10px;overflow:hidden;}
.fp-thumbnail:hover{border:3px solid #CAC9C9; width:580px;height:266px;margin-bottom:10px;overflow:hidden;}
.fp-title{color:#787878;font:bold 14px Arial, Helvetica, Sans-serif;padding:0 0 4px 0;margin:0; text-transform:uppercase;}
.fp-title a{color:#000;text-decoration:none;}
.fp-title a:hover{color:#0080fF;text-decoration:none;}
.fp-label{color:#504D4D;margin:15px 15px 0 15px;padding:0;text-transform:uppercase;font:bold 16px/16px Arial,Helvetica,Sans-serif;}
.fp-post p{color:#504D4D;padding:0;margin:0;font:10px Arial,Helvetica,Sans-serif;height:32px;overflow:hidden;}
.fp-more,.fp-more:hover{color:#F77C04;font-weight:bold;}
.fp-nav{width:590px;padding:0px 10px;height:14px;}
.fp-pager a{background-image:url(http://2.bp.blogspot.com/-v3W9gCwnf4U/Tythw36ZkjI/AAAAAAAAAN8/WRB0morWYQM/s1600/featured-pager-24work-1.png);cursor:pointer;margin:3px 6px 0 0;padding:0;height:10px;width:10px;display:block;float:left;overflow:hidden;text-indent:-999px;background-position:0 0;}
.fp-pager a:hover,.fp-pager a.activeSlide{text-decoration:none;background-position:0 -110px;}
.fp-prev{float:right;margin-right:4px;width:15px;height:17px;opacity:0.7;background:url(http://1.bp.blogspot.com/-6ahEuAYHbEc/Tythvwy8nSI/AAAAAAAAANw/j5C2XRRPmvU/s1600/featured-prev-24work-1.png) top left no-repeat;}
.fp-prev:hover{opacity:1;}
.fp-prev:active{opacity:0.7;}
.fp-next{float:right;width:15px;height:17px;margin-left:4px;opacity:0.7;background:url(http://2.bp.blogspot.com/-oXQ8F_kSdS8/TythwUH4SrI/AAAAAAAAAN0/gc8pc6_1SlY/s1600/featured-next-24work-1.png;) top left no-repeat}
.fp-next:hover{opacity:1;}
.fp-next:active{opacity:0.7;}

Adding Script Code

Now find (CTRL+F) this code in the template:

Step 2:And find the code </head>
Step 3: Now add the following code just before the </head> tag.

<b:if cond='data:blog.pagetype != "static_page"'>
<b:if cond='data:blog.pagetype != "item"'>

<div class="featuredposts clearfix">
<div class="fp-slides">
<div class="fp-post">
<div class="fp-thumbnail">
<a href="http://24work.blogspot.com/"><img src="http://1.bp.blogspot.com/-WTF445xIkO0/TytRX_tRCmI/AAAAAAAAANg/zSumGQhOPvk/s1600/Image+3.gif" /></a></div>
<h3 class="fp-title">
<a href="http://24work.blogspot.com/">Welcome To MBT, The Blogger Widget Factory.</a></h3>
WRITE POST DESCRIPTION HERE... </div>
<div class="fp-post">
<div class="fp-thumbnail">
<a href="http://24work.blogspot.com/"><img src="http://4.bp.blogspot.com/-8gEz1Z3j-_Y/TytSTbRtTII/AAAAAAAAANo/jAA0HVWwjCE/s1600/widgets-24work-0000000.gif" /></a></div>
<h3 class="fp-title">
<a href="http://24work.blogspot.com/">Download Icons, Buttons, Banners and More...</a></h3>
WRITE POST DESCRIPTION HERE... </div>
<div class="fp-post">
<div class="fp-thumbnail">
<a href="http://24work.blogspot.com/"><img src="http://1.bp.blogspot.com/-WTF445xIkO0/TytRX_tRCmI/AAAAAAAAANg/zSumGQhOPvk/s1600/Image+3.gif" /></a></div>
<h3 class="fp-title">
<a href="http://24work.blogspot.com/">Learn Unique Pro Tutorials On hundreds of Quality Widgets...</a></h3>
WRITE POST DESCRIPTION HERE... </div>
<div class="fp-post">
<div class="fp-thumbnail">
<a href="http://24work.blogspot.com/"><img src="http://1.bp.blogspot.com/-WTF445xIkO0/TytRX_tRCmI/AAAAAAAAANg/zSumGQhOPvk/s1600/Image+3.gif" /></a></div>
<h3 class="fp-title">
<a href="http://24work.blogspot.com/">Download Limited But Quality Magazine Style Templates...</a></h3>
WRITE POST DESCRIPTION HERE... </div>
<div class="fp-post">
<div class="fp-thumbnail">
<a href="http://24work.blogspot.com/"><img src="http://1.bp.blogspot.com/-WTF445xIkO0/TytRX_tRCmI/AAAAAAAAANg/zSumGQhOPvk/s1600/Image+3.gif" /></a></div>
<h3 class="fp-title">
<a href="http://24work.blogspot.com/">Use Our Web Design and SEO Tools To Explore The Blogging Fun!...</a></h3>
WRITE POST DESCRIPTION HERE... </div>
</div>
<div class="fp-nav clearfix">
<span class="fp-pager"></span>
<a class="fp-next" href="http://draft.blogger.com/post-create.g?blogID=6595006268549181744#fp-next"></a>
<a class="fp-prev" href="http://draft.blogger.com/post-create.g?blogID=6595006268549181744#fp-prev"></a>

</div>
</div>

</b:if></b:if>

Many thanks to Lasantha Bandara or 24works for making this code and I just tested and modified to work on blogger

Add Static Facebook Pop Out Like Box with Smooth Jquery Hover Effect

noreply@blogger.com (admin) — Wed, 15 Feb 2012 08:02:00 +0000

Hello friends, here's another Facebook jquery pop up for facebook like box widget for bloggers (or) website. Advantages this widget is to free space on the page. Because Facebook can prevent website normal as the box. Static Pop Out Facebook as soft box with jQuery effect of activation for the blogger, this is another cool control. Here I have added as the box with simple jQuery hover effect. See Facebook static plate to the right of the page and move the mouse over the plate with the frame, as is visible by sliding to the left.

View Demo

How to Add Static Facebook Like Box with Smooth Jquery Hover for your Blog / website

Here There are 2 Simple Steps

Step 1: Adding Jquery JavaScript Plugin(Ignore this step if your blog have already a Jquery Plugin)

a. Go to Blogger Dashboard < Design tab > Edit Html
b. Search for </head> tag ( using ctrl+f)
c. Add below line of code Before </head> tag

And now click Save Template

Step 2: Adding Widget Code ( Html code )
it's Simple

a.Layout or page elements –>> Add a gadget->> Html/java script.

b.Add a below code in the Html/java scipt box.

Replace my facebook page URL below with the URL for your page.
(Note:- Facebook URL Must starting with "http://" and it contains no space or illegal Characters )

And now click Save

Note:-Don’t forget to change Red colour keywords.

Add jQuery Pop-up For Facebook Like Box With Background Image

I had given to Facebook as jQuery popup box and jQuery to facebook emerging as the box with the background image in my previous post, if you are new here, that the first visit, now I'm back with the same widget, just change the background image and the size of this widget. I just tried this and I hope you enjoyed it.

How To Add A Awesome Facebook Fan Page JavaScript For Blogger

I have to write two set of instructions for each steps, as some of you are using the default layout, and some of you are using the new layout.Backup your template before attempting this tutorial.

Step 1:

In old layout: Go to Dashboard - Design - Edit HTML - Expand Widget Templates.

In new layout: Go to Dashboard - Template - Edit Template HTML - Expand Widget Templates.

Now find (CTRL+F) this code in the template:

</head>

And exactly before it add the next code :

Now Click Save Template

Note :- Do not add above red colored jQuery plugin if your blog already jQuery plugin.

Adding HTML Code :

I have to write two set of instructions for each steps, as some of you are using the default layout, and some of you are using the new layout. So, let's see how to install this cool widget in your blog...

Step 1:

If you're using the old Blogger interface: Go to Dashboard - Design - Page Elements - Add a Gadget.

Add a Gadget of HTML/JavaScript type.

If you're using the new Blogger interface: Go to Dashboard - Layout - Add a Gadget

2.Click on 'Add a Gadget' on the sidebar.

3.Select 'HTML/Javascript' and add the one of code given below

4. Now Click On Save 'JavaScript' You are done.

And now click Save

Edit
Replace in above red colored number with your facebook page id

220888831260608

Note :if you have setup your facebook page id with user name than use our facebook id finder tool for it .

Add a Awesome jQuery Pop-Up For Facebook Like Box

After my recent Adsense Popup widget. Now I decided to present some fresh for what comes with a nice jQuery Popup Box to Facebook as. This is an excellent widget to enhance taste. You can see most of the sites or blogs that are used to increase pop unpaid, fans and supporters. This popup jQuery cute for Facebook As the box is a great blogger widget. As soon as the new visitors coming to your blog will display the pop visitors, which can help increase the size and get more traffic to my next tutorials Facebook.In I'll try to make it more interactive with links to social media profiles and a complete version with all its contents, which can need.Check out show down and I will show you how to add jQuery Popup cute for Facebook as the box to Blogger or WordPress?

So, let's see how to install this cool widget in your blog..

1. Sign into Blogger dashboard

In old layout: Go to Dashboard - Design - Edit HTML - Expand Widget Templates.

In new layout: Go to Dashboard - Template - Edit Template HTML - Expand Widget Templates.

Search for the tag </head> ( using ctrl+f)
Copy n paste below code just above/before </head> tag.

And now click Save Template

Now add the HTML code to blogger

it's simple

1. Sign into Blogger dashboard

old Blogger interface: Go to Dashboard - Design - Page Elements - Add a Gadget.If you're using the new Blogger interface: Go to Dashboard - Layout - Add a Gadget.Select 'HTML/Javascript' and add the one of code given below.Just copy and paste this code..

And now click Save

Note:- Replace pages%2FBlogspot-tutorial%2F220888831260608 With your Facebook User name

Now you have done !!!

StickyBar With Facebook Like and Google+ Button

StickyBar With Facebook Like and Google+ Button is a customized version of the greeting bar, but has no ads and can easily be styled and customized to blend your blog template. Since it is always better to have your own custom widgets so we designed this simple bar that attaches to the top of your blog or website to grab the attention of all visitors. Both social plugins help increase their fan base. Facebook button as well as be linked to your fan page, so that anyone can become a fan. Let's go to work then!

Follow these easy steps:

1.Go To Blogger > Design > Edit HTML
2.Backup your template
3.Search for this

]]></b:skin>

4.Just above it paste the following CSS code,

/*24work.blogspot.com Stickybar*/
#mbt_bar{
background:#0080ff url('http://1.bp.blogspot.com/-6vPZGTVb59o/TztEt7NzXkI/AAAAAAAABNc/16UOt9DhGdc/s400/stickybar.png') repeat-x;
width:100%;
margin:0 auto;
text-align:center;
padding:3px 0 0 0;
border-bottom: 1px solid #888888;
-moz-box-shadow: #666666 0px 1px 3px;
-webkit-box-shadow: #666666 0px 1px 3px;
box-shadow: #666666 0px 1px 3px;
z-index: 999;
height: 28px; position:fixed;
line-height: 1.85em;
vertical-align: baseline;
letter-spacing: 1px;
color:#fff;
font-size:12px;
font-weight:bold;
font-family: arial,"Helvetica",sans-serif;
}
#mbt_bar a{
text-decoration:underline;
color:#E2E504;
}
#mbt_bar a:hover{
text-decoration:none;
}
#mbt_bar p {margin:0; list-style:none;}
#mbt_bar img {vertical-align: middle;
margin-right: 6px;}

Next search for </head> and paste the following Javascript code just above it

6. Then search for <body> and just below it paste the following HTML code

<div id='mbt_bar'>
<span style='padding-right:5px; float:right'>
<img align='absmiddle' border='0' onClick='closeTopAds();return false;' src='http://2.bp.blogspot.com/-FiDNgBRWjhk/TztHGahTvDI/AAAAAAAABNk/jSUj1E_5Duk/s400/cancel.png' style='cursor:hand;cursor:pointer;'/></span><div style='float:left; padding-left:10px;'>Stickybar with social Plugins and close button. <a href='http://24work.blogspot.com/'>Get it!</a></div>
<div style='float:right; padding-right:0px;'> <p style='font:bold 12px arial; float:left; margin:5px;'>Liked us?</p><iframe allowTransparency='true' frameborder='0' scrolling='no' src='http://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fpages%2FBlogspot-tutorial%2F220888831260608&send=false&layout=button_count&width=80& show_faces=false&action=like&colorscheme=light&font&height=21' style='border:none; overflow:hidden; width:80px; height:21px;'/> <g:plusone href='http://24work.blogspot.com' size='medium'/> </div> </div>

You can write your message, announcement, anything you like instead of that purple text.
Replace blogger tricks with your Facebook Fan Page Username and replace our blog link with yours.

7. Note: Skip this step if you have already added google+ button somewhere already in your blog.

Paste the following code just below ]]></b:skin>

8. Save your template and you are all done!
Visit your blogs to see it fixed at top just perfectly. :)

Customize

To change the background color of the bar simply edit #0080ff in step#4 with a color of your choice. Try our color generator tools. If you need any further help then please let me know.

Two Ways To Customize The Facebook Fan Box Widget With Css

The Facebook plugin style is unfortunately not an easy task because the details are very limited shared in the Facebook Developers page. Custom Plugins will help you stand out as a brand and market your business as well. In April 2010, Daddydesigns posted a tutorial on how to style and make the modifications to the box fan on Facebook. Your tutorial was well received, but with the introduction of Facebook as the box instead of Fan Box, change in algorithms made it difficult to modify the plugin using the same guide. After several trial and error, managed to make the necessary changes made by DaddyDesigns small to fully customize the box with flavors like custom fonts and colors. This surely would not have been possible with your help bright.

Customize Facebook Like Box With CSS

Customize Facebook Like Box Using CSS

Creating a Custom Like Box Code

Instead of using the new code provided on the developers page, we will use and modify the code provided by daddydesigns. This is the modified code you need to use:

Make these changes:

Replace in above red colored number with your facebook page id

220888831260608

Note :if you have setup your facebook page id with user name than use our facebook id finder tool for it .

Replace STYLE SHEET LINK with the link of the stylesheet your previously uploaded. I will mention later how to create

Your personal Facebook as the box is ready to be served! That's it. Paste this code anywhere you want and your personalized style box is displayed to perfection. If you have any problems let me know. I will post more designs and tutorials on this topic on this week.

Credits

Readers are requested to kindly link back to this page if they wish to share this working tutorial with their visitors. It's the only tutorial published after Daddydesigns tut which provides a modified solution.

Visit her blog to see pop Facebook. To check the widget and again just delete the cookies on your browser and refresh the page to see that return. That's a cool Facebook widget pop up that surly increase their Facebook fan count.Thanks back to MBT or Harish for the original gadget.

Numbered Page Navigation For Blogger New Script

noreply@blogger.com (admin) — Sat, 28 Jan 2012 14:44:00 +0000

Today we will see how to add a nice page number navigation hack blogger. The default navigation links (i.e Older Posts) is not the friendly visitor if you are having a lot of jobs and bloggers readers.Few has some problems with the above script navigation page. Now here is a completely new script and work for numbered page navigation (i.e. Panigation) for Blogger. The paging widget for blogger it easy for the visitor. It is a must have for any new blogs.This new script allows you to add numbered page navigation to blogger/ blogspot blog with page numbers starting(1, 2, 3, 4 ….) like those of a book.

Add Numbered Page Navigation Widget With DIfferent Styles For Blogger / Blogspot

Page navigation widget for blogger is most popular widget, and most bloggers are using this. because these players are only provided in the wordpress blogs hosted or blogs.But now his trick has been made available to bloggers is also here that I am giving this Page Navigation Widget with different styles and options for full customization

How To Install This Widget On Blogger :-

Customize the Given Options and Click on Generate button
Click Add to Blogger button to add this widget on your Blog

Stylish Numbered Page Navigation Widget with Colored Styles For Blogger

Numbered Page Navigation Widget is a JavaScript hack for blogger to easily navigate blogger pages. In this post i am giving stylish navigation with different colorful styles.

An error was found in some blogs and it is also fixed in this widget.
eg.hiding at top

How To Install This Widget On Blogger :-

Click the below Button
Customize the Options given in Widget form
Click on "Generate" Button
Finally click On "Add To Blogger" Button

How to Add Numbered Page Navigation Widget for Blogger / Blogspot

Page navigation is awesome widget that allows navigation of page number to the visitors. You might have seen numbered page navigation in many WordPress blogs. It is simple JavaScript that allows your older posts, new posts and links to the house numbers. Have you seen older posts, new messages and links at home bored.

How To Add Numbered Page Navigation Widget to Blogger Blog?

I am giving best customizing options to this widget

Note:-Choose colors for your convenience you feel good.

1.Customize Options in Widget Form
2.Click on Generate Button
3.Then finally Click on Add to Blogger Button to add as a Widget

Blogger Page Navigation Widget With DIfferent Styles

How To Install This Widget On Blogger :-

Customize the Given Options and Click on Generate button
Click Add to Blogger button to add this widget on your Blog

UPDATED

Change based on your blog setting :
var postperpage=5;
var numshowpage=3;

Postperpage : How many Post every Page for your blog
numshowpage : how Many number will show in Your page Navigation

Customize Label (if you already use my previous Page Navi don’t use this step)

Go to the Edit HTML page and “Expand Widget Templates”
Find this (all of this text in your xml or template)

'data:label.url'

and Replace with this

'data:label.url + "?&max-results=5"'

Change 5 base on how many post every page

Many thanks to Harish for making this code , Some Stylings and PageNavi Script by Abu Farhan and I just tested and modified to work on blogger

Add Flash Twitter Follow Me Buttons to Blogger Blogs / Websites

noreply@blogger.com (admin) — Wed, 25 Jan 2012 13:05:00 +0000

Twitter is a social networking sites popular in the world of bloggers to promote their blogs. So here I am very cool Twitter Blogger widget, now it shows me how to add flash buttons to your twitter blogs and websites. These are the widgets based on Flash animations and have some nice effects.These buttons can help Twitter Flash Spice up your blogs, Webssites and can help you gain more followers on Twitter. These are designed and developed by twitterflash.net. I'm taking all the 15 types of one-click install to your blog.

How to Install Flash Animated Twitter Follow Me Widget To Blogger / Blog / Websites

I have to write two set of instructions for each steps, as some of you are using the default layout, and some of you are using the new layout. So, let's see how to install this cool widget in your blog..

Step 1:

If you're using the old Blogger interface: Go to Dashboard - Design - Page Elements - Add a Gadget.

Add a Gadget of HTML/JavaScript type.

If you're using the new Blogger interface: Go to Dashboard - Layout - Add a Gadget

2.Click on 'Add a Gadget' on the sidebar.

3.Select 'HTML/Javascript' and add the one of code given below

4. Now Click On Save 'JavaScript' You are done.

And now click Save

How to Install Flash Twitter Follow Me Buttons on Your Blog?

1. Choose Any Flash Follow Me Button As You Want

2. Replace rohul786 With Your Twitter User Name

3. Customize Width And Height as You Need

4. Click on Generate Button and Finally Click on Add to Blogger Button to add this widget on your blog.

OR

5. Click on Get Code Button and Copy the code to use it.

Sexy Sliding JavaScript Side Bar Menu Using Mootools

noreply@blogger.com (admin) — Tue, 24 Jan 2012 07:32:00 +0000

Show- hide, Smooth sliding and sexy. Menu bar with javascript and mootools. This post explains how to add Sexy Sliding JavaScript Side Bar Menu Using Mootools Widget on his blog that looks good on your blogspot blog.Be effective CSS vertical menu with show / hide uses MooTools to show / hide the menu with a vertical slide-in/slide-out nice effect.

About MooTools: "MooTools is a compact, modular, Object-Oriented JavaScript framework designed for intermediate to advanced JavaScript developer. It lets you write powerful, flexible, cross-browser code with its elegant API, well documented and consistent. ".
MooTools Home: Home Mootools.

Live Demo

How to Install Beautiful Sliding JavaScript Side Bar Menu Using Mootools

Now let's start adding it...

Step 1. Login to Your Blogger Account.Go to your Blogger Dashboard.Click on Layout tab from left pane and click on Add a Gadget link.

Step 2. After click on Add a Gadget link A pop-up box will open now
with many gadget list, Choose HTML/JavaScript from the gadget options by clicking the blue plus sign for that gadget.

Step 3. Select 'HTML/Javascript' and add the one of code given below.

Step 4. Now Click On Save 'JavaScript' You are done. ..............

And now click Save

Note: Keep in mind that before a save above "#" of land and your link Link One, Link Two, Link Three Link Four, and the name of the place you need to do is save.And here is the link I used to have 4, you can link up to 10

Multi-Color Effect For Your Links On Hover For Blogger / Blogspot

noreply@blogger.com (admin) — Mon, 23 Jan 2012 08:02:00 +0000

How to create text links in different colors? Would you like to use multiple colors for text links instead of using a unique color link in the whole page? Confused start to tell what the title, purpose ANAA if you want to link touched the pointer to uppercase, bekedip flashing rainbow colors and the background like fireworks or a star-studded.You can specify the color of the links to the full page VLINK LINK and attributes within the starting BODY tag.

How to add multiple link styles

Want to make a link to your blog and rainbow-colored flashing when the pointer is affected? It is very easy

I have to write two set of instructions for each steps, as some of you are using the default layout, and some of you are using the new layout.Backup your template before attempting this tutorial.

Step 1:

In old layout: Go to Dashboard - Design - Edit HTML - Expand Widget Templates.

In new layout: Go to Dashboard - Template - Edit Template HTML - Expand Widget Templates.

Now find (CTRL+F) this code in the template:

</head>

And exactly before it add the next code :

Now Click Save Template

And you are done.

Customize And Demo.

You can change this value

var rate = 15 ;

in the above code to control the speed of color transformation by increasing or decreasing the number 15

How to create a rainbow colored hover link

If you want to use this Multicolor link hover effect on your Blogger Blog
Then follow below steps

In old layout: Go to Dashboard - Design - Edit HTML - Expand Widget Templates.

In new layout: Go to Dashboard - Template - Edit Template HTML - Expand Widget Templates.

Now find (CTRL+F) this code in the template:

</head>

And exactly before it add the next code :

Now Click Save Template

How to Add Rainbow Color Effect For Your Links In Hover For Blogger / Blogspot

Hello friends! Effect of rainbow colors to random colors will give your link on hover. This widget works based on simple JavaScript. Once applied, all the links on the page displays a rainbow effect onmouseover.

Watch Live Demo

How to add this widget to blogger?

Just click Add to Blogger Button Bellow

(OR)

Login to Blogger Account
Go to Design > Page elements
Click Add a Gadget and choose Html/JavaScript
Paste Bellow Code and click Save Button

Please leave your comments and responses for better improvement of my blog

Auto Scrolling Recent Posts Widget For Blogger / Blogspot

noreply@blogger.com (admin) — Tue, 27 Dec 2011 17:25:00 +0000

If you have a lot of post on the blog, or if you want to show everyone your list of favorite books, but have little space in the sidebar widget this will be a great help to you. This post explains how to add auto scrolling (marquee) recent posts Widget on his blog that looks good on your blogspot blog. This is similar to the display of recent post in your sidebar, but this will have a marquee in this widget. Now if you want to show your blog in this way, either on top or bottom of your blog, then you can use this new widget:

How to Install Auto Scrolling Recent Posts Widget

I have to write two set of instructions for each steps, as some of you are using the default layout, and some of you are using the new layout. So, let's see how to install this cool widget in your blog..

Step 1:

If you're using the old Blogger interface: Go to Dashboard - Design - Page Elements - Add a Gadget.

Add a Gadget of HTML/JavaScript type.

If you're using the new Blogger interface: Go to Dashboard - Layout - Add a Gadget

2.Click on 'Add a Gadget' on the sidebar.

3.Select 'HTML/Javascript' and add the one of code given below

4. Now Click On Save 'JavaScript' You are done.

And now click Save

Note:- Choose appropriate Image Bullet or Icon That have transparent Background and small in Size

ScrollAmount:	(0 = No Scroll)
ScrollDelay:	(0 = MaxScrollSpeed)

You can only modify the code with red color (variables) according to your requirements, for ex. in case of "var w2bScrollDelay", lower the number, higher the speed.

Watch live Demo

Demo does not works Properly here, But when we add as widget it Works Great!

How to Install This Widget On 'Blogger' ?

Customize Options in Given Widget Generator Form
Click on Generate Button
Click Preview** Button to see your widget Preview
Finally Click Add to Blogger Button to add this widget on Your blog

**Note:- After changing any values, First Click Generate Button and then See Your Preview

Note:- Choose appropriate Image Bullet or Icon That have transparent Background and small in Size

Automatic scrolling Recent posts widget will give scrolling of post titles with links

This widget has automated MARQUEE Effect will result scrolling titles

And now click Save

Watch live Demo

(Demo does not works properly here, But when we add as widget it Works Great!)

How To Add This Widget :

1. Customize Bellow form and Click on Generate button.

2. And Click Add to Blogger button to add this widget to your blog.

Many thanks to Harish for making this code and I just tested and modified to work on blogger

Blogspot Tutorial

How To Add Snow Effect On The Blogger Mouse Cursor Area

How to make snow cursor in blogspot

How to Make Sparkling Cursor [Starry Cursor] Snow Effect

Snow Effect for Blogger Blogs! Make snow fall from your blog!

Show Falling Christmas Snow on your Blogs!

How to change mouse cursor in blogger blog to animated cursors

How to Install mouse cursor in blogger blog to animated cursors

Change Mouse Cursor Generator by 24work.blogspot.com

How To Add Mouse Cursor Widget To Blogger?

Animated Recent posts for Blogger / Blogspot with thumbnails - Simple Spy

Stylish Scrolling Recent Posts Widget For Blogger

Add Animated Recent Post Widget Sliding Recent Post Widget for Bloggers

Stylish Animated Blogger Recent Posts Widget

Scrolling Recent Post Gadget For Blogger

New and Flexible Recent Posts Widget With Thumbnail for Blogger

Tooltips Recent Post Widget For Blogger With Thumbnail

How To Add Animated Flash Clock To Your Blogger Blog

How To Add Aniamted Flash Clock Widget To Blogger?

22+ Google Flag Translate Widget For Blogger / Blogspot

Falling Objects / Falling Text / Marquee Scrolling Text Generator for Blogger

Blogger Falling Object Generator Code

Blogger Falling Text Code Generate

Marquee Scrolling Text Generator for Blogger

17+ Featured Content Slider for Blogger Using jQuery

Customizations

Add Static Facebook Pop Out Like Box with Smooth Jquery Hover Effect

Numbered Page Navigation For Blogger New Script

Blogger Page Navigation Widget With DIfferent Styles

UPDATED

Customize Label (if you already use my previous Page Navi don’t use this step)

'data:label.url'

'data:label.url + &quot;?&amp;max-results=5&quot;'

Add Flash Twitter Follow Me Buttons to Blogger Blogs / Websites

How to Install Flash Twitter Follow Me Buttons on Your Blog?

Related Posts Widget For Blogger / Blogspot with jQuery

Sexy Sliding JavaScript Side Bar Menu Using Mootools

Multi-Color Effect For Your Links On Hover For Blogger / Blogspot

How to add this widget to blogger?

Recent Comments Widget For Blogger / Blogspot with Top Commenters

Recommended Post Slider Widget for Blogger with Twitter / Facebook share button

Auto Scrolling Recent Posts Widget For Blogger / Blogspot

'data:label.url + "?&max-results=5"'