Home > tutorial > Cara membuat Label Cloud Dengan Efek jQuery Slider

Cara membuat Label Cloud Dengan Efek jQuery Slider

Bagikan ke Teman! :

Tampilan label cloud dengan jQuery slider :

Langkah-Langkah membuat nya sebagai berikut :
cari kode ]]></b:skin>
copy kode di bwah letakkan di atas ]]></b:skin>

.label-size, .jump {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDPclzub-KuJsOyS5nOVwF9OOpdFUFbrrfkAv9Io_RR__2UaWKHgMI_-WPDTeyfkjn7_T9CRkP-uzYtaKkK45I4EsREkszSEHbayRlKQkOnHjQ7kNMunVII6u29mFcWfHwe0fDRBAOjKjj/h1600/sliding_button.png) no-repeat 0 0;
color:#3f3f3f;
float:left;
height:25px;
line-height:1;
position:relative;
text-decoration:none;
font-weight:700;
font-size:12px;
display:none;
margin:5px;
padding:0 5px 0 8px
}
.jump-link {
float:right
}
.label-size:hover,.jump:hover {
color:#555;
cursor:pointer;
text-decoration:none
}
.label-size .label-count,.jump .more {
display:block;
float:left
}
.label-size a,.label-size span,.jump a {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDPclzub-KuJsOyS5nOVwF9OOpdFUFbrrfkAv9Io_RR__2UaWKHgMI_-WPDTeyfkjn7_T9CRkP-uzYtaKkK45I4EsREkszSEHbayRlKQkOnHjQ7kNMunVII6u29mFcWfHwe0fDRBAOjKjj/h1600/sliding_button.png)
no-repeat 100% -25px;
height:19px;
position:relative;
text-shadow:0 1px 1px #fff;
z-index:10;
display:inline-block;
padding:6px 10px 0 0
}
span.label-count,span.more {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDPclzub-KuJsOyS5nOVwF9OOpdFUFbrrfkAv9Io_RR__2UaWKHgMI_-WPDTeyfkjn7_T9CRkP-uzYtaKkK45I4EsREkszSEHbayRlKQkOnHjQ7kNMunVII6u29mFcWfHwe0fDRBAOjKjj/h1600/sliding_button.png)
no-repeat 100% -50px;
color:#fff;
height:19px;
position:absolute;
right:0;
text-shadow:0 -1px 0 #c54a0c;
top:1px;
z-index:5;
padding:5px 10px 0
{

masih di kode yang sama :
letakkan kode di bawah taruh di bawah ]]></b:skin>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {

// Label Colud
$('.label-size').each(function(i) {
setTimeout(function() {
$('.label-size:eq(' + i + ')').css({
display: 'block',
opacity: 0
}).stop().animate({
opacity: 1
}, 'easeInOutExpo');
}, 250 * (i + 1))
});
$('.label-size').hover(function() {
$(this).stop().animate({
paddingRight: ($('.label-count', this).outerWidth() - 5)
}, 'easeInOutExpo');
}, function() {
$(this).stop().animate({
paddingRight: 5
}, 'easeInOutExpo');
});

$('.blog-pager a,.jump-link a,.tip,ul.social a').tipTip();

});
//]]>
</script>