Featured Post

(Tks from www.24work.blogspot.com)

Simple jQuery Featured Content Slider for Blogger Blog   

I have made some changes on the format - width, height and duration speed in the template, the content text has been removed and the “slide-link” code has been added in the gadget for each slide.   So that my featured posts are presented as below :

  

I chose Simple jQuery Featured Content Slider because the post can be moved by itself.  Visitors are able to select the desired post as they wish.  

 How to Install This Widget on Blogger?

Steps...
A. Adding CSS Theme Code
B. Adding Script Code
C. Adding HTML Code

Adding CSS Theme Code

In old layout: Go to Dashboard - Design - Edit HTML - Expand Widget Templates.

In new layout: Go to Dashboard - Template - Edit Template HTML - Expand Widget Templates.

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

]]></b:skin>

And immediately before it, paste this code:

<a href='http://24work.blogspot.com' target='_blank' title='Blogger Widgets'><img alt='Blogger Widgets' border='0' src='http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png' style='position:absolute; top: 0px; right: 0px;'/></a><script language='javascript' src='http://safir85.ucoz.com/24work-blogspot/featured-post-s/jquery-0-1.min.js' type='text/javascript'/>

<script language='javascript' src='http://safir85.ucoz.com/24work-blogspot/featured-post-s/freebloggerhelp-jquery.flow.1.2.auto.js' type='text/javascript'/>

<script type='text/javascript'>

$(document).ready(function(){

$(&quot;#myController&quot;).jFlow({

slides: &quot;#slides&quot;,

controller: &quot;.jFlowControl&quot;, // must be class, use . sign

slideWrapper : &quot;#jFlowSlide&quot;, // must be id, use # sign

selectedWrapper: &quot;jFlowSelected&quot;, // just pure text, no sign

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

width: &quot;310px&quot;,

height: &quot;210px&quot;,

duration: 100,

prev: &quot;.jFlowPrev&quot;, // must be class, use . sign

next: &quot;.jFlowNext&quot; // must be class, use . sign

});

});

</script>

And now click Save Template

Adding Script Code


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

Step 2:And find the code </head>
Step 3: Now add the following code just before the </head> tag.

<a href='http://24work.blogspot.com' target='_blank' title='Blogger Widgets'><img alt='Blogger Widgets' border='0' src='http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png' style='position:absolute; top: 0px; right: 0px;'/></a><script language='javascript' src='http://safir85.ucoz.com/24work-blogspot/featured-post-s/jquery-0-1.min.js' type='text/javascript'/>

<script language='javascript' src='http://safir85.ucoz.com/24work-blogspot/featured-post-s/freebloggerhelp-jquery.flow.1.2.auto.js' type='text/javascript'/>

<script type='text/javascript'>

$(document).ready(function(){

$(&quot;#myController&quot;).jFlow({

slides: &quot;#slides&quot;,

controller: &quot;.jFlowControl&quot;, // must be class, use . sign

slideWrapper : &quot;#jFlowSlide&quot;, // must be id, use # sign

selectedWrapper: &quot;jFlowSelected&quot;, // just pure text, no sign

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

width: &quot;310px&quot;,

height: &quot;210px&quot;,

duration: 100,

prev: &quot;.jFlowPrev&quot;, // must be class, use . sign

next: &quot;.jFlowNext&quot; // must be class, use . sign

});

});

</script>

And now click Save Template

Adding HTML Code

So, let's see how to install this cool widget in your blog..

1. Sign into Blogger dashboard

old Blogger interface: Go to Dashboard - Design - Page Elements - Add a Gadget.If you're using the new Blogger interface: Go to Dashboard - Layout - Add a Gadget.Select 'HTML/Javascript' and add the one of code given below.Just copy and paste this code..

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

<div id="slides">

<div class="slide-wrapper">

<div class="slide-thumbnail">

<li><a href='http://yip-sf.blogspot.sg/search/label/Vietnam%20Trip/awesome/?num=10'>

<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhclxNj-lVDgO8GfFiDcH5NMzcfYLY8qRUwEC7b8MsKLBdljMYstdFldo0ttEOz3J07TC-V2A-28LHk-E2my-ULlF83E3wMrq1jLXpTIv1HKQx4OW3RzK5oz75IfE2g6ymmNqVDqE7Hfuen/s1600/DSC_0383.JPG"/></a></li>

<div class="description">

</div>

</div>

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

</div>

<!-- Slide # 1 Ends -->

<div class="slide-wrapper">

<div class="slide-thumbnail">

<li><a href='http://yip-sf.blogspot.sg/search/label/New%20Zealand%20Trip/awesome/?num=10'>

<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgprVlYAWbcBGi6URdhRryTBY7ZqUXzhZjdguT4t72wufTZ0bK2uZoyhbryDwztNfP7CNHF3E0kxrVMBf4xP9t88XdcQGndB2o8daBFyZRhxjHtTu7GD6PZ6GO5EBy0ua9u_Vi01BiA2Aoh/s1600/P1040818.JPG"/></a></li>

<div class="description">

</div>

</div>

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

</div>

<!-- Slide # 2 Ends -->

<div class="slide-wrapper">

<div class="slide-thumbnail">

<li><a href='slide link'>

<img alt=""img link"/></a></li>

<div class="description">

</div>

</div>

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

</div>

<!-- Slide # 3 Ends -->

<!—add in more posts link and img links with the increase in your number of slides above -->

</div>

</div>

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

<div id="myController">

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

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

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

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

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

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

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

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

<span class="jFlowControl">8</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>

And now click Save

Important note:  the background with “green”  must be present!