Moving jquery image slider for featured content in Blogger

Moving jquery image slider for featured content in Blogger

4:05 AM









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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ5j8U0xUgg20l2_6Hiy2OV-dvjsRCJcrXcaxwuoax2o_XlirOTRkXF3T0QlLZiR3USLacX3VbuqyTkF8jWDPdpddDRMRC0DcGRreT4oPLEIAOX6kWPJab9KgG-sy8QUSf9t_33iCtnA/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;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB9WdOFJW6YHvxgmn5FE-lcH5CI6Q0A-K6AK-UhnW_quLI6C2mRq39SRinJsPM2jSQ524XiU0M9DPCSK4VnS9mEu3V5rijs1hP5oDWgbgjd7E33BfzRTnHc2dpJD41AKVid6-xkUGwG04/s400/left.jpg&#39;, -48, 0], rightnav: [&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsfmCCqa5sSkCnoF9hZrKaW_dMXu-GiCXOWhlk09xIlVePLsduJiiNeVZJoJD6OPvDiG4MPZt3ZoAXjPR_YZfZiyIHKSbtv6Xbw4wwI4-oeQsJpylXeMM2rqMgJy6jdS8-U4N1C2lUrCI/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXqkPxA77Ux4yrtOx-SfKhowJB1ta625M-Kd8PItt-T555xqUogXbzeqq04mIwqqre2Al5KpP6Gso_6jKNmj4XbQcUUyRteIuo7JpOvIQNTtAmWGnxzuDHLqO5CqQ56ikS0Nij-L5z9cc/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNprKAJxi8pJwCm-jifKHXR-2RLUgqRIS0OOSCX95wNDXtXhhHmPeMuvXVhq4L-0GmQ4YiAATCPn5RD7HsHDCii4QNKJ-ugleWCKQPjAhWAxh2QcJKogCRE4b6tLNFS1m_n4AkXhtoF8o/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAdjrdaW2xmjK-KyRIYE5ScHdijfS6vIbZHPCqFLohoc39klAN5R89SrDt-_3PkTB_WFc_llDuFjiZ9yT_7bLa0Hkxnqe-LqLQVCh_n49FoIgGHuH6JD_xEWpIXazs2hiQszKd8LnV8Vo/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_4_No_vwNzgJPh2kgR2eifjMej1KbT_IE0DoVf49_I1KuaTqpOMAwmhcIFKLYgRAWtQ_O1Vl95u56RYX9E9YA_uCURICBP4BRUqBUmtoRXbo5p5fK2nW86RrXexGRJVXCNSWu4o5sZM4/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_yQ2UNk4I4T-0_2Nn466RPBFbSDouyu0Wv2-GbLXb7DX3tezviBcJ6rS5l2C0HAN49R_yXqH07S94QIO6Ihyphenhyphenj1IKjmSH5r_-tMhRwaKTJhILZivZGDGDP3dQgLz1vbRpbCJ9APDXGai8/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWohTSEisWgYjNPacAra-K7HGypDcNzaiPUS0SAhw02QEBkJMi5pSVpxX10B83g7egCCNBXaaPjaGdm_DyNpIgtqOjIlbEKfqmBBjKX29RQpiGtorvNaQhABLlr2CLQpTozWBg9blFR1c/s640/Versatile.JPG' title='Versatile' width='185'/> </a>

</div>

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



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


Now click Save 













About

Relax and enjoy, don't be rush.

Next
« Prev Post
Previous
Next Post »