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

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.

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

]]>

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
Step 3: Now add the following code just before the tag.

And now click Save Template

Adding HTML Code

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

Step 4:

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

Add a Gadget of HTML/JavaScript type.

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

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

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

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

Install Mac OS X on Intel/AMD PC using iATKOS v7

How to remove "showing post with label" in Blogger

How to add Google Buzz to Blogspot blog

Chat live with your blog visitors using Yahoo Pingbox

Install Mac OS X on Intel/AMD PC using iATKOS v7

Description goes here, this is just a test description....read more

How to remove "showing post with label" in Blogger

Description goes here, this is just a test description....read more

How to add Google Buzz to Blogspot blog

Description goes here, this is just a test description....read more

Chat live with your blog visitors using yahoo

Description goes here, this is just a test description....read more

And now click Save

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

Simple jQuery Featured Content Slider for Blogger Blog

How to Install This Widget on Blogger?

Steps...

A. Adding CSS Theme Code

B. Adding Script Code

C. Adding HTML Code

Adding CSS Theme Code

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

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

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

]]>

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
Step 3: Now add the following code just before the tag.

And now click Save Template

Adding HTML Code

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

1. Sign into Blogger dashboard

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

<-! Slide #1 Starts-->

IMAGE-LINK"/>

TITLE-OF-THE-SLIDE

TEXT-OF-THE-SLIDE

<-! Slide #2 Starts-->

IMAGE-LINK"/>

TITLE-OF-THE-SLIDE

TEXT-OF-THE-SLIDE

<-! Slide #3 Starts-->

IMAGE-LINK"/>

TITLE-OF-THE-SLIDE

TEXT-OF-THE-SLIDE

Prev

1

2

3

Next

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:

IMAGE-LINK"/>

TITLE-OF-THE-SLIDE

TEXT-OF-THE-SLIDE

Also you have to add

4
after
3
and so on for next slides.

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

How To Add Smart Jquery Featured Slider to Blogger / Websites

How to Install This Widget on Blogger?

Steps...

A. Adding Script Code

B. Adding HTML Code

Adding Script Code

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

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

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

Step 2:And find the code
Step 3: Now add the following code just before the tag.

And now click Save

NOTE : Replace,

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

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

Look at the example below:

You are done.

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

How To Create JQuery Featured Content Slideshow

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY5d3Ji1KetlYA3PB7H6KOc01NoK0ZE4QGs3dc57IwS_-bKsukTsyWKGpsQcGG63NK6OV04fre2ZpxZ3rO7gwEpzJwv5xdp3SSV2XZGJ8K_1BOCXrIdXjsQVRAlr754puu12MCqmfP15g/s1600/1.jpg" title="This is featured post 1 title" alt="Replace This Text With Your Featured Post 1 Description." />

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqq8wB-zz2WvxArtrMnRcSo-jHv16MIyrmHltY2_pvBNVod-64WPg7JxhyphenhyphenMrsKDDLBMZq8h0QOEI3uDMH0oCTB0vl1pf9K5mOJZXjRXzezGg7ktaWw0ILB3FPv0qz9xhxlaUEFCOruIOQ/s1600/2.jpg" title="This is featured post 2 title" alt="Replace This Text With Your Featured Post 2 Description." />

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMjwdXCYVvzfo2ZtJPttlFjIza-EwJm50xMapemTr5680ZLeEF8DogzQ72Rlb9psXUe_JndOyYzh1XKT7Etn8ak5-x7n0f2R7PYNx0rLjndmhLWgWZJGqN1HrQZHtVgAM5Z0HuvApZVdM/s1600/3.jpg" title="This is featured post 3 title" alt="Replace This Text With Your Featured Post 3 Description." />

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig5lEL5GUFDmluBiJGikcecDjUNUrhwXJ3WQxKVCdvkifRlgwtlCVf978B5CI-L0vSH-QexZ4ClJXfBYWOKqAljxh5810nOu-y7s0eT4Ip1FQZ-UpcvF5AEkcCPBmXaUkCfSPY8yiQ1-8/s1600/4.jpg" title="This is featured post 4 title" alt="Replace This Text With Your Featured Post 4 Description." />

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

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

Adsense Tips And Secrets

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
Read More →

Use Adsense Section Targeting

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:
Read More →

Remove Low paying Adsense Ads

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.
Read More →

Comment Box is made DO FOLLOW

Above Title Means comments on this blog are made do follow and will be spidered.Comments field in blogger are made NOFOLLOW by default.This is done as a measure to reduce spam.To Become comments on your blog are made "do follow",follow the easy steps below.
1.Log in to your dashboard----> layout- ---> Edit HTML
2.Click on "Expand Widget Templates"
3.Scroll down to where you see this:-

4.Replace it with below code.

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... (more...)

How To Add jQuery Images Slider to Blogger

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

And now click Save

Note: Host above 2 images yourself.

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

How To Add MooTools Featured Content Slider to blogger

And now click Save Template

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

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

Adding HTML Code

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

1. Sign into Blogger dashboard

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

slider-stage">

slider-buttons">
Previous | Next

And now click Save

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

Excellent Content SlideShow Slider to Blogger / WebSite

]]>

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhX4F-xx5H5aMFb0vbeqCgWs-sDo3dhhSMAr3_je_sOD1U4Rc5Fl_YY1RKJ86g_uwrahScCToaM8uFl4PYztmK6Vi-UkJjv2H_UbkQXrCULJ3dy1pvk6sxiM_A5J1on8i8QZvhh4SyosAb8/) left center no-repeat}
#imgnext {right:0; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi25hUI4N1ToiFXhKMd4NTAviDn3DaBzuFX2ibN2ieAHeMFdI1mgUhHDKkXltP7kULLHcbClmLLUf4ugK0I6zsD6gEvGeEFQuXiQOzictwrB6MbjGOnhlIQpGsfpJAqqhqeaHiGyHT9xKPH/) right center no-repeat}
#imglink {position:absolute; height:306px; width:100%; z-index:100; opacity:.4; filter:alpha(opacity=40)}
.linkhover {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg20GO551zg1GI-CGleEd_zkbMi0ngtkuzIN8OB2Luya2Of2wWxjn9fIXMcZFGkG_gpjRXxjQFkg47uL4Kj4KFDkUy-K7RKfAl1CWoTubsCN95BDd6tmfUvP7CdyzpEUWD1355FP4sjNh29/) center center no-repeat}
#thumbnails {margin-top:15px}
#slideleft {float:left; width:20px; height:81px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivny-69faEcsiD1hnVs57DWEwCPdZ-YsXgyN0DHLwL262RAAr6gjokcxAhSjsC3IkppCgLgz4y2khFB0kgAJyQsnZ-z2hA8Vc_n3wOLCa6T4eSDLC2Q_NkyEpGFQkEkXaevy7o9wm9OXQf/) center center no-repeat; background-color:#222}
#slideleft:hover {background-color:#333}
#slideright {float:right; width:20px; height:81px; background:#222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiE80cdX7Ifh3nMIkpX8bDLa8d22dG_FiUXWJspXvxSAEujW9XqJ4Cj0pfLBdog7UxbgKdfa9l3wCqjgAFCQQYFXqUq1lOb8AGszCcG69q6SpSKGAp0jBPA2uwCDq0GJ6M7LAdwS18uE_45/) 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
Step 3: Now add the following code just before the tag.

And now click Save Template

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

Adding HTML Code

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

1. Sign into Blogger dashboard

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

Enter Title 1 Here

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBjGVzJDoiaTeYQASIQDZjsr3yiKVJPUfLu5O4t5uloIMAHF_oBjlcQ3sUNRL0C4Vl92C68ik-3s1JpR8DfegYXs1rFU2uZnrvK1LbyW_jiuqp1CKiifczbi9oZH9BqEYxVnaiAx6TwfqV/+1+big.jpg

Enter Description 1 Here.

Enter Title 2 Here

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAi1QmeQsQ7Id6CgYJ3oiniB8BbTDOFAkFA0YHRWKXkqrvJisBoCXeTqV9mXajn7WG9WXrRdldYsljP3cilgnNHHIZfqzGYAfJPj709-LtEi1E2B9NLAvIctQhtAU5-FoncQxRvEtXWa32/+2+big.jpg

Enter Description 2 Here.

Enter Title 3 Here

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPDFvZ0OM8g9GPzNTGQcKwSst23ZSD6yinTfTGlEc1LMWR7JnWTvI80f1VrPdrbmIU8C6iE4pNqKgi-Frl7NAeMR46QjgBy2AKJlG8bfRREuvZnEsbWxAjeFKL9OtXES2anoh5k1uqvdzZ/+3+big.jpg

Enter Description 3 Here.

Enter Title 4 Here

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoqrLstpm5GP-1FWIVg8KWfC98sZEivls6ePWImlHiByLDFiPtYtEjvTjtaNWzVNFYGRUeRtb2HZiPo2PuAvatwxl0o86gNYabUGoifWOB4eGrjyC1QFZVS7644NovdrNwyPfNHGBDsGn5/+4+big.jpg

Enter Description 4 Here.

Enter Title 5 Here

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp_gyPxdUMNC50BgNUygC0lrpOSxvD9Y9nh3VcylcWjfH7PCtP42uu-rJ-9tjlOo-Wlx_StAAozFRuMN_QYKLq_oHM_KRR0Yc7VQFJdBTlFTu3sBaUpvZeoAemuZI4-qVuSTa8PHeQNQFD/+5+big.jpg

Enter Description 5 Here.

Enter Title 6 Here

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm92jpzYoUpFOXc4OwTUxiROSPiu2zea_SR4oiXasT4aHiewTsfeKfhlAEZdMbHqUmqVCX6Qga1bRtJX0MDjqFaQGsQnN_O3qdnkAXTxVLIWeULdbaXTMWHtpYSDYK4EPEcM5e6hju5eMO/+6+big.jpg

Enter Description 6 Here.

Enter Title 7 Here

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_h__JSDb8hpLE7dE9gHXHxbehyphenhyphenV6tEQCvwpsqCO6dXad_OGoieb_PiOZ2XIMkqFIvfcAZJLCp9NBRj73LrukMpoVWB-K3PzS46f7JS3FZvr5HkHcc_gtzXWdIo6N6nJhe9hF4LaCBUQLX/+7+big.jpeg

Enter Description 7 Here.

Enter Title 8 Here

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFLzh9Q6LmFTgKba8LEsGC6QLv5rlztFlUU0sydeoM6Hpc3EUv-CCL4utGMihlZ-OaQhAPR9Pvf8qbhRTwgji1Vl9DrXzefgU7IlKCWq1hdNijdChuIP3MFdvOl1dMAEZlYooKcR1e9TQS/+8+big.jpg

Enter Description 8 Here.

Enter Title 9 Here

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS823yI7qjMOfH2CYiwGjZtJ6uDMEs8y2ATogJMvD5ZGwYdAATjsCXrrA0JPJaiCyLaocjBzkNK81l5H5pgxRYHk1GthZdBIRCIugy90othbLfYrKUYCuat_aI3ipgEXDoLMZ8c9CDE28q/+9+big.jpg

Enter Description 9 Here.

And now click Save

Featured Images Slideshow Slider to Blogger / Websites

And now click Save Template

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

Adding HTML Code

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

1. Sign into Blogger dashboard

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

IMAGE-1-LINK') center left no-repeat" class="contentdiv">

IMAGE-2-LINK') center left no-repeat" class="contentdiv">

IMAGE-3-LINK') center left no-repeat" class="contentdiv">

IMAGE-4-LINK') center left no-repeat" class="contentdiv">

IMAGE-5-LINK') center left no-repeat" class="contentdiv">

IMAGE-1-THUMBNAIL-LINK"/>

IMAGE-2-THUMBNAIL-LINK"/>

IMAGE-3-THUMBNAIL-LINK"/>

IMAGE-4-THUMBNAIL-LINK"/>

IMAGE-5-THUMBNAIL-LINK"/>

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

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

YOUR-LINK-HERE">
Crysis : Download Full Version

YOUR-LINK-HERE">
Halo 3 : Play Game Online

YOUR-LINK-HERE">
Avatar : Watch Movie Now !!!

YOUR-LINK-HERE">
Call Of Duty 4 : Get Here

And now click Save

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

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

How To Add Featured Post Content Slider to Blogger

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

And now click Save Template

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

Adding HTML Code

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

1. Sign into Blogger dashboard

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

URL-of-Post-1" title="#">Title-of-Post-1

Slide 1 Description [...]

Slide-1-Image-Address" alt="" />

URL-of-Post-2" title="#">Title-of-Post-2

Slide 2 Description [...]

Slide-2-Image-Address" alt="" />

URL-of-Post-3" title="#">Title-of-Post-3

Slide 3 Description [...]

Slide-3-Image-Address" alt="" />

URL-of-Post-4" title="#">Title-of-Post-4

Slide 4 Description [...]

Slide-4-Image-Address" alt="" />

URL-of-Post-5" title="#">Title-of-Post-5

Slide 5 Description [...]

Slide-5-Image-Address" alt="" />

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
Step 3: Now add the following code just before the tag.

Now again scroll down to where you see below code:

And immediately before it, paste this code:

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

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

And now click Save Template

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

How To Add jQuery Featured Content Slideshow to Blogger

alt="Social Bookmarks For Bloggers" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwWi7m1_d374AIBsczuJUOmuRa_7g9HViCQIHcl0bWNjMur4b1iZN-1W2mzocajggSd_U-nlFQvh4PxgNYskv46_6QuY8gPZ4awT5wMLeeQ80iBfSRFsmhu4MG4zp3eeHDu9AYwTkMwjFJ/+Bookmarks.jpg"/>

And now click Save

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

How To Add jQuery Featured Content Slider to Blogger

POST-TITLE-HERE

POST-DESCRIPTION-HERE

POST-TITLE-HERE

POST-DESCRIPTION-HERE

POST-TITLE-HERE

POST-DESCRIPTION-HERE

POST-TITLE-HERE

POST-DESCRIPTION-HERE

POST-TITLE-HERE

POST-DESCRIPTION-HERE

POST-TITLE-HERE

POST-DESCRIPTION-HERE

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

]]>

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlS_Gf48EC6wg_IeeaQk-62nrMKhkHlYdcMmxzVHnw4KiJDOZxqjDLKxAon9tl8GoK7Ecbo9MYj62AA50vYN4N63H3eqqknnc-reXOaO-ZO1pJmGGTnlSAZ0XiDxrY93oYg3sKh33vXyTv/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0lchpGsQb5ZCgwLaEW9ANwRDsoDsgPyJSa9UjWX8qq7nLBNIPx_Vh4IDNfBuEl68AuFYeU-uH3c_ULWfAiXhfx4o_pgN8ai9kMMdnOMR8skoEhFkbM2KpRe7uP5KWWMou7mw75rNH0KB8/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4v1P-jOTmY36KYwDyfzezV2dt5QQUlyrRoCisT6kOkAoXC9PqAc5YpXUZSi12qb9S7zSp0NuSWk1k2bF9VLYOjmDD_giXpYTjgXh8MGzsJJ0f0DpCK6KtrN8q0H24ZlTu2MenONOWCjH4/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
Step 3: Now add the following code just before the tag.

And now click Save

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

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

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

Adding jQuery Posts Slider To Blogger Blog

Adding jQuery Posts Slider To Blogger Blog

]]>

And immediately before it, paste this code:

#slider {

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFkvmjhbsCglSVrdnIZp1B2YTSfLL0G2yopk20HGXcxF4rYtpq3kNylJFJWc1sKwZWoBX0mN5rdy9HyU_MdiB-lUQvOfjiSIHQSWCDQlgVIJ218Qu5WkfIOhmoltOrM0H0a_l5q9aNNXeG/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
Step 3: Now add the following code just before the tag.

Top 5 Blog Search Engines

TEXT-OF-THE-SLIDE-1.

Read More »

Add Tweet Button with Tweets Counts in Blogger Posts

TEXT-OF-THE-SLIDE-2.

Read More »

Download BitDefender 2010 All products with one-click direct download links

TEXT-OF-THE-SLIDE-3.

Read More »

Personas for Firefox - Light weight Skins for Firefox

TEXT-OF-THE-SLIDE-4.

Read More »

Download Windows 7 Transformation Pack for XP and Vista

TEXT-OF-THE-SLIDE-5.

Read More »

Can my Computer run Windows 7? Ask Windows 7 Upgrade Advisor

TEXT-OF-THE-SLIDE-6.

Read More »

Do You Know Where Your Blog's Content Is Going?

TEXT-OF-THE-SLIDE-7.

Read More »

World's Fastest Way to Download Youtube Videos

TEXT-OF-THE-SLIDE-8.

Read More »

"Submit Blogger Blog's Sitemap to Top Search Engines

TEXT-OF-THE-SLIDE-9.

Read More »

Follow Simple Tips to Drive Traffic to your new Blog

In TEXT-OF-THE-SLIDE-10.

Read More »

Get 1000's of Twitter followers in one button click

TEXT-OF-THE-SLIDE-11.

Read More »

Fastest way to Listen and Download Mp3 Songs

TEXT-OF-THE-SLIDE-12.

Read More »

Add Live Traffic Feed Widget to your Blogger Blog

TEXT-OF-THE-SLIDE-13.

Read More »

Fastest way of Social Sites Bookmarking

TEXT-OF-THE-SLIDE-14.

Read More »

How to Insert Adsense Ads inside Blogger Posts

TEXT-OF-THE-SLIDE-15.

Read More »

Download Google Chorme 4 Offline Installer

TEXT-OF-THE-SLIDE-16.

Read More »

UXTheme Multi-Patcher - Install Windows Themes/Visual Styles with a Double Click

TEXT-OF-THE-SLIDE-17.

Read More »

Increase Torrent Download Speed- The Easy Way!

TEXT-OF-THE-SLIDE-18.

Read More »

Increase Your Blog's Page Views Upto 300 Percent By Linkwithin

TEXT-OF-THE-SLIDE-19.

Read More »

TEXT-OF-THE-SLIDE-20.

Read More »

Prev
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

Next

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.

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

IMAGE-LINK"/>

TITLE-OF-THE-SLIDE

TEXT-OF-THE-SLIDE

IMAGE-LINK"/>

TITLE-OF-THE-SLIDE

TEXT-OF-THE-SLIDE

IMAGE-LINK"/>

TITLE-OF-THE-SLIDE

TEXT-OF-THE-SLIDE

.

.

.

.

Prev

1

2

3

Next

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

Moving jquery image slider for featured content in Blogger

]]>

And immediately before it, paste this code:

#myslides{

background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-Ns4dhMmqOUOfeATFkzZvV7h-jpF6XkxBzbWBSX_CVy1G2Tyrt3zll_zQM8vH3DVcE8Og6UBX3LrybuKTz9apuSLuWi_73cUeoXtc2B4-LL681o9QZN-oNrtMjxEneSdqkCegyprV_g/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
Step 3: Now add the following code just before the tag.

And now click Save

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

Make A Simple Featured Content SlideShow Using JQuery

]]>

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
Step 3: Now add the following code just before the tag.

SlideShow Featured Content Using JQuery

Featured Content Slider Using JQuery!

TEXT-OF-THE-SLIDE-1.

Read More »

Thumbnail With Caption Using Simple JQuery

TEXT-OF-THE-SLIDE-1.

Read More »

Multi Level Drop-Down Menu Dengan CSS dan JQuery!

TEXT-OF-THE-SLIDE-1.

Read More »

Super Sexy Bookmarks Widget for Blogger !

TEXT-OF-THE-SLIDE-1.

Read More »

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

]]>

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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQ6j2dy7TZB922mP5FEKgKfBFCBeDlB8XaoTlaRH6TjaeBxcKk7PL3StnvzHBGFdmjJ8iK5RIqp7xi-co7MeapBZ_wP7Vf7IsYKNqdBXN3LIFqwMMzm3ZPLDArd_KN36BfwiqixIKKXCs/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
Step 3: Now add the following code just before the tag.

Kerinduan Pada Baitullah

6 Kerusakan Valentine day's

Keajaiban Do'a

Wanita yang Lisannya Al-Qur'an

Kerinduan Pada Baitullah

Lorem ipsum dolor sit amet, to cancel reply. Used Cars. ....read more

6 Kerusakan Valentine days

Vestibulum leo quam, accumsan nec porttitor a, euismod ac tortor. Sed ipsum lorem, sagittis...read more

Keajaiban Do'a

liquam erat volutpat. Proin id volutpat nisi. Nulla facilisi. Curabitur facilisis sollicitudin ornare....read more

Wanita yang lisannya al-qur'an

Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus ....read more

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

]]>

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
Step 3: Now add the following code just before the tag.

And now click Save

credit by abu-farhan

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

Using jQuery Slider Featured Posts (glory)

]]>

And immediately before it, paste this code:

/* featured fade */
#wrapper-featured{
padding:10px 0 ;
width:650px;
height: 326px;
margin:0 ;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghUPU9V7fcUqLhS0vq1Rzt9W-2Y7dUJxpLTcF5fJXftKXdKfB0pOBJWU5aMXsuuZxVrtFZRM_7gUpgcGRuAN_mTuS2VUtdJOTdLZ9AnACOV5P9pxQxn-NdWIM5qaLZXiy1ZwHQTw9GImAT/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy8C7FkWmHXo70T5R-TsPETk-JpXvEfAK_ITurdI5DTybUqOZnlP6w4ZAyHMTb1J9eQQnD3esYtaT6dP36eZo78XGLotWIotxjirX6ZDuiWynMA9A0ld7GK7VUJ_-eiEKPwDSAylHvc4qV/s400/prev.jpg) no-repeat;
}
#nav-slides a#prev:hover{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZzOrU7vXwRRzGLkANsk4DZgNcvIRhbpfnsLJo0czraXrL_TPH9cB3IcO7JW-aRLHWBgQvo0BpwVrUW5LoFist9Qzbpn8H4CX2OQypfefdN46Ld5CLzbCT2vIeHRkc2QJJmaVJBWhEwZAJ/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSB4zzZ1IEW_2YtOIDNn-gUnifDaKhAWyh6tJy1h0rpMaAHLiEtdMVaGNd1B1mDZrarWqJqZwE4LdXrkZpwaysZacHyPTdGrf7ne7idHOUTQzNXcIWBx_TmfQfhYzzgKP1hjYrGreUk_1x/s400/next.jpg) no-repeat;
}
#nav-slides a#next:hover{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKSMsq_tzAQnQSpzHuc6HNEtUd_YVZfK5jTuKJ1BQtGBt6V2LLD-OcMSpu4hg8TSjcOQnwgXKbIR42I2bm9vw9A9wLViEXF0SjWEEp3VcviNbZH1rJSfYn-LlR10YqfFdgFlmn9lCiHHMK/s400/next_hover.jpg) no-repeat;
}

Adding Script Code

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

Step 2:And find the code
Step 3: Now add the following code just before the tag.

Cinta Sejati

Makna ‘Cinta Sejati’ terus dicari dan digali. Manusia dari zaman ke zaman seakan tidak pernah bosan membicarakannya. Sebenarnya? apa itu ‘Cinta Sejati’ dan bagaimana pandangan Islam terhadapnya?...

Cinta Sepanjang Masa

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

Cinta Sederhana

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

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.

POST TITLE

WRITE YOUR POST DESCRIPTION HERE

POST TITLE

WRITE YOUR POST DESCRIPTION HERE

POST TITLE

WRITE YOUR POST DESCRIPTION HERE

Create Featured Posts (Menu Slider) With JQuery

]]>

And immediately before it, paste this code:

Adding Script Code

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

Step 2:And find the code
Step 3: Now add the following code just before the tag.

Twitter Traffic

If you aren’t using twitter as a way of generating free traffic to your website, you’re missing out on one of the easiest marketing strategies ever to hit the Internet.
With so many social communities online, it is easy to see why Internet Marketers with limited time have been drawn to the simplistic interface and speediness...

11th October 2009
1 comment
Read full

Email Marketing

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

1st October 2009
1 comment
Read full

Get paid to blog at today.com

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

25th March 2009
4 comments
Read full

Free download CPA marketing guide

Gauher Chaudhry, the man behind Pay Per Click Formula, has just released an 89 page insider’s guide to CPA marketing profts for FREE!
That’s right, FREE as in cost you zero cents to get the most comprehensive guides on CPA marketing and learn the way to earn as much as $100,000 per day with CPA...

18th March 2009
10 comments
Read full

Delicious ice cream post

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

3rd December 2008
1 comment
Read full

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

]]>

And immediately before it, paste this code:

/*board*/
#board{
width:977px;
height:276px;
overflow:hidden;
margin:0 0 0 12px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkFuwKGPXdTrpQip-J0PRhfrTuJntwV30YMXvECXu4zeUd-HyjKKHq7m0BMc_OdeZAvgncQPqHvrfXdkstMe2ZI6avJTQdGxXj8g9gfFEhIgJ52snvyB3_a_GDj92e01nYJeb0jcbgHi9f/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
Step 3: Now add the following code just before the tag.

Featured Posts

Shafiyyah Binti Abdul MuththalibShafiyyah 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.....

Asiyah, Wanita yang Ditampakkan Surga UntuknyaIman yang berangkat dari hati yang tulus, apapun yang menimpanya tidak sebanding dengan harapan atas apa yang dijanjikan di sisi Allah Tabaroka wa Ta’ala. Maka Allah pun tidak menyia-nyiakan keteguhan iman wanita ini. Ketika Fir’aun dan algojonya meninggalkan Asiyah, para malaikat pun datang menaunginya....

Fathimah binti Al-YamanAl-Hasan dan Al-Husain dinamakan anak Fathimah-Fathimah, karena ibu keduanya ialah Fathimah Az-Zahra', nenek keduanya adalah Fathimah binti Asad, dan nenek Nabi Shallallahu Alaihi wa Sallam dari jalur ayah beliau ialah Fathimah binti Abdullah bin Amr bin Imran bin Makhzum....

Ummu Fadhl Fadhl Rodhiallahu 'anha masuk Islam sebelum hijrah, beliau adalah wanita pertama yang masuk Islam setelah Khadijah (Ummul Mukminin Rodhiallahu 'anha) sebagaimana yang dituturkan oleh putra beliau Abdullah bin Abbas Rodhiallahu 'anhu, "Aku dan Ibuku adalah termasuk orang-orang yang tertindas dari wanita dan anak-anak....

Ummu Haram Binti MalhanUmmu 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....

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

]]>

And immediately before it, paste this code:

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

Adding Script Code

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

Step 2:And find the code
Step 3: Now add the following code just before the tag.

jQuery Image Slider For Blogger / Blogspot

]]>

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRFjTbfbkMumrsiMhg5Hel5vz2I-hKvZxfW4r1BKWSewQKh9dOmRFXd21I4TbyrhyphenhyphenOvU4lnvXezDLulmE3THYTdoHWNoLBpV3111xUrxnzfGySM2BUsZVEBcaTbfljYJga2mGwnKKIQrk/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVJnA7aVZ5GbPtQM-3WEZQs06F8fAQ5-dHdrEG3bmQaWKBj5rcnfUt_t-xoKfHKQZn2xgs1btYymfTkgIuvlarlpYOToeT47ro6_CJpuX159la2j1LeBazGF4yjM_AnlqiCvqGOew7_Q4/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2S7dURR2w2WNb1BTkdOKlZAdqNlx5fRaxASusou4PVMaoZCOjGYKSx5eAIukJW5JsY35FuKQzakP7u5PkFIVY-7xMRQ8aQxZRNlU1uGDjnYL55fOkIREmiGRHZK822tix8dfHwiiJtXA/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
Step 3: Now add the following code just before the tag.

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

Wednesday, February 22, 2012

17+ Featured Content Slider for Blogger Using jQuery

Enter Title 1 Here

Enter Title 2 Here

Enter Title 3 Here

Enter Title 4 Here

Enter Title 5 Here

Enter Title 6 Here

Enter Title 7 Here

Enter Title 8 Here

Enter Title 9 Here

var startposts = 0; numposts = 1; var showposttitle = true; showpostdate = false; var showpostsummary = false; var numchars = 0; <b>http://bdlab.blogspot.com/</b></span>feeds/posts/default?orderby=published&alt=json-in-script&callback=rp"><br />

var startposts = 1; numposts = 2; var showposttitle = true; showpostdate = false; var showpostsummary = false; var numchars = 0; <b>http://bdlab.blogspot.com/</b></span>feeds/posts/default?orderby=published&alt=json-in-script&callback=rp"><br />

var startposts = 2; numposts = 3; var showposttitle = true; showpostdate = false; var showpostsummary = false; var numchars = 0; <b>http://bdlab.blogspot.com/</b></span>feeds/posts/default?orderby=published&alt=json-in-script&callback=rp"><br />

var startposts = 3; numposts = 4; var showposttitle = true; showpostdate = false; var showpostsummary = false; var numchars = 0; <b>http://bdlab.blogspot.com/</b></span>feeds/posts/default?orderby=published&alt=json-in-script&callback=rp"><br />

var startposts = 4; numposts = 5; var showposttitle = true; showpostdate = false; var showpostsummary = false; var numchars = 0; <b>http://bdlab.blogspot.com/</b></span>feeds/posts/default?orderby=published&alt=json-in-script&callback=rp"><br />

Customizations

Featured Content Slider Using JQuery!

Thumbnail With Caption Using Simple JQuery

Multi Level Drop-Down Menu Dengan CSS dan JQuery!

Super Sexy Bookmarks Widget for Blogger !

Featured Posts

No comments:

Post a Comment