Blog Geisha

label cloud dengan jQuery slider

• Silahkan kalian login dengan email dan password Anda ke blogger,

Gambar 1.2

• Selanjutnya, pada dasboard blog Anda silahkan pilih Template,

Gambar 1.3

• Selanjutnya, anda pilih Edit Html dan jangan lupa ceklist Expand Template Widget,
• Gunakan ctrl-F untuk mencari kode di bawah ini,

]]></b:skin>

• Selanjutnya, letakan kode di bawah ini sebelum kode di atas,

.label-size, .jump {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZODzmUobiHWn9p7nWTQxLFBxBEzJof06-ThMSoGLfCpVdQ-Xgl5vWP3UIizjjtyoWgUIvc3-z_44lkmC-QgdDkzpJlxsHEiQLH9hZGVZOr14GwuWQk0sxxvlXIn9yoBaRgTBYX9YIvFkU/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/AVvXsEgZODzmUobiHWn9p7nWTQxLFBxBEzJof06-ThMSoGLfCpVdQ-Xgl5vWP3UIizjjtyoWgUIvc3-z_44lkmC-QgdDkzpJlxsHEiQLH9hZGVZOr14GwuWQk0sxxvlXIn9yoBaRgTBYX9YIvFkU/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/AVvXsEgZODzmUobiHWn9p7nWTQxLFBxBEzJof06-ThMSoGLfCpVdQ-Xgl5vWP3UIizjjtyoWgUIvc3-z_44lkmC-QgdDkzpJlxsHEiQLH9hZGVZOr14GwuWQk0sxxvlXIn9yoBaRgTBYX9YIvFkU/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
}

• Selanjutnya, gunakan ctrl-f untuk mencari kode di bawah ini,

]]></b:skin>

• Lalu letakan script jQuery di bawah ini setelah kode tersebut,

<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.

Cloud Label Setting

• Jika sudah Simpan.