.....

3 Add/Install Simplest jQuery Featured Content Slider in Blogger/Blogspot Blog










UPDATE: I updated some of my posts, this post I update 17+ Featured Content Slider for Blogger Using jQuery ..........




STEP #1
Log in to Blogger -> Layout -> Edit HTMLand select the tick-box Expand Widget Templates
Then, find (CTRL+F) this code in the template:
]]></b:skin>
And immediately before it, paste this code:

#jFlowSlide{ background:#DBF3FD; font-family: Georgia; }

#myController { font-family: Georgia; padding:2px 0; width:610px; background:#3AB7FF; }

#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; }



Now find this code in the template:
</head>
And immediately before it, paste this code:




<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script language="javascript" type="text/javascript" src="http://sites.google.com/site/tipsotrickscom/jquery/jquery.flow.1.2.auto.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$("#myController").jFlow({

slides: "#slides",

controller: ".jFlowControl", // must be class, use . sign

slideWrapper : "#jFlowSlide", // must be id, use # sign

selectedWrapper: "jFlowSelected", // just pure text, no sign

auto: true, //auto change slide, default true

width: "610px",

height: "235px",

duration: 400,

prev: ".jFlowPrev", // must be class, use . sign

next: ".jFlowNext" // must be class, use . sign

});

});

</script>


Now click Save Template



STEP #2 Log in to Blogger, go to Layout
Add a Gadget of HTML/JavaScript type.
image
Then add this code in to it:


<div class="jflow-content-slider">

<div id="slides">

<!-- Slide #1 Starts-->

<div class="slide-wrapper">

<div class="slide-thumbnail">

<img alt="" src="IMAGE-LINK"/>

</div>

<div class="slide-details">

TITLE-OF-THE-SLIDE

<div class="description">

TEXT-OF-THE-SLIDE

</div>

</div>

<div class="clear"></div>

</div>

<!-- Slide # 1 Ends -->

<!-- Slide #2 Starts-->

<div class="slide-wrapper">

<div class="slide-thumbnail">

<img alt="" src="IMAGE-LINK"/>

</div>

<div class="slide-details">

TITLE-OF-THE-SLIDE

<div class="description">

TEXT-OF-THE-SLIDE

</div>

</div>

<div class="clear"></div>

</div>

<!-- Slide # 2 Ends -->

<!-- Slide #3 Starts-->

<div class="slide-wrapper">

<div class="slide-thumbnail">

<img alt="" src="IMAGE-LINK"/>

</div>

<div class="slide-details">

TITLE-OF-THE-SLIDE

<div class="description">

TEXT-OF-THE-SLIDE

</div>

</div>

<div class="clear"></div>

</div>

<!-- Slide # 3 Ends -->

.

.

.

.

<!-- You can add as many slides as you want above this line -->

</div>


<div id="myController">

<span class="jFlowPrev">Prev</span>

<span class="jFlowControl">1</span>

<span class="jFlowControl">2</span>

<span class="jFlowControl">3</span>


<!-- Increase these numbers as with the increase in your number of slides above -->

<span class="jFlowNext">Next</span>

</div>

<div class="clear"></div>

</div>


Now click Save 



CUSTOMIZATIONS


- (In code of Step 3) numbers in red are width and height of the main slider while the number in green is the sliding speed.

- In this content slider everything resides in the widget's div tags.
(In code of Step 4) Just replace "IMAGE-TITLE", "TITLE-OF-THE-SLIDE", "TEXT-OF-THE-SLIDE" with your image, title and text respectively.

You can increase the number of slides according to your need and available space.

- If you increase the number of slides, then don't forget to increase "jFlowControl" numbering.
For example if you add another (fourth) slide then you have to add 4 in order to show number "4" on the main widget.

So if you have like 15 slides, then make sure you have 15 (upto 15).

- (In code of Step 3) Links given in blue are links to 2 JavaScripts that this slider requires. If you have your own server you should download the scripts and upload them on your server for speedy loading.













Free Backlinks for Blog and Website

Do you want to know Where to get free backlinks? This is a free, fast, and simple immediate automatic backlinks for optimizing your blog or web page on search engines result.Everyone knows how important backlinks are to getting a good rank.Here, we offer a backlink for free and very fast for your sites. Copy the html code first (no change needed), and then paste to your website or blog.To view your backlink you can click the image link from your website or blog. And well... your website url done and will be displaying in first references.If any visitors click this banner from your website or blog, your url backlink will be creating automatically in this website.You can build backlink as many as you want, no limitation and restriction, but no spam ! Wish your website's ranking quickly on Top Google, Yahoo and Alexa!

Free Automatic Backlink for Blog and Website

If our Tutorials have helped you a little, then kindly spread our voice using the badge below:- Copy this html code to your website >>
Free Backlinks blogger widgets



Optionally use this Widget installer to add this link to your blogger blog.

* Please note:- After you paste the code into the website, please click on the button to create backlinks to your website. - If you remove the code from your website where your backlink will be deleted automatically. - if you know any free backlink info, please submit here, Let's share the free backlink list to everyone.
submit here

3 Responses So Far:

ARC™ said...

do u have an example of how will this look like once it is installed?

admin said...

@ARC™ Thanks for comment.
OK, I will try

peonyinlove said...

Hi I tested this script out and did exactly on each of the steps but some how it's not working for me. I did a test run on my other blog and the script works, I'm wondering what is preventing the blog from installing this script. Possibly could you take a look at it my site is peonyinlove.org and I'm running on blogger.

Post a Comment

Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Powered by Blogger