Simple jQuery Featured Content Slider for Blogger Blog andrey понедельник, 22 июня 2015 г. No Comment

Instructions To Follow:

STEP #1
Log in to Blogger, go to Layout -> Edit HTML
and mark the tick box "Expand Widget Templates"

STEP #2
Now find (CTRL+F) this code in the template:

]]>
And immediately before it, paste this code:

#jFlowSlide{ background:#f8f8f8; font-family: Georgia; }
#myController { font-family: Georgia; padding:2px 0; width:610px; background:#000000; }
#myController span.jFlowSelected { background:#43A0D5;margin-right:0px; }

.slide-wrapper { padding: 5px; }
.slide-thumbnail { width:300px; float:left; }
.slide-thumbnail img {max-width:300px; }
.slide-details { width:290px; float:right; margin-left:10px;}
.slide-details h2 { font-size:1.5em; font-style: italic; font-weight:normal; line-height: 1; margin:0; }
.slide-details .description { margin-top:10px; }

.jFlowControl, .jFlowPrev, .jFlowNext { color:#FFF; cursor:pointer; padding-left:5px; padding-right:5px; padding-top:2px; padding-bottom:2px; }
.jFlowControl:hover, .jFlowPrev:hover, .jFlowNext:hover { background: #43A0D5; }




STEP #3
Now find (CTRL+F) this code in the template:




And immediately before it, paste this code:






Now click Save Template




Finally go to Page Elements > Add a Gadget > HTML/JAVA Script. And add following code to it.

<-! Slide #1 Starts-->

IMAGE-LINK"/>

TITLE-OF-THE-SLIDE

TEXT-OF-THE-SLIDE

<-! Slide #2 Starts-->

IMAGE-LINK"/>

TITLE-OF-THE-SLIDE

TEXT-OF-THE-SLIDE

<-! Slide #3 Starts-->

IMAGE-LINK"/>

TITLE-OF-THE-SLIDE

TEXT-OF-THE-SLIDE

.
.
.
.

Prev

1
2
3

Next

t's Done.

Customization 

Code 1. You can change the background colors in code 1 to suit your blog.

Code 2. First of all downloadhttp://sites.google.com/site/freeblo...ow.1.2.auto.js and upload it to google sites.

You can change width, height and duration speed.

Code 3. As you look on code 3 there are 3 slide codes. First give the image link, add title and finally add description. Do same with all three codes. You can add more slide by adding the code:

IMAGE-LINK"/>

TITLE-OF-THE-SLIDE

TEXT-OF-THE-SLIDE

Also you have to add

4

after

3

and so on for next slides.

 

Instructions To Follow:

STEP #1
Log in to Blogger, go to Layout -> Edit HTML
and mark the tick box "Expand Widget Templates"

STEP #2
Now find (CTRL+F) this code in the template:

]]>
And immediately before it, paste this code:

#jFlowSlide{ background:#f8f8f8; font-family: Georgia; }
#myController { font-family: Georgia; padding:2px 0; width:610px; background:#000000; }
#myController span.jFlowSelected { background:#43A0D5;margin-right:0px; }

.slide-wrapper { padding: 5px; }
.slide-thumbnail { width:300px; float:left; }
.slide-thumbnail img {max-width:300px; }
.slide-details { width:290px; float:right; margin-left:10px;}
.slide-details h2 { font-size:1.5em; font-style: italic; font-weight:normal; line-height: 1; margin:0; }
.slide-details .description { margin-top:10px; }

.jFlowControl, .jFlowPrev, .jFlowNext { color:#FFF; cursor:pointer; padding-left:5px; padding-right:5px; padding-top:2px; padding-bottom:2px; }
.jFlowControl:hover, .jFlowPrev:hover, .jFlowNext:hover { background: #43A0D5; }




STEP #3
Now find (CTRL+F) this code in the template:




And immediately before it, paste this code:






Now click Save Template




Finally go to Page Elements > Add a Gadget > HTML/JAVA Script. And add following code to it.

<-! Slide #1 Starts-->

IMAGE-LINK"/>

TITLE-OF-THE-SLIDE

TEXT-OF-THE-SLIDE

<-! Slide #2 Starts-->

IMAGE-LINK"/>

TITLE-OF-THE-SLIDE

TEXT-OF-THE-SLIDE

<-! Slide #3 Starts-->

IMAGE-LINK"/>

TITLE-OF-THE-SLIDE

TEXT-OF-THE-SLIDE

.
.
.
.

Prev

1
2
3

Next

t's Done.

Customization 

Code 1. You can change the background colors in code 1 to suit your blog.

Code 2. First of all downloadhttp://sites.google.com/site/freeblo...ow.1.2.auto.js and upload it to google sites.

You can change width, height and duration speed.

Code 3. As you look on code 3 there are 3 slide codes. First give the image link, add title and finally add description. Do same with all three codes. You can add more slide by adding the code:

IMAGE-LINK"/>

TITLE-OF-THE-SLIDE

TEXT-OF-THE-SLIDE

Also you have to add

4

after

3

and so on for next slides.

 

Tweet

by Jillur Rahman

Jillur Rahman is a Web designers. He enjoys to make blogger templates. He always try to make modern and 3D looking Templates. You can by his templates from Themeforest.

Follow him @ Twitter | Facebook | Google Plus

Tags: blogger / Content / Featured / jQuery / Simple / Slider