Label Cloud Dengan Efek jQuery Slider

Label Cloud Dengan Efek jQuery Slider – Nah pada kesempatankali ini saya akan membahas mengenai penerapan label cloud pada blog. Saya akanmembahas bagaimana merubah tampilan label cloud yang biasa menjadi label clouddengan tampilan memukau dan jarang kita lihat sebelumnya. Pada tampilan labelcloud kali ini menggunakan script jQuery agar tampilan menjadi indah danmenarik, juga memiliki efek slider pada jumlah posting. Jika Anda melihattampilan label cloud yang akan saya berikan ini, jangan heran dengantampilannya yang berbeda dari yang lainnya. Anda juga dapat menggunakannyakedalam template Anda tanpa syarat dan dapat langsung mempraktekannya melaluicara-cara berikut ini.

Tampilan label cloud dengan jQuery slider, atau demonya.

label cloud dengan jQuery slider

Langkah-langkah yang harus Anda lakukan sebagai berikut,

  • 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://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, 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>




  • Terakhir, Save Template.

  • Note : Gunakan setting label di bawah ini agar cloud label muncul dengan sempurna.
    Cloud Label Setting
    • Jika sudah Simpan.
    Sekian sudah tutorial dari saya, semoga artikel ini dapat bermanfaat atau sekedar inspirasi dan pengetahuan saja, apabila menurut Anda bermanfaat hargailah artikel tersebut.

    Selamat mencoba dan terima kasih.
    4.5

    0 Comment:

    Posting Komentar