Bismillah Alhamdulillah

I have received many comment ask about how to show my popular post only in home page. actually this trick is very easy many blogger already made tutorial about this. You can search from google. The method is usng if conditional from blogger.

if you want show all section you don’t have to ‘Expand Widget Template’
find this

<b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'>
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'/>
</b:section>

Change to this

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'>
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'/>
</b:section>
</b:if>

From demo click any posts and you can’t see Popular post widget anymore

Now I’ll show this tricks by using New Blogger Dashboard

Click Template from Dropdown of your Blog

Click edit HTML

Click Proceed

Search :

<b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'>
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'/>
</b:section>

Replace with

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'>
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'/>
</b:section>
</b:if>

Lightbox now already in blogger, actually this widget already in our blogger for the last week, we don’t have to install anything, the script will search any element which is image and we can click the image to show the Lightbox.

The Script already install in your blogger template, the main script and CSS are :
The Libghtbox script
http://www.blogger.com/static/v1/widgets/931580185-widgets.js

http://www.blogger.com/static/v1/jsbin/3312549355-lbx.js

The CSS lightbox
http://www.blogger.com/static/v1/widgets/1100314300-widget_css_2_lightbox_bundle.css

Now you don’t have to install any Lightbox anymore

The Feature of This Lightbox :

• No need to install
• Not use jQuery
• Collect all image in one post and show in lightbox slider

Maybe only that you can read completly officially from the blogger from this link

Your Images never look so good

If you want to remove this widget you can follow this discussion

How to Remove Lightbox for Blogger

Bismillah, Alhamdulillah, Based on request from visitor about book flip slideshow , so I made This widget for blogger. result of this widget can show image inside of your posts automatic to become book flip slideshow for blogger.
You can see the slider from the demo link :

Follow this step to use this gadget

Apply Gadget

Design -> Click on “Add a Gadget” -> HTML/JavaScript type.

<script type="text/javascript">
 // 7 variables to control behavior
 var Book_Image_Width    =140;
 var Book_Image_Height   =225;
 var Book_Border         =true;
 var Book_Border_Color   ="gray";
 var Book_Speed          =15;
 var Book_NextPage_Delay =1500; //1 second=1000
 var Book_Vertical_Turn  =0;
 // variables for content
 var random_posts        = true; // random posts
 var numposts_gal        = 10;   // number of posts
 </script>
 <script src="http://catur-at-abu-farhan.googlecode.com/svn/trunk/galeryposts-bookflip.js" type="text/javascript"></script>
 <script src="http://catur-at-abu-farhan.googlecode.com/svn/trunk/bookflip.min.js" type="text/javascript"></script>
 <div id="Book" style="position:relative">
 <img src="http://i1133.photobucket.com/albums/m596/abu-farhan/bookflip/placeholder.gif" width="144" height="227">
 </div>
 <script src="http://abu-farhan-demo.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts"></script>
 <script type="text/javascript">
 ImageBook();
 </script>

Demo

if you have any questions please leave a comment….thx u

Alhamdulillah… by Catur

Bismillah, Alhamdulillah. Long time ago I made Popular post for blogger using Json But now blogger made popular post from Blogger Stats . Now I made Popular Post for Blogger with animation. This widget I made from my Recent Post with animation using simple spy.

This script very easy to install, you only have to put the script to the new Gadget

• Login to Blogger Dashboard and navigate to Design – Page Elements
• Click “Add Gadget” and Choose “Popular Posts”, Customize the gadget with more than 4 popular post will show–> “Display Up to” … Posts
  
  (If you already have this gadget skip this step)
• After you have Popular Post Gadget “Add Gadget” again and select “HTML/Javascript”
• Put all script bellow to the “Content” of HTML/Javascript Gadget
• Done- your popular post now with animation

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

#PopularPosts1 {
 overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:400px;

}

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

#PopularPosts1 li {
 width:208px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:80px;
overflow: hidden;
background:#fff url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg) repeat-x;
border:1px solid #ddd;
}

#PopularPosts1 li .item-title {
    color:#A5A9AB;
    font-size:1em;
    margin-bottom:0.5em;
}

#PopularPosts1 li .item-title a {
 text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}

#PopularPosts1 li img {
 float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}

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

#PopularPosts1 .item-snippet a,
#PopularPosts1 .item-snippet a:visited {
    color:#3E4548;
    text-decoration: none;
}

#PopularPosts1 .spyWrapper {
    height: 100%;
    overflow: hidden;
    position: relative;
}

#PopularPosts1 {
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}

.tags span,
.tags a {
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
}

a img {
    border: 0;
}

-->
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(function () {
    $('.popular-posts ul').simpleSpy();
});
</script>
<script src="http://accordion-for-blogger.googlecode.com/svn/trunk/simplespy.js" type="text/javascript"></script>

Don’t Copy This Post because this Original from my Blog (www.abu-farhan.com)
Please read Copyright of All post at the Footer.

Roundabout is very famous jquery plugin that make content slider look like 3d rounding. This plugin that converts a structure of static HTML elements into a highly customizable turntable-like interactive area. Now I make this plugin automatic catch image from the post of blogger to Content Slider of Round About.

you can see the slider for blogger from this image

Demo

Now Follow all of these steps

Step 1 : Apply Style

1. Login to Blogger Dashboard and navigate to Layout > Edit Html
2. Don’t click the checkbox which says ‘Expand Widget Templates’
3. Find this

]]></b:skin>

Then insert the script in front of it

/* START
--------------------------------------------------------------------
 Roundabout Content Slider using jQuery for blogger
 By http://www.abu-farhan.com
--------------------------------------------------------------------
 Roundabout
*/
#featured                            {margin:10px 0 30px 0;}
#folio_scroller_container            {margin-top:35px; margin-bottom:40px; height:auto;}
#folio_scroller_container .roundabout-holder {list-style:none; height:400px; margin:0px auto 20px auto;}
.roundabout-holder                    {list-style:none; width:400px; height:250px; margin:0px auto;}
.roundabout-moveable-item             {font-size:12px!important;
/* Resize Image*/
height:180px;
width:350px;
/*-------------*/
cursor:pointer; padding:5px; border:1px solid #aaaaaa; -webkit-border-radius:5px; -moz-border-radius:5px; background:#f9f9f9;}
.roundabout-moveable-item img         {height:100%; width:100%; background-color:#FFFFFF; margin:0;}
.roundabout-in-focus                 {cursor:auto;}
.roundabout-in-focus:hover            {-webkit-box-shadow:0px 0px 20px #787878; -moz-box-shadow:0px 0px 20px #787878; background:#f9f9f9;}
.roundabout-holder span                {display:none; font-size:12px;}
.roundabout-in-focus:hover span        {display:inline; position:absolute; bottom:5px; right:5px; padding:8px 20px; background:#f9f9f9; color:#000000; z-index:999; -webkit-border-top-left-radius: 5px; -moz-border-radius-topLeft: 5px; font-size : 12px;border-left:1px solid #aaaaaa; border-top:1px solid #aaaaaa; }
.roundabout a:active,
.roundabout a:focus,
.roundabout a:visited                {outline:none; text-decoration:none;}
.roundabou li                         {margin:0}
a img                                {border:none; outline:0;}

/* END
--------------------------------------------------------------------
 Roundabout Content Slider using jQuery
 By http://www.abu-farhan.com
--------------------------------------------------------------------
 Roundabout
*/

Step 2 : Apply Javascript

Find This :

</body>

Then insert the script in front of it

<!-- jQuery -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'/>
<script src="http://catur-at-abu-farhan.googlecode.com/svn/trunk/jquery.roundabout-1.1.min.js" type="text/javascript" charset="utf-8"></script>
 <script type="text/javascript">
 jQuery(document).ready(function($) {
 var interval;
 $('#featured ul')
 .roundabout({
 duration: 600 }
 )
 .hover(
 function() {
 // oh no, it's the cops!
 clearInterval(interval);
 },
 function() {
 // false alarm: PARTY!
 interval = startAutoPlay();
 }
 );
 // let's get this party started
 interval = startAutoPlay();
 });
 function startAutoPlay() {
 return setInterval(function() {
 jQuery('#featured ul').roundabout_animateToNextChild();
 }, 5000);
 }
 </script>

Step 3 : Apply Gadget

Design -> Click on “Add a Gadget” -> HTML/JavaScript type.

<script style="text/javascript" src="http://catur-at-abu-farhan.googlecode.com/svn/trunk/galleryposts-roundabout.js"></script><script style="text/javascript">
 var numposts_gal = 6;
 var random_posts = false;
</script>
<script src="http://abu-farhan-demo.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts"></script>

Demo

In my previous post, i said to give you a new css styles for this nivo slider.
This time i will give you a new theme for this widget.
the name is Orman theme.

The following is how it looks

Nivo Slider with Orman theme

Step 1 : Apply Style

1. Login to Blogger Dashboard and navigate to Layout > Edit Html
2. Don’t click the checkbox which says ‘Expand Widget Templates’
3. Find this

]]></b:skin>

Then insert the script in front of it

/* START
--------------------------------------------------------------------
 Automatic Content Slider for Blogger using Nivo Slider
 By http://www.abu-farhan.com
--------------------------------------------------------------------
 Nivo Slider
*/
/*-----START Orman Theme ----------------------------------------*/
.theme-orman.slider-wrapper {
 background:url(http://i1133.photobucket.com/albums/m596/abu-farhan/nivo-slider/Orman/slider.png) no-repeat; width:722px;
 height:337px;
 margin:0 auto;
 padding-top:18px;
 position:relative;
}
.theme-orman .nivoSlider {
 position:relative;
 width:568px;
 height:268px;
 margin-left:77px;
 background:url(http://i1133.photobucket.com/albums/m596/abu-farhan/nivo-slider/Orman/loading.gif) no-repeat 50% 50%;}
.theme-orman .nivoSlider img {
 position:absolute;
 top:0px;
 left:0px;
 display:none;
 width:568px; /* Make sure your images are the same size */
 height:268px; /* Make sure your images are the same size */
}
.theme-orman .nivoSlider a {
 border:0;
 display:block;
}
.theme-orman .nivo-controlNav {
 position:absolute;
 left:50%;
 bottom:-60px;
 margin-left:-30px; /* Tweak this to center bullets */
}
.theme-orman .nivo-controlNav a {
 display:block;
 width:10px;
 height:10px;
 background:url(http://i1133.photobucket.com/albums/m596/abu-farhan/nivo-slider/Orman/bullets.png) no-repeat;
 text-indent:-9999px;
 border:0;
 margin-right:7px;
 float:left;
}
.theme-orman .nivo-controlNav a.active {
 background-position:0 -10px;
}
.theme-orman .nivo-directionNav a {
 display:block;
 width:25px;
 height:200px;
 background:url(http://i1133.photobucket.com/albums/m596/abu-farhan/nivo-slider/Orman/arrows.png) no-repeat 0% 50%; text-indent:-9999px;
 border:0;
 top:40px;
}
.theme-orman a.nivo-nextNav {
 background-position:100% 50%;
 right:-40px;
 padding-right:20px;
}
.theme-orman a.nivo-prevNav {
 left:-40px;
 padding-left:20px;
}
.theme-orman .nivo-caption {
 font-family: Helvetica, Arial, sans-serif;
}
.theme-orman .nivo-caption a {
 color:#fff;
 border-bottom:1px dotted #fff;
}
.theme-orman .nivo-caption a:hover {
 color:#fff;
}
.theme-orman .ribbon {
 background:url(http://i1133.photobucket.com/albums/m596/abu-farhan/nivo-slider/Orman/ribbon.png) no-repeat; width:111px;
 height:111px;
 position:absolute;
 top:-3px;
 left:56px;
 z-index:300;
}
/*----- END Orman Theme ----------------------------------------*/
/* The Nivo Slider styles */
.nivoSlider {
 position:relative;
}
.nivoSlider img {
 position:absolute;top:0px;left:0px;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
 position:absolute;top:0px;left:0px;width:100%;height:100%;border:0;
 padding:0;margin:0;z-index:6;display:none;
}
/* The slices and boxes in the Slider */
.nivo-slice {
 display:block;
 position:absolute;
 z-index:5;
 height:100%;
}
.nivo-box {
 display:block;
 position:absolute;
 z-index:5;
}
/* Caption styles */
.nivo-caption {
 position:absolute;
 left:0px;
 bottom:0px;
 background:#000;
 color:#fff;
 opacity:0.8; /* Overridden by captionOpacity setting */
 width:100%;
 z-index:8;
}
.nivo-caption p {
 padding:5px;
 margin:0;
}
.nivo-caption a {
 display:inline !important;
}
.nivo-html-caption {
 display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
 position:absolute;
 top:45%;
 z-index:9;
 cursor:pointer;
}
.nivo-prevNav {
 left:0px;
}
.nivo-nextNav {
 right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a {
 position:relative;
 z-index:9;
 cursor:pointer;
}
.nivo-controlNav a.active {
 font-weight:bold;
}
.theme-default #slider {
 margin:100px auto 50px auto;
 width:618px; /* Make sure your images are the same size */
 height:246px; /* Make sure your images are the same size */
}
.theme-pascal.slider-wrapper,
.theme-orman.slider-wrapper {
 margin-top:150px;
}
.clear {
 clear:both;
}
/* END
--------------------------------------------------------------------
 Automatic Content Slider for Blogger using Nivo Slider
 By http://www.abu-farhan.com
--------------------------------------------------------------------
 Nivo Slider
*/

Step 2 : Apply Javascript

Find This :

</body>

Then insert the script in front of it

<!-- jQuery -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'/>
 <script src='http://catur-at-abu-farhan.googlecode.com/svn/trunk/nivo-slider-modified.min.js' type='text/javascript'/>
 <script type='text/javascript'>
 $(window).load(function() {
 $(&#39;#slider&#39;).nivoSlider();
 });
 </script>

Step 3 : Apply Gadget

Design -> Click on “Add a Gadget” -> HTML/JavaScript type.

<div class="slider-wrapper theme-orman">
<div class="ribbon"></div>
 <script style="text/javascript" src="http://catur-at-abu-farhan.googlecode.com/svn/trunk/galleryposts-nivo-slider.js"></script>
<script style="text/javascript">
 var numposts_gal = 6;   //number of posts
 var image_height = 270; //image height
 var image_width = 570;  //image width
</script>
<script src="http://abu-farhan-demo.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts"></script>
</div>

(if you are already use Nivo Slider that I give you in my previous post.  Just follow Step 1 and Step 3)

Demo

if you have any questions please leave a comment….thx u

Alhamdulillah… by Catur

Another post about the Automatic Content Slider for Blogger :

1. Automatic Content Slider for Blogger using Nivo Slider part 1
2. Awesome Automatic Content Slider for Blogger using jQuery Part 3
3. Awesome Automatic Content Slider for Blogger using jQuery Part 2
4. Awesome Automatic Content Slider for Blogger using jQuery Part 1

In this post is still on “Automatic Content Slider”. the difference is only in the css styles and javascript.
With little modification to be used for blogger.
How it works is still the same as the content slider before.
This article was inspired by a request from Dante Araujo.
he said if Nivo Slider is the best free content slider, it has some awesome transition effects, and very customizable, really superior.

The following is how it looks

Nivo Slider

Automatic in blogger Only for CSS 3 (Firefox 4 and above, chrome)
Not Work for IE

Step 1 : Apply Style

1. Login to Blogger Dashboard and navigate to Layout > Edit Html
2. Don’t click the checkbox which says ‘Expand Widget Templates’
3. Find this

]]></b:skin>

Then insert the script in front of it

/* START
--------------------------------------------------------------------
 Automatic Content Slider for Blogger using Nivo Slider
 By http://www.abu-farhan.com
--------------------------------------------------------------------
 Nivo Slider
*/
/*-----START Default Theme ----------------------------------------*/
.theme-default .nivoSlider {
 position:relative;
 background:#fff url(http://i1133.photobucket.com/albums/m596/abu-farhan/nivo-slider/default/loading.gif) no-repeat 50% 50%;
 -webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
 -moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
 box-shadow: 0px 1px 5px 0px #4a4a4a;
}
.theme-default .nivoSlider img {
 position:absolute;top:0px;left:0px;display:none;
}
.theme-default .nivoSlider a {
 border:0;display:block;
}
.theme-default .nivo-controlNav {
 position:absolute;left:50%;bottom:-42px;
 margin-left:-40px; /* Tweak this to center bullets */
}
.theme-default .nivo-controlNav a {
 display:block;width:22px;height:22px;
 background:url(http://i1133.photobucket.com/albums/m596/abu-farhan/nivo-slider/default/bullets.png) no-repeat;
 text-indent:-9999px;border:0;margin-right:3px;float:left;
}
.theme-default .nivo-controlNav a.active {
 background-position:0 -22px;
}
.theme-default .nivo-directionNav a {
 display:block;width:30px;height:30px;
 background:url(http://i1133.photobucket.com/albums/m596/abu-farhan/nivo-slider/default/arrows.png) no-repeat;
 text-indent:-9999px;border:0;
}
.theme-default a.nivo-nextNav {
 background-position:-30px 0;right:15px;
}
.theme-default a.nivo-prevNav {
 left:15px;
}
.theme-default .nivo-caption {
 font-family: Helvetica, Arial, sans-serif;
}
.theme-default .nivo-caption a {
 color:#fff;
 border-bottom:1px dotted #fff;
}
.theme-default .nivo-caption a:hover {
 color:#fff;
}
/*----- END Default Theme ----------------------------------------*/
/* The Nivo Slider styles */
.nivoSlider {
 position:relative;
}
.nivoSlider img {
 position:absolute;top:0px;left:0px;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
 position:absolute;top:0px;left:0px;width:100%;height:100%;border:0;
 padding:0;margin:0;z-index:6;display:none;
}
/* The slices and boxes in the Slider */
.nivo-slice {
 display:block;
 position:absolute;
 z-index:5;
 height:100%;
}
.nivo-box {
 display:block;
 position:absolute;
 z-index:5;
}
/* Caption styles */
.nivo-caption {
 position:absolute;
 left:0px;
 bottom:0px;
 background:#000;
 color:#fff;
 opacity:0.8; /* Overridden by captionOpacity setting */
 width:100%;
 z-index:8;
}
.nivo-caption p {
 padding:5px;
 margin:0;
}
.nivo-caption a {
 display:inline !important;
}
.nivo-html-caption {
 display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
 position:absolute;
 top:45%;
 z-index:9;
 cursor:pointer;
}
.nivo-prevNav {
 left:0px;
}
.nivo-nextNav {
 right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a {
 position:relative;
 z-index:9;
 cursor:pointer;
}
.nivo-controlNav a.active {
 font-weight:bold;
}
.theme-default #slider {
 margin:100px auto 50px auto;
 width:618px; /* Make sure your images are the same size */
 height:246px; /* Make sure your images are the same size */
}
.theme-pascal.slider-wrapper,
.theme-orman.slider-wrapper {
 margin-top:150px;
}
.clear {
 clear:both;
}
/* END
--------------------------------------------------------------------
 Automatic Content Slider for Blogger using Nivo Slider
 By http://www.abu-farhan.com
--------------------------------------------------------------------
 Nivo Slider
*/

Step 2 : Apply Javascript

Find This :

</body>

Then insert the script in front of it

<!-- jQuery -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'/>
 <script src='http://catur-at-abu-farhan.googlecode.com/svn/trunk/nivo-slider-modified.min.js' type='text/javascript'/>
 <script type='text/javascript'>
 $(window).load(function() {
 $(&#39;#slider&#39;).nivoSlider();
 });
 </script>

Step 3 : Apply Gadget

Design -> Click on “Add a Gadget” -> HTML/JavaScript type.

<div class="slider-wrapper theme-default">
<div class="ribbon"></div>
 <script style="text/javascript" src="http://catur-at-abu-farhan.googlecode.com/svn/trunk/galleryposts-nivo-slider.js"></script>
<script style="text/javascript">
 var numposts_gal = 6;   //number of posts
 var image_height = 246; //image height
 var image_width = 618;  //image width
</script>
<script src="http://abu-farhan-demo.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts"></script>
</div>

Demo

On the next post I will discuss about “Automatic Content Slider for Blogger using Nivo Slider Part 2″. I will make another css styles for this Nivo Slider.
Just wait patiently …

if you have any questions please leave a comment….thx u

Alhamdulillah… by Catur

Another post about the Automatic Content Slider for Blogger :

1. Awesome Automatic Content Slider for Blogger using jQuery Part 3
2. Awesome Automatic Content Slider for Blogger using jQuery Part 2
3. Awesome Automatic Content Slider for Blogger using jQuery Part 1

The following is the sequel of the content slider part 3 … for you who really like the content slider, I give you the Awesome Automatic Content Slider for jQuery using Blogger Part 3 … more stylish, more beautiful, more attractive ..
I hope you like it …
The following is how it looks

Featured Content Slider

Step 1 : Apply Style

1. Login to Blogger Dashboard and navigate to Layout > Edit Html
2. Don’t click the checkbox which says ‘Expand Widget Templates’
3. Find this

]]></b:skin>

Then insert the script in front of it

/* START
--------------------------------------------------------------------
Awesome Automatic Content Sliders for Blogger using jQuery
By http://www.abu-farhan.com

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
By http://www.abu-farhan.com
--------------------------------------------------------------------
Featured Content Slider
*/

Step 2 : Apply Javascript

Find This :

</body>

Then insert the script in front of it

<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript"></script>
 <script type="text/javascript" src="http://catur-at-abu-farhan.googlecode.com/svn/trunk/FeaturedContentSlider.pack.js"></script>
 <script type="text/javascript">
 var theInt = null;
 var $crosslink, $navthumb;
 var curclicked = 0;
 theInterval = function(cur){
 clearInterval(theInt);
 if( typeof cur != 'undefined' )
 curclicked = cur;
 $crosslink.removeClass("active-thumb");
 $navthumb.eq(curclicked).parent().addClass("active-thumb");
 $(".stripNav ul li a").eq(curclicked).trigger('click');
 theInt = setInterval(function(){
 $crosslink.removeClass("active-thumb");
 $navthumb.eq(curclicked).parent().addClass("active-thumb");
 $(".stripNav ul li a").eq(curclicked).trigger('click');
 curclicked++;
 if( 6 == curclicked )
 curclicked = 0;
 }, 3000);
 };
 $(function(){
 $("#main-photo-slider").codaSlider();
 $navthumb = $(".nav-thumb");
 $crosslink = $(".cross-link");
 $navthumb
 .click(function() {
 var $this = $(this);
 theInterval($this.parent().attr('href').slice(1) - 1);
 return false;
 });
 theInterval();
 });
 </script>

Step 3 : Apply Gadget

Design -> Click on “Add a Gadget” -> HTML/JavaScript type.

<div id="slider-wrap">
<script style="text/javascript" src="http://catur-at-abu-farhan.googlecode.com/svn/trunk/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://abu-farhan-demo.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script>
</div>

Demo

if you have any questions please leave a comment….thx u

Alhamdulillah… by Catur

Another post about the Automatic Content Slider for Blogger :

1. Awesome Automatic Content Slider for Blogger using jQuery Part 2
2. Awesome Automatic Content Slider for Blogger using jQuery Part 1

Bismillah…
Installation method is almost the same as the previous tutorial … Awesome Automatic Content Slider for jQuery using Blogger Part 1 …
On the content slider this time (Awesome Automatic Content Slider for jQuery using Blogger Part 1) I use the style from Slick Slideshow and a little adjustment that can be used on Blogger …
Just follow the steps below … I’m sure there will be no problem …

Slick Slideshow

Step 1 : Apply Style

1. Login to Blogger Dashboard and navigate to Layout > Edit Html
2. Don’t click the checkbox which says ‘Expand Widget Templates’
3. Find this

]]></b:skin>

Then insert the script in front of it

/* START
--------------------------------------------------------------------
 Awesome Automatic Content Sliders for Blogger using jQuery
 By http://www.abu-farhan.com
--------------------------------------------------------------------
Slick Slideshow
*/
#slideshow {  margin:0 auto;  width:640px;  height:263px;  background:transparent url(http://i1133.photobucket.com/albums/m596/abu-farhan/slick-bg_slideshow.jpg) no-repeat 0 0;  position:relative; }
#slideshow #slidesContainer {  margin:0 auto;  width:560px;  height:263px;  overflow:auto; /* allow scrollbar */  position:relative; }
#slideshow #slidesContainer .slide {  margin:0 auto;  width:540px; /* reduce by 20 pixels of #slidesContainer to avoid horizontal scroll */  height:263px; }
/**  * Slideshow controls style rules.  */
.control {  display:block;  width:39px;  height:263px;  text-indent:-10000px;  position:absolute;  cursor: pointer; }
#leftControl {  top:0;  left:0;  background:transparent url(http://i1133.photobucket.com/albums/m596/abu-farhan/slick-control_left.jpg) no-repeat 0 0; }
#rightControl {  top:0;  right:0;  background:transparent url(http://i1133.photobucket.com/albums/m596/abu-farhan/slick-control_right.jpg) no-repeat 0 0; }
.slide h2, .slide p {  margin:15px;  font:normal 11px Verdana, Geneva, sans-serif;  color:#ccc; }
.slide h2 {  font:italic 24px Georgia, "Times New Roman", Times, serif;  color:#ccc;  letter-spacing:-1px; }
.slide img {  float:right;  margin:0 15px; }
/* END
--------------------------------------------------------------------
 Awesome Automatic Content Sliders for Blogger using jQuery
 By http://www.abu-farhan.com
--------------------------------------------------------------------
 Slick Slideshow
*/

Step 2 : Apply Gadget

Design -> Click on “Add a Gadget” -> HTML/JavaScript type.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  var currentPosition = 0;
  var slideWidth = 560;
  var slides = $('.slide');
  var numberOfSlides = slides.length;

  // Remove scrollbar in JS
  $('#slidesContainer').css('overflow', 'hidden');

  // Wrap all .slides with #slideInner div
  slides
    .wrapAll('<div id="slideInner"></div>')
    // Float left to display horizontally, readjust .slides width
	.css({
      'float' : 'left',
      'width' : slideWidth
    });

  // Set #slideInner width equal to total width of all slides
  $('#slideInner').css('width', slideWidth * numberOfSlides);

  // Insert controls in the DOM
  $('#slideshow')
    .prepend('<span class="control" id="leftControl">Clicking moves left</span>')
    .append('<span class="control" id="rightControl">Clicking moves right</span>');

  // Hide left arrow control on first load
  manageControls(currentPosition);

  // Create event listeners for .controls clicks
  $('.control')
    .bind('click', function(){
    // Determine new position
	currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;

	// Hide / show controls
    manageControls(currentPosition);
    // Move slideInner using margin-left
    $('#slideInner').animate({
      'marginLeft' : slideWidth*(-currentPosition)
    });
  });

  // manageControls: Hides and Shows controls depending on currentPosition
  function manageControls(position){
    // Hide left arrow if position is first slide
	if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
	// Hide right arrow if position is last slide
    if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() }
  }
});
</script>
  <!-- Slideshow HTML -->
  <div id="slideshow">
    <div id="slidesContainer">
<script type="text/javascript" src="http://catur-at-abu-farhan.googlecode.com/svn/trunk/galleryposts-slick-slideshow.min.js"></script>
<script style="text/javascript">
	var numposts_gal = 6;
	var numchars_gal = 150;
	var caption_position = 'right'; // top,bottom,left,right -> choose one
        var random_posts = false; // random posts
</script>

<script src="http://abu-farhan-demo.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts"></script>
    </div>
  </div>
  <!-- Slideshow HTML -->

Demo

if you have any questions please leave a comment….thx u

Alhamdulillah… by Catur

Another post about the Automatic Content Slider for Blogger :

1. Awesome Automatic Content Slider for Blogger using jQuery Part 1

Bismillah…
You must already know about the content slider.
Almost all bloggers use the content slider.. whether it be used for the slideshow images or content .
But most existing content slider must enter data manually …
This is very difficult and just wasting your time .. especially if you are a busy person ..
to solve it … I have a solution ..”Awesome Automatic Content Slider for Blogger using jQuery Part 1”
How it works is the script will read the feed of blogger and make the content slider also with the picture automatically …

EasySlider

Step 1 : Apply Style

1. Login to Blogger Dashboard and navigate to Layout > Edit Html
2. Don’t click the checkbox which says ‘Expand Widget Templates’
3. Find this

]]></b:skin>

Then insert the script in front of  it

/* START
--------------------------------------------------------------------
Easy Slider
--------------------------------------------------------------------
EasySlider
*/
#slide-container {
height:360px;
position:relative;
width:480px;
}
#slider {
height:360px;
left:25px;
overflow-x:hidden;
overflow-y:hidden;
position:relative;
width:480px;
}
.slide-desc {
background:transparent url(http://i195.photobucket.com/albums/z105/dantearaujo/darkbg.png) repeat scroll 0 0;
color:#FFFFFF;
padding:10px;
position:absolute;
right:0px;
text-align:left;
top:0;
width:200px;
z-index:99999;
}
.slide-desc h2{display:block;}
.crosscol .widget-content {position:relative;}
#slider ul, #slider li,
#slider2 ul, #slider2 li{
margin:0;
padding:0;
list-style:none;
}
#slider2{margin-top:1em;}
#slider li, #slider2 li{
/*
define width and height of list item (slide)
entire slider area will adjust according to the parameters provided here
*/
width:480px;
height:360px;
overflow:hidden;
}
#prevBtn, #nextBtn,
#slider1next, #slider1prev{
display:block;
width:30px;
height:77px;
position:absolute;
left:-30px;
text-indent:-9999px;
top:71px;
z-index:1000;
}
#nextBtn, #slider1next{
left:500px !important;
}
#prevBtn, #nextBtn, #slider1next, #slider1prev {
display:block;
height:77px;
left:0;
position:absolute;
top:132px;
width:30px;
z-index:1000;
}
#prevBtn a, #nextBtn a,
#slider1next a, #slider1prev a{
display:block;
position:relative;
width:30px;
height:77px;
background:url(http://i195.photobucket.com/albums/z105/dantearaujo/prev.png) no-repeat 0 0;
}
#nextBtn a, #slider1next a{
background:url(http://i195.photobucket.com/albums/z105/dantearaujo/next.png) no-repeat 0 0;
}
/* numeric controls */
ol#controls{
margin:1em 0;
padding:0;
height:28px;
}
ol#controls li{
margin:0 10px 0 0;
padding:0;
float:left;
list-style:none;
height:28px;
line-height:28px;
}
ol#controls li a{
float:left;
height:28px;
line-height:28px;
border:1px solid #ccc;
background:#DAF3F8;
color:#555;
padding:0 10px;
text-decoration:none;
}
ol#controls li.current a{
background:#5DC9E1;
color:#fff;
}
ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}
/* END
--------------------------------------------------------------------
Easy Slider
--------------------------------------------------------------------
EasySlider
*/

Step 2 : Apply Javascript

Find This :

</body>

Then insert the script in front of  it

<!-- jQuery -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'></script>
<script src='http://accordion-template.googlecode.com/svn/trunk/easySlider1.7.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
 $("#slider").easySlider({
 auto: true,
 continuous: true
 });
});
//]]>
</script>

Step 3 : Apply Gadget

Design -> Click on “Add a Gadget” -> HTML/JavaScript type.

<div id="slider">
<script style="text/javascript" src="http://catur-at-abu-farhan.googlecode.com/svn/trunk/galleryposts-easySlider.min.js"></script>
<script style="text/javascript">
 var numposts_gal = 6;
 var numchars_gal = 150;
 var random_posts = false; // random posts
</script>
<!-- replace with your web address (marked with red color) -->
<script src="http://abu-farhan-demo.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script>
</div>

Demo

if you have any questions please leave a comment….thx u

Alhamdulillah… by Catur