Cool CSS3 & jQuery Image Slider for Blogger
How to install:
Optional Step: Back up your template first!
- Log in to your blogger, select your blog
- Select 'Template' tab option, click 'backup/restore' from upper right corner.
- Download full template and save it on your pc
- From 'Template' tab, select 'Edit html'
- And find (using Ctrl+F or Cmd+F) this tag </head>
- Above </head> copy and paste these lines
- Now again search for ]]><
- Above ]]>< copy and paste these lines
- Save Template
- Go to ‘New post’ or select a post to ‘edit’
- Switch ‘HTML’ mode of text editor (upper left corner of text editor this option you can find Compose or HTML)
- Now copy and paste these lines in post;
- and configure:
- The pictures you want to display first upload them on Tinypic, and collect the raw image links, paste the links on ‘Pic Link’;
- And in ‘Pic Detail’ type your one line of details;
- If you don’t want all of image slot just delete full line
- And if you want to put more image on slideshow just copy this line, that much time you want
- After configuration, Switch back to ‘Compose’ part, Publish post, and see your slideshow in live action.
The default image size allows Height of 135px and Width of 500px, Any resolution picture will be scaled into these default value, if you having problem with this default resolution, just change the value as your requirement, the sizes can be found in CSS part, red colored.
- This image slider tested on several templates, worked fine on every template, if some template doesn’t shows it right try to fix the px values.
- Supported on all major web browsers