Blogger templates

Related Posts Showdown: LinkWithin VS Outbrain VS nRelate

If you've been blogging or reading blogs for any amount of time, then you've probably noticed, or might even already have installed a related posts widget. They are a great idea and an effective method for increasing page views and reducing bounce rates by encouraging visitors to stay on your blog longer by showing them a list of other enticing posts that "They Might Like".

In my opinion, the choice of whether or not to install one of these widgets on your blog is a no-brainer. There are no drawbacks, unless you maybe have a small and infrequently updated blog with a limited amount of posts such as this one. In that case, you might want to hold off on it until you've built up a decent amount of posts or articles. However, if you have an established blog with a healthy number of posts, then you are missing out if you don't have a related post widget.

The only real question, and one not so easily answered is, of the many available solutions out there, which one do I use? 

LinkWithin? YARPP? Outbrain? IGIT? nRelate? SimpleReach?

As you can see, there are several competing widgets designed to display related posts on your blog, and at first glance all the most popular ones do look similar and seem to be worthy choices. However, as I will point out below, there are some important differences to be aware of when making your selection.

I've been blogging for about 18 months now, and for most of that time I've been using a related posts plugin on my main blog, Bonjour Tristesse. Over that time, I've thoroughly examined a few of these offerings, namely LinkWithin, Outbrain and nRelate. The most of the others are designed exclusively for Wordpress blogs, so I couldn't consider them for my Blogger blog. In this post I will share my overall experiences with those three to help you choose the right one for you.

LinkWithin

No doubt currently the most popular related posts widget around, LinkWithin is an established presence and brand that practically everyone in the blogosphere is aware of. When I was starting out, I saw it on quite a few other blogs, so naturally it was also the first one I tried out.

To its credit, LinkWithin is a very simple and easy solution to add to your blog. You don't have to sign up, and with just a few effortless clicks you can be up and running. If a simple set and forget solution is what you are after then LinkWithin is an excellent choice.


I used it for the first 3 months or so of my blog's existence, and was completely happy with its functions. However, as I started to get the hang of things, I began tinkering more and more with my blog, learning how to customize various things from within Blogger, I also began to become frustrated by the lack of options offered by LinkWithin, and it's lack of tracking statistics. I found its simplicity to be a curse, as the only thing you can easily change is the amount of posts shown.

So I began the search for an alternative to try out, which led me to...

Outbrain

I don't recall how exactly I came to discover Outbrain, whether I saw it on another blog or found it by Google, but I was glad I did.

What initially attracted me was the cleaner default layout, one with only a tiny unobtrusive [?] in the bottom right corner, and also their claim of a more advanced widget, one that promised increased traffic by personalizing the links shown according to advanced algorithms, instead of simple random selections like LinkWithin.

Outbrain also had the same option of an easy-to-add free widget with no signup required, but I was enticed to sign-up in order to gain access to advanced features like a ratings system (since removed) and most importantly, reporting statistics to track the effectiveness of the widget.


Not all was roses though. After installing the Outbrain widget, I discovered that it was showing up in an odd position, on top of my Read More jump-links, not exactly the optimum placement for it; also there was very little whitespace between the widget and the post body, making it look cramped and cluttered; furthermore, each of the post titles shown also unnecessarily included my blog name at the end.

In the hopes of resolving those three issues I went over to their support forum and to no surprise found existing threads created by other bloggers with the same problems. What was unexpected and impressive though, was the rapid and friendly responses I received from multiple members of the Outbrain staff who worked quickly to fix the widget for me within hours of my requests. Until this point, I had never experienced such rapid and effective personal support, from a private company for a completely free service.

Unfortunately though, it seems they haven't kept up as well with this side of their business, as I have a more recent, less satisfactory encounter with Outbrain's support that I will get into a bit later.

Anyhow, I happily used the Outbrain widget for the next 9 months. During this time, I ran into no further issues with their widget, and everything continued to work nicely as my blog steadily grew. I especially loved using their neatly laid out dashboard to periodically check up on my stats reports.


Although I was seeing a decent CTR (Click Through Rate), with an average of 4.75% between January to September 2011. I couldn't help but begin to wonder about the true effectiveness of these 'personalized links', links which often appeared to be completely unrelated to the current post. So I started looking around to see if there might not be an even better alternative to Outbrain.

Enter the latest challenger nRelate...

nRelate

While researching for a new widget I noticed a lot of positive buzz for nRelate, a relative newcomer to the content recommendation game, offering yet another simple to use and easy to install widget, with claims of a 5-12% page view increase, and a very impressive amount of widget customization options. I decided to give them a 90 day test run at Bonjour Tristesse.

Just like the others, nRelate gives you the option of installing without signing up, but then you don't get access to their superior customizing features, nor do you get to see the all important usage statistics.

One point to be aware of here, installation on your blog is not nearly as immediate as the others. nRelate says it takes about 2 hours after installing for the widget to begin to show up on your blog. In my experience it was more like 8 hours.


But once it does appear, you can login and change a wide array of settings that none of the other guys offer. Such as: the choice of several different thumbnail sizes; the ability to use your own custom default image; a half dozen different preset layout themes; the ability to completely disable the nRelate logo if you wish; and the most interesting one, you can toggle the degree of relevance you want your resulting links to have from low, medium, or high.

On my blog, I found the high setting was not very practical, returning only a limited number of links and sometimes none at all. The medium was slightly better, but still quite often didn't come up with the maximum 4 links that I had it set to. I had to settle for the low setting to guarantee a consistent amount of link results. Of course your results will vary depending on the amount and type of content on your blog.

All of that fancy stuff is nice, but ultimately what I was after was an increase in CTR over what I was previously getting from Outbrain. So most important for me was access to nRelate's reporting features to keep an eye on things.

Unfortunately, a couple of weeks after installing the widget, nRelate rolled out a system update which inadvertently caused me to lose the ability to see my stats. After failing to find a support link via the dashboard menu—there currently still isn't one—I finally noticed a nondescript support email address published in the welcome screen after you log in.

I sent an email to this address detailing my problem and received no response or acknowledgment for days. Eventually I discovered a link to their support forums in the footer of their main site and made a post there which was answered relatively quickly and got my problem taken care of. If anyone from nRelate ends up reading this, you guys may want to consider adding a link to the support forums in a visible location somewhere within the logged in partner dashboard.


With access to the stats restored, things rolled along smoothly for the remainder of my time with nRelate.  I did find that the nRelate stats reports are much simpler and not quite as detailed (for example there is no way to see which of your articles is the most popular), and the charts and tables are not as visually fetching as Outbrain's very well designed reporting screens. Also, if you are an advanced user, they lack the ability to export your numbers into an Excel spreadsheet.

After 90 days, my average CTR from nRelate ended up being a disappointing 3.29%. A 1.5% drop from Outbrain. That might not sound like much, but for every 10,000 page views, that is an extra 150 hits lost. Of course this wasn't any kind of controlled scientific experiment, and there are many factors that could have contributed to this lower CTR, but the positive experience I've had with Outbrain in the past, combined with the more user friendly interface and advanced stats prompted me to switch back.

I do still highly recommend nRelate though, especially for its very extensive customization features, and for one other thing I haven't mentioned - the fact that they do not perform any redirection on the links in their widget. I'm not entirely sure of the SEO implications of link redirection, but both the LinkWithin and Outbrain widgets briefly redirect your visitors to their internal sites before bouncing them back to you. Although I personally have not found this to be a problem, some have claimed that this is in effect 'stealing your link juice' so it is something to be aware of.

Conclusion - Return to Outbrain

I switched back to using the Outbrain related posts widget on January 1, 2012 and immediately noticed a problem with the wrong thumbnails being scraped from my latest posts. I headed straight for the support forums where I had great results in the past and opened up a ticket.

Knowing it was New Years and the holiday season I didn't expect a lightning fast response, nor did I get one. I eventually got a response on January 4 that didn't quite solve my issue, but at least I had acknowledgement. After I replied back for clarification, I uncharacteristically did not receive any further communication until almost a month later. Finally on February 2, just as I was about to throw in the towel and head back to nRelate, someone from Outbrain came to my aid and fixed my problem. Hopefully things are back to normal now, but I haven't had any issues since, so I don't know if their response times have improved.

Despite the support delays, I will be staying with them for the time being, especially since my click rates have returned to what they were before. But I will also keep a close eye on nRelate as they remain an extremely viable alternative that with a few improvements could easily become my first choice.

TL;DR

LinkWithin is good if you want to keep things simple.

Outbrain is my widget of choice for performing slightly better in CTR and providing a great interface for stats.

nRelate remains just a nose behind Outbrain, but still an excellent choice with the most superior custom features of all.

Did you find this article helpful? Which related posts solution do you prefer? Let me know in the comments below.

Axiom welcomes ADDY hardware to new home

Some timely housewarming items arrived at Axiom's new residence at 1702 Washington Ave.

Axiom collected five ADDY Awards and 12 Citations of Excellence at AAF-Houston's 50th annual awards ceremony held at the Hyatt Regency in downtown Houston on Saturday night.

The centerpiece was a multi-component, multimedia presentation for Cameron that combined its nine divisions into one voice under the theme "Discover Cameron." The campaign was the main magnet for Axiom, taking a Silver Addy in the B-to-B Regional/National Campaign category, and both Gold and Silver ADDYs in the Illustration Campaign category.

Axiom also won Gold for its catalog showcasing the artwork of Mary McCleary, Art League Houston's 2011 Texas Artist of the Year; and a Silver for Hope Stone's Annual Fund Invitation.

Axiom, which received 17 nominations heading into Saturday's ceremony, earned two Citations of Excellence for its campaign on Fire Station No. 6, the company's new home after the landmark building was purchased by Tom Hair the previous decade and underwent a successful restoration.  AAF-Houston also issued Citations of Excellence for Axiom's work on behalf of Art League Houston (two), INOVA Geophysical, NEOS, NiSource (two), Reliance Aluminum & Steel, Vortex Ventures and Yogi University.
The event, whose theme was "MADFEST" in honor of the hit AMC television show "Mad Men," was also a celebration of the advertising club's 100th anniversary. During the ceremony, highlights were shown of memorable campaigns past such as the Shell Answer Man. Plus, AAF-Houston honored Jay Hagins (Only In Houston Award) and Locke Bryan (AAF Silver Medal) for their esteemed records of community service and industry achievement.

The Big Pictures of Fire Station No. 6


When "creative energy" meets "Rough and Ready," the endearing nickname of the early 20th-century crew of Fire Station No. 6, the resultant atmosphere blends past with present, and the spirit of getting the job done continues to resonate.
Today, Axiom enters another historic space where "creative energy" evolves. Within the landmark Fire Station No. 6 at 1702 Washington Ave. (est. 1903), 10-foot-by-12-foot images of 1920s Houston firefighters provide everyday inspiration to employees. Visitors cannot help but to recognize the history presented on the walls as they walk through the building.

Axiom's previous location was the landmark TriBeca Lofts (a.k.a. the Clarke & Courts building, est. 1936) at 1210 West Clay, an art deco structure where Tom Hair cultivated his "creative energy" philosophy since 1998.  Hair purchased FS6 in 2005 and devoted considerable time and resources to achieving its restoration.
The mural-size images of the original firefighting crew have been placed on the walls as a tribute to the "Rough and Ready" bunch. See more of them below. VCI (Visual Communications and Imaging Group) did the installation at the recently renovated historic space.

'Rough and Ready' For Anything





Axiom president Tom Hair gets a grip on the fire pole and the Axiom team settles into its new HQ, the original Fire Station No. 6 at 1702 Washington Ave., Houston, TX 77007. The station, a historic landmark that first opened in 1903, becomes the site of a new atmosphere of creative energy and a beacon of community pride in the Sixth Ward. Seated from left: Philip Ransdell, John Luu, Lisa Lerch, David Lerch, Chris Jones and Carleton Smith. Standing from left: Laura Hughey, David Yarbrough, Mike Wu, John Duplechin, Matt Schott, Laura Paddock, Mandy Ahr, Rodney Flores, Darryl Terrell and Diana Salerno.

17+ Featured Content Slider for Blogger Using jQuery

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.

Featured Content Slider for Blogger Using jQuery



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

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 old layout: Go to Dashboard - Design - Edit HTML - Expand Widget Templates


In new layout: Go to Dashboard - Template - Edit Template 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.



<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 src='http://safir85.ucoz.com/24work-blogspot/featured-post-s/jquery-1.5.3-ui.min.js' type='text/javascript'/>

<script type='text/javascript'>
$(document).ready(function(){
$(&quot;#featured &gt; ul&quot;).tabs({fx:{opacity: &quot;toggle&quot;}}).tabs(&quot;rotate&quot;, 5000, true);
});
</script>



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.


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

Add a Gadget of HTML/JavaScript type
If you're using the new Blogger interface: Go to Dashboard - Layout - Add a Gadget





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 &quot;showing post with label&quot; 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>
<!-- First Content -->
<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>
<!-- Second Content -->
<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 &quot;showing post with label&quot; in Blogger</a></h3>
<p>Description goes here, this is just a test description....<a href='#'>read more</a></p>
</div>
</div>
<!-- Third Content -->
<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>
<!-- Fourth Content -->
<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

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.



<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 language='javascript' src='http://safir85.ucoz.com/24work-blogspot/featured-post-s/jquery-0-1.min.js' type='text/javascript'/>
<script language='javascript' src='http://safir85.ucoz.com/24work-blogspot/featured-post-s/freebloggerhelp-jquery.flow.1.2.auto.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(&quot;#myController&quot;).jFlow({
slides: &quot;#slides&quot;,
controller: &quot;.jFlowControl&quot;, // must be class, use . sign
slideWrapper : &quot;#jFlowSlide&quot;, // must be id, use # sign
selectedWrapper: &quot;jFlowSelected&quot;, // just pure text, no sign
auto: true, //auto change slide, default true
width: &quot;610px&quot;,
height: &quot;235px&quot;,
duration: 100,
prev: &quot;.jFlowPrev&quot;, // must be class, use . sign
next: &quot;.jFlowNext&quot; // must be class, use . sign
});
});
</script>



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 # 1 Ends -->

<-! 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 # 2 Ends -->

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

<!-- Slide # 3 Ends -->

<!-- You can add as many slides as you want above this line -->

</div>

<div id="myController">

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

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

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

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

<!-- Increase these numbers as with the increase in your number of slides above -->

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



<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.2.6.min.js' type='text/javascript'></script>
<script src='http://safir85.ucoz.com/24work-blogspot/featured-post-s/jquery.jcarousel.pack.js' type='text/javascript'></script>
<script src='http://safir85.ucoz.com/24work-blogspot/featured-post-s/jquery-ui-personalized-1.5.2.packed.js' type='text/javascript'></script>

<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
wrap:"both",
scroll:2,
animation:"slow"
});
function mycarousel_initCallback(carousel) {
jQuery('#featured-next-button').bind('click', function() {
carousel.next();
return false;
});

jQuery('#featured-prev-button').bind('click', function() {
carousel.prev();
return false;
});
jQuery('.button-nav span').bind('click', function() {
carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text()));
return false;
});
};
jQuery('#feature-carousel').jcarousel({
wrap:"both",
scroll:1,
auto:10,
initCallback: mycarousel_initCallback,
buttonNextHTML: null,
buttonPrevHTML: null
});

});
</script>

<style type="text/css">
.jcarousel-skin-tango .jcarousel-container {-moz-border-radius: 10px;}

.jcarousel-skin-tango .jcarousel-container-horizontal {width: 941px;margin: 0 auto;padding:0 20px;}

.jcarousel-skin-tango .jcarousel-clip-horizontal {width: 941px;height: 254px;}
.jcarousel-skin-tango .jcarousel-item {width: 307px;height: 254px;}
.jcarousel-skin-tango .jcarousel-item-horizontal {margin-right: 10px;}
.jcarousel-skin-tango .jcarousel-item-placeholder {background: #fff;color: #000;}

.jcarousel-skin-tango .jcarousel-next-horizontal {
background:transparent url(http://3.bp.blogspot.com/_pZaV-NlP_3s/TFAMVbjDoRI/AAAAAAAAAGc/qVMBXOUAnnY/s1600/image-slider-button.png) no-repeat scroll -46px 0;
cursor:pointer;
height:254px;
right:20px;
position:absolute;
top:0;
width:46px;
}

.jcarousel-skin-tango .jcarousel-prev-horizontal {
background:transparent url(http://3.bp.blogspot.com/_pZaV-NlP_3s/TFAMVbjDoRI/AAAAAAAAAGc/qVMBXOUAnnY/s1600/image-slider-button.png) no-repeat scroll 0 0;
cursor:pointer;
height:254px;
left:20px;
position:absolute;
top:0;
width:46px;
}

.jcarousel-container {position: relative;}
.jcarousel-clip {z-index: 2;padding: 0;margin: 0;overflow: hidden;position: relative;}
.jcarousel-list {z-index: 1;overflow: hidden;position: relative;top: 0;left: 0;margin: 0;padding: 0;}
.jcarousel-list li,.jcarousel-item {float: left;list-style: none;width: 75px;height: 75px;}
.jcarousel-next {z-index: 3;display: none;}
.jcarousel-prev {z-index: 3;display: none;}

#news-slider{background-color:#FFFFFF;padding:20px 0;}
#news-slider img{border:none;height:254px;width:307px;}
</style>



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 id='news-slider'>
<ul class='jcarousel-skin-tango' id='mycarousel'>
<li><a href='SLIDE-1-LINK-HERE'><img src='SLIDE-1-IMAGE-ADDRESS-HERE'/></a></li>
<li><a href='SLIDE-2-LINK-HERE'><img src='SLIDE-2-IMAGE-ADDRESS-HERE'/></a></li>
<li><a href='SLIDE-3-LINK-HERE'><img src='SLIDE-3-IMAGE-ADDRESS-HERE'/></a></li>
<li><a href='SLIDE-4-LINK-HERE'><img src='SLIDE-4-IMAGE-ADDRESS-HERE'/></a></li>
<li><a href='SLIDE-5-LINK-HERE'><img src='SLIDE-5-IMAGE-ADDRESS-HERE'/></a></li>
</ul>
</div>


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:

<div id='news-slider'>
<ul class='jcarousel-skin-tango' id='mycarousel'>
<li><a href='#'><img src='http://2.bp.blogspot.com/_pZaV-NlP_3s/TFAMLk05DMI/AAAAAAAAAF0/oH_Qd-mcS_I/s1600/slide1.jpg'/></a></li>
<li><a href='#'><img src='http://1.bp.blogspot.com/_pZaV-NlP_3s/TFAML-hfhII/AAAAAAAAAF8/5AsriuSPkxo/s1600/slide2.jpg'/></a></li>
<li><a href='#'><img src='http://4.bp.blogspot.com/_pZaV-NlP_3s/TFAMMcW4kII/AAAAAAAAAGE/Eg9gpRvlMAw/s1600/slide3.jpg'/></a></li>
<li><a href='#'><img src='http://2.bp.blogspot.com/_pZaV-NlP_3s/TFAMMm7N3xI/AAAAAAAAAGM/Bm4RX6kvhhs/s1600/slide4.jpg'/></a></li>
<li><a href='#'><img src='http://3.bp.blogspot.com/_pZaV-NlP_3s/TFAMNIVEm-I/AAAAAAAAAGU/Hp5RUvKX78U/s1600/slide5.jpg'/></a></li>
</ul>
</div>

You are done.


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






























How To Create JQuery Featured Content Slideshow


How To Create JQuery Featured Content Slideshow


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.



<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.4.2.min.js' type='text/javascript'></script>

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

$(document).ready(function() {

//Execute the slideShow, set 6 seconds for each images
slideShow(3000);

});

function slideShow(speed) {


//append a LI item to the UL list for displaying caption
$('ul.slideshow').append('<li id="slideshow-caption" class="caption"><div class="slideshow-caption-container"><h3></h3><p></p></div></li>');

//Set the opacity of all images to 0
$('ul.slideshow li').css({opacity: 0.0});

//Get the first image and display it (set it to full opacity)
$('ul.slideshow li:first').css({opacity: 1.0});

//Get the caption of the first image from REL attribute and display it
$('#slideshow-caption h3').html($('ul.slideshow a:first').find('img').attr('title'));
$('#slideshow-caption p').html($('ul.slideshow a:first').find('img').attr('alt'));

//Display the caption
$('#slideshow-caption').css({opacity: 0.7, bottom:0});

//Call the gallery function to run the slideshow
var timer = setInterval('gallery()',speed);

//pause the slideshow on mouse over
$('ul.slideshow').hover(
function () {
clearInterval(timer);
},
function () {
timer = setInterval('gallery()',speed);
}
);

}

function gallery() {


//if no IMGs have the show class, grab the first image
var current = ($('ul.slideshow li.show')? $('ul.slideshow li.show') : $('#ul.slideshow li:first'));

//Get next image, if it reached the end of the slideshow, rotate it back to the first image
var next = ((current.next().length) ? ((current.next().attr('id') == 'slideshow-caption')? $('ul.slideshow li:first') :current.next()) : $('ul.slideshow li:first'));

//Get next image caption
var title = next.find('img').attr('title');
var desc = next.find('img').attr('alt');

//Set the fade in effect for the next image, show class has higher z-index
next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000);

//Hide the caption first, and then set and display the caption
$('#slideshow-caption').animate({bottom:-70}, 300, function () {
//Display the content
$('#slideshow-caption h3').html(title);
$('#slideshow-caption p').html(desc);
$('#slideshow-caption').animate({bottom:0}, 500);
});

//Hide the current image
current.animate({opacity: 0.0}, 1000).removeClass('show');

}

//]]>
</script>

<style type="text/css">
ul.slideshow {
list-style:none;
width:600px;
height:240px;
overflow:hidden;
position:relative;
margin:0;
padding:0;
font-family:Arial,Helvetica,Trebuchet MS,Verdana;
;
}
ul.slideshow li {
position:absolute;
left:0;
right:0;
}
ul.slideshow li.show {
z-index:500;
}
ul img {
width:600px;
height:240px;
border:none;
}
#slideshow-caption {
width:600px;
height:70px;
position:absolute;
bottom:0;
left:0;
color:#fff;
background:#000;
z-index:500;
}
#slideshow-caption .slideshow-caption-container {
padding:5px 10px;
z-index:1000;
}
#slideshow-caption h3 {
margin:0;
padding:0;
font-size:16px;
}
#slideshow-caption p {
margin:5px 0 0 0;
padding:0;
}
</style>



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


<ul class="slideshow">

<li><a href="#"><img src="http://3.bp.blogspot.com/_4HKUHirY_2U/TEVd7gbRVeI/AAAAAAAABGc/J-aSBfN0rhw/s1600/1.jpg" title="This is featured post 1 title" alt="Replace This Text With Your Featured Post 1 Description." /></a></li>

<li><a href="#"><img src="http://2.bp.blogspot.com/_4HKUHirY_2U/TEVd7zgT63I/AAAAAAAABGk/9vJ6VYTYGWM/s1600/2.jpg" title="This is featured post 2 title" alt="Replace This Text With Your Featured Post 2 Description." /></a></li>

<li><a href="#"><img src="http://4.bp.blogspot.com/_4HKUHirY_2U/TEVd8JKsDaI/AAAAAAAABGs/vzECCT1mDws/s1600/3.jpg" title="This is featured post 3 title" alt="Replace This Text With Your Featured Post 3 Description." /></a></li>

<li><a href="#"><img src="http://1.bp.blogspot.com/_4HKUHirY_2U/TEVd8VPgRRI/AAAAAAAABG0/O4yhLEWG5UU/s1600/4.jpg" title="This is featured post 4 title" alt="Replace This Text With Your Featured Post 4 Description." /></a></li>

</ul>


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


How To Add jQuery Featured Post Slider to blogger


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.



<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 type='text/javascript'>
//<![CDATA[

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}('(3(C){C.8={3o:{19:3(E,F,H){6 G=C.8[E].1h;21(6 D 3p H){G.1I[D]=G.1I[D]||[];G.1I[D].28([F,H[D]])}},2P:3(D,F,E){6 H=D.1I[F];5(!H){7}21(6 G=0;G<H.k;G++){5(D.b[H[G][0]]){H[G][1].1H(D.c,E)}}}},1l:{},n:3(D){5(C.8.1l[D]){7 C.8.1l[D]}6 E=C(\'<2a 3s="8-3r">\').j(D).n({3q:"3i",2g:"-2A",3g:"-2A",1r:"1w"}).22("2C");C.8.1l[D]=!!((!(/3I|3P/).12(E.n("3z"))||(/^[1-9]/).12(E.n("2T"))||(/^[1-9]/).12(E.n("2E"))||!(/2v/).12(E.n("3w"))||!(/3S|3C\\(0, 0, 0, 0\\)/).12(E.n("3D"))));3E{C("2C").2w(0).3B(E.2w(0))}3x(F){}7 C.8.1l[D]},3y:3(D){C(D).v("1p","2I").n("2q","2v")},3H:3(D){C(D).v("1p","3O").n("2q","")},3Q:3(G,E){6 D=/2g/.12(E||"2g")?"3N":"3M",F=e;5(G[D]>0){7 t}G[D]=1;F=G[D]>0?t:e;G[D]=0;7 F}};6 B=C.2e.W;C.2e.W=3(){C("*",2).19(2).z("W");7 B.1H(2,2M)};3 A(E,F,G){6 D=C[E][F].35||[];D=(1F D=="1E"?D.2h(/,?\\s+/):D);7(C.1j(G,D)!=-1)}C.1i=3(E,D){6 F=E.2h(".")[0];E=E.2h(".")[1];C.2e[E]=3(J){6 H=(1F J=="1E"),I=2D.1h.3J.2P(2M,1);5(H&&A(F,E,J)){6 G=C.i(2[0],E);7(G?G[J].1H(G,I):1n)}7 2.14(3(){6 K=C.i(2,E);5(H&&K&&C.3v(K[J])){K[J].1H(K,I)}o{5(!H){C.i(2,E,3e C[F][E](2,J))}}})};C[F][E]=3(I,H){6 G=2;2.15=E;2.2H=F+"-"+E;2.b=C.1A({},C.1i.1k,C[F][E].1k,H);2.c=C(I).u("1e."+E,3(L,J,K){7 G.1e(J,K)}).u("2j."+E,3(K,J){7 G.2j(J)}).u("W",3(){7 G.1b()});2.23()};C[F][E].1h=C.1A({},C.1i.1h,D)};C.1i.1h={23:3(){},1b:3(){2.c.1q(2.15)},2j:3(D){7 2.b[D]},1e:3(D,E){2.b[D]=E;5(D=="f"){2.c[E?"j":"r"](2.2H+"-f")}},1X:3(){2.1e("f",e)},1P:3(){2.1e("f",t)}};C.1i.1k={f:e};C.8.2J={3h:3(){6 D=2;2.c.u("3d."+2.15,3(E){7 D.2G(E)});5(C.x.13){2.2K=2.c.v("1p");2.c.v("1p","2I")}2.3c=e},38:3(){2.c.16("."+2.15);(C.x.13&&2.c.v("1p",2.2K))},2G:3(F){(2.V&&2.1o(F));2.1C=F;6 E=2,G=(F.39==1),D=(1F 2.b.25=="1E"?C(F.2f).2x().19(F.2f).y(2.b.25).k:e);5(!G||D||!2.2S(F)){7 t}2.1D=!2.b.26;5(!2.1D){2.3a=1x(3(){E.1D=t},2.b.26)}5(2.2m(F)&&2.1T(F)){2.V=(2.1U(F)!==e);5(!2.V){F.3b();7 t}}2.2n=3(H){7 E.2r(H)};2.2l=3(H){7 E.1o(H)};C(2N).u("2O."+2.15,2.2n).u("2t."+2.15,2.2l);7 e},2r:3(D){5(C.x.13&&!D.3j){7 2.1o(D)}5(2.V){2.1V(D);7 e}5(2.2m(D)&&2.1T(D)){2.V=(2.1U(2.1C,D)!==e);(2.V?2.1V(D):2.1o(D))}7!2.V},1o:3(D){C(2N).16("2O."+2.15,2.2n).16("2t."+2.15,2.2l);5(2.V){2.V=e;2.2u(D)}7 e},2m:3(D){7(29.3m(29.2z(2.1C.2L-D.2L),29.2z(2.1C.2s-D.2s))>=2.b.2F)},1T:3(D){7 2.1D},1U:3(D){},1V:3(D){},2u:3(D){},2S:3(D){7 t}};C.8.2J.1k={25:U,2F:1,26:0}})(27);(3(A){A.1i("8.4",{23:3(){2.b.Z+=".4";2.1m(t)},1e:3(B,C){5((/^d/).12(B)){2.1v(C)}o{2.b[B]=C;2.1m()}},k:3(){7 2.$4.k},1Q:3(B){7 B.2R&&B.2R.1g(/\\s/g,"2Q").1g(/[^A-4o-4x-9\\-2Q:\\.]/g,"")||2.b.2X+A.i(B)},8:3(C,B){7{b:2.b,4u:C,30:B,11:2.$4.11(C)}},1m:3(O){2.$l=A("1O:4p(a[p])",2.c);2.$4=2.$l.1G(3(){7 A("a",2)[0]});2.$h=A([]);6 P=2,D=2.b;2.$4.14(3(R,Q){5(Q.X&&Q.X.1g("#","")){P.$h=P.$h.19(Q.X)}o{5(A(Q).v("p")!="#"){A.i(Q,"p.4",Q.p);A.i(Q,"q.4",Q.p);6 T=P.1Q(Q);Q.p="#"+T;6 S=A("#"+T);5(!S.k){S=A(D.2d).v("1s",T).j(D.1u).4l(P.$h[R-1]||P.c);S.i("1b.4",t)}P.$h=P.$h.19(S)}o{D.f.28(R+1)}}});5(O){2.c.j(D.2b);2.$h.14(3(){6 Q=A(2);Q.j(D.1u)});5(D.d===1n){5(20.X){2.$4.14(3(S,Q){5(Q.X==20.X){D.d=S;5(A.x.13||A.x.43){6 R=A(20.X),T=R.v("1s");R.v("1s","");1x(3(){R.v("1s",T)},44)}4m(0,0);7 e}})}o{5(D.1c){6 J=46(A.1c("8-4"+A.i(P.c)),10);5(J&&P.$4[J]){D.d=J}}o{5(P.$l.y("."+D.m).k){D.d=P.$l.11(P.$l.y("."+D.m)[0])}}}}D.d=D.d===U||D.d!==1n?D.d:0;D.f=A.41(D.f.40(A.1G(2.$l.y("."+D.1a),3(R,Q){7 P.$l.11(R)}))).31();5(A.1j(D.d,D.f)!=-1){D.f.3V(A.1j(D.d,D.f),1)}2.$h.j(D.18);2.$l.r(D.m);5(D.d!==U){2.$h.w(D.d).1S().r(D.18);2.$l.w(D.d).j(D.m);6 K=3(){A(P.c).z("1K",[P.Y("1K"),P.8(P.$4[D.d],P.$h[D.d])],D.1S)};5(A.i(2.$4[D.d],"q.4")){2.q(D.d,K)}o{K()}}A(3U).u("3W",3(){P.$4.16(".4");P.$l=P.$4=P.$h=U})}21(6 G=0,N;N=2.$l[G];G++){A(N)[A.1j(G,D.f)!=-1&&!A(N).1f(D.m)?"j":"r"](D.1a)}5(D.17===e){2.$4.1q("17.4")}6 C,I,B={"3X-2E":0,1R:1},E="3Z";5(D.1d&&D.1d.3Y==2D){C=D.1d[0]||B,I=D.1d[1]||B}o{C=I=D.1d||B}6 H={1r:"",47:"",2T:""};5(!A.x.13){H.1W=""}3 M(R,Q,S){Q.2p(C,C.1R||E,3(){Q.j(D.18).n(H);5(A.x.13&&C.1W){Q[0].2B.y=""}5(S){L(R,S,Q)}})}3 L(R,S,Q){5(I===B){S.n("1r","1w")}S.2p(I,I.1R||E,3(){S.r(D.18).n(H);5(A.x.13&&I.1W){S[0].2B.y=""}A(P.c).z("1K",[P.Y("1K"),P.8(R,S[0])],D.1S)})}3 F(R,T,Q,S){T.j(D.m).4k().r(D.m);M(R,Q,S)}2.$4.16(".4").u(D.Z,3(){6 T=A(2).2x("1O:w(0)"),Q=P.$h.y(":4e"),S=A(2.X);5((T.1f(D.m)&&!D.1z)||T.1f(D.1a)||A(2).1f(D.1t)||A(P.c).z("2y",[P.Y("2y"),P.8(2,S[0])],D.1v)===e){2.1M();7 e}P.b.d=P.$4.11(2);5(D.1z){5(T.1f(D.m)){P.b.d=U;T.r(D.m);P.$h.1Y();M(2,Q);2.1M();7 e}o{5(!Q.k){P.$h.1Y();6 R=2;P.q(P.$4.11(2),3(){T.j(D.m).j(D.2c);L(R,S)});2.1M();7 e}}}5(D.1c){A.1c("8-4"+A.i(P.c),P.b.d,D.1c)}P.$h.1Y();5(S.k){6 R=2;P.q(P.$4.11(2),Q.k?3(){F(R,T,Q,S)}:3(){T.j(D.m);L(R,S)})}o{4b"27 4c 4d: 3n 49 4a."}5(A.x.13){2.1M()}7 e});5(!(/^24/).12(D.Z)){2.$4.u("24.4",3(){7 e})}},19:3(E,D,C){5(C==1n){C=2.$4.k}6 G=2.b;6 I=A(G.37.1g(/#\\{p\\}/g,E).1g(/#\\{1L\\}/g,D));I.i("1b.4",t);6 H=E.4i("#")==0?E.1g("#",""):2.1Q(A("a:4g-4h",I)[0]);6 F=A("#"+H);5(!F.k){F=A(G.2d).v("1s",H).j(G.18).i("1b.4",t)}F.j(G.1u);5(C>=2.$l.k){I.22(2.c);F.22(2.c[0].48)}o{I.36(2.$l[C]);F.36(2.$h[C])}G.f=A.1G(G.f,3(K,J){7 K>=C?++K:K});2.1m();5(2.$4.k==1){I.j(G.m);F.r(G.18);6 B=A.i(2.$4[0],"q.4");5(B){2.q(C,B)}}2.c.z("2Y",[2.Y("2Y"),2.8(2.$4[C],2.$h[C])],G.19)},W:3(B){6 D=2.b,E=2.$l.w(B).W(),C=2.$h.w(B).W();5(E.1f(D.m)&&2.$4.k>1){2.1v(B+(B+1<2.$4.k?1:-1))}D.f=A.1G(A.34(D.f,3(G,F){7 G!=B}),3(G,F){7 G>=B?--G:G});2.1m();2.c.z("2V",[2.Y("2V"),2.8(E.2k("a")[0],C[0])],D.W)},1X:3(B){6 C=2.b;5(A.1j(B,C.f)==-1){7}6 D=2.$l.w(B).r(C.1a);5(A.x.4n){D.n("1r","4t-1w");1x(3(){D.n("1r","1w")},0)}C.f=A.34(C.f,3(F,E){7 F!=B});2.c.z("33",[2.Y("33"),2.8(2.$4[B],2.$h[B])],C.1X)},1P:3(C){6 B=2,D=2.b;5(C!=D.d){2.$l.w(C).j(D.1a);D.f.28(C);D.f.31();2.c.z("32",[2.Y("32"),2.8(2.$4[C],2.$h[C])],D.1P)}},1v:3(B){5(1F B=="1E"){B=2.$4.11(2.$4.y("[p$="+B+"]")[0])}2.$4.w(B).4q(2.b.Z)},q:3(G,K){6 L=2,D=2.b,E=2.$4.w(G),J=E[0],H=K==1n||K===e,B=E.i("q.4");K=K||3(){};5(!B||!H&&A.i(J,"17.4")){K();7}6 M=3(N){6 O=A(N),P=O.2k("*:4s");7 P.k&&P.4v(":45(3R)")&&P||O};6 C=3(){L.$4.y("."+D.1t).r(D.1t).14(3(){5(D.1N){M(2).3l().1B(M(2).i("1L.4"))}});L.1y=U};5(D.1N){6 I=M(J).1B();M(J).3k("<2o></2o>").2k("2o").i("1L.4",I).1B(D.1N)}6 F=A.1A({},D.1J,{2U:B,2i:3(O,N){A(J.X).1B(O);C();5(D.17){A.i(J,"17.4",t)}A(L.c).z("2Z",[L.Y("2Z"),L.8(L.$4[G],L.$h[G])],D.q);D.1J.2i&&D.1J.2i(O,N);K()}});5(2.1y){2.1y.3f();C()}E.j(D.1t);1x(3(){L.1y=A.3u(F)},0)},2U:3(C,B){2.$4.w(C).1q("17.4").i("q.4",B)},1b:3(){6 B=2.b;2.c.16(".4").r(B.2b).1q("4");2.$4.14(3(){6 C=A.i(2,"p.4");5(C){2.p=C}6 D=A(2).16(".4");A.14(["p","q","17"],3(E,F){D.1q(F+".4")})});2.$l.19(2.$h).14(3(){5(A.i(2,"1b.4")){A(2).W()}o{A(2).r([B.m,B.2c,B.1a,B.1u,B.18].3G(" "))}})},Y:3(B){7 A.Z.3L({3t:B,2f:2.c[0]})}});A.8.4.1k={1z:e,Z:"24",f:[],1c:U,1N:"3F&#3A;",17:e,2X:"8-4-",1J:{},1d:U,37:\'<1O><a p="#{p}"><2W>#{1L}</2W></a></1O>\',2d:"<2a></2a>",2b:"8-4-3K",m:"8-4-d",2c:"8-4-1z",1a:"8-4-f",1u:"8-4-30",18:"8-4-3T",1t:"8-4-4w"};A.8.4.35="k";A.1A(A.8.4.1h,{1Z:U,4r:3(C,F){F=F||e;6 B=2,E=2.b.d;3 G(){B.1Z=42(3(){E=++E<B.$4.k?E:0;B.1v(E)},C)}3 D(H){5(!H||H.4j){4f(B.1Z)}}5(C){G();5(!F){2.$4.u(2.b.Z,D)}o{2.$4.u(2.b.Z,3(){D();E=B.b.d;G()})}}o{D();2.$4.16(2.b.Z,D)}}})})(27);',62,282,'||this|function|tabs|if|var|return|ui|||options|element|selected|false|disabled||panels|data|addClass|length|lis|selectedClass|css|else|href|load|removeClass||true|bind|attr|eq|browser|filter|triggerHandler|||||||||||||||||||||null|_mouseStarted|remove|hash|fakeEvent|event||index|test|msie|each|widgetName|unbind|cache|hideClass|add|disabledClass|destroy|cookie|fx|setData|hasClass|replace|prototype|widget|inArray|defaults|cssCache|tabify|undefined|mouseUp|unselectable|removeData|display|id|loadingClass|panelClass|select|block|setTimeout|xhr|unselect|extend|html|_mouseDownEvent|_mouseDelayMet|string|typeof|map|apply|plugins|ajaxOptions|tabsshow|label|blur|spinner|li|disable|tabId|duration|show|mouseDelayMet|mouseStart|mouseDrag|opacity|enable|stop|rotation|location|for|appendTo|init|click|cancel|delay|jQuery|push|Math|div|navClass|unselectClass|panelTemplate|fn|target|top|split|success|getData|find|_mouseUpDelegate|mouseDistanceMet|_mouseMoveDelegate|em|animate|MozUserSelect|mouseMove|pageY|mouseup|mouseStop|none|get|parents|tabsselect|abs|5000px|style|body|Array|width|distance|mouseDown|widgetBaseClass|on|mouse|_mouseUnselectable|pageX|arguments|document|mousemove|call|_|title|mouseCapture|height|url|tabsremove|span|idPrefix|tabsadd|tabsload|panel|sort|tabsdisable|tabsenable|grep|getter|insertBefore|tabTemplate|mouseDestroy|which|_mouseDelayTimer|preventDefault|started|mousedown|new|abort|left|mouseInit|absolute|button|wrapInner|parent|max|Mismatching|plugin|in|position|gen|class|type|ajax|isFunction|backgroundImage|catch|disableSelection|cursor|8230|removeChild|rgba|backgroundColor|try|Loading|join|enableSelection|auto|slice|nav|fix|scrollLeft|scrollTop|off|default|hasScroll|img|transparent|hide|window|splice|unload|min|constructor|normal|concat|unique|setInterval|opera|500|not|parseInt|overflow|parentNode|fragment|identifier|throw|UI|Tabs|visible|clearInterval|first|child|indexOf|clientX|siblings|insertAfter|scrollTo|safari|Za|has|trigger|rotate|last|inline|tab|is|loading|z0'.split('|'),0,{}))

//]]>
</script>

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

$(document).ready(function() {
$('#tabzine> ul').tabs({ fx: { height: 'toggle', opacity: 'toggle' } });

});

//]]>
</script>

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

//Featured Content Glider: By http://www.dynamicdrive.com
//Created: Dec 22nd, 07'
//Updated (Jan 29th, 08): Added four possible slide directions: "updown", "downup", "leftright", or "rightleft"
//Updated (Feb 1st, 08): Changed glide behavior to reverse direction when previous button is clicked
//Updated (Feb 12th, 08): Added ability to retrieve gliding contents from an external file using Ajax ("remotecontent" variable added to configuration)

var featuredcontentglider={
csszindex: 100,
ajaxloadingmsg: '<b>Fetching Content. Please wait...</b>',
glide:function(config, showpage, isprev){
var selected=parseInt(showpage)
if (selected>=config.$contentdivs.length){ //if no content exists at this index position
alert("No content exists at page "+(selected+1)+"! Loading 1st page instead.")
selected=0
}
var $target=config.$contentdivs.eq(selected)
//Test for toggler not being initialized yet, or user clicks on the currently selected page):
if (config.$togglerdiv.attr('lastselected')==null || parseInt(config.$togglerdiv.attr('lastselected'))!=selected){
var $selectedlink=config.$toc.eq(selected)
config.$next.attr('loadpage', (selected<config.$contentdivs.length-1)? selected+1+'pg' : 0+'pg')
config.$prev.attr('loadpage', (selected==0)? config.$contentdivs.length-1+'pg' : selected-1+'pg')
var startpoint=(isprev=="previous")? -config.startpoint : config.startpoint
$target.css(config.leftortop, startpoint).css("zIndex", this.csszindex++) //hide content so it's just out of view before animating it
var endpoint=(config.leftortop=="left")? {left:0} : {top:0} //animate it into view
$target.animate(endpoint, config.speed)
config.$toc.removeClass('selected')
$selectedlink.addClass('selected')
config.$togglerdiv.attr('lastselected', selected+'pg')
}
},

getremotecontent:function(config){
config.$glider.html(this.ajaxloadingmsg)
$.ajax({
url: config.remotecontent,
error:function(ajaxrequest){
config.$glider.html('Error fetching content.<br />Server Response: '+ajaxrequest.responseText)
},
success:function(content){
config.$glider.html(content)
featuredcontentglider.setuptoggler(config)
}
})
},

aligncontents:function(config){
config.$contentdivs=$("#"+config.gliderid+" ."+config.contentclass)
config.$contentdivs.css(config.leftortop, config.startpoint).css({height: config.$glider.height(), visibility: 'visible'}) //position content divs so they're out of view:
},

setuptoggler:function(config){
this.aligncontents(config)
config.$togglerdiv.hide()
config.$toc.each(function(index){
$(this).attr('pagenumber', index+'pg')
if (index > (config.$contentdivs.length-1))
$(this).css({display: 'none'}) //hide redundant "toc" links
})
var $nextandprev=$("#"+config.togglerid+" .next, #"+config.togglerid+" .prev")
$nextandprev.click(function(event){ //Assign click behavior to 'next' and 'prev' links
featuredcontentglider.glide(config, this.getAttribute('loadpage'), this.getAttribute('buttontype'))
event.preventDefault() //cancel default link action
})
config.$toc.click(function(event){ //Assign click behavior to 'toc' links
featuredcontentglider.glide(config, this.getAttribute('pagenumber'))
event.preventDefault()
})
config.$togglerdiv.fadeIn(1000, function(){
featuredcontentglider.glide(config, config.selected)
if (config.autorotate==true){ //auto rotate contents?
config.stepcount=0 //set steps taken
config.totalsteps=config.$contentdivs.length*config.autorotateconfig[1] //Total steps limit: num of contents x num of user specified cycles)
featuredcontentglider.autorotate(config)
}
})
config.$togglerdiv.click(function(){
featuredcontentglider.cancelautorotate(config.togglerid)
})
},

autorotate:function(config){
var rotatespeed=config.speed+config.autorotateconfig[0]
window[config.togglerid+"timer"]=setInterval(function(){
if (config.totalsteps>0 && config.stepcount>=config.totalsteps){
clearInterval(window[config.togglerid+"timer"])
}
else{
config.$next.click()
config.stepcount++
}
}, rotatespeed)
},

cancelautorotate:function(togglerid){
if (window[togglerid+"timer"])
clearInterval(window[togglerid+"timer"])
},

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

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

init:function(config){
$(document).ready(function(){
config.$glider=$("#"+config.gliderid)
config.$togglerdiv=$("#"+config.togglerid)
config.$toc=config.$togglerdiv.children('.toc')
config.$next=config.$togglerdiv.children('.next')
config.$prev=config.$togglerdiv.children('.prev')
config.$prev.attr('buttontype', 'previous')
var selected=(config.persiststate)? featuredcontentglider.getCookie(config.gliderid) : config.selected
config.selected=(isNaN(parseInt(selected))) ? config.selected : selected //test for cookie value containing null (1st page load) or "undefined" string
config.leftortop=(/up/i.test(config.direction))? "top" : "left" //set which CSS property to manipulate based on "direction"
config.heightorwidth=(/up/i.test(config.direction))? config.$glider.height() : config.$glider.width() //Get glider height or width based on "direction"
config.startpoint=(/^(left|up)/i.test(config.direction))? -config.heightorwidth : config.heightorwidth //set initial position of contents based on "direction"
if (typeof config.remotecontent!="undefined" && config.remotecontent.length>0)
featuredcontentglider.getremotecontent(config)
else
featuredcontentglider.setuptoggler(config)
$(window).bind('unload', function(){ //clean up and persist
config.$togglerdiv.unbind('click')
config.$toc.unbind('click')
config.$next.unbind('click')
config.$prev.unbind('click')
if (config.persiststate)
featuredcontentglider.setCookie(config.gliderid, config.$togglerdiv.attr('lastselected'))
config=null

})
})
}
}

//]]>
</script>

<script type='text/javascript'>
if (window.jstiming) window.jstiming.load.tick(&#39;headEnd&#39;);
</script>

<style type='text/css'>
#glidercontent{
margin:5px 0 0px 12px;
}
.glidecontentwrapper{
position: relative;
width: 629px;
height:300px;
overflow: hidden;
margin:0px 0px 0px 0px;
padding:0px 0px;
background:#fff;
}
.glidecontent{
position:absolute;
padding:0px 5px 0px 5px;
width:610px;
color:#555;
margin:0px 5px;
height:100%;
overflow:hidden;
float:left;
background:#fff;
}
.glidim{
float:left;
}
.glidim img{
margin:0px 5px 5px 0px;
padding:7px 7px;
}
.glidecontent h2{
margin:0px 0px 0px 0px;
padding:5px 0px;
font-size:24px;
line-height:24px;
font-weight:bold;
overflow:hidden;
font-family: Georgia,Century gothic,Arial,Tahoma,sans-serif;
}
.glidecontent h2 a:link, .glidecontent h2 a:visited{
color:#303843;
}
.glidecontent p{
margin:0px 0px 0px 0px;
padding:5px 0px;
font-size:14px;
line-height:22px;
overflow:hidden;
font-family: Georgia,Century gothic,Arial,Tahoma,sans-serif;
color:#696d70;
}
.glidebot{
width:630px;
height:18px;
background:url(http://4.bp.blogspot.com/_4HKUHirY_2U/SwZ5Di6xb1I/AAAAAAAAAR0/lRnBNtEW-No/gldbot.jpg) center no-repeat;
margin:0px 0px 5px 12px ;
padding:0px 0px;
float:left;
}
.gnav{ /*style for DIV used to contain toggler links. */
width: 100px;
height:50px;
z-index:150;
float:right;
padding-right:25px;
}
.glidecontenttoggler{ /*style for DIV used to contain toggler links. */
height:35px;
z-index:150;
width: 650px;
background: url(http://4.bp.blogspot.com/_4HKUHirY_2U/SwZ5G33whxI/AAAAAAAAAR8/oXOYj1GWpNo/gldtop.png) no-repeat;
}
.glidecontenttoggler a{ /*style for every navigational link within toggler */
display: -moz-inline-box;
display: inline-block;
color: #2e6ab1;
font-weight: bold;
text-decoration: none;
}
.glidecontenttoggler a.selected{ /*style for selected page&#39;s toggler link. &quot;.selected&quot; class auto generated! */
background: #E4EFFA;
color: black;
}
.glidecontenttoggler a:hover{
background: #E4EFFA;
color: black;
}
.glidecontenttoggler a.toc{ /*style for individual toggler links (page 1, page 2, etc). &quot;.toc&quot; class auto generated! */
}
.glidecontenttoggler a.prev{ /*style for &quot;prev&quot; and &quot;next&quot; toggler links. &quot;.prev&quot; and &quot;.next&quot; classes auto generated! */
top:9px;
right:25px;
position:absolute;
display:block;
background:url(http://3.bp.blogspot.com/_4HKUHirY_2U/SwZ5JBUy2OI/AAAAAAAAASE/E91POd9FRuY/left.jpg) left no-repeat;
width:50px;
height:17px;
}
.glidecontenttoggler a.next {
float:right;
display:block;
background:url(http://1.bp.blogspot.com/_4HKUHirY_2U/SwZ5M_9BGlI/AAAAAAAAASM/WnDYiGg2XFw/right.jpg) right no-repeat;
width:20px;
height:17px;
position:absolute;
top:9px;
right:15px;
}
</style>



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>

<!-- Glider Content -->
<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
&nbsp;<a href="http://bdlab.blogspot.com">Read More &rarr;</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:
&nbsp;<a href="http://bdlab.blogspot.com">Read More &rarr;</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.
&nbsp;<a href="http://bdlab.blogspot.com">Read More &rarr;</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 &quot;do follow&quot;,follow the easy steps below.
1.Log in to your dashboard----> layout- ---> Edit HTML
2.Click on &quot;Expand Widget Templates&quot;
3.Scroll down to where you see this:-
&lt;a expr:href='data:comment.authorUrl' rel='nofollow'&gt;
4.Replace it with below code.
&lt;a expr:href='data:comment.authorUrl'&gt;
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...&nbsp;<a href="http://bdlab.blogspot.com">(more...)</a></p></div>


</div>
</div></div>
</div>
<!-- /Glider Content -->
<div class="glidebot"></div>
<div class="clear"></div></div>



And now click Save



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




























How To Add jQuery Images Slider to Blogger


How To Add jQuery Images Slider to Blogger


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.


<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 type='text/javascript'>
//<![CDATA[

//** Created: March 19th, 08'
//** Aug 16th, 08'- Updated to v 1.4:
//1) Adds ability to set speed/duration of panel animation (in milliseconds)
//2) Adds persistence support, so the last viewed panel is recalled when viewer returns within same browser session
//3) Adds ability to specify whether panels should stop at the very last and first panel, or wrap around and start all over again
//4) Adds option to specify two navigational image links positioned to the left and right of the Carousel Viewer to move the panels back and forth

//** Aug 27th, 08'- Nav buttons (if enabled) also repositions themselves now if window is resized

var stepcarousel={
ajaxloadingmsg: '<div style="margin: 1em; font-weight: bold"><img src="ajaxloadr.gif" style="vertical-align: middle" /> Fetching Content. Please wait...</div>', //customize HTML to show while fetching Ajax content
defaultbuttonsfade: 0.4, //Fade degree for disabled nav buttons (0=completely transparent, 1=completely opaque)
configholder: {},

getCSSValue:function(val){ //Returns either 0 (if val contains 'auto') or val as an integer
return (val=="auto")? 0 : parseInt(val)
},

getremotepanels:function($, config){ //function to fetch external page containing the panel DIVs
config.$belt.html(this.ajaxloadingmsg)
$.ajax({
url: config.contenttype[1], //path to external content
async: true,
error:function(ajaxrequest){
config.$belt.html('Error fetching content.<br />Server Response: '+ajaxrequest.responseText)
},
success:function(content){
config.$belt.html(content)
config.$panels=config.$gallery.find('.'+config.panelclass)
stepcarousel.alignpanels($, config)
}
})
},

getoffset:function(what, offsettype){
return (what.offsetParent)? what[offsettype]+this.getoffset(what.offsetParent, offsettype) : what[offsettype]
},

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

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

fadebuttons:function(config, currentpanel){
config.$leftnavbutton.fadeTo('fast', currentpanel==0? this.defaultbuttonsfade : 1)
config.$rightnavbutton.fadeTo('fast', currentpanel==config.lastvisiblepanel? this.defaultbuttonsfade : 1)
},

addnavbuttons:function(config, currentpanel){
config.$leftnavbutton=$('<img src="'+config.defaultbuttons.leftnav[0]+'">').css({zIndex:50, position:'absolute', left:config.offsets.left+config.defaultbuttons.leftnav[1]+'px', top:config.offsets.top+config.defaultbuttons.leftnav[2]+'px', cursor:'hand', cursor:'pointer'}).attr({title:'Back '+config.defaultbuttons.moveby+' panels'}).appendTo('body')
config.$rightnavbutton=$('<img src="'+config.defaultbuttons.rightnav[0]+'">').css({zIndex:50, position:'absolute', left:config.offsets.left+config.$gallery.get(0).offsetWidth+config.defaultbuttons.rightnav[1]+'px', top:config.offsets.top+config.defaultbuttons.rightnav[2]+'px', cursor:'hand', cursor:'pointer'}).attr({title:'Forward '+config.defaultbuttons.moveby+' panels'}).appendTo('body')
config.$leftnavbutton.bind('click', function(){ //assign nav button event handlers
stepcarousel.stepBy(config.galleryid, -config.defaultbuttons.moveby)
})
config.$rightnavbutton.bind('click', function(){ //assign nav button event handlers
stepcarousel.stepBy(config.galleryid, config.defaultbuttons.moveby)
})
if (config.panelbehavior.wraparound==false){ //if carousel viewer should stop at first or last panel (instead of wrap back or forth)
this.fadebuttons(config, currentpanel)
}
},

alignpanels:function($, config){
var paneloffset=0
config.paneloffsets=[paneloffset] //array to store upper left offset of each panel (1st element=0)
config.panelwidths=[] //array to store widths of each panel
config.$panels.each(function(index){ //loop through panels
var $currentpanel=$(this)
$currentpanel.css({float: 'none', position: 'absolute', left: paneloffset+'px'}) //position panel
$currentpanel.bind('click', function(e){return config.onpanelclick(e.target)}) //bind onpanelclick() to onclick event
paneloffset+=stepcarousel.getCSSValue($currentpanel.css('marginRight')) + parseInt($currentpanel.get(0).offsetWidth || $currentpanel.css('width')) //calculate next panel offset
config.paneloffsets.push(paneloffset) //remember this offset
config.panelwidths.push(paneloffset-config.paneloffsets[config.paneloffsets.length-2]) //remember panel width
})
config.paneloffsets.pop() //delete last offset (redundant)
var addpanelwidths=0
var lastpanelindex=config.$panels.length-1
config.lastvisiblepanel=lastpanelindex
for (var i=config.$panels.length-1; i>=0; i--){
addpanelwidths+=(i==lastpanelindex? config.panelwidths[lastpanelindex] : config.paneloffsets[i+1]-config.paneloffsets[i])
if (config.gallerywidth>addpanelwidths){
config.lastvisiblepanel=i //calculate index of panel that when in 1st position reveals the very last panel all at once based on gallery width
}
}
config.$belt.css({width: paneloffset+'px'}) //Set Belt DIV to total panels' widths
config.currentpanel=(config.panelbehavior.persist)? parseInt(this.getCookie(window[config.galleryid+"persist"])) : 0 //determine 1st panel to show by default
config.currentpanel=(typeof config.currentpanel=="number" && config.currentpanel<config.$panels.length)? config.currentpanel : 0
if (config.currentpanel!=0){
var endpoint=config.paneloffsets[config.currentpanel]+(config.currentpanel==0? 0 : config.beltoffset)
config.$belt.css({left: -endpoint+'px'})
}
if (config.defaultbuttons.enable==true){ //if enable default back/forth nav buttons
this.addnavbuttons(config, config.currentpanel)
$(window).bind("load, resize", function(){ //refresh position of nav buttons when page loads/resizes, in case offsets weren't available document.oncontentload
config.offsets={left:stepcarousel.getoffset(config.$gallery.get(0), "offsetLeft"), top:stepcarousel.getoffset(config.$gallery.get(0), "offsetTop")}
config.$leftnavbutton.css({left:config.offsets.left+config.defaultbuttons.leftnav[1]+'px', top:config.offsets.top+config.defaultbuttons.leftnav[2]+'px'})
config.$rightnavbutton.css({left:config.offsets.left+config.$gallery.get(0).offsetWidth+config.defaultbuttons.rightnav[1]+'px', top:config.offsets.top+config.defaultbuttons.rightnav[2]+'px'})
})
}
this.statusreport(config.galleryid)
config.oninit()
config.onslideaction(this)
},

stepTo:function(galleryid, pindex){ /*User entered pindex starts at 1 for intuitiveness. Internally pindex still starts at 0 */
var config=stepcarousel.configholder[galleryid]
if (typeof config=="undefined"){
alert("There's an error with your set up of Carousel Viewer \""+galleryid+ "\"!")
return
}
var pindex=Math.min(pindex-1, config.paneloffsets.length-1)
var endpoint=config.paneloffsets[pindex]+(pindex==0? 0 : config.beltoffset)
if (config.panelbehavior.wraparound==false && config.defaultbuttons.enable==true){ //if carousel viewer should stop at first or last panel (instead of wrap back or forth)
this.fadebuttons(config, pindex)
}
config.$belt.animate({left: -endpoint+'px'}, config.panelbehavior.speed, function(){config.onslideaction(this)})
config.currentpanel=pindex
this.statusreport(galleryid)
},

stepBy:function(galleryid, steps){
var config=stepcarousel.configholder[galleryid]
if (typeof config=="undefined"){
alert("There's an error with your set up of Carousel Viewer \""+galleryid+ "\"!")
return
}
var direction=(steps>0)? 'forward' : 'back' //If "steps" is negative, that means backwards
var pindex=config.currentpanel+steps //index of panel to stop at
if (config.panelbehavior.wraparound==false){ //if carousel viewer should stop at first or last panel (instead of wrap back or forth)
pindex=(direction=="back" && pindex<=0)? 0 : (direction=="forward")? Math.min(pindex, config.lastvisiblepanel) : pindex
if (config.defaultbuttons.enable==true){ //if default nav buttons are enabled, fade them in and out depending on if at start or end of carousel
stepcarousel.fadebuttons(config, pindex)
}
}
else{ //else, for normal stepBy behavior
pindex=(pindex>config.paneloffsets.length-1 || pindex<0 && pindex-steps>0)? 0 : (pindex<0)? config.paneloffsets.length+steps : pindex //take into account end or starting panel and step direction
}
var endpoint=config.paneloffsets[pindex]+(pindex==0? 0 : config.beltoffset) //left distance for Belt DIV to travel to
if (pindex==0 && direction=='forward' || config.currentpanel==0 && direction=='back' && config.panelbehavior.wraparound==true){ //decide whether to apply "push pull" effect
config.$belt.animate({left: -config.paneloffsets[config.currentpanel]-(direction=='forward'? 100 : -30)+'px'}, 'normal', function(){
config.$belt.animate({left: -endpoint+'px'}, config.panelbehavior.speed, function(){config.onslideaction(this)})
})
}
else
config.$belt.animate({left: -endpoint+'px'}, config.panelbehavior.speed, function(){config.onslideaction(this)})
config.currentpanel=pindex
this.statusreport(galleryid)
},

statusreport:function(galleryid){
var config=stepcarousel.configholder[galleryid]
var startpoint=config.currentpanel //index of first visible panel
var visiblewidth=0
for (var endpoint=startpoint; endpoint<config.paneloffsets.length; endpoint++){ //index (endpoint) of last visible panel
visiblewidth+=config.panelwidths[endpoint]
if (visiblewidth>config.gallerywidth){
break
}
}
startpoint+=1 //format startpoint for user friendiness
endpoint=(endpoint+1==startpoint)? startpoint : endpoint //If only one image visible on the screen and partially hidden, set endpoint to startpoint
var valuearray=[startpoint, endpoint, config.panelwidths.length]
for (var i=0; i<config.statusvars.length; i++){
window[config.statusvars[i]]=valuearray[i] //Define variable (with user specified name) and set to one of the status values
config.$statusobjs[i].text(valuearray[i]+" ") //Populate element on page with ID="user specified name" with one of the status values
}
},

setup:function(config){
//Disable Step Gallery scrollbars ASAP dynamically (enabled for sake of users with JS disabled)
document.write('<style type="text/css">\n#'+config.galleryid+'{overflow: hidden;}\n</style>')
jQuery(document).ready(function($){
config.$gallery=$('#'+config.galleryid)
config.gallerywidth=config.$gallery.width()
config.offsets={left:stepcarousel.getoffset(config.$gallery.get(0), "offsetLeft"), top:stepcarousel.getoffset(config.$gallery.get(0), "offsetTop")}
config.$belt=config.$gallery.find('.'+config.beltclass) //Find Belt DIV that contains all the panels
config.$panels=config.$gallery.find('.'+config.panelclass) //Find Panel DIVs that each contain a slide
config.onpanelclick=(typeof config.onpanelclick=="undefined")? function(target){} : config.onpanelclick //attach custom "onpanelclick" event handler
config.onslideaction=(typeof config.onslide=="undefined")? function(){} : function(beltobj){$(beltobj).stop(); config.onslide()} //attach custom "onslide" event handler
config.oninit=(typeof config.oninit=="undefined")? function(){} : config.oninit //attach custom "oninit" event handler
config.beltoffset=stepcarousel.getCSSValue(config.$belt.css('marginLeft')) //Find length of Belt DIV's left margin
config.statusvars=config.statusvars || [] //get variable names that will hold "start", "end", and "total" slides info
config.$statusobjs=[$('#'+config.statusvars[0]), $('#'+config.statusvars[1]), $('#'+config.statusvars[2])]
config.currentpanel=0
stepcarousel.configholder[config.galleryid]=config //store config parameter as a variable
if (config.contenttype[0]=="ajax" && typeof config.contenttype[1]!="undefined") //fetch ajax content?
stepcarousel.getremotepanels($, config)
else
stepcarousel.alignpanels($, config) //align panels and initialize gallery
}) //end document.ready
jQuery(window).bind('unload', function(){ //clean up
if (config.panelbehavior.persist){
stepcarousel.setCookie(window[config.galleryid+"persist"], config.currentpanel)
}
jQuery.each(config, function(ai, oi){
oi=null
})
config=null
})
}
}

//]]>
</script>

<style type='text/css'>
#myslides{
background:#2c3133;
}
.stepcarousel{
position: relative; /*leave this value alone*/
overflow: scroll; /*leave this value alone*/
width: 95%; /*Width of Carousel Viewer itself*/
height: 165px; /*Height should enough to fit largest content&#39;s height*/
margin: 0px 14px 5px 14px;
background:#2c3133;
}
.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: 10px 17px ; /*margin around each panel*/
width:220px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
background:#202325;
height:140px;
border:1px solid #393f42;
}
.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:#040404; /*clip content that go outside dimensions of holding panel DIV*/
margin: 10px 10px 10px 10px; /*margin around each panel*/
padding:0px 0px;
}
</style>




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


How To Add MooTools Featured Content Slider to blogger


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.


<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/mootools-slider.svn.js' type='text/javascript'/>

&lt;script type=&quot;text/javascript&quot;&gt;
window.addEvent(&#39;domready&#39;, function(){
var totIncrement = 0;
var increment = 212;
var maxRightIncrement = increment*(-6);
var fx = new Fx.Style(&#39;slider-list&#39;, &#39;margin-left&#39;, {
duration: 1000,
transition: Fx.Transitions.Back.easeInOut,
wait: true
});

//-------------------------------------
// EVENTS for the button &quot;previous&quot;
$(&#39;previous&#39;).addEvents({
&#39;click&#39; : function(event){
if(totIncrement&lt;0){
totIncrement = totIncrement+increment;
fx.stop()
fx.start(totIncrement);
}
}
});

//-------------------------------------
// EVENTS for the button &quot;next&quot;
$(&#39;next&#39;).addEvents({
&#39;click&#39; : function(event){
if(totIncrement&gt;maxRightIncrement){
totIncrement = totIncrement-increment;
fx.stop()
fx.start(totIncrement);
}
}
})


});
&lt;/script&gt;


<style type='text/css'>
#slider-stage{width:100%; overflow:auto; overflow-x:hidden; overflow-y:hidden; height:200px; margin:0 auto; border:2px solid #000000; background-color:#000000; }
#slider-buttons{float:left; width:100%; margin:0 auto; border:2px solid #000000; color:#ffffff; font-weight:bold; background-color:#000000;filter:alpha(opacity=60);opacity:0.6;}
#slider-list{width:4500px; border:0; margin:0; padding:0; left:400px;}
#slider-list li{
list-style:none;
margin:0;
padding:0;
border:0;
margin-right:4px;
padding:4px;
background:#DEDEDE;
float:left;
width:200px;
height:200px;
}
</style>



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



Excellent Content SlideShow+Slider to Blogger / WebSite




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:



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



<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/excellent-slideshow-compressed.js' type='text/javascript'/>

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


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


Featured Images Slideshow 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.


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

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

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

var featuredcontentslider={

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

},


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

}

//]]>
</script>

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


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


Smooth Jquery Featured Post Slideshow For Blogger


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.


<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 type='text/javascript'>
//<![CDATA[

/* ------------------------------------------------------------------------
s3Slider

Developped By: Boban Karišik -> http://www.serie3.info/
CSS Help: Mészáros Róbert -> http://www.perspectived.com/
Version: 1.0

Copyright: Feel free to redistribute the script/modify it, as
long as you leave my infos at the top.
-------------------------------------------------------------------------- */


(function($){

$.fn.s3Slider = function(vars) {

var element = this;
var timeOut = (vars.timeOut != undefined) ? vars.timeOut : 4000;
var current = null;
var timeOutFn = null;
var faderStat = true;
var mOver = false;
var items = $("#" + element[0].id + "Content ." + element[0].id + "Image");
var itemsSpan = $("#" + element[0].id + "Content ." + element[0].id + "Image span");

items.each(function(i) {

$(items[i]).mouseover(function() {
mOver = true;
});

$(items[i]).mouseout(function() {
mOver = false;
fadeElement(true);
});

});

var fadeElement = function(isMouseOut) {
var thisTimeOut = (isMouseOut) ? (timeOut/2) : timeOut;
thisTimeOut = (faderStat) ? 10 : thisTimeOut;
if(items.length > 0) {
timeOutFn = setTimeout(makeSlider, thisTimeOut);
} else {
console.log("Poof..");
}
}

var makeSlider = function() {
current = (current != null) ? current : items[(items.length-1)];
var currNo = jQuery.inArray(current, items) + 1
currNo = (currNo == items.length) ? 0 : (currNo - 1);
var newMargin = $(element).width() * currNo;
if(faderStat == true) {
if(!mOver) {
$(items[currNo]).fadeIn((timeOut/6), function() {
if($(itemsSpan[currNo]).css('bottom') == 0) {
$(itemsSpan[currNo]).slideUp((timeOut/6), function() {
faderStat = false;
current = items[currNo];
if(!mOver) {
fadeElement(false);
}
});
} else {
$(itemsSpan[currNo]).slideDown((timeOut/6), function() {
faderStat = false;
current = items[currNo];
if(!mOver) {
fadeElement(false);
}
});
}
});
}
} else {
if(!mOver) {
if($(itemsSpan[currNo]).css('bottom') == 0) {
$(itemsSpan[currNo]).slideDown((timeOut/6), function() {
$(items[currNo]).fadeOut((timeOut/6), function() {
faderStat = true;
current = items[(currNo+1)];
if(!mOver) {
fadeElement(false);
}
});
});
} else {
$(itemsSpan[currNo]).slideUp((timeOut/6), function() {
$(items[currNo]).fadeOut((timeOut/6), function() {
faderStat = true;
current = items[(currNo+1)];
if(!mOver) {
fadeElement(false);
}
});
});
}
}
}
}

makeSlider();

};

})(jQuery);

//]]>
</script>

<script type='text/javascript'>
$(document).ready(function() {
$(&#39;#s3slider&#39;).s3Slider({
timeOut: 4000
});
});
</script>

<style type='text/css'>
#s3slider {
background:#000000;
border:1px solid #818e8f;
width: 550px;
height: 200px;
position: relative;
overflow: hidden;
}
#s3sliderContent {
width: 550px;
position: absolute;
top:-14px;
padding: 0px;
margin-left: 0;
}
.s3sliderImage {
float: left;
position: relative;
display: none;
}
.s3sliderImage span {
position: absolute;
left: 0;
font: 20px Trebuchet MS, sans-serif;
padding: 10px 0px;
width: 550px;
background-color: #000;
filter: alpha(opacity=80);
-moz-opacity: 0.8;
-khtml-opacity: 0.8;
opacity: 0.8;
color: #fff;
display: none;
bottom: 0;
text-align:center;
}
.clear {
clear: both;
}
</style>



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


How To Add Featured Post Content Slider to Blogger


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.


<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 type='text/javascript'>
//<![CDATA[

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

//]]>
</script>

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

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

//]]>
</script>

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

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

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

//]]>
</script>

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

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

});

//]]>
</script>


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

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

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

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

.mytext ul li{
height:200px;

}

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

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

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

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

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

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

</style>

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



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

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

});
</script>

<div id="slidearea">

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

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

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


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

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


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

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


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

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


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

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

</ul>

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

</div>
</div>

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

</div>


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 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 == &quot;item&quot;'>
<style>#featabout, .extra {display:none; margin:0;padding:0;border:0;}</style>
</b:if>
<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; 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, &#39;Times New Roman&#39;, 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(&#39;&#39;) repeat-x scroll left top;
border-bottom: none;
}
div#featabout div.featured { background: transparent url(&#39;&#39;) repeat-y scroll left top; }
div#featabout div.featured div.top { background: transparent url(&#39;&#39;) 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(&#39;&#39;) no-repeat scroll left bottom; }
div#featured h2 {
font-family: Georgia, &#39;Times New Roman&#39;, 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(&#39;&#39;) repeat-y scroll left top; }
div#featabout div.about div.top { background: transparent url(&#39;&#39;) no-repeat scroll left top; }
div#featabout div.about div.bot { background: transparent url(&#39;&#39;) no-repeat scroll left bottom; }

div#featabout div.ab-box h2 { color: #e1e1c7; background: transparent url(&#39;&#39;) repeat-x scroll left bottom; }
div#featabout div.ab-box-burner div.interior { color: #999; background: transparent url(&#39;&#39;) no-repeat scroll 0px 8px; }
div#featabout div.ab-box-burner div.interior span { background: transparent url(&#39;&#39;) 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(&#39;&#39;);
}
.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(&#39;&#39;);
}
* 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(&#39;&#39;) 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(&#39;img/fleche1.png&#39;) no-repeat center left;
}
* html .jdGallery a.left { background: url(&#39;img/fleche1.gif&#39;) no-repeat center left; }
.jdGallery a.right
{
right: 0;
top: 0;
background: url(&#39;&#39;) no-repeat center right;
}
* html .jdGallery a.right { background: url(&#39;&#39;) 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(&#39;&#39;) no-repeat center center; }
* html .withArrows a.open:hover { background: url(&#39;&#39;) 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(&#39;&#39;) 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:

<div id='main-wrapper'>


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($(&#39;myGallery&#39;), {
timed: true
});
}
window.addEvent(&#39;domready&#39;,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>&lt;script&gt;var startposts = 0; numposts = 1; var showposttitle = true; showpostdate = false; var showpostsummary = false; var numchars = 0; &lt;/script&gt;&lt;script src=&quot;http://bdlab.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rp&quot;&gt;
&lt;/script&gt;</h2>
<p>&lt;script&gt;var startposts = 0; numposts = 1; var showposttitle = false; showpostdate = false; var showpostsummary = true; var numchars = 150; &lt;/script&gt;&lt;script src=&quot;http://bdlab.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rp&quot;&gt;
&lt;/script&gt;</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>&lt;script&gt;var startposts = 1; numposts = 2; var showposttitle = true; showpostdate = false; var showpostsummary = false; var numchars = 0; &lt;/script&gt;&lt;script src=&quot;http://bdlab.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rp&quot;&gt;
&lt;/script&gt;</h2>
<p>&lt;script&gt;var startposts = 1; numposts = 2; var showposttitle = false; showpostdate = false; var showpostsummary = true; var numchars = 150; &lt;/script&gt;&lt;script src=&quot;http://bdlab.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rp&quot;&gt;
&lt;/script&gt;</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>&lt;script&gt;var startposts = 2; numposts = 3; var showposttitle = true; showpostdate = false; var showpostsummary = false; var numchars = 0; &lt;/script&gt;&lt;script src=&quot;http://bdlab.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rp&quot;&gt;
&lt;/script&gt;</h2>
<p>&lt;script&gt;var startposts = 2; numposts = 3; var showposttitle = false; showpostdate = false; var showpostsummary = true; var numchars = 150; &lt;/script&gt;&lt;script src=&quot;http://bdlab.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rp&quot;&gt;
&lt;/script&gt;</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>&lt;script&gt;var startposts = 3; numposts = 4; var showposttitle = true; showpostdate = false; var showpostsummary = false; var numchars = 0; &lt;/script&gt;&lt;script src=&quot;http://bdlab.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rp&quot;&gt;
&lt;/script&gt;</h2>
<p>&lt;script&gt;var startposts = 3; numposts = 4; var showposttitle = false; showpostdate = false; var showpostsummary = true; var numchars = 150; &lt;/script&gt;&lt;script src=&quot;http://bdlab.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rp&quot;&gt;
&lt;/script&gt;</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>&lt;script&gt;var startposts = 4; numposts = 5; var showposttitle = true; showpostdate = false; var showpostsummary = false; var numchars = 0; &lt;/script&gt;&lt;script src=&quot;http://bdlab.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rp&quot;&gt;
&lt;/script&gt;</h2>
<p>&lt;script&gt;var startposts = 4; numposts = 5; var showposttitle = false; showpostdate = false; var showpostsummary = true; var numchars = 150; &lt;/script&gt;&lt;script src=&quot;http://bdlab.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rp&quot;&gt;
&lt;/script&gt;</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



<div id='main-wrapper'>


And now click Save Template




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





































How To Add jQuery Featured Content Slideshow to Blogger

How To Add jQuery Featured Content Slideshow to Blogger



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.



<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.1.min.js' type='text/javascript'/>
<script type='text/javascript'>

//<![CDATA[

(function($){$.fn.innerfade=function(options){return this.each(function(){$.innerfade(this,options)})};$.innerfade=function(container,options){var settings={'animationtype':'fade','speed':'normal','type':'sequence','timeout':2000,'containerheight':'auto','runningclass':'innerfade','children':null};if(options)$.extend(settings,options);if(settings.children===null)var elements=$(container).children();else var elements=$(container).children(settings.children);if(elements.length>1){$(container).css('position','relative').css('height',settings.containerheight).addClass(settings.runningclass);for(var i=0;i<elements.length;i++){$(elements[i]).css('z-index',String(elements.length-i)).css('position','absolute').hide()};if(settings.type=="sequence"){setTimeout(function(){$.innerfade.next(elements,settings,1,0)},settings.timeout);$(elements[0]).show()}else if(settings.type=="random"){var last=Math.floor(Math.random()*(elements.length));setTimeout(function(){do{current=Math.floor(Math.random()*(elements.length))}while(last==current);$.innerfade.next(elements,settings,current,last)},settings.timeout);$(elements[last]).show()}else if(settings.type=='random_start'){settings.type='sequence';var current=Math.floor(Math.random()*(elements.length));setTimeout(function(){$.innerfade.next(elements,settings,(current+1)%elements.length,current)},settings.timeout);$(elements[current]).show()}else{alert('Innerfade-Type must either be \'sequence\', \'random\' or \'random_start\'')}}};$.innerfade.next=function(elements,settings,current,last){if(settings.animationtype=='slide'){$(elements[last]).slideUp(settings.speed);$(elements[current]).slideDown(settings.speed)}else if(settings.animationtype=='fade'){$(elements[last]).fadeOut(settings.speed);$(elements[current]).fadeIn(settings.speed,function(){removeFilter($(this)[0])})}else alert('Innerfade-animationtype must either be \'slide\' or \'fade\'');if(settings.type=="sequence"){if((current+1)<elements.length){current=current+1;last=current-1}else{current=0;last=elements.length-1}}else if(settings.type=="random"){last=current;while(current==last)current=Math.floor(Math.random()*elements.length)}else alert('Innerfade-Type must either be \'sequence\', \'random\' or \'random_start\'');setTimeout((function(){$.innerfade.next(elements,settings,current,last)}),settings.timeout)}})(jQuery);function removeFilter(element){if(element.style.removeAttribute){element.style.removeAttribute('filter')}}

//]]>

</script>
<script type='text/javascript'>
$(document).ready(
function(){
$(&#39;#news&#39;).innerfade({
animationtype: &#39;slide&#39;,
speed: 750,
timeout: 2000,
type: &#39;random&#39;,
containerheight: &#39;1em&#39;
});

$(&#39;ul#portfolio&#39;).innerfade({
speed: 1000,
timeout: 5000,
type: &#39;sequence&#39;,
containerheight: &#39;220px&#39;
});

$(&#39;.fade&#39;).innerfade({
speed: 1000,
timeout: 6000,
type: &#39;random_start&#39;,
containerheight: &#39;1.5em&#39;
});

$(&#39;.adi&#39;).innerfade({
speed: &#39;slow&#39;,
timeout: 5000,
type: &#39;random&#39;,
containerheight: &#39;150px&#39;
});

});
</script>



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


<ul id="portfolio" style="list-style-type:none;">

<li><a href="http://bdlab.blogspot.com/search/label/Bookmarks?max-results=1000"><img alt="Social Bookmarks For Bloggers" src="http://3.bp.blogspot.com/_4HKUHirY_2U/Su1dCzXoLUI/AAAAAAAAAHg/UBca-z9kacw/Social+Bookmarks.jpg"/></a></li>

<li><a href="http://bdlab.blogspot.com/search/label/java%20script?max-results=1000"><img alt="Java Script Tutorials" src="http://2.bp.blogspot.com/_4HKUHirY_2U/Su1c4_HH8_I/AAAAAAAAAHQ/FdSFSCqOofI/java+script.jpg"/></a></li>

<li><a href="http://bdlab.blogspot.com/search/label/jQuery?max-results=1000"><img alt="jQuery Tutorials" src="http://3.bp.blogspot.com/_4HKUHirY_2U/Su1c8HWXomI/AAAAAAAAAHY/5aNHJLrEhn4/jQuery.gif"/></a></li>

<li><a href="http://bdlab.blogspot.com/search/label/Windows?max-results=1000"><img alt="Windows Tips" src="http://2.bp.blogspot.com/_4HKUHirY_2U/Su1d_jAcmQI/AAAAAAAAAHw/pGQa7HdO_dE/windows.JPG"/></a></li>

<li><a href="http://bdlab.blogspot.com/search/label/Templates?max-results=1000"><img alt="Blogger Templates" src="http://4.bp.blogspot.com/_4HKUHirY_2U/Su1c1gNG5oI/AAAAAAAAAHI/u_mC4Zt6gCk/Blogger+Templates.jpg"/></a></li>

<li><a href="http://bdlab.blogspot.com/search/label/Wordpress?max-results=1000"><img alt="Wordpress Tutorials" src="http://2.bp.blogspot.com/_4HKUHirY_2U/Su1dGOhicYI/AAAAAAAAAHo/Xm2ld893g-I/wordpress.png"/></a></li>

</ul>


And now click Save




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







































How To Add jQuery Featured Content Slider to Blogger

How To Add jQuery Featured Content Slider to Blogger



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.



<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.2.6.min.js' type='text/javascript'/>

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

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

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

var sf = $.fn.superfish,
c = sf.c,
$arrow = $(['<span class="',c.arrowClass,'"> &#187;</span>'].join('')),
over = function(){
var $$ = $(this), menu = getMenu($$);
clearTimeout(menu.sfTimer);
$$.showSuperfishUl().siblings().hideSuperfishUl();
},
out = function(){
var $$ = $(this), menu = getMenu($$), o = sf.op;
clearTimeout(menu.sfTimer);
menu.sfTimer=setTimeout(function(){
o.retainPath=($.inArray($$[0],o.$path)>-1);
$$.hideSuperfishUl();
if (o.$path.length && $$.parents(['li.',o.hoverClass].join('')).length<1){over.call(o.$path);}
},o.delay);
},
getMenu = function($menu){
var menu = $menu.parents(['ul.',c.menuClass,':first'].join(''))[0];
sf.op = sf.o[menu.serial];
return menu;
},
addArrow = function($a){ $a.addClass(c.anchorClass).append($arrow.clone()); };

return this.each(function() {
var s = this.serial = sf.o.length;
var o = $.extend({},sf.defaults,op);
o.$path = $('li.'+o.pathClass,this).slice(0,o.pathLevels).each(function(){
$(this).addClass([o.hoverClass,c.bcClass].join(' '))
.filter('li:has(ul)').removeClass(o.pathClass);
});
sf.o[s] = sf.op = o;

$('li:has(ul)',this)[($.fn.hoverIntent && !o.disableHI) ? 'hoverIntent' : 'hover'](over,out).each(function() {
if (o.autoArrows) addArrow( $('>a:first-child',this) );
})
.not('.'+c.bcClass)
.hideSuperfishUl();

var $a = $('a',this);
$a.each(function(i){
var $li = $a.eq(i).parents('li');
$a.eq(i).focus(function(){over.call($li);}).blur(function(){out.call($li);});
});
o.onInit.call(this);

}).each(function() {
menuClasses = [c.menuClass];
if (sf.op.dropShadows && !($.browser.msie && $.browser.version < 7)) menuClasses.push(c.shadowClass);
$(this).addClass(menuClasses.join(' '));
});
};

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

})(jQuery);

//]]>
</script>

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

//Featured Content Glider: By http://www.dynamicdrive.com
//Created: Dec 22nd, 07'
//Updated (Jan 29th, 08): Added four possible slide directions: "updown", "downup", "leftright", or "rightleft"
//Updated (Feb 1st, 08): Changed glide behavior to reverse direction when previous button is clicked
//Updated (Feb 12th, 08): Added ability to retrieve gliding contents from an external file using Ajax ("remotecontent" variable added to configuration)

var featuredcontentglider={
csszindex: 100,
ajaxloadingmsg: '<b>Fetching Content. Please wait...</b>',
glide:function(config, showpage, isprev){
var selected=parseInt(showpage)
if (selected>=config.$contentdivs.length){ //if no content exists at this index position
alert("No content exists at page "+(selected+1)+"! Loading 1st page instead.")
selected=0
}
var $target=config.$contentdivs.eq(selected)
//Test for toggler not being initialized yet, or user clicks on the currently selected page):
if (config.$togglerdiv.attr('lastselected')==null || parseInt(config.$togglerdiv.attr('lastselected'))!=selected){
var $selectedlink=config.$toc.eq(selected)
config.$next.attr('loadpage', (selected<config.$contentdivs.length-1)? selected+1+'pg' : 0+'pg')
config.$prev.attr('loadpage', (selected==0)? config.$contentdivs.length-1+'pg' : selected-1+'pg')
var startpoint=(isprev=="previous")? -config.startpoint : config.startpoint
$target.css(config.leftortop, startpoint).css("zIndex", this.csszindex++) //hide content so it's just out of view before animating it
var endpoint=(config.leftortop=="left")? {left:0} : {top:0} //animate it into view
$target.animate(endpoint, config.speed)
config.$toc.removeClass('selected')
$selectedlink.addClass('selected')
config.$togglerdiv.attr('lastselected', selected+'pg')
}
},

getremotecontent:function(config){
config.$glider.html(this.ajaxloadingmsg)
$.ajax({
url: config.remotecontent,
error:function(ajaxrequest){
config.$glider.html('Error fetching content.<br />Server Response: '+ajaxrequest.responseText)
},
success:function(content){
config.$glider.html(content)
featuredcontentglider.setuptoggler(config)
}
})
},

aligncontents:function(config){
config.$contentdivs=$("#"+config.gliderid+" ."+config.contentclass)
config.$contentdivs.css(config.leftortop, config.startpoint).css({height: config.$glider.height(), visibility: 'visible'}) //position content divs so they're out of view:
},

setuptoggler:function(config){
this.aligncontents(config)
config.$togglerdiv.hide()
config.$toc.each(function(index){
$(this).attr('pagenumber', index+'pg')
if (index > (config.$contentdivs.length-1))
$(this).css({display: 'none'}) //hide redundant "toc" links
})
var $nextandprev=$("#"+config.togglerid+" .next, #"+config.togglerid+" .prev")
$nextandprev.click(function(event){ //Assign click behavior to 'next' and 'prev' links
featuredcontentglider.glide(config, this.getAttribute('loadpage'), this.getAttribute('buttontype'))
event.preventDefault() //cancel default link action
})
config.$toc.click(function(event){ //Assign click behavior to 'toc' links
featuredcontentglider.glide(config, this.getAttribute('pagenumber'))
event.preventDefault()
})
config.$togglerdiv.fadeIn(1000, function(){
featuredcontentglider.glide(config, config.selected)
if (config.autorotate==true){ //auto rotate contents?
config.stepcount=0 //set steps taken
config.totalsteps=config.$contentdivs.length*config.autorotateconfig[1] //Total steps limit: num of contents x num of user specified cycles)
featuredcontentglider.autorotate(config)
}
})
config.$togglerdiv.click(function(){
featuredcontentglider.cancelautorotate(config.togglerid)
})
},

autorotate:function(config){
var rotatespeed=config.speed+config.autorotateconfig[0]
window[config.togglerid+"timer"]=setInterval(function(){
if (config.totalsteps>0 && config.stepcount>=config.totalsteps){
clearInterval(window[config.togglerid+"timer"])
}
else{
config.$next.click()
config.stepcount++
}
}, rotatespeed)
},

cancelautorotate:function(togglerid){
if (window[togglerid+"timer"])
clearInterval(window[togglerid+"timer"])
},

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

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

init:function(config){
$(document).ready(function(){
config.$glider=$("#"+config.gliderid)
config.$togglerdiv=$("#"+config.togglerid)
config.$toc=config.$togglerdiv.children('.toc')
config.$next=config.$togglerdiv.children('.next')
config.$prev=config.$togglerdiv.children('.prev')
config.$prev.attr('buttontype', 'previous')
var selected=(config.persiststate)? featuredcontentglider.getCookie(config.gliderid) : config.selected
config.selected=(isNaN(parseInt(selected))) ? config.selected : selected //test for cookie value containing null (1st page load) or "undefined" string
config.leftortop=(/up/i.test(config.direction))? "top" : "left" //set which CSS property to manipulate based on "direction"
config.heightorwidth=(/up/i.test(config.direction))? config.$glider.height() : config.$glider.width() //Get glider height or width based on "direction"
config.startpoint=(/^(left|up)/i.test(config.direction))? -config.heightorwidth : config.heightorwidth //set initial position of contents based on "direction"
if (typeof config.remotecontent!="undefined" && config.remotecontent.length>0)
featuredcontentglider.getremotecontent(config)
else
featuredcontentglider.setuptoggler(config)
$(window).bind('unload', function(){ //clean up and persist
config.$togglerdiv.unbind('click')
config.$toc.unbind('click')
config.$next.unbind('click')
config.$prev.unbind('click')
if (config.persiststate)
featuredcontentglider.setCookie(config.gliderid, config.$togglerdiv.attr('lastselected'))
config=null

})
})
}
}

//]]>
</script>

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

$(document).ready(function(){
$(".glidecontent").hover(function() {
$(this).children(".glidemeta").animate({opacity: "show"}, "slow");
}, function() {
$(this).children(".glidemeta").animate({opacity: "hide"}, "fast");
});
});

//]]>
</script>

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

$(document).ready(function() {
$('#tabzine> ul').tabs({ fx: { height: 'toggle', opacity: 'toggle' } });

});

//]]>
</script>

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

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}('(3(C){C.8={3o:{19:3(E,F,H){6 G=C.8[E].1h;21(6 D 3p H){G.1I[D]=G.1I[D]||[];G.1I[D].28([F,H[D]])}},2P:3(D,F,E){6 H=D.1I[F];5(!H){7}21(6 G=0;G<H.k;G++){5(D.b[H[G][0]]){H[G][1].1H(D.c,E)}}}},1l:{},n:3(D){5(C.8.1l[D]){7 C.8.1l[D]}6 E=C(\'<2a 3s="8-3r">\').j(D).n({3q:"3i",2g:"-2A",3g:"-2A",1r:"1w"}).22("2C");C.8.1l[D]=!!((!(/3I|3P/).12(E.n("3z"))||(/^[1-9]/).12(E.n("2T"))||(/^[1-9]/).12(E.n("2E"))||!(/2v/).12(E.n("3w"))||!(/3S|3C\\(0, 0, 0, 0\\)/).12(E.n("3D"))));3E{C("2C").2w(0).3B(E.2w(0))}3x(F){}7 C.8.1l[D]},3y:3(D){C(D).v("1p","2I").n("2q","2v")},3H:3(D){C(D).v("1p","3O").n("2q","")},3Q:3(G,E){6 D=/2g/.12(E||"2g")?"3N":"3M",F=e;5(G[D]>0){7 t}G[D]=1;F=G[D]>0?t:e;G[D]=0;7 F}};6 B=C.2e.W;C.2e.W=3(){C("*",2).19(2).z("W");7 B.1H(2,2M)};3 A(E,F,G){6 D=C[E][F].35||[];D=(1F D=="1E"?D.2h(/,?\\s+/):D);7(C.1j(G,D)!=-1)}C.1i=3(E,D){6 F=E.2h(".")[0];E=E.2h(".")[1];C.2e[E]=3(J){6 H=(1F J=="1E"),I=2D.1h.3J.2P(2M,1);5(H&&A(F,E,J)){6 G=C.i(2[0],E);7(G?G[J].1H(G,I):1n)}7 2.14(3(){6 K=C.i(2,E);5(H&&K&&C.3v(K[J])){K[J].1H(K,I)}o{5(!H){C.i(2,E,3e C[F][E](2,J))}}})};C[F][E]=3(I,H){6 G=2;2.15=E;2.2H=F+"-"+E;2.b=C.1A({},C.1i.1k,C[F][E].1k,H);2.c=C(I).u("1e."+E,3(L,J,K){7 G.1e(J,K)}).u("2j."+E,3(K,J){7 G.2j(J)}).u("W",3(){7 G.1b()});2.23()};C[F][E].1h=C.1A({},C.1i.1h,D)};C.1i.1h={23:3(){},1b:3(){2.c.1q(2.15)},2j:3(D){7 2.b[D]},1e:3(D,E){2.b[D]=E;5(D=="f"){2.c[E?"j":"r"](2.2H+"-f")}},1X:3(){2.1e("f",e)},1P:3(){2.1e("f",t)}};C.1i.1k={f:e};C.8.2J={3h:3(){6 D=2;2.c.u("3d."+2.15,3(E){7 D.2G(E)});5(C.x.13){2.2K=2.c.v("1p");2.c.v("1p","2I")}2.3c=e},38:3(){2.c.16("."+2.15);(C.x.13&&2.c.v("1p",2.2K))},2G:3(F){(2.V&&2.1o(F));2.1C=F;6 E=2,G=(F.39==1),D=(1F 2.b.25=="1E"?C(F.2f).2x().19(F.2f).y(2.b.25).k:e);5(!G||D||!2.2S(F)){7 t}2.1D=!2.b.26;5(!2.1D){2.3a=1x(3(){E.1D=t},2.b.26)}5(2.2m(F)&&2.1T(F)){2.V=(2.1U(F)!==e);5(!2.V){F.3b();7 t}}2.2n=3(H){7 E.2r(H)};2.2l=3(H){7 E.1o(H)};C(2N).u("2O."+2.15,2.2n).u("2t."+2.15,2.2l);7 e},2r:3(D){5(C.x.13&&!D.3j){7 2.1o(D)}5(2.V){2.1V(D);7 e}5(2.2m(D)&&2.1T(D)){2.V=(2.1U(2.1C,D)!==e);(2.V?2.1V(D):2.1o(D))}7!2.V},1o:3(D){C(2N).16("2O."+2.15,2.2n).16("2t."+2.15,2.2l);5(2.V){2.V=e;2.2u(D)}7 e},2m:3(D){7(29.3m(29.2z(2.1C.2L-D.2L),29.2z(2.1C.2s-D.2s))>=2.b.2F)},1T:3(D){7 2.1D},1U:3(D){},1V:3(D){},2u:3(D){},2S:3(D){7 t}};C.8.2J.1k={25:U,2F:1,26:0}})(27);(3(A){A.1i("8.4",{23:3(){2.b.Z+=".4";2.1m(t)},1e:3(B,C){5((/^d/).12(B)){2.1v(C)}o{2.b[B]=C;2.1m()}},k:3(){7 2.$4.k},1Q:3(B){7 B.2R&&B.2R.1g(/\\s/g,"2Q").1g(/[^A-4o-4x-9\\-2Q:\\.]/g,"")||2.b.2X+A.i(B)},8:3(C,B){7{b:2.b,4u:C,30:B,11:2.$4.11(C)}},1m:3(O){2.$l=A("1O:4p(a[p])",2.c);2.$4=2.$l.1G(3(){7 A("a",2)[0]});2.$h=A([]);6 P=2,D=2.b;2.$4.14(3(R,Q){5(Q.X&&Q.X.1g("#","")){P.$h=P.$h.19(Q.X)}o{5(A(Q).v("p")!="#"){A.i(Q,"p.4",Q.p);A.i(Q,"q.4",Q.p);6 T=P.1Q(Q);Q.p="#"+T;6 S=A("#"+T);5(!S.k){S=A(D.2d).v("1s",T).j(D.1u).4l(P.$h[R-1]||P.c);S.i("1b.4",t)}P.$h=P.$h.19(S)}o{D.f.28(R+1)}}});5(O){2.c.j(D.2b);2.$h.14(3(){6 Q=A(2);Q.j(D.1u)});5(D.d===1n){5(20.X){2.$4.14(3(S,Q){5(Q.X==20.X){D.d=S;5(A.x.13||A.x.43){6 R=A(20.X),T=R.v("1s");R.v("1s","");1x(3(){R.v("1s",T)},44)}4m(0,0);7 e}})}o{5(D.1c){6 J=46(A.1c("8-4"+A.i(P.c)),10);5(J&&P.$4[J]){D.d=J}}o{5(P.$l.y("."+D.m).k){D.d=P.$l.11(P.$l.y("."+D.m)[0])}}}}D.d=D.d===U||D.d!==1n?D.d:0;D.f=A.41(D.f.40(A.1G(2.$l.y("."+D.1a),3(R,Q){7 P.$l.11(R)}))).31();5(A.1j(D.d,D.f)!=-1){D.f.3V(A.1j(D.d,D.f),1)}2.$h.j(D.18);2.$l.r(D.m);5(D.d!==U){2.$h.w(D.d).1S().r(D.18);2.$l.w(D.d).j(D.m);6 K=3(){A(P.c).z("1K",[P.Y("1K"),P.8(P.$4[D.d],P.$h[D.d])],D.1S)};5(A.i(2.$4[D.d],"q.4")){2.q(D.d,K)}o{K()}}A(3U).u("3W",3(){P.$4.16(".4");P.$l=P.$4=P.$h=U})}21(6 G=0,N;N=2.$l[G];G++){A(N)[A.1j(G,D.f)!=-1&&!A(N).1f(D.m)?"j":"r"](D.1a)}5(D.17===e){2.$4.1q("17.4")}6 C,I,B={"3X-2E":0,1R:1},E="3Z";5(D.1d&&D.1d.3Y==2D){C=D.1d[0]||B,I=D.1d[1]||B}o{C=I=D.1d||B}6 H={1r:"",47:"",2T:""};5(!A.x.13){H.1W=""}3 M(R,Q,S){Q.2p(C,C.1R||E,3(){Q.j(D.18).n(H);5(A.x.13&&C.1W){Q[0].2B.y=""}5(S){L(R,S,Q)}})}3 L(R,S,Q){5(I===B){S.n("1r","1w")}S.2p(I,I.1R||E,3(){S.r(D.18).n(H);5(A.x.13&&I.1W){S[0].2B.y=""}A(P.c).z("1K",[P.Y("1K"),P.8(R,S[0])],D.1S)})}3 F(R,T,Q,S){T.j(D.m).4k().r(D.m);M(R,Q,S)}2.$4.16(".4").u(D.Z,3(){6 T=A(2).2x("1O:w(0)"),Q=P.$h.y(":4e"),S=A(2.X);5((T.1f(D.m)&&!D.1z)||T.1f(D.1a)||A(2).1f(D.1t)||A(P.c).z("2y",[P.Y("2y"),P.8(2,S[0])],D.1v)===e){2.1M();7 e}P.b.d=P.$4.11(2);5(D.1z){5(T.1f(D.m)){P.b.d=U;T.r(D.m);P.$h.1Y();M(2,Q);2.1M();7 e}o{5(!Q.k){P.$h.1Y();6 R=2;P.q(P.$4.11(2),3(){T.j(D.m).j(D.2c);L(R,S)});2.1M();7 e}}}5(D.1c){A.1c("8-4"+A.i(P.c),P.b.d,D.1c)}P.$h.1Y();5(S.k){6 R=2;P.q(P.$4.11(2),Q.k?3(){F(R,T,Q,S)}:3(){T.j(D.m);L(R,S)})}o{4b"27 4c 4d: 3n 49 4a."}5(A.x.13){2.1M()}7 e});5(!(/^24/).12(D.Z)){2.$4.u("24.4",3(){7 e})}},19:3(E,D,C){5(C==1n){C=2.$4.k}6 G=2.b;6 I=A(G.37.1g(/#\\{p\\}/g,E).1g(/#\\{1L\\}/g,D));I.i("1b.4",t);6 H=E.4i("#")==0?E.1g("#",""):2.1Q(A("a:4g-4h",I)[0]);6 F=A("#"+H);5(!F.k){F=A(G.2d).v("1s",H).j(G.18).i("1b.4",t)}F.j(G.1u);5(C>=2.$l.k){I.22(2.c);F.22(2.c[0].48)}o{I.36(2.$l[C]);F.36(2.$h[C])}G.f=A.1G(G.f,3(K,J){7 K>=C?++K:K});2.1m();5(2.$4.k==1){I.j(G.m);F.r(G.18);6 B=A.i(2.$4[0],"q.4");5(B){2.q(C,B)}}2.c.z("2Y",[2.Y("2Y"),2.8(2.$4[C],2.$h[C])],G.19)},W:3(B){6 D=2.b,E=2.$l.w(B).W(),C=2.$h.w(B).W();5(E.1f(D.m)&&2.$4.k>1){2.1v(B+(B+1<2.$4.k?1:-1))}D.f=A.1G(A.34(D.f,3(G,F){7 G!=B}),3(G,F){7 G>=B?--G:G});2.1m();2.c.z("2V",[2.Y("2V"),2.8(E.2k("a")[0],C[0])],D.W)},1X:3(B){6 C=2.b;5(A.1j(B,C.f)==-1){7}6 D=2.$l.w(B).r(C.1a);5(A.x.4n){D.n("1r","4t-1w");1x(3(){D.n("1r","1w")},0)}C.f=A.34(C.f,3(F,E){7 F!=B});2.c.z("33",[2.Y("33"),2.8(2.$4[B],2.$h[B])],C.1X)},1P:3(C){6 B=2,D=2.b;5(C!=D.d){2.$l.w(C).j(D.1a);D.f.28(C);D.f.31();2.c.z("32",[2.Y("32"),2.8(2.$4[C],2.$h[C])],D.1P)}},1v:3(B){5(1F B=="1E"){B=2.$4.11(2.$4.y("[p$="+B+"]")[0])}2.$4.w(B).4q(2.b.Z)},q:3(G,K){6 L=2,D=2.b,E=2.$4.w(G),J=E[0],H=K==1n||K===e,B=E.i("q.4");K=K||3(){};5(!B||!H&&A.i(J,"17.4")){K();7}6 M=3(N){6 O=A(N),P=O.2k("*:4s");7 P.k&&P.4v(":45(3R)")&&P||O};6 C=3(){L.$4.y("."+D.1t).r(D.1t).14(3(){5(D.1N){M(2).3l().1B(M(2).i("1L.4"))}});L.1y=U};5(D.1N){6 I=M(J).1B();M(J).3k("<2o></2o>").2k("2o").i("1L.4",I).1B(D.1N)}6 F=A.1A({},D.1J,{2U:B,2i:3(O,N){A(J.X).1B(O);C();5(D.17){A.i(J,"17.4",t)}A(L.c).z("2Z",[L.Y("2Z"),L.8(L.$4[G],L.$h[G])],D.q);D.1J.2i&&D.1J.2i(O,N);K()}});5(2.1y){2.1y.3f();C()}E.j(D.1t);1x(3(){L.1y=A.3u(F)},0)},2U:3(C,B){2.$4.w(C).1q("17.4").i("q.4",B)},1b:3(){6 B=2.b;2.c.16(".4").r(B.2b).1q("4");2.$4.14(3(){6 C=A.i(2,"p.4");5(C){2.p=C}6 D=A(2).16(".4");A.14(["p","q","17"],3(E,F){D.1q(F+".4")})});2.$l.19(2.$h).14(3(){5(A.i(2,"1b.4")){A(2).W()}o{A(2).r([B.m,B.2c,B.1a,B.1u,B.18].3G(" "))}})},Y:3(B){7 A.Z.3L({3t:B,2f:2.c[0]})}});A.8.4.1k={1z:e,Z:"24",f:[],1c:U,1N:"3F&#3A;",17:e,2X:"8-4-",1J:{},1d:U,37:\'<1O><a p="#{p}"><2W>#{1L}</2W></a></1O>\',2d:"<2a></2a>",2b:"8-4-3K",m:"8-4-d",2c:"8-4-1z",1a:"8-4-f",1u:"8-4-30",18:"8-4-3T",1t:"8-4-4w"};A.8.4.35="k";A.1A(A.8.4.1h,{1Z:U,4r:3(C,F){F=F||e;6 B=2,E=2.b.d;3 G(){B.1Z=42(3(){E=++E<B.$4.k?E:0;B.1v(E)},C)}3 D(H){5(!H||H.4j){4f(B.1Z)}}5(C){G();5(!F){2.$4.u(2.b.Z,D)}o{2.$4.u(2.b.Z,3(){D();E=B.b.d;G()})}}o{D();2.$4.16(2.b.Z,D)}}})})(27);',62,282,'||this|function|tabs|if|var|return|ui|||options|element|selected|false|disabled||panels|data|addClass|length|lis|selectedClass|css|else|href|load|removeClass||true|bind|attr|eq|browser|filter|triggerHandler|||||||||||||||||||||null|_mouseStarted|remove|hash|fakeEvent|event||index|test|msie|each|widgetName|unbind|cache|hideClass|add|disabledClass|destroy|cookie|fx|setData|hasClass|replace|prototype|widget|inArray|defaults|cssCache|tabify|undefined|mouseUp|unselectable|removeData|display|id|loadingClass|panelClass|select|block|setTimeout|xhr|unselect|extend|html|_mouseDownEvent|_mouseDelayMet|string|typeof|map|apply|plugins|ajaxOptions|tabsshow|label|blur|spinner|li|disable|tabId|duration|show|mouseDelayMet|mouseStart|mouseDrag|opacity|enable|stop|rotation|location|for|appendTo|init|click|cancel|delay|jQuery|push|Math|div|navClass|unselectClass|panelTemplate|fn|target|top|split|success|getData|find|_mouseUpDelegate|mouseDistanceMet|_mouseMoveDelegate|em|animate|MozUserSelect|mouseMove|pageY|mouseup|mouseStop|none|get|parents|tabsselect|abs|5000px|style|body|Array|width|distance|mouseDown|widgetBaseClass|on|mouse|_mouseUnselectable|pageX|arguments|document|mousemove|call|_|title|mouseCapture|height|url|tabsremove|span|idPrefix|tabsadd|tabsload|panel|sort|tabsdisable|tabsenable|grep|getter|insertBefore|tabTemplate|mouseDestroy|which|_mouseDelayTimer|preventDefault|started|mousedown|new|abort|left|mouseInit|absolute|button|wrapInner|parent|max|Mismatching|plugin|in|position|gen|class|type|ajax|isFunction|backgroundImage|catch|disableSelection|cursor|8230|removeChild|rgba|backgroundColor|try|Loading|join|enableSelection|auto|slice|nav|fix|scrollLeft|scrollTop|off|default|hasScroll|img|transparent|hide|window|splice|unload|min|constructor|normal|concat|unique|setInterval|opera|500|not|parseInt|overflow|parentNode|fragment|identifier|throw|UI|Tabs|visible|clearInterval|first|child|indexOf|clientX|siblings|insertAfter|scrollTo|safari|Za|has|trigger|rotate|last|inline|tab|is|loading|z0'.split('|'),0,{}))


//]]>
</script>

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

/*
* jScroller 0.3 - Scroller Script
*
* Copyright (c) 2007 Markus Bordihn (http://markusbordihn.de)
* Dual licensed under the MIT (MIT-LICENSE.txt)
* and GPL (GPL-LICENSE.txt) licenses.
*
* $Date: 2007-11-15 13:00:00 +0100 (Thu, 15 Nov 2007) $
* $Rev: 0.3 $
*/

$(document).ready(function(){
this.defaults = {
scroller: {
interval: 0, // Dont touch !
refresh: 150, // Refresh Time in ms
direction: "left", // down,right,left,up
speed: 5, // Set the Scroller Speed
id: "#scroller",
cont_id: "#scroller_container"
}
}

var jscroller_config = $.extend(this.defaults), jscroller_scroller = $(jscroller_config.scroller.id), jscroller_scroller_cont = $(jscroller_config.scroller.cont_id);

if (jscroller_scroller && jscroller_scroller_cont) {
jscroller_scroller.css({position: 'absolute', left: 0, top: 0});
jscroller_init();
}

function jscroller_startScroll() {
if(!jscroller_config.scroller.interval) {
jscroller_config.scroller.interval=window.setInterval(jscroller_doScroll,jscroller_config.scroller.refresh);
}
}

function jscroller_stopScroll() {
if (jscroller_config.scroller.interval) {
window.clearInterval(jscroller_config.scroller.interval);
jscroller_config.scroller.interval=0;
}
}

function jscroller_init() {
$("#scroller a").click(function(){
window.open(this.href);
return false;
});
jscroller_scroller_cont.css('overflow','hidden');
if(!jscroller_config.scroller.interval) {
if (window.attachEvent) {
window.attachEvent("onfocus", jscroller_startScroll);
window.attachEvent("onblur", jscroller_stopScroll);
window.attachEvent("onresize", jscroller_startScroll);
window.attachEvent("onscroll", jscroller_startScroll);
}
else if (window.addEventListener) {
window.addEventListener("focus", jscroller_startScroll, false);
window.addEventListener("blur", jscroller_stopScroll, false);
window.addEventListener("resize", jscroller_startScroll, false);
window.addEventListener("scroll", jscroller_startScroll, false);
}
jscroller_startScroll();
if ($.browser.msie) {window.focus()}
}
}

function jscroller_getElem(Elem) {
return (typeof Elem == "string" && document.getElementById)? document.getElementById(Elem) : Elem;
}

function jscroller_doScroll() {
if (scroller_dom = jscroller_getElem(jscroller_scroller.attr("id"))) {
var
p_top= Number((/[0-9-,.]+/.exec(jscroller_scroller.css('top'))||0)),
p_left=Number((/[0-9-,.]+/.exec(jscroller_scroller.css('left'))||0)),
min_height=jscroller_scroller_cont.height(),
min_width=jscroller_scroller_cont.width(),
speed=jscroller_config.scroller.speed,
p_height=scroller_dom.offsetHeight,
p_width=scroller_dom.offsetWidth,
direction=jscroller_config.scroller.direction,
jscroller=jscroller_scroller;

switch(direction) {
case 'up':
if (p_top <= -1*p_height) {p_top=min_height;}
jscroller.css('top',p_top-speed+'px');
break;
case 'right':
if (p_left >= min_width) {p_left=-1*p_width;}
jscroller.css('left',p_left+speed+'px');
break;
case 'left':
if (p_left <= -1*p_width) {p_left=min_width;}
jscroller.css('left',p_left-speed+'px');
break;
case 'down':
if (p_top >= min_height) {p_top=-1*p_height;}
jscroller.css('top',p_top+speed+'px');
break;
}
}
}
});

//]]>
</script>

<script type='text/javascript'>
jQuery(function(){
jQuery(&#39;ul.sf-menu&#39;).superfish();
});
</script>
<script type='text/javascript'>
featuredcontentglider.init({
gliderid: &quot;glidercontent&quot;,
contentclass: &quot;glidecontent&quot;,
togglerid: &quot;togglebox&quot;,
remotecontent: &quot;&quot;,
selected: 1,
persiststate: true,
speed: 300,
direction: &quot;leftright&quot;,
autorotate: true,
autorotateconfig: [10000, 1] //if auto rotate enabled, set [milliseconds_btw_rotations, cycles_before_stopping]
})
</script>
<script type='text/javascript'>
if (window.jstiming) window.jstiming.load.tick(&#39;headEnd&#39;);
</script>

<style type='text/css'>
#glidercontent{
margin:0px 0 5px 0px;
font-family:Georgia,Century gothic, Arial,Tahoma,sans-serif;
}
.glidecontentwrapper{
position: relative; /* Do not change this value */
width: 670px;
height: 300px; /* Set height to be able to contain height of largest content shown*/
overflow: hidden;
margin:0px 0px 0px 0px;
background:url(http://3.bp.blogspot.com/_4HKUHirY_2U/SwTsGH40-_I/AAAAAAAAAP0/aNRCgjPZauI/tgb.jpg) repeat-y;
}
.glidecontent{ /*style for each glide content DIV within wrapper.*/
position:absolute; /* Do not change this value */
padding:0px 10px 0px 10px;
width:640px;
color:#fff;
margin:0px 0px;
height: 230px;
background:#ec03d9 url() no -repeat;
overflow:hidden;
float:left;
}
.glidemeta h2{
margin:5px 0px 5px 0px;
padding:5px 0px;
font-size:18px;
font-weight:bold;
}
.glidemeta h2 a:link, .glidemeta h2 a:visited{
color:#fff;
}
.glidemeta{
height: 80px;
width: 650px;
padding:0px 5px 5px 5px;
position:absolute;
background: url(http://4.bp.blogspot.com/_4HKUHirY_2U/SwTYvAM5wFI/AAAAAAAAAO0/MNHdbvpz-0g/balloon.png);
top:164px;
line-height:14px;
color: #fff;
font-size:12px;
overflow: hidden;
display:none;
border-top:1px solid #000;
}
.gnav{ /*style for DIV used to contain toggler links. */
width: 100px;
height:50px;
z-index:150;
float:right;
padding-right:25px;
}
.glidecontenttoggler{ /*style for DIV used to contain toggler links. */
height:38px;
z-index:150;
width: 670px;
background: url(http://4.bp.blogspot.com/_4HKUHirY_2U/SwTr9OFB_bI/AAAAAAAAAPc/u_L6n3MsL7w/gtop.jpg);
}
.glidecontenttoggler a{ /*style for every navigational link within toggler */
display: -moz-inline-box;
display: inline-block;
color: #2e6ab1;
font-weight: bold;
text-decoration: none;
}
.glidecontenttoggler a.selected{ /*style for selected page&#39;s toggler link. &quot;.selected&quot; class auto generated! */
background: #E4EFFA;
color: black;
}
.glidecontenttoggler a:hover{
background: #E4EFFA;
color: black;
}
.glidecontenttoggler a.toc{ /*style for individual toggler links (page 1, page 2, etc). &quot;.toc&quot; class auto generated! */
}
.glidecontenttoggler a.prev{ /*style for &quot;prev&quot; and &quot;next&quot; toggler links. &quot;.prev&quot; and &quot;.next&quot; classes auto generated! */
top:6px;
right:35px;
position:absolute;
display:block;
background:url(http://2.bp.blogspot.com/_4HKUHirY_2U/SwTsAadil-I/AAAAAAAAAPk/N-y2th8_LVc/left.jpg) bottom;
width:36px;
height:25px;
}
.glidecontenttoggler a.next {
float:right;
display:block;
background:url(http://2.bp.blogspot.com/_4HKUHirY_2U/SwTsDYsmbBI/AAAAAAAAAPs/-lVdze7mg_c/right.jpg) bottom;
width:36px;
height:25px;
position:absolute;
top:6px;
right:5px;
}
</style>



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

Add Beautiful jQuery Auto Playing Featured Content Image Slider to Blogger



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:

*{

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.



<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.2.6.min.js' type='text/javascript'/>

<script src='http://safir85.ucoz.com/24work-blogspot/featured-post-s/yourjavascript-56841175202.js' type='text/javascript'/>


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.



<script type='text/javascript'>



if(!window.slider) var slider={};slider.data=[{"id":"slide-img-1","client":"nature beauty","desc":"nature beauty photography"},{"id":"slide-img-2","client":"nature beauty2","desc":"add your description here"},{"id":"slide-img-3","client":"nature beauty3","desc":"add your description here"},{"id":"slide-img-4","client":"nature beauty4","desc":"add your description here"},{"id":"slide-img-5","client":"nature beauty5","desc":"add your description here"},{"id":"slide-img-6","client":"nature beauty6","desc":"add your description here"}];



</script>




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 id="header">

<div class="wrap">

<div id="slide-holder">

<div id="slide-runner">

<a href="Your Post link here"><img id="slide-img-1" src="http://img338.imageshack.us/img338/9756/naturephotoc.png" class="slide" alt="Your image title here" /></a>

<a href="Your Post Link Here"><img id="slide-img-2" src="http://img145.imageshack.us/img145/7564/naturephoto2.png" class="slide" alt="Your image title here" /></a>

<a href="Your Post Link Here"><img id="slide-img-3" src="http://img31.imageshack.us/img31/5550/naturephoto3.png" class="slide" alt="Your image title here" /></a>

<a href="Your Post Link Here"><img id="slide-img-4" src="http://img34.imageshack.us/img34/2006/naturephoto4.png" class="slide" alt="Your image title here" /></a>

<a href="Your Post Link Here"><img id="slide-img-5" src="http://img130.imageshack.us/img130/4637/naturephoto5.png" class="slide" alt="Your image title here" /></a>

<a href="Your Post Link Here"><img id="slide-img-6" src="http://img820.imageshack.us/img820/3824/naturephoto6.png" class="slide" alt="Your image title here" /></a>

<div id="slide-controls">

<p id="slide-client" class="text"><strong>post: </strong><span></span></p>

<p id="slide-desc" class="text"></p>

<p id="slide-nav"></p>

</div>

</div>

</div>

</div>

</div>


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


Adding jQuery Posts Slider To 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:

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



<a href='http://24work.blogspot.com' target='_blank' title='Blogger Widgets'><img alt='Blogger Widgets' border='0' src='http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png' style='position:absolute; top: 0px; right: 0px;'/></a>
<script src='http://safir85.ucoz.com/24work-blogspot/featured-post-s/zinmag-primus-jquery-1.2.6.min.js' type='text/javascript'/>

<script src='http://safir85.ucoz.com/24work-blogspot/featured-post-s/zinmag-primus-slider-01.js' type='text/javascript'/>


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


<!-- Slider -->
<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>
<!-- /Mover -->
</div>
<!-- /Slider -->


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


Simplest jQuery Featured Content Slider in Blogger / Blogspot 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:#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.



<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-0-1.min.js' type='text/javascript'/>
<script src='http://safir85.ucoz.com/24work-blogspot/featured-post-s/jquery.flow.1.2.auto.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(&quot;#myController&quot;).jFlow({
slides: &quot;#slides&quot;,
controller: &quot;.jFlowControl&quot;, // must be class, use . sign
slideWrapper : &quot;#jFlowSlide&quot;, // must be id, use # sign
selectedWrapper: &quot;jFlowSelected&quot;, // just pure text, no sign
auto: true, //auto change slide, default true
width: &quot;610px&quot;,
height: &quot;235px&quot;,
duration: 100,
prev: &quot;.jFlowPrev&quot;, // must be class, use . sign
next: &quot;.jFlowNext&quot; // must be class, use . sign
});
});
</script>


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



<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 &#187;</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 &#187;</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 &#187;</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 &#187;</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 &#187;</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 &#187;</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 &#187;</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 &#187;</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 &#187;</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 &#187;</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 &#187;</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 &#187;</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 &#187;</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 &#187;</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 &#187;</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 &#187;</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 &#187;</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 &#187;</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 &#187;</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 &#187;</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>

<!-- Slide # 1 Ends -->

<!-- Slide #2 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>

<!-- Slide # 2 Ends -->

<!-- Slide #3 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>

<!-- Slide # 3 Ends -->

.

.

.

.

<!-- You can add as many slides as you want above this line -->

</div>


<div id="myController">

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

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

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

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


<!-- Increase these numbers as with the increase in your number of slides above -->

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

</div>

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

</div>





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



















































Moving jquery image slider for featured content in Blogger


Moving jquery image slider for featured content in Blogger



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:

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



<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><!-- JavaScript Slider -->

<script src='http://safir85.ucoz.com/24work-blogspot/featured-post-s/jquery-1.3.2.min.js' type='text/javascript'/>

<script src='http://safir85.ucoz.com/24work-blogspot/featured-post-s/30111191622-slider.js' type='text/javascript'/>



<!-- End JavaScript Slider -->

<script type='text/javascript'>

stepcarousel.setup({

galleryid: &#39;mygallery&#39;, //id of carousel DIV

beltclass: &#39;belt&#39;, //class of inner &quot;belt&quot; DIV containing all the panel DIVs

panelclass: &#39;panel&#39;, //class of panel DIVs each holding content

panelbehavior: {speed:1500, wraparound:true, persist:true},

autostep: {enable:true, moveby:1, pause:1000},

defaultbuttons: {enable: true, moveby: 4, leftnav: [&#39;http://1.bp.blogspot.com/_v5IxGTiMTD8/SxOlAIA_ZZI/AAAAAAAAAfg/ELVwF1qY8M8/s400/left.jpg&#39;, -48, 0], rightnav: [&#39;http://1.bp.blogspot.com/_v5IxGTiMTD8/SxOlAVn-OvI/AAAAAAAAAfo/kMJcmlXZKCs/s400/right.jpg&#39;, 0, 0]},

statusvars: [&#39;statusA&#39;, &#39;statusB&#39;, &#39;statusC&#39;], //register 3 variables that contain current panel (start), current panel (last), and total panels

contenttype: [&#39;external&#39;] //content setting [&#39;inline&#39;] or [&#39;external&#39;, &#39;path_to_external_file&#39;]



})



</script>


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 id="myslides">

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

<div class="belt">



<!-- 1st Template -->

<div class='panel'>

<a href='http://bdlab.blogspot.com/' target='blank' title='made in spain'> <img alt='made in spain' height='135' src='http://safir85.ucoz.com/bdlab-blogspot/24work/falling-text/8.gif' width='185'/> </a>

</div>

<!--end code of 1st Template -->

<!-- 2nd Template -->



<div class='panel'>

<a href='http://bdlab.blogspot.com/' target='blank' title='fashion press'> <img alt='fashion press' height='135' src='http://safir85.ucoz.com/bdlab-blogspot/24work/falling-text/8.gif' width='185'/> </a>



</div>

<!--end code of 2nd Template -->



<!-- 3rd Template -->



<div class='panel'>

<a href='http://bdlab.blogspot.com/' target='blank' title='techlure'> <img alt='techlure' height='135' src='http://safir85.ucoz.com/bdlab-blogspot/24work/falling-text/8.gif' title='techlure' width='185'/> </a>

</div>

<!--end code of 3rd Template -->

<!-- 4th Template -->



<div class='panel'>

<a href='http://bdlab.blogspot.com/' target='blank' title='woodmag'> <img alt='woodmag' height='135' src='http://safir85.ucoz.com/bdlab-blogspot/24work/falling-text/8.gif' title='techlure' width='185'/> </a>

</div>

<!--end code of 4th Template -->

<!-- 5th Template -->



<div class='panel'>

<a href='http://bdlab.blogspot.com/' target='blank' title='showcase'> <img alt='showcase' height='135' src='http://safir85.ucoz.com/bdlab-blogspot/24work/falling-text/8.gif' title='showcase' width='185'/> </a>

</div>

<!--end code of 5th Template -->

<!-- 6th Template -->



<div class='panel'>

<a href='http://bdlab.blogspot.com/' target='blank' title='versatile'> <img alt='versatile' height='135' src='http://safir85.ucoz.com/bdlab-blogspot/24work/falling-text/8.gif' title='versatile' width='185'/> </a>

</div>

<!--end code of 6th Template -->



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


And now click Save






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

















































Make A Simple Featured Content SlideShow Using JQuery


Make A Simple Featured Content SlideShow 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




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:

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



<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 type='text/javascript'>
//<![CDATA[
$(document).ready(function(){var currentPosition=0;var slideWidth=845;var slides=$('.slide');var numberOfSlides=slides.length;$('#slidesContainer').css('overflow','hidden');slides.wrapAll('<div id="slideInner"></div>').css({'float':'left','width':slideWidth});$('#slideInner').css('width',slideWidth*numberOfSlides);$('#slideshow').prepend('<span class="control" id="leftControl">Clicking moves left</span>').append('<span class="control" id="rightControl">Clicking moves right</span>');manageControls(currentPosition);$('.control').bind('click',function(){currentPosition=($(this).attr('id')=='rightControl')?currentPosition+1:currentPosition-1;manageControls(currentPosition);$('#slideInner').animate({'marginLeft':slideWidth*(-currentPosition)})});function manageControls(position){if(position==0){$('#leftControl').hide()}else{$('#leftControl').show()}if(position==numberOfSlides-1){$('#rightControl').hide()}else{$('#rightControl').show()}}
});
//]]>
</script>


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


SlideShow Featured Content Using JQuery
<!-- Slideshow HTML -->
<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 &#187;</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 &#187;</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 &#187;</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 &#187;</b></a>
</p></div>
</div>
</div></div>
<!-- Slideshow HTML -->


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




New And Stylish JQuery Featured Post Widget for Blogger Blogs



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:

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



<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 src='http://safir85.ucoz.com/24work-blogspot/featured-post-s/jquery-1.5.3-ui.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(&quot;#featured &gt; ul&quot;).tabs({fx:{opacity: &quot;toggle&quot;}}).tabs(&quot;rotate&quot;, 5000, true);
});
</script>


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 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>
<!-- First Content -->
<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>
<!-- Second Content -->
<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>
<!-- Third Content -->
<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>
<!-- Fourth Content -->
<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




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




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:

/* 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.



<!-- jQuery -->
<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 != &#39;undefined&#39; )
curclicked = cur;
$crosslink.removeClass(&quot;active-thumb&quot;);
$navthumb.eq(curclicked).parent().addClass(&quot;active-thumb&quot;);
$(&quot;.stripNav ul li a&quot;).eq(curclicked).trigger(&#39;click&#39;);
theInt = setInterval(function(){
$crosslink.removeClass(&quot;active-thumb&quot;);
$navthumb.eq(curclicked).parent().addClass(&quot;active-thumb&quot;);
$(&quot;.stripNav ul li a&quot;).eq(curclicked).trigger(&#39;click&#39;);
curclicked++;
if( 6 == curclicked )
curclicked = 0;
}, 3000);
};
$(function(){
$(&quot;#main-photo-slider&quot;).codaSlider();
$navthumb = $(&quot;.nav-thumb&quot;);
$crosslink = $(&quot;.cross-link&quot;);
$navthumb
.click(function() {
var $this = $(this);
theInterval($this.parent().attr(&#39;href&#39;).slice(1) - 1);
return false;
});
theInterval();
});
</script>


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




Using jQuery Slider Featured Posts (glory)



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:

/* 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.



<!-- start slider script -->
<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>
<!-- end slider script -->


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 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 &#8216;Cinta Sejati&#8217; terus dicari dan digali. Manusia dari zaman ke zaman seakan tidak pernah bosan membicarakannya. Sebenarnya? apa itu &#8216;Cinta Sejati&#8217; dan bagaimana pandangan Islam terhadapnya?...</p>
</div><!--end featured-entry-->
</div><!--end panel-->
<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><!--end featured-entry-->
</div><!--end panel-->
<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><!--end featured-entry-->
</div><!--end panel-->
</div><!--end myslides-->
</div><!--end wrapper-myslides-->
<div id='nav-slides'>
<a href='#' id='prev'></a>
<a href='#' id='next'></a>
</div>
</div><!-- wrapper featured-->


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><!--end featured-entry-->
</div><!--end panel-->
<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><!--end featured-entry-->
</div><!--end panel-->
<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><!--end featured-entry-->
</div><!--end panel-->
</div><!--end myslides-->
</div><!--end wrapper-myslides-->
<div id='nav-slides'>
<a href='#' id='prev'/>
<a href='#' id='next'/>
</div>
</div><!-- wrapper featured-->



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





























































Create Featured Posts (Menu Slider) With JQuery




Create Featured Posts (Menu Slider) With 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




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:

/* 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.



<!-- Featured Gallery script -->
<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+">&amp;hl=en&amp;fs=1\"></param><param name=\"allowFullScreen\" value=\"true\"></param><param name=\"allowscriptaccess\" value=\"always\"></param><embed src=\"http://www.youtube.com/v/"+id+"&amp;hl=en&amp;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>
<!-- End Featured Gallery script -->


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


<!-- begin featured -->
<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&#8217;t using twitter as a way of generating free traffic to your website, you&#8217;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&#8217;s guide to CPA marketing profts for FREE!
That&#8217;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>
<!-- end featured -->



<!-- more -->


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




How To Add Auto Featured Posts Using JQuery Slider To Blogger



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:

/*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.



<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 src='http://safir85.ucoz.com/24work-blogspot/featured-post-s/stepcarousel.js'/>
<script type='text/javascript'>

stepcarousel.setup({
galleryid: &#39;board_carusel&#39;, //id of carousel DIV
beltclass: &#39;belt&#39;, //class of inner &quot;belt&quot; DIV containing all the panel DIVs
panelclass: &#39;board_item&#39;, //class of panel DIVs each holding content
autostep: {enable:true, moveby:1, pause:5000},
panelbehavior: {speed:500, wraparound:false, persist:false},
defaultbuttons: {enable: false, moveby: 1, leftnav: [&#39;http://i34.tinypic.com/317e0s5.gif&#39;, -5, 80], rightnav: [&#39;http://i38.tinypic.com/33o7di8.gif&#39;, -20, 80]},
statusvars: [&#39;statusA&#39;, &#39;statusB&#39;, &#39;statusC&#39;], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: [&#39;inline&#39;] //content setting [&#39;inline&#39;] or [&#39;external&#39;, &#39;path_to_external_file&#39;]
})

</script>


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 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'>
<!-- 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>
<!-- /board_item -->
</div><div class='board_item'>
<!-- 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&#8217;ala. Maka Allah pun tidak menyia-nyiakan keteguhan iman wanita ini. Ketika Fir&#8217;aun dan algojonya meninggalkan Asiyah, para malaikat pun datang menaunginya....</p>
<p class='more'><a href='#'>Readmore</a></p>
<!-- /board_item -->
</div><div class='board_item'>
<!-- 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&#39;, 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>
<!-- /board_item -->
</div><div class='board_item'>
<!-- board_item -->
<p><img alt='ummu fadhl' src='http://i40.tinypic.com/1qod9d.jpg'/><strong><a href='#'>Ummu Fadhl</a></strong> Fadhl Rodhiallahu &#39;anha masuk Islam sebelum hijrah, beliau adalah wanita pertama yang masuk Islam setelah Khadijah (Ummul Mukminin Rodhiallahu &#39;anha) sebagaimana yang dituturkan oleh putra beliau Abdullah bin Abbas Rodhiallahu &#39;anhu, &quot;Aku dan Ibuku adalah termasuk orang-orang yang tertindas dari wanita dan anak-anak....</p>
<p class='more'><a href='#'>Readmore</a></p>
<!-- /board_item -->
</div><div class='board_item'>
<!-- 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>
<!-- /board_item -->
</div>
</div>
</div>
</div>
<ul id='board_carusel_nav'>
<li id='board_carusel_nav_1'><a class='selected' href='javascript:stepcarousel.stepto(&#39;board_carusel&#39;, 1)'>1</a></li>
<li id='board_carusel_nav_2'><a href='javascript:stepcarousel.stepto(&#39;board_carusel&#39;, 2)'>2</a></li>
<li id='board_carusel_nav_3'><a href='javascript:stepcarousel.stepto(&#39;board_carusel&#39;, 3)'>3</a></li>
<li id='board_carusel_nav_4'><a href='javascript:stepcarousel.stepto(&#39;board_carusel&#39;, 4)'>4</a></li>
<li id='board_carusel_nav_5'><a href='javascript:stepcarousel.stepto(&#39;board_carusel&#39;, 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




Shoutmeloud 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




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:

.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&#039;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&#039;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.



<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/contentslider-n-b-l-t-r.js' type='text/javascript'/>


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='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&#8217;s BlackBerry Storm has stormed the market and has attracted the whole world. BlackBerry&#8217;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&#8217;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>


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


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


























jQuery Image Slider For Blogger / Blogspot




jQuery Image Slider For Blogger / Blogspot



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:

/*-------------------- 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.



<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='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'/>
<script src='http://safir85.ucoz.com/24work-blogspot/featured-post-s/mbt-slider-0-01-jis.js' type='text/javascript'/>
<script src='http://safir85.ucoz.com/24work-blogspot/featured-post-s/mbt-slider-0-02-jis.js' type='text/javascript'/>
<script src='http://safir85.ucoz.com/24work-blogspot/featured-post-s/mbt-slider-0-03-jis.js' type='text/javascript'/>

<script type='text/javascript'>
/* <![CDATA[ */
jQuery.noConflict();
jQuery(function(){
jQuery('ul.menu-primary').superfish({
animation: {opacity:'show'},
autoArrows: true,
dropShadows: false,
speed: 200,
delay: 800
});
});

jQuery(function(){
jQuery('ul.menu-secondary').superfish({
animation: {opacity:'show'},
autoArrows: true,
dropShadows: false,
speed: 200,
delay: 800
});
});

jQuery(document).ready(function() {
jQuery('.fp-slides').cycle({
fx: 'fade',
timeout: 4000,
delay: 0,
speed: 1000,
next: '.fp-next',
prev: '.fp-prev',
pager: '.fp-pager',
continuous: 0,
sync: 1,
pause: 1,
pauseOnPagerHover: 1,
cleartype: true,
cleartypeNoBg: true
});
});

/* ]]> */

</script>


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


<b:if cond='data:blog.pagetype != &quot;static_page&quot;'>
<b:if cond='data:blog.pagetype != &quot;item&quot;'>

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


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


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






































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










Blogger news