Sobat sudah baca jQuery slider. Kali ini Beben si bloglang anu ganteng kalem tea akan berbagi yang mirip dengan itu bisa gonta-ganti gituh, tapi ini berbentuk pesan, gambar banner juga bisa pokoknya bisa ganti² gitoh. Dalam format HTML <li> ini sehingga mudah digunakan :D Tentunya harus memiliki jQuery 1.4.3 karena ini merupakan trik plug-in ;))
Letakan script jQuery plugin ini dibawah Jquery 1.4.3 atau diatas tag </body>
Letakan script jQuery plugin ini dibawah Jquery 1.4.3 atau diatas tag </body>
Jquery Pug-in
<script type="text/javascript">
//<![CDATA[
this.randomtip = function(){
var pause = 5000; // define the pause for each tip (in milliseconds)
var length = $("#tips li").length;
var temp = -1;
this.getRan = function(){
// get the random number
var ran = Math.floor(Math.random()*length) + 1;
return ran;
};
this.show = function(){
var ran = getRan();
// to avoid repeating
while (ran == temp){
ran = getRan();
};
temp = ran;
$("#tips li").hide();
$("#tips li:nth-child(" + ran + ")").fadeIn("slow");
};
show(); setInterval(show,pause);
};
$(document).ready(function(){
randomtip();
});
//]]>
</script>
Cari kode ]]></b:skin> lalu masukin kode CSS berikut diatasnya.//<![CDATA[
this.randomtip = function(){
var pause = 5000; // define the pause for each tip (in milliseconds)
var length = $("#tips li").length;
var temp = -1;
this.getRan = function(){
// get the random number
var ran = Math.floor(Math.random()*length) + 1;
return ran;
};
this.show = function(){
var ran = getRan();
// to avoid repeating
while (ran == temp){
ran = getRan();
};
temp = ran;
$("#tips li").hide();
$("#tips li:nth-child(" + ran + ")").fadeIn("slow");
};
show(); setInterval(show,pause);
};
$(document).ready(function(){
randomtip();
});
//]]>
</script>
#tips, #tips li{
margin:0;
padding:0;
list-style:none;
}
#tips{
width:100%;
font-size:15px;
line-height:120%;
}
#tips li{
color: #ffffff;
text-align: center;
padding:10px;
background:#555555;
display:none; /* hide the items at first only */
}
Untuk masukin kode HTML, bisa dilakukan didalam tag <body> template sobat atau dengan jalan Add a Gadget ► HTML/Javascriptmargin:0;
padding:0;
list-style:none;
}
#tips{
width:100%;
font-size:15px;
line-height:120%;
}
#tips li{
color: #ffffff;
text-align: center;
padding:10px;
background:#555555;
display:none; /* hide the items at first only */
}
Kode HTML
Save dan lihat hasilnya, berubah-rubah enggak tuh tulisannya yg ditag <li> tersebut :P See you and happy blogging \m/<ul id="tips">
<li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr?</li>
<li>Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua?</li>
<li>At vero eos et accusam et justo duo dolores et ea rebum?</li>
<li>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet!</li>
<li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr?</li>
</ul>
Resource by: www.snipplr.com/
Loading... |
2 comments
DO NOT EVEN TRY ADD LINK [-X
You can use some HTML tags, such as
<b> - <i> - <a> - http://...jpg/gif/png/bmp - http://youtu.be/...