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/AVvXsEi5EGuB8t0F6a4zqMi72ZFJ4HeFK9uDiKJkeoImZlo70sBY-kTXzq6ALKAwX1dsU07G2Vm0BLt7uurCGTZZGzZUIViEJRwZZ7IzrO-wYdTA4MGebnL2nss80t1pu2CG0-bP3HnJwMMXP5jg/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/AVvXsEi5EGuB8t0F6a4zqMi72ZFJ4HeFK9uDiKJkeoImZlo70sBY-kTXzq6ALKAwX1dsU07G2Vm0BLt7uurCGTZZGzZUIViEJRwZZ7IzrO-wYdTA4MGebnL2nss80t1pu2CG0-bP3HnJwMMXP5jg/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/AVvXsEi5EGuB8t0F6a4zqMi72ZFJ4HeFK9uDiKJkeoImZlo70sBY-kTXzq6ALKAwX1dsU07G2Vm0BLt7uurCGTZZGzZUIViEJRwZZ7IzrO-wYdTA4MGebnL2nss80t1pu2CG0-bP3HnJwMMXP5jg/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>
Note : Gunakan setting label di bawah ini agar cloud label muncul dengan sempurna.
Save Template !!
kackdir
Demikian artikel tentang Cara membuat Label Cloud Dengan Efek jQuery Slider ini dapat kami sampaikan, semoga artikel atau info tentang Cara membuat Label Cloud Dengan Efek jQuery Slider ini, dapat bermanfaat. Jangan lupa dibagikan juga ya! Terima kasih banyak atas kunjungan nya.
