1. Login to your blogger dashboard--> Template- -> Edit HTML
2. Scroll down to where you see </head> tag .
3. Copy below code and paste it just before the </head> tag .
<SCRIPT SRC='HTTP://AJAX.GOOGLEAPIS.COM/AJAX/LIBS/JQUERY/1.9.0/JQUERY.MIN.JS' TYPE='TEXT/JAVASCRIPT'></SCRIPT><SCRIPT TYPE='TEXT/JAVASCRIPT'>//<![CDATA[/* ------------------------------------------------------------------------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);//]]></SCRIPT><SCRIPT TYPE='TEXT/JAVASCRIPT'>$(DOCUMENT).READY(FUNCTION() {$('#S3SLIDER').S3SLIDER({TIMEOUT: 4000});});</SCRIPT><STYLE TYPE='TEXT/CSS'>#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;}</STYLE>
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.
<DIV ID="S3SLIDER"><UL ID="S3SLIDERCONTENT"><LI CLASS="S3SLIDERIMAGE"><A HREF="YOUR-LINK-HERE"><IMG STYLE="WIDTH:650PX;HEIGHT:300PX;" SRC="HTTP://3.BP.BLOGSPOT.COM/-TOURBBKNJ7E/UXIBWZHMTFI/AAAAAAAAABU/E4DKGHUHABI/S1600/SCREEN1.JPG" /><SPAN>FISH DOM 2</SPAN></A></LI><LI CLASS="S3SLIDERIMAGE"><A HREF="YOUR-LINK-HERE"><IMG STYLE="WIDTH:650PX;HEIGHT:300PX;" SRC="HTTP://1.BP.BLOGSPOT.COM/-K5ZYKRVOJS8/UXIIBIMB_1I/AAAAAAAAABK/MR8HGQEZTVI/S1600/MINI+RACING+3D.JPG" /><SPAN>MINI RACING 3D</SPAN></A></LI><LI CLASS="S3SLIDERIMAGE"><A HREF="YOUR-LINK-HERE"><IMG STYLE="WIDTH:650PX;HEIGHT:300PX;" SRC="HTTP://2.BP.BLOGSPOT.COM/-XROZ_F1BJW4/UXIMDUYXTZI/AAAAAAAAAB0/RZI2FKQGWMU/S1600/GALAXY-LIFE.JPG" /><SPAN>GALAXY LIFE</SPAN></A></LI><LI CLASS="S3SLIDERIMAGE"><A HREF="YOUR-LINK-HERE"><IMG STYLE="WIDTH:650PX;HEIGHT:300PX;" SRC="HTTP://3.BP.BLOGSPOT.COM/-TOURBBKNJ7E/UXIBWZHMTFI/AAAAAAAAABU/E4DKGHUHABI/S1600/SCREEN1.JPG" /><SPAN>FISH DOM 2</SPAN></A></LI><LI CLASS="S3SLIDERIMAGE"></LI></UL></DIV><DIV CLASS='CLEAR'></DIV>
NOTE : Replace YOUR-LINK-HERE and images with your content.
Now you have successfully installed this slide show to your site.
Good readers always drop comments!!