Slider Effect Label Cloud With jQuery

Slider Effect Label Cloud With jQuery - Label adalah kata kunci untuk mewakili banyak artikel di blog . Dan label ini penting sekali untuk ditampilkan di dalam blog dimana pengunjung akan dengan mudah mengakses banyak artikel dengan tema yang diminatinya . Tapi , di Blogger tampilan default dari Label Cloud ini teramat sangat kurang menarik dan bahkan bisa memperburuk tampilan Blog . Untuk mengatasinya kita modifikasi dengan menggunakan Css .

Dan lagi , untuk menambah style efek disini kita akan memanfaatkan jQuery yang pastinya bakal nambah laleb cloud jadi makin asik untuk dilihat .

Jika tertarik untuk memasangnya , silahkan ikuti petunjuk pemasangan dibawah ini .

Cara Membuat Slider Effect Label Cloud With jQuery
Masuk ke Blogger
Buka Menu Template
Edit HTML dan cari kode ]]></b:skin>
Kemudian tempelkan Css dibawah ini tepat diatasnya

.label-size, .jump {
background:url(https://lh5.googleusercontent.com/-F0D0iRffZxo/Tu2qokzdrBI/AAAAAAAABRw/Nxlq58jiFg0/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://lh5.googleusercontent.com/-F0D0iRffZxo/Tu2qokzdrBI/AAAAAAAABRw/Nxlq58jiFg0/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://lh5.googleusercontent.com/-F0D0iRffZxo/Tu2qokzdrBI/AAAAAAAABRw/Nxlq58jiFg0/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 , masih di mode HTML edit . Letakkan Script dibawah ini tepat dibawah ]]></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> 

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js' type='text/javascript'></script>

Kode diatas adalah kode jquery , bila di template anda sudah terpasang script ini sebelumnya , maka tinggalkan script ini .

Setting label
Untuk hasil yang sempurna , silahkan sesuaikan setting label widget seperti dibawah ini

Langkah terakhir simpan template .

Jangan lupa untuk membackup Template sebelum anda mengedit elemen dan melakukan penambahan elemen pada template .