Select Menu

Slider

Total Pageviews

Travel

Performance

" });

Cute

My Place

Slider

Racing

Videos

Elastislide is a responsive jQuery carousel  created and published by codrops. This plug in will adapt its size and its behavior in order to work on any screen size. Inserting the carousel’s structure into a container with a fluid width will also make the carousel fluid. You can add this plugin in Blogger Template :




DEMO

Go to Design>Page Elements, click Add a gadget, then choose HTML/JavaScript

Paste this code inside it
<style>
/* Elastislide Style */
.es-carousel-wrapper{ background: #101010; padding:10px 37px; -moz-border-radius: 10px;-webkit-border-radius: 10px; border-radius: 10px; position:relative;}
.es-carousel{ overflow:hidden; background:#000;}
.es-carousel ul{ display:none;}
.es-carousel ul li{ height:100%; float:left; display:block;}
.es-carousel ul li a{ display:block; border-style:solid; border-color:#222;}
.es-carousel ul li a img{ display:block; border:none; max-height:100%; max-width:100%;}
.es-nav span{ position:absolute; top:50%; left:12px; background:transparent url(http://3.bp.blogspot.com/-C2VgY35Z-Cg/T0pFL1jGQMI/AAAAAAAAAmw/OWe5BvaFDfA/s1600/nav.png) no-repeat top left; width:14px; height:26px; margin-top:-13px; text-indent:-9000px;
 cursor:pointer; opacity:0.8;}
.es-nav span.es-nav-next{ right:12px; left:auto; background-position:top right;}
.es-nav span:hover{ opacity:1.0;}
</style>
<div class="es-carousel-wrapper" id="carousel">
<div class="es-carousel">
<ul>
<li>
<a href="URL OF THE PAGE">
<img alt="ALT TAG" src="URL OF THE IMAGE" />
</a>
</li>

</ul>
</div></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript">
</script>
<script src="http://blogtipsntricks.googlecode.com/files/jquery.easing.1.3.js" type="text/javascript">
</script>
<script src="http://blogtipsntricks.googlecode.com/files/jquery.elastislide.js" type="text/javascript">
</script>
<script type="text/javascript">
$('#carousel').elastislide({
imageW : 180,
minItems : 5
});
</script>

Now change the url of the page and image and also change the alt tag with your tag and save.

source:blogtipsntricks

-

Slider ini namanya Slider jQuery Infinite Carousel dengan navigasi numeric yang tombolnya bisa menyesuaikanm warnanya dengan image-nya. Keren khan?



CSS -nya :


#carousel {
margin:0 auto;
width:500px;
height:213px;
padding:0;
overflow:scroll;
border:2px solid #999;
}
#carousel ul {
list-style: none;
width:1600px;
margin: 0;
padding: 0;
position:relative;
}
#carousel li {
display:inline;
float:left;
}
.textholder {
text-align:left;
font-size:small;
padding:6px;
-moz-border-radius: 6px 6px 0 0;
-webkit-border-top-left-radius: 6px;
-webkit-border-top-right-radius: 6px;
}
Sedangkan javascriptnya :



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

Anda bisa download di sini :

infinitecarousel.js


HTMLnya :

<div id="carousel">
<ul>
 <li><img alt="" src="p1.jpg" width="500" height="213" /><p>Slider jQuery Infinite Carousel for Blogger.</p></li>
 <li><img alt="" src="p2.jpg" width="500" height="213" /><p>This is the caption for the second image.</p></li>
 <li><img alt="" src="p3.jpg" width="500" height="213" /></li>
 <li><img alt="" src="p4.jpg" width="500" height="213" /><p>It's not easy being green.</p></li>
 <li><img alt="" src="p5.jpg" width="500" height="213" /></li>
 <li><img alt="" src="p6.jpg" width="500" height="213" /><p>You can easily mix images types. </p></li>

</ul>
</div>

atau bisa coba kode ini :



<div id="carousel">
<ul>
<li><a href="http://www.ehow.com"><img style="width:580px; height:290px" img alt="" src="http://3.bp.blogspot.com/_a0VLaxIwflU/S_eNZWbMfuI/AAAAAAAAABI/sLtViEK34xY/s1600/Power-point-ret2-keluarga-2.jpg" width="500" height="213" /><p>This carousel has no padding applied to it so you won't see hints for the previous and next images. Also, the progress bar could be disabled by setting just one option on the plugin.</p>
</a></li>
<li><img style="width:580px; height:290px" img alt="" src="http://1.bp.blogspot.com/_a0VLaxIwflU/S_eMzmf5SjI/AAAAAAAAAAw/oNhUOpkdZqk/s1600/pasutri.jpg" width="500" height="213" /><p>This is the caption for the second image. The height of the caption box is an option.</p></li>
<li><img style="width:580px; height:290px" img alt="" src="http://4.bp.blogspot.com/_T46SliM0-PI/S_XT8NQo3kI/AAAAAAAAANk/UHh87wo4o_c/cars-4.jpg" width="500" height="213" /></li>
<li><img style="width:580px; height:290px" img alt="" src="http://4.bp.blogspot.com/_T46SliM0-PI/S_XT8NQo3kI/AAAAAAAAANk/UHh87wo4o_c/cars-4.jpg" width="500" height="213" /><p>It's not easy being green.</p></li>
<li><img style="width:565px; height:290px" img alt="" src="http://1.bp.blogspot.com/_a0VLaxIwflU/S_eNGMeLGAI/AAAAAAAAAA4/WxsfGkVzO3Y/s1600/perpus.jpg"width="500" height="213" /></li>
<li><img style="width:580px; height:290px" img alt="" src="http://3.bp.blogspot.com/_a0VLaxIwflU/S_eMXFtpmmI/AAAAAAAAAAg/IQBU9TGTiqc/s1600/gereja.jpg" width="500" height="213" /><p>You can easily mix images types. Gif, png, and jpeg all work without any issues.</p></li>
</ul>
</div>
<script type="text/javascript">
$(function(){
$('#carousel').infiniteCarousel({imagePath: '/jquery/infinitecarousel2/images/'});
});
</script>



Live demo 

Source : catchmyfame.

-
To add this widget on your blog, simply follow the following steps:

Log on to your Blogger account and go to Design > Page Element > Add a Gadget > HTML/JavaScript.






Add the following code:


<div id="feed-control">
    <span style="color:#676767;font-size:11px;margin:10px;padding:4px;">Loading...</span>
  </div>

  <script src="http://www.google.com/jsapi?key=notsupplied-wizard"
    type="text/javascript"></script>
  
  <script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js"
    type="text/javascript"></script>
  <style type="text/css">
    @import url("http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.css");
  </style>

  <script type="text/javascript">
    function LoadDynamicFeedControl() {
      var feeds = [
{title: 'YOUR BLOG TITLE',
url: 'http://yourblog.com/rss.xml'
},
];
      var options = {
        stacked : true,
        horizontal : false,
        title : "Popular Posts"
      }

      new GFdynamicFeedControl(feeds, 'feed-control', options);
    }

    google.load('feeds', '1');
    google.setOnLoadCallback(LoadDynamicFeedControl);
  </script>
<a href="http://www.hacktutors.info">Get this Widget</a>


Replace YOUR BLOG TITLE with your blog name and http://yourblog.com/ with your blog URL. No need to give a title to your widget because there is already a title named "Popular Post" in default.



source : http://www.hacktutors.info/

image:teknobites.com

Here is a great list of  toolbars for your blog or website:

1. Wibiya  Toolbar


2. Gigya Toolbar

3. Meebo


4. Conduit

5. AddThis Sharebar

6. Apture Site Bar

7. Extendy

8. Web Informer Toolbar