Cataloged Autobiography BERKENAAN SAYA  Hello. Saya adalah self-taught web designer yang banyak menghabiskan masa meneroka penggunaan CSS dan HTML. Blogging hanyalah hobi. Teruskan membaca.. | The Readable Journal MENEROKA ARTIKEL  Teroka artikel berhubung dengan tutorial, contoh dan penggunaan CSS dan HTML dalam web design di ruang ini. Web design menyeronokan. Ke tutorial...Klik sini | Astrolab Tool KATEGORI ARTIKEL  Suatu sistem yang berfungsi untuk membantu menjelajahi topik-topik terkait dan menyenaraikan pelbagai sub-bahagian artikel...Klik sini |
 BINA NEWS TICKER DENGAN JQUERY |
| May 9, 2011 Posted by: Fauzie |
News Ticker adalah cara yang menarik untuk menunjukkan “headlines” atau “update” kepada pembaca. Terdapat banyak tutorial yang membincangkan bagaimana untuk membuat news ticker ini, malangnya saya rasa ianya tidak begitu sesuai terutama kepada yang baru menggenali “jQuery”.
Untuk tutorial ini jom kita lihat bagaimana kita boleh membuat news ticker yang mudah tetapi “bertenaga” dengan menggunakan jQuery dan juga plugin jCarousel Lite walaupun plugin ini dikira “kecil”.
Untuk melihat “Live Demo” sila klik di sini. Saya telah membina “demo” news ticker ini di dalam url lain untuk menggelakkan “gangguan” kepada script jQuery yang banyak terdapat dalam blog saya inI.
Untuk membuat news ticker ini sila lihat kod-kod html, CSS dan jQuery di bawah ini. Seperti biasa saya telah asingkan kod-kod ini mengikut warna.
<html>
<head>
<style type="text/css">
#newsticker-demo {
width:310px;
background:#EAF4F5;
padding:5px 5px 0;
font-family:Verdana,Arial,Sans-Serif;
font-size:12px;
margin:20px auto auto 50px;
}
#newsticker-demo a {
text-decoration:none;
}
#newsticker-demo img {
border: 2px solid #FFFFFF;
}
#newsticker-demo .title {
text-align:center;
font-size:14px;
font-weight:bold;
padding:5px;
}
.newsticker-jcarousellite {
width:300px;
}
.newsticker-jcarousellite ul li{
list-style:none; display:block; padding-bottom:1px; margin-bottom:5px;
}
.newsticker-jcarousellite .thumbnail {
float:left; width:110px;
}
.newsticker-jcarousellite .Exm {
float:right; width:190px;
}
.newsticker-jcarousellite .Exm span.cat {
display: block; font-size:10px; color:#808080;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<div id="newsticker-demo">
<div class="title">Latest News</div>
<div class="newsticker-jcarousellite">
<ul>
<li>
<div class="thumbnail"><img src="http://farm1.static.flickr.com/143/321464099_a7cfcb95cf_t.jpg ">
</div>
<div class="Exm">
<a href="#">Barcelona Pavilion</a>
<span class="cat">Designed by Ludwig van der Rohe and built for the International Exposition in 1929</span>
</div>
<div class="clear">
</div>
</li>
<li>
<div class="thumbnail"><img src="http://farm4.static.flickr.com/3089/2796719087_c3ee89a730_t.jpg">
</div>
<div class="Exm">
<a href="#">Barcelona Pavilion</a>
<span class="cat">Designed by Ludwig van der Rohe and built for the International Exposition in 1929</span>
</div>
<div class="clear">
</div>
</li>
<li>
<div class="thumbnail"><img src="http://farm1.static.flickr.com/79/244441862_08ec9b6b49_t.jpg">
</div>
<div class="Exm">
<a href="#">Barcelona Pavilion</a>
<span class="cat">Designed by Ludwig van der Rohe and built for the International Exposition in 1929</span>
</div>
<div class="clear">
</div>
</li>
<li>
<div class="thumbnail"><img src="http://farm1.static.flickr.com/28/66523124_b468cf4978_t.jpg">
</div>
<div class="Exm">
<a href="#">Barcelona Pavilion</a>
<span class="cat">Designed by Ludwig van der Rohe and built for the International Exposition in 1929</span>
</div>
<div class="clear">
</div>
</li>
<li>
<div class="thumbnail"><img src="http://farm1.static.flickr.com/163/399223609_db47d35b7c_t.jpg">
</div>
<div class="Exm"><a href="#">Barcelona Pavilion</a>
<span class="cat">Designed by Ludwig van der Rohe and built for the International Exposition in 1929</span>
</div>
<div class="clear">
</div>
</li>
<li>
<div class="thumbnail"><img src="http://farm1.static.flickr.com/153/399232237_6928a527c1_t.jpg">
</div>
<div class="Exm"><a href="#">Barcelona Pavilion</a>
<span class="cat">Designed by Ludwig van der Rohe and built for the International Exposition in 1929</span>
</div>
<div class="clear">
</div>
</li>
</ul>
</div>
</div>
<script src='http://sites.google.com/site/bloggermint/jquery-latest.pack.js' type='text/javascript'/>
<script src='http://sites.google.com/site/bloggermint/jcarousellite_1.0.1c4.js' type='text/javascript'/>
<script type='text/javascript'>
$(function() {
$(".newsticker-jcarousellite").jCarouselLite({
vertical: true,
visible: 3,
auto:500,
speed:1000
});
});
</script>
</body>
</html>
<head>
<style type="text/css">
#newsticker-demo {
width:310px;
background:#EAF4F5;
padding:5px 5px 0;
font-family:Verdana,Arial,Sans-Serif;
font-size:12px;
margin:20px auto auto 50px;
}
#newsticker-demo a {
text-decoration:none;
}
#newsticker-demo img {
border: 2px solid #FFFFFF;
}
#newsticker-demo .title {
text-align:center;
font-size:14px;
font-weight:bold;
padding:5px;
}
.newsticker-jcarousellite {
width:300px;
}
.newsticker-jcarousellite ul li{
list-style:none; display:block; padding-bottom:1px; margin-bottom:5px;
}
.newsticker-jcarousellite .thumbnail {
float:left; width:110px;
}
.newsticker-jcarousellite .Exm {
float:right; width:190px;
}
.newsticker-jcarousellite .Exm span.cat {
display: block; font-size:10px; color:#808080;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<div id="newsticker-demo">
<div class="title">Latest News</div>
<div class="newsticker-jcarousellite">
<ul>
<li>
<div class="thumbnail"><img src="http://farm1.static.flickr.com/143/321464099_a7cfcb95cf_t.jpg ">
</div>
<div class="Exm">
<a href="#">Barcelona Pavilion</a>
<span class="cat">Designed by Ludwig van der Rohe and built for the International Exposition in 1929</span>
</div>
<div class="clear">
</div>
</li>
<li>
<div class="thumbnail"><img src="http://farm4.static.flickr.com/3089/2796719087_c3ee89a730_t.jpg">
</div>
<div class="Exm">
<a href="#">Barcelona Pavilion</a>
<span class="cat">Designed by Ludwig van der Rohe and built for the International Exposition in 1929</span>
</div>
<div class="clear">
</div>
</li>
<li>
<div class="thumbnail"><img src="http://farm1.static.flickr.com/79/244441862_08ec9b6b49_t.jpg">
</div>
<div class="Exm">
<a href="#">Barcelona Pavilion</a>
<span class="cat">Designed by Ludwig van der Rohe and built for the International Exposition in 1929</span>
</div>
<div class="clear">
</div>
</li>
<li>
<div class="thumbnail"><img src="http://farm1.static.flickr.com/28/66523124_b468cf4978_t.jpg">
</div>
<div class="Exm">
<a href="#">Barcelona Pavilion</a>
<span class="cat">Designed by Ludwig van der Rohe and built for the International Exposition in 1929</span>
</div>
<div class="clear">
</div>
</li>
<li>
<div class="thumbnail"><img src="http://farm1.static.flickr.com/163/399223609_db47d35b7c_t.jpg">
</div>
<div class="Exm"><a href="#">Barcelona Pavilion</a>
<span class="cat">Designed by Ludwig van der Rohe and built for the International Exposition in 1929</span>
</div>
<div class="clear">
</div>
</li>
<li>
<div class="thumbnail"><img src="http://farm1.static.flickr.com/153/399232237_6928a527c1_t.jpg">
</div>
<div class="Exm"><a href="#">Barcelona Pavilion</a>
<span class="cat">Designed by Ludwig van der Rohe and built for the International Exposition in 1929</span>
</div>
<div class="clear">
</div>
</li>
</ul>
</div>
</div>
<script src='http://sites.google.com/site/bloggermint/jquery-latest.pack.js' type='text/javascript'/>
<script src='http://sites.google.com/site/bloggermint/jcarousellite_1.0.1c4.js' type='text/javascript'/>
<script type='text/javascript'>
$(function() {
$(".newsticker-jcarousellite").jCarouselLite({
vertical: true,
visible: 3,
auto:500,
speed:1000
});
});
</script>
</body>
</html>
Untuk mencubanya membuatnya, sila salin (copy) semua kod-kod ini dan "paste" di dalam Notepad. Save fail dengan memberi nama serta extension .html dibelakangnya (contoh: newsticker.html). Untuk melihatnya, anda buka browser, klik "File"-->klik "Open File" dan pergi ke "document" dan cari serta klik nama fail tersebut.
Untuk memasangnya di dalam blog, sila klik Design--->Edit HTML dan cari kod ini:
]]></b:skin>
</head>
Di bahagian atas kod ini, ]]></b:skin> sila paste kod-kod warna "maroon' (kod CSS).
Satu perkara yang harus diperhatikan ialah kod ini <style type="text/css"> dan juga kod ini </style>. Ini adalah kerana terdapat template blogger yang perlu ditambah dengan kod-kod ini dan ada juga yang tidak memerlukannya. Jika anda keluarkan kod ini dan fail tidak boleh di "save", maka anda harus menambah kod-kod ini.
Setelah fail di"save", sila cari kod-kod ini pula:
</body>
</html>
Kod-kod ini terletak di bahagian bawah sekali (sila scroll kod hingga yang paling bawah). Di bahagian atas </body>, anda paste pula kod-kod jQuery yang berwarna hijau.
Kod-kod HTML (yang berwarna biru) anda boleh letakkan di bahagian sidebar iaitu klik Design-->klik Add a Gadget page element)-->klik HTML/javaScript dan paste kod-kod berwarna biru itu.
Kod-kod HTML ini juga boleh diletakkan di bahagian "blog post". Klik Edit Posts--> klik Edit Html (bukan dalam mode compose). Satu perkara yang perlu anda lakukan ialah "compress" kod-kod HTML ini iaitu rapatkan di antara satu sama lain seperti ini:
<div id="newsticker-demo"><div class="title">Latest News</div><div class="newsticker-jcarousellite"><ul><li>...........
"Live Demo"
Kembali kepada | Archives →
Sebarang komen dan pertanyaan, sila klik butang di bawah ini:
