Search Less,Play More : An extensive and visual collection of jquery plugins listed according to its category.

Tell the story behind your pictures.

Story Wheel lets you record a story around your Instragram pictures and share it on the web as a nostalgic slideshow.

PixelsDaily is a collection of free and commercial resources for designers.

Supersized Under Maintenance is a free Premium Blogger Template adapted from Supersized jQuery Plugin (Version 3.1.3) with 1 column.


Update

~ XML error is solved.
~ Compatible with the new Blogger interface.

Instruction

How to edit Type your email id to get the updates!
Go to layout and click on Edit Html Tab.
Now find this code...

<h3>Subscribe to get the latest</h3>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open("http://feedburner.google.com/fb/a/mailverify?uri=YourID","popupwindow","scrollbars=yes,width=550,height=520");return true' target='popupwindow'>
<input class='follow-by-email-address' name='email' placeholder='Email address...' type='text'/>
<input class='follow-by-email-submit' type='submit' value='Submit'/>
<input name='uri' type='hidden' value='YourID'/>
<input name='loc' type='hidden' value='en_US'/>
</form>

How to edit Socials Links
Go to layout and click on Edit Html Tab.
Now find this code...

<div id='socials'>
<a href='http://feeds.feedburner.com/YourID' target='_blank'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguiX7KE4oZT7Dn2scneEe6XCuZWh2fngKoxm49pI8hZy4la__jZj_C6SeUE0-1eqYBmd0pLz9wzEKAmClFSrUah0FrnANPTdW6zEShl-Kpgv47lVRXidJ2a3TfTT_45e4ZL2i1tBSkpBZG/s0/rss.png'/></a>
<a href='http://twitter.com/YourID' target='_blank'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEii7t1Gu0NtyadEO3XE94GBi9gAO6uVyUvapWR9KdAlCArmrLzTQrxFld6F6ZY1wDEeTtGkx97g-x0_aGCtCYM7z1h-NCjxMWXJtHEHVJ2WVbBIQBIY5ep2YVAamzkTr10i5lt6PU9TXhyphenhyphenc/s0/twitter.png'/></a>
<a href='http://www.facebook.com/YourID' target='_blank'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEim4kGs5VqytlAsf5Olu8v_V_rMkz-eAxrYsiZRKQ3zUTQH0mtOHvfNTgBMD-PJ1KAmn3ozGO4qFCkOe4OHA6QBVST9TU14YhWeQtITwn-W6wxEmVoF7FPba9DFIi5zE4TQ1GdtVDdMLVN8/s0/facebook.png'/></a>
<a href='https://plus.google.com/YourID' target='_blank'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieiTK9PdRcI4eTB5uKWh9lLGDI4g8wjmeKijU6kIin3agSndTLLJPMEuRlQcTIM36lp0ZwH5pX2uGYJx1RJ9yNsjvS1Qhg2M4digZUp6mhiXzIwdDaVhGXf2rcr3BYRC3NfoE9So3Uwq4k/s0/google.png'/></a>
<a href='http://www.flickr.com/photos/YourID' target='_blank'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1KQXOz-aFpTN0Qsr1aFkKr5qnh38R3S7j4wt9pfyNlN92XkbU3ZYqIKvVCCB7at4km6J4CchCT4pxQ3OVZ_UPTP37M1MdVfr0CXduB7yW5uSNjLC1-gxBmqb93sA8x9tltqtej2FEos2f/s0/flickr.png'/></a>
</div>

How to Configure the Progress
Go to layout and click on Edit Html Tab.
Now find this code...

progressBarOptions={percentage:86,startAnimation:true,startAnimationDuration:5000,

How to edit Background
Go to layout and click on Edit Html Tab.
Now find this code...

<script type='text/javascript'>
jQuery(function (a) {
  a.supersized({
    slideshow: 1,
    autoplay: 1,
    start_slide: 1,
    slide_interval: 3000,
    transition: 1,
    transition_speed: 1000,
    new_window: 1,
    pause_hover: 0,
    keyboard_nav: 1,
    performance: 1,
    min_width: 0,
    min_height: 0,
    vertical_center: 1,
    horizontal_center: 1,
    fit_portrait: 1,
    fit_landscape: 0,
    navigation: 1,
    thumbnail_navigation: 1,
    slide_counter: 1,
    slide_captions: 1,
    slides: [{
      image: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKQl3Rw2oIp3F2VWTVGsL4W6OxVuJDblFkZ9SwerndYiGc773IBDbDmW9sf7IIJiRxBn_FVZgsqaOjqTEvXMmyu0LeUkCNSRSWeg2AAqgCnXS6ucJQ64sT8WllD2h7oDsZJPA85cGVBhgF/s0/Rainbow+1.jpg",
      title: "Rainbow 1"
    }, {
      image: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMIEyFi2RMFEN7P86FlpJ8QazWcVz550gXlTENOo-qYbAGhxtZUnrgoXh1MNMY8K4Tik7AiZgSu_luOD9vYyvQojyj6ntnLmtbBgbBay_V5KM8SZJ-0FMsXmcd1Q503XbXygIwfRxP-jN2/s0/Rainbow+2.jpg",
      title: "Rainbow 2"
    }, {
      image: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAmGRA_k39xfkkCd4OO1jMadjLBEMBnhVn8rZUnDJuQ-Ly2uBCquTiStQUnEDXV1oUGwIVzJ0nt-ImrgsFCimWgLk9mloYbUQEnHbe8UKfcIuclnjgykxVxWvjOmOhXrhnxOM6lkMnU_Ld/s0/Rainbow+3.jpg",
      title: "Rainbow 3"
    }, {
      image: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpFsFXugmy57cXYUPWP_wA8LZXMmxCDOQYT0epUcKjtvrkX5Xj1gWf9DFOvabuAf8JQDoK6sJwFo2i-ksGOVeayZEO-dXBY3Q-9UxCMVn1QYxO7RpKuiw_q2U0c1UyWyVCW0iY6ZxE4QrO/s0/Rainbow+4.jpg",
      title: "Rainbow 4"
    }, {
      image: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPalTjxOvg9vx1bBBIHrIN7cKCGzxEcY9F1SOCU1A0fRVOQG-QYfM3HiH6vDe96GGYFkVUf5Is14eKll2IhyphenhyphenhBPxB8t-FTWqt2XAO7gYvP5G0pC6nARRsCUGXZOMKFmxGQIFGyeoQL2ji3/s0/Rainbow+5.jpg",
      title: "Rainbow 5"
    }, {
      image: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIKHVdvqFvCzsZ9CtlWe1dlzmD2W9mTR8l6oKb0PVhWTkFbo875AZtIlY3zjFVCGbM4RyYriiXTGHb2e7ypBuIv9OgdDRy5RvijUlkBh6RKF1OBZmt_J41r9Uj-0Pp8xM6eVnp1gtZc2Gt/s0/Rainbow+6.jpg",
      title: "Rainbow 6"
    }, {
      image: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaLNGMHdu_07mbPprtvTsZr5vvnnO2sJKdk3dFOrwLOZ4mPz9xk3RCxCh7MjjTKSv5YEn6_LLfmHfZ4budVp1FzanidI5giFGQuCjR7FpbAhobTdvh0ufysnDqiHMdlnXJrkUGg807Jw9r/s0/Rainbow+7.jpg",
      title: "Rainbow 7"
    }, {
      image: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3POd8ok_zBDgNb3A5ZHF92N1iIpwhZ2F64qCU7jXXie1BztkgS3PWnsGHBZ8tE-qZZlqJ9URrNxk8GdgKPzpm-ugEwV541Crj5TtB-kwguHPY6mn46Uk3DFo_5RHweLolhmV7dDduX081/s0/Rainbow+8.jpg",
      title: "Rainbow 8"
    }, {
      image: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8ys3Z-1-igBJn0T2DfzUhT8_87L41L6wrkyjZgdG5zu3mN0SbgsjjqFvhtZUlMMiO5edbl39kCsRs7DDlBmqkKfkwrXBlWQYCcegv1YcSJ0yM7Ow5XhL-7D8RQaBWt-lnBVnUdVshfjQc/s0/Rainbow+9.jpg",
      title: "Rainbow 9"
    }]
  });
  a(".content").height("22px");
  a(".open").toggle(function () {
    a(".content").animate({
      height: "80%"
    }, 1000, "easeOutQuart", function () {
      a(".open").children().animate({
        rotate: "+=180deg"
      })
    })
  }, function () {
    a(".content").animate({
      height: "22px"
    }, 1000, "easeOutQuart", function () {
      a(".open").children().animate({
        rotate: "-=180deg"
      })
    })
  })
});
</script>

Supersized Under Construction is a free Premium Blogger Template adapted from Supersized jQuery Plugin (Version 3.2.6) with 1 column.


Update

~ XML error is solved.
~ Compatible with the new Blogger interface.

Instruction

How to edit Type your email id to get the updates!
Go to layout and click on Edit Html Tab.
Now find this code...

<h3>subscribe below with us to get the latest</h3>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open("http://feedburner.google.com/fb/a/mailverify?uri=YourID","popupwindow","scrollbars=yes,width=550,height=520");return true' target='popupwindow'>
<input class='follow-by-email-address' name='email' placeholder='Email address...' type='text'/>
<input class='follow-by-email-submit' type='submit' value='Submit'/>
<input name='uri' type='hidden' value='YourID'/>
<input name='loc' type='hidden' value='en_US'/>
</form>

How to edit Socials Links
Go to layout and click on Edit Html Tab.
Now find this code...

<div id='socials'>
<a href='http://feeds.feedburner.com/YourID' target='_blank'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguiX7KE4oZT7Dn2scneEe6XCuZWh2fngKoxm49pI8hZy4la__jZj_C6SeUE0-1eqYBmd0pLz9wzEKAmClFSrUah0FrnANPTdW6zEShl-Kpgv47lVRXidJ2a3TfTT_45e4ZL2i1tBSkpBZG/s0/rss.png'/></a>
<a href='http://twitter.com/YourID' target='_blank'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEii7t1Gu0NtyadEO3XE94GBi9gAO6uVyUvapWR9KdAlCArmrLzTQrxFld6F6ZY1wDEeTtGkx97g-x0_aGCtCYM7z1h-NCjxMWXJtHEHVJ2WVbBIQBIY5ep2YVAamzkTr10i5lt6PU9TXhyphenhyphenc/s0/twitter.png'/></a>
<a href='http://www.facebook.com/YourID' target='_blank'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEim4kGs5VqytlAsf5Olu8v_V_rMkz-eAxrYsiZRKQ3zUTQH0mtOHvfNTgBMD-PJ1KAmn3ozGO4qFCkOe4OHA6QBVST9TU14YhWeQtITwn-W6wxEmVoF7FPba9DFIi5zE4TQ1GdtVDdMLVN8/s0/facebook.png'/></a>
<a href='https://plus.google.com/YourID' target='_blank'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieiTK9PdRcI4eTB5uKWh9lLGDI4g8wjmeKijU6kIin3agSndTLLJPMEuRlQcTIM36lp0ZwH5pX2uGYJx1RJ9yNsjvS1Qhg2M4digZUp6mhiXzIwdDaVhGXf2rcr3BYRC3NfoE9So3Uwq4k/s0/google.png'/></a>
<a href='http://www.flickr.com/photos/YourID' target='_blank'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1KQXOz-aFpTN0Qsr1aFkKr5qnh38R3S7j4wt9pfyNlN92XkbU3ZYqIKvVCCB7at4km6J4CchCT4pxQ3OVZ_UPTP37M1MdVfr0CXduB7yW5uSNjLC1-gxBmqb93sA8x9tltqtej2FEos2f/s0/flickr.png'/></a>
</div>

How to Configure the Counter
Go to layout and click on Edit Html Tab.
Now find this code...

date: "January 22, 2022", /*! Configure the Counter for future date */

How to edit Background
Go to layout and click on Edit Html Tab.
Now find this code...

<script type='text/javascript'>
jQuery(function (a) {
a.supersized({
slide_interval: 3000, // Length between transitions
transition: 1, // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
transition_speed: 1000, // Speed of transition
slide_links: "blank", // Individual links for each slide (Options: false, 'number', 'name', 'blank')
slides: [{
image: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKQl3Rw2oIp3F2VWTVGsL4W6OxVuJDblFkZ9SwerndYiGc773IBDbDmW9sf7IIJiRxBn_FVZgsqaOjqTEvXMmyu0LeUkCNSRSWeg2AAqgCnXS6ucJQ64sT8WllD2h7oDsZJPA85cGVBhgF/s0/Rainbow+1.jpg",
title: "Rainbow 1"
}, {
image: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMIEyFi2RMFEN7P86FlpJ8QazWcVz550gXlTENOo-qYbAGhxtZUnrgoXh1MNMY8K4Tik7AiZgSu_luOD9vYyvQojyj6ntnLmtbBgbBay_V5KM8SZJ-0FMsXmcd1Q503XbXygIwfRxP-jN2/s0/Rainbow+2.jpg",
title: "Rainbow 2"
}, {
image: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAmGRA_k39xfkkCd4OO1jMadjLBEMBnhVn8rZUnDJuQ-Ly2uBCquTiStQUnEDXV1oUGwIVzJ0nt-ImrgsFCimWgLk9mloYbUQEnHbe8UKfcIuclnjgykxVxWvjOmOhXrhnxOM6lkMnU_Ld/s0/Rainbow+3.jpg",
title: "Rainbow 3"
}, {
image: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpFsFXugmy57cXYUPWP_wA8LZXMmxCDOQYT0epUcKjtvrkX5Xj1gWf9DFOvabuAf8JQDoK6sJwFo2i-ksGOVeayZEO-dXBY3Q-9UxCMVn1QYxO7RpKuiw_q2U0c1UyWyVCW0iY6ZxE4QrO/s0/Rainbow+4.jpg",
title: "Rainbow 4"
}, {
image: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPalTjxOvg9vx1bBBIHrIN7cKCGzxEcY9F1SOCU1A0fRVOQG-QYfM3HiH6vDe96GGYFkVUf5Is14eKll2IhyphenhyphenhBPxB8t-FTWqt2XAO7gYvP5G0pC6nARRsCUGXZOMKFmxGQIFGyeoQL2ji3/s0/Rainbow+5.jpg",
title: "Rainbow 5"
}, {
image: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIKHVdvqFvCzsZ9CtlWe1dlzmD2W9mTR8l6oKb0PVhWTkFbo875AZtIlY3zjFVCGbM4RyYriiXTGHb2e7ypBuIv9OgdDRy5RvijUlkBh6RKF1OBZmt_J41r9Uj-0Pp8xM6eVnp1gtZc2Gt/s0/Rainbow+6.jpg",
title: "Rainbow 6"
}, {
image: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaLNGMHdu_07mbPprtvTsZr5vvnnO2sJKdk3dFOrwLOZ4mPz9xk3RCxCh7MjjTKSv5YEn6_LLfmHfZ4budVp1FzanidI5giFGQuCjR7FpbAhobTdvh0ufysnDqiHMdlnXJrkUGg807Jw9r/s0/Rainbow+7.jpg",
title: "Rainbow 7"
}, {
image: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3POd8ok_zBDgNb3A5ZHF92N1iIpwhZ2F64qCU7jXXie1BztkgS3PWnsGHBZ8tE-qZZlqJ9URrNxk8GdgKPzpm-ugEwV541Crj5TtB-kwguHPY6mn46Uk3DFo_5RHweLolhmV7dDduX081/s0/Rainbow+8.jpg",
title: "Rainbow 8"
}, {
image: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8ys3Z-1-igBJn0T2DfzUhT8_87L41L6wrkyjZgdG5zu3mN0SbgsjjqFvhtZUlMMiO5edbl39kCsRs7DDlBmqkKfkwrXBlWQYCcegv1YcSJ0yM7Ow5XhL-7D8RQaBWt-lnBVnUdVshfjQc/s0/Rainbow+9.jpg",
title: "Rainbow 9"
}]
})
});
</script>

Supersized is a fullscreen background slideshow built using the jQuery library.

jQuery for Designers is a project that I’ve been meaning to get around to for about a year before the first post went live. Hopefully it will help serve the design community and bridge a little of the barrier to the funky interaction stuff.

ResponsiveSlides.js is a tiny jQuery plugin that creates a responsive slideshow using images inside a single container. It work with wide range of browsers including all IE versions from IE6 and up. It also adds css max-width support for IE6 and other browsers that don't natively support it. Only dependency is jQuery and that all the images are same size.

Biggest difference to other responsive slideshow plugins is the file size (~1kb minified and gzipped) + that this one doesn't try to do everything. ResponsiveSlides.js has basically only two different modes: Either it just automatically fades the images, or operates as a responsive image container with pagination to navigate/fade between slides.

CSS Animations is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.