SMOOTH JQUERY FEATURED POST SLIDESHOW FOR BLOGGER
1. Login to your blogger dashboard--> Template- -> Edit HTML
2. Scroll down to where you see tag .
3. Copy below code and paste it just before the tag .
///* ------------------------------------------------------------------------S3SLIDERDEVELOPPED BY: BOBAN KARIšIK -> HTTP://WWW.SERIE3.INFO/CSS HELP: MéSZáROS RóBERT -> HTTP://WWW.PERSPECTIVED.COM/VERSION: 1.0COPYRIGHT: FEEL FREE TO REDISTRIBUTE THE SCRIPT/MODIFY IT, ASLONG AS YOU LEAVE MY INFOS AT THE TOP.-------------------------------------------------------------------------- */(FUNCTION($){$.FN.S3SLIDER = FUNCTION(VARS) {VAR ELEMENT = THIS;VAR TIMEOUT = (VARS.TIMEOUT != UNDEFINED) ? VARS.TIMEOUT : 4000;VAR CURRENT = NULL;VAR TIMEOUTFN = NULL;VAR FADERSTAT = TRUE;VAR MOVER = FALSE;VAR ITEMS = $("#" + ELEMENT[0].ID + "CONTENT ." + ELEMENT[0].ID + "IMAGE");VAR ITEMSSPAN = $("#" + ELEMENT[0].ID + "CONTENT ." + ELEMENT[0].ID + "IMAGE SPAN");ITEMS.EACH(FUNCTION(I) {$(ITEMS[I]).MOUSEOVER(FUNCTION() {MOVER = TRUE;});$(ITEMS[I]).MOUSEOUT(FUNCTION() {MOVER = FALSE;FADEELEMENT(TRUE);});});VAR FADEELEMENT = FUNCTION(ISMOUSEOUT) {VAR THISTIMEOUT = (ISMOUSEOUT) ? (TIMEOUT/2) : TIMEOUT;THISTIMEOUT = (FADERSTAT) ? 10 : THISTIMEOUT;IF(ITEMS.LENGTH > 0) {TIMEOUTFN = SETTIMEOUT(MAKESLIDER, THISTIMEOUT);} ELSE {CONSOLE.LOG("POOF..");}}VAR MAKESLIDER = FUNCTION() {CURRENT = (CURRENT != NULL) ? CURRENT : ITEMS[(ITEMS.LENGTH-1)];VAR CURRNO = JQUERY.INARRAY(CURRENT, ITEMS) + 1CURRNO = (CURRNO == ITEMS.LENGTH) ? 0 : (CURRNO - 1);VAR NEWMARGIN = $(ELEMENT).WIDTH() * CURRNO;IF(FADERSTAT == TRUE) {IF(!MOVER) {$(ITEMS[CURRNO]).FADEIN((TIMEOUT/6), FUNCTION() {IF($(ITEMSSPAN[CURRNO]).CSS('BOTTOM') == 0) {$(ITEMSSPAN[CURRNO]).SLIDEUP((TIMEOUT/6), FUNCTION() {FADERSTAT = FALSE;CURRENT = ITEMS[CURRNO];IF(!MOVER) {FADEELEMENT(FALSE);}});} ELSE {$(ITEMSSPAN[CURRNO]).SLIDEDOWN((TIMEOUT/6), FUNCTION() {FADERSTAT = FALSE;CURRENT = ITEMS[CURRNO];IF(!MOVER) {FADEELEMENT(FALSE);}});}});}} ELSE {IF(!MOVER) {IF($(ITEMSSPAN[CURRNO]).CSS('BOTTOM') == 0) {$(ITEMSSPAN[CURRNO]).SLIDEDOWN((TIMEOUT/6), FUNCTION() {$(ITEMS[CURRNO]).FADEOUT((TIMEOUT/6), FUNCTION() {FADERSTAT = TRUE;CURRENT = ITEMS[(CURRNO+1)];IF(!MOVER) {FADEELEMENT(FALSE);}});});} ELSE {$(ITEMSSPAN[CURRNO]).SLIDEUP((TIMEOUT/6), FUNCTION() {$(ITEMS[CURRNO]).FADEOUT((TIMEOUT/6), FUNCTION() {FADERSTAT = TRUE;CURRENT = ITEMS[(CURRNO+1)];IF(!MOVER) {FADEELEMENT(FALSE);}});});}}}}MAKESLIDER();};})(JQUERY);//]]>$(DOCUMENT).READY(FUNCTION() {$('#S3SLIDER').S3SLIDER({TIMEOUT: 4000});});#S3SLIDER {BACKGROUND:#000000;BORDER:1PX SOLID #818E8F;WIDTH: 550PX;HEIGHT: 200PX;POSITION: RELATIVE;OVERFLOW: HIDDEN;}#S3SLIDERCONTENT {WIDTH: 550PX;POSITION: ABSOLUTE;TOP:0PX;PADDING: 0PX;MARGIN: 0PX;}.S3SLIDERIMAGE {FLOAT: LEFT;POSITION: RELATIVE;DISPLAY: NONE;}.S3SLIDERIMAGE SPAN {POSITION: ABSOLUTE;LEFT: 0;FONT: 20PX TREBUCHET MS, SANS-SERIF;PADDING: 10PX 0PX;WIDTH: 550PX;BACKGROUND-COLOR: #000;FILTER: ALPHA(OPACITY=80);-MOZ-OPACITY: 0.8;-KHTML-OPACITY: 0.8;OPACITY: 0.8;COLOR: #FFF;DISPLAY: NONE;BOTTOM: 0;TEXT-ALIGN:CENTER;}.CLEAR {CLEAR: BOTH;}
NOTE : To change the speed of slideshow, change the value 4000.
4. Save your template.
5. Now go to Layout--> click on "Add a gadget".
6. Select "html/java script" and add the code given below and click save.
NOTE : Replace YOUR-LINK-HERE and images with your content.
Now you have successfully installed this slide show to your site.