.....

1 Moving jquery image slider for featured content in Blogger









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:
#myslides{



background:#000 url(http://1.bp.blogspot.com/_xfdD6S9fOk4/Sd1SjSaUrXI/AAAAAAAAA20/ndvDf0nTslY/s1600/mslid.jpg) repeat-x;

width: 650px;

height:165px;

margin-bottom:5px;

}



.stepcarousel{

position: relative; /*leave this value alone*/

overflow: scroll; /*leave this value alone*/

width: 554px; /*Width of Carousel Viewer itself*/

height: 160px; /*Height should enough to fit largest content's height*/

margin: 0px 48px 5px 48px;



}



.stepcarousel .belt{

position: absolute; /*leave this value alone*/

left: 0;

top: 0;

}



.stepcarousel .panel{

float: left; /*leave this value alone*/

overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/

margin: 20px 10px ; /*margin around each panel*/

width:170px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */

background:#0e1829;

height:120px;

border:1px solid #1d2c44;



}

.stepcarousel .panel p{

text-align: left; /*leave this value alone*/

overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/

margin: 5px 5px ; /*margin around each panel*/



}



.stepcarousel .panel h2{

text-align: left; /*leave this value alone*/

height:20px;

overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/

margin: 2px 5px ; /*margin around each panel*/

font-size:16px;

font-weight:bold;

text-align:center;

font-family:Georgia,century gothic,Arial,verdana, sans-serif;

}



.stepcarousel .panel img{

float: left; /*leave this value alone*/

background:#0E1829; /*clip content that go outside dimensions of holding panel DIV*/

margin: 5px 5px 5px 5px; /*margin around each panel*/

padding:0px 0px;

}



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

<!-- JavaScript Slider -->

<script src='http://www.yourjavascript.com/57180121136/jquery-1.3.2.js' type='text/javascript'/>

<script src='http://www.yourjavascript.com/30111191622/slider.js' type='text/javascript'/>



<!-- End JavaScript Slider -->

<script type='text/javascript'>

stepcarousel.setup({

galleryid: &#39;mygallery&#39;, //id of carousel DIV

beltclass: &#39;belt&#39;, //class of inner &quot;belt&quot; DIV containing all the panel DIVs

panelclass: &#39;panel&#39;, //class of panel DIVs each holding content

panelbehavior: {speed:1500, wraparound:true, persist:true},

autostep: {enable:true, moveby:1, pause:1000},

defaultbuttons: {enable: true, moveby: 4, leftnav: [&#39;http://1.bp.blogspot.com/_v5IxGTiMTD8/SxOlAIA_ZZI/AAAAAAAAAfg/ELVwF1qY8M8/s400/left.jpg&#39;, -48, 0], rightnav: [&#39;http://1.bp.blogspot.com/_v5IxGTiMTD8/SxOlAVn-OvI/AAAAAAAAAfo/kMJcmlXZKCs/s400/right.jpg&#39;, 0, 0]},

statusvars: [&#39;statusA&#39;, &#39;statusB&#39;, &#39;statusC&#39;], //register 3 variables that contain current panel (start), current panel (last), and total panels

contenttype: [&#39;external&#39;] //content setting [&#39;inline&#39;] or [&#39;external&#39;, &#39;path_to_external_file&#39;]



})



</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 id="myslides">

<div id="mygallery" class="stepcarousel">

<div class="belt">



<!-- 1st Template -->

<div class='panel'>

<a href='http://www.bloggertemp.com/2010/01/blogger-template-made-in-spain.html' target='blank' title='Made in Spain'> <img alt='Made in Spain' height='135' src='http://2.bp.blogspot.com/_0SKrDjfr5oU/Sz4Y7UbEaOI/AAAAAAAAAFk/jQ0KY7f5LYY/s400/madeinspain.jpg' width='185'/> </a>

</div>

<!--end code of 1st Template -->

<!-- 2nd Template -->



<div class='panel'>

<a href='http://www.bloggertemp.com/2010/01/blogger-template-fashion-press.html' target='blank' title='Fashion Press'> <img alt='Fashion Press' height='135' src='http://2.bp.blogspot.com/_0SKrDjfr5oU/S0eQinj2JZI/AAAAAAAAAGk/IUxdzuDqjLU/s400/fashion-press.jpg' width='185'/> </a>



</div>

<!--end code of 2nd Template -->



<!-- 3rd Template -->



<div class='panel'>

<a href='http://www.bloggertemp.com/2010/01/blogger-template-techlure.html' target='blank' title='Techlure'> <img alt='Techlure' height='135' src='http://4.bp.blogspot.com/_0SKrDjfr5oU/S1N4szb78_I/AAAAAAAAAMQ/qiD54DsKF3g/s640/techlure.JPG' title='Techlure' width='185'/> </a>

</div>

<!--end code of 3rd Template -->

<!-- 4th Template -->



<div class='panel'>

<a href='http://www.bloggertemp.com/2010/02/blogger-template-woodmag.html' target='blank' title='Woodmag'> <img alt='Woodmag' height='135' src='http://1.bp.blogspot.com/_0SKrDjfr5oU/S3bBpyMVuzI/AAAAAAAAANg/tpLnSSEgW2w/s640/Woodmag-blogger-template.jpg' title='Techlure' width='185'/> </a>

</div>

<!--end code of 4th Template -->

<!-- 5th Template -->



<div class='panel'>

<a href='http://www.bloggertemp.com/2010/02/blogger-template-showcase.html' target='blank' title='Showcase'> <img alt='Showcase' height='135' src='http://2.bp.blogspot.com/_0SKrDjfr5oU/S4gEU5L0qwI/AAAAAAAAAOM/qfEUlNYY3nI/s640/showcase-portfolio-blogger-template.JPG' title='Showcase' width='185'/> </a>

</div>

<!--end code of 5th Template -->

<!-- 6th Template -->



<div class='panel'>

<a href='http://www.bloggertemp.com/2010/03/blogger-template-versatile.html' target='blank' title='Versatile'> <img alt='Versatile' height='135' src='http://3.bp.blogspot.com/_0SKrDjfr5oU/S5DXiv8-jPI/AAAAAAAAAZ4/0_MjESQTaXM/s640/Versatile.JPG' title='Versatile' width='185'/> </a>

</div>

<!--end code of 6th Template -->



</div></div></div>



Now click Save 













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

1 Responses So Far:

Freedem of Free Softwares said...

Please can you help me to include that slideshow on my blog, it work but messing everything on my page, Please can you help me online. I live in Morocco my time is GMT. I can give you my account and fix me that : http://antivirusrescue.blogspot.com/

Post a Comment

Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Powered by Blogger