tricky-blog-note

Step 1 : Apply Style

Login to Blogger Dashboard and navigate to Layout > Edit Html
Don’t click the checkbox which says ‘Expand Widget Templates’
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>

source http://www.abu-farhan.com/2011/06/awesome-automatic-content-slider-for-blogger-using-jquery-part-1/

use the style from Slick Slideshow and a little adjustment that can be used on Blogger …

Step 1 : Apply Style

Login to Blogger Dashboard and navigate to Layout > Edit Html
Don’t click the checkbox which says ‘Expand Widget Templates’
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 -->

more stylish, more beautiful, more attractive ..

I hope you like it …

The following is how it looks
Featured Content Slider



Step 1 : Apply Style
Login to Blogger Dashboard and navigate to Layout > Edit Html
Don’t click the checkbox which says ‘Expand Widget Templates’
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 JavascriptFind 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 GadgetDesign -> 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>

tricky-blog-note

Tuesday, 20 December 2011

Automatic Easy Slider for Blogger using jQuery

Step 1 : Apply Style

Step 2 : Apply Javascript

Step 3 : Apply Gadget

Step 1 : Apply Style

Step 2 : Apply Gadget

Step 1 : Apply Style

Step 2 : Apply Javascript

Step 3 : Apply Gadget