Add Smart Jquery Featured Slider to Blogger / Websites

Oleh Unknown

Thursday, April 11, 2013

Bagikan :

Tweet

How to Install This Widget on Blogger?
Steps...

A. Adding Script Code

B. Adding HTML Code


Adding Script 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:

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 src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><script src='http://safir85.ucoz.com/24work-blogspot/featured-post-s/jquery-1.2.6.min.js' type='text/javascript'></script>
<script src='http://safir85.ucoz.com/24work-blogspot/featured-post-s/jquery.jcarousel.pack.js' type='text/javascript'></script>
<script src='http://safir85.ucoz.com/24work-blogspot/featured-post-s/jquery-ui-personalized-1.5.2.packed.js' type='text/javascript'></script>

<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
wrap:"both",
scroll:2,
animation:"slow"
});
function mycarousel_initCallback(carousel) {
jQuery('#featured-next-button').bind('click', function() {
carousel.next();
return false;
});

jQuery('#featured-prev-button').bind('click', function() {
carousel.prev();
return false;
});
jQuery('.button-nav span').bind('click', function() {
carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text()));
return false;
});
};
jQuery('#feature-carousel').jcarousel({
wrap:"both",
scroll:1,
auto:10,
initCallback: mycarousel_initCallback,
buttonNextHTML: null,
buttonPrevHTML: null
});

});
</script>

<style type="text/css">
.jcarousel-skin-tango .jcarousel-container {-moz-border-radius: 10px;}

.jcarousel-skin-tango .jcarousel-container-horizontal {width: 941px;margin: 0 auto;padding:0 20px;}

.jcarousel-skin-tango .jcarousel-clip-horizontal {width: 941px;height: 254px;}
.jcarousel-skin-tango .jcarousel-item {width: 307px;height: 254px;}
.jcarousel-skin-tango .jcarousel-item-horizontal {margin-right: 10px;}
.jcarousel-skin-tango .jcarousel-item-placeholder {background: #fff;color: #000;}

.jcarousel-skin-tango .jcarousel-next-horizontal {
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEia8cvUP-hwNbeQ7zR_B-PiLzTIAzwU7baVnanNGdFVmvtbp0UFd_kOPrACnYGkVfvVjx_pd2WdG644M7F8BgpuDQ5jvamx6LWUZTmXH0wZGz9PuHAc3TVB3635EUuPLwZbNkOFt6CDQIxR/s1600/image-slider-button.png) no-repeat scroll -46px 0;
cursor:pointer;
height:254px;
right:20px;
position:absolute;
top:0;
width:46px;
}

.jcarousel-skin-tango .jcarousel-prev-horizontal {
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEia8cvUP-hwNbeQ7zR_B-PiLzTIAzwU7baVnanNGdFVmvtbp0UFd_kOPrACnYGkVfvVjx_pd2WdG644M7F8BgpuDQ5jvamx6LWUZTmXH0wZGz9PuHAc3TVB3635EUuPLwZbNkOFt6CDQIxR/s1600/image-slider-button.png) no-repeat scroll 0 0;
cursor:pointer;
height:254px;
left:20px;
position:absolute;
top:0;
width:46px;
}

.jcarousel-container {position: relative;}
.jcarousel-clip {z-index: 2;padding: 0;margin: 0;overflow: hidden;position: relative;}
.jcarousel-list {z-index: 1;overflow: hidden;position: relative;top: 0;left: 0;margin: 0;padding: 0;}
.jcarousel-list li,.jcarousel-item {float: left;list-style: none;width: 75px;height: 75px;}
.jcarousel-next {z-index: 3;display: none;}
.jcarousel-prev {z-index: 3;display: none;}

#news-slider{background-color:#FFFFFF;padding:20px 0;}
#news-slider img{border:none;height:254px;width:307px;}
</style>

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 id='news-slider'>
<ul class='jcarousel-skin-tango' id='mycarousel'>
<li><a href='SLIDE-1-LINK-HERE'><img src='SLIDE-1-IMAGE-ADDRESS-HERE'/></a></li>
<li><a href='SLIDE-2-LINK-HERE'><img src='SLIDE-2-IMAGE-ADDRESS-HERE'/></a></li>
<li><a href='SLIDE-3-LINK-HERE'><img src='SLIDE-3-IMAGE-ADDRESS-HERE'/></a></li>
<li><a href='SLIDE-4-LINK-HERE'><img src='SLIDE-4-IMAGE-ADDRESS-HERE'/></a></li>
<li><a href='SLIDE-5-LINK-HERE'><img src='SLIDE-5-IMAGE-ADDRESS-HERE'/></a></li>
</ul>
</div>

And now click Save 

NOTE : Replace,

SLIDE-X-LINK-HERE with your real featured posts links.

SLIDE-X-IMAGE-ADDRESS-HERE with your real slide images addresses.

Look at the example below:

<div id='news-slider'>
<ul class='jcarousel-skin-tango' id='mycarousel'>
<li><a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjlttCOO-2cZkK0HNBxCiT-vBRa_2oIpoVhieR-gEhVQCSIu3SEJh35rVbAZqX72TzCBLbB_0UutognxU0do1451u0DVFGhkIENuCetUr_fuH7BydK22FGZW2IHDvxfpQP_v-V2x3hcczg/s1600/slide1.jpg'/></a></li>
<li><a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZcXSTm6u5X9F67w_UbCcmU-T7vOXevf-6wXHfapJ6tbh8Af7uWUVEzI4-Kdk4ZG3Gd83-7UjvGpYGcUsrOJizTD3vCZWLhp_cmyRmh04SKor2aT6WirOr1en2WRjswtD4uxPldta1sszD/s1600/slide2.jpg'/></a></li>
<li><a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmI1XRBa7VZE4fLpRVln6xD5ATbib0kDWNdxGDnfeesGVLEnCXEAnexb29jRzacrMCVPIXx22_opai-YtdVaDU-JtKZY0TaTuftHqD-3YG8lk_0Q7eIS2bVZ3HcXzPwV4m62PVgeKjY57F/s1600/slide3.jpg'/></a></li>
<li><a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKj-OMPMPAPPcg5RV2xvuw6hw1jiWROhqqb1VO6UPkLjYIw6dcD24oUGzfAeE5psyKIuRLdeH-Aa8WOnGf2A1axqs_L7HssYCgPre1vsDncqWB9sVGGaKXqn1Og5ypDVcN0dI5d5v5oX7j/s1600/slide4.jpg'/></a></li>
<li><a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHLxkKDR9UBGM8Asgj_GmWMa7Pj1iTlKmzZXsUcso6zeV2Es39vbM3ExDlgwr_V4DVBTnTL2CEawzxMgFRagRMlTCTxZMbXHpK-zHH8RrCXwFVVPakRVqvw0W1wHTYGg7bbBVkkCP_G1SP/s1600/slide5.jpg'/></a></li>
</ul>
</div>

You are done.


We have great collection of Best tricks and tutorials, Bloggingtrainings.blogpsot.com is a Blog Providing with Blogger widgets, help, blogger tips, blogger tricks, hacks, Blogger Gadgets,Plugins and Blogger resources with great skills and templates.practical SEO Tips and all things Blogging,is about Blog tricks & tips, Traffic generation, Backlinks, Search engine optimization, Web designing, E money, Social media, Facebook tricks,Blogging Discussion, Tips & Tricks,logging tips, tricks, how-tos, news, tools and resources, bloggingtrainings.blogspot presented in easy to understand tutorials.Keep visiting us if any links is not working or you want sme more help, then keep looging at bloggingtrainings.blogspot.com.or contact us 0323-7591466.

Tag : Blogger widgets, Blogging Trainings, Blogging Tricks, CONTENT SLIDER, Featured content slider, J QUERY