jQuery
Pergerakan efek Scrolling dan Fade out pada project ini, tak lepas dari keberadaan plugin jQuery. Karena dengan adanya jQuery, efek tersebut bisa bekerja dengan sempurna.
<script type="text/javascript" src="http://pujangga.googlecode.com/files/jquery-1.3.2.min.js"></script>
Letakan kode javascript tersebut dibagian bawah tag <head> pada halaman template HTML blogspot anda. Kemudian Save Template.
Kode CSS
Kita kembali ka halaman Page Elements. Buatlah sebuah halaman HTML baru dengan memilih add a gadget.
Selanjutnya kita tambahkan serangkaian kode CSS sebagai wadah dari konten Headline yang akan kita buat.
<style type="text/css">
/*menu head lines ticker*/
#listticker{
height:145px;
width:290px;
overflow:hidden;
border:solid 1px #DEDEDE;
padding:0 0 14px 0;
-moz-border-radius:8px;
background-color: #E1FDEC;
}
#listticker li{
border:0; margin:0; padding:0; list-style:none;
}
#listticker li{
height:52px;
}
#listticker a{
color:#000000;
margin-bottom:
}
#listticker .news-title{
display:block;
font-weight:bold;
margin-bottom:4px;
font-size:11px;
}
#listticker .news-text{
display:block;
font-size:11px;
color:#666666;
}
#listticker img{
float:left;
margin-right:3px;
padding:4px;
}
#listticker i {
color: #009900;
}
<!--
.isikonten {
height: 50px;
width: 290px;
list-style-type: none;
overflow: hidden; border-bottom:#999999 dotted 1px;
}
.judul{font-size:14px; font-weight:bold; margin-bottom:5px; padding-top:3px;}
-->
</style>
/*menu head lines ticker*/
#listticker{
height:145px;
width:290px;
overflow:hidden;
border:solid 1px #DEDEDE;
padding:0 0 14px 0;
-moz-border-radius:8px;
background-color: #E1FDEC;
}
#listticker li{
border:0; margin:0; padding:0; list-style:none;
}
#listticker li{
height:52px;
}
#listticker a{
color:#000000;
margin-bottom:
}
#listticker .news-title{
display:block;
font-weight:bold;
margin-bottom:4px;
font-size:11px;
}
#listticker .news-text{
display:block;
font-size:11px;
color:#666666;
}
#listticker img{
float:left;
margin-right:3px;
padding:4px;
}
#listticker i {
color: #009900;
}
<!--
.isikonten {
height: 50px;
width: 290px;
list-style-type: none;
overflow: hidden; border-bottom:#999999 dotted 1px;
}
.judul{font-size:14px; font-weight:bold; margin-bottom:5px; padding-top:3px;}
-->
</style>
Keterangan :
#listticker{ height:145px; width:290px; » Sebagai wadah konten , ketinggian wadah : 145px dan lebar wadah adalah 290px. anda bisa ganti value tersebut, dan sesuaikan dengan sidebar pada halaman web.
#listticker li{ height:52px; » Properti yang akan kita gunakan sebagai pemisah dari satu konten dengan konten yang lain. dan disini saya atur ketinggian nya 52px. Anda bisa mengatur dengan value tinggi yang berbeda. Tinggal bagaimana anda mencocokan dengan ruang sidebar pada website.
.isikonten { height: 50px; width: 290px; » Ini adalah bagian dari konten, tempat anda meletakan headline atau penggalan postingan terbaru anda.
Letakan serangkain kode CSS tersebut pada Halaman HTML yang baru saja kita buat di atas.
Javascript
Masih pada tempat yang sama. Masukan rangkain kode javascript berikut ini di bawah dari rangkaian kode CSS.
<script type="text/javascript">
$(document).ready(function(){
var first = 0;
var speed = 200;
var pause = 3500;
function removeFirst(){
first = $('ul#listticker li:first').html();
$('ul#listticker li:first')
.animate({opacity: 0}, speed)
.fadeOut('slow', function() {$(this).remove();});
addLast(first);
}
function addLast(first){
last = '<li style="display:none">'+first+'</li>';
$('ul#listticker').append(last)
$('ul#listticker li:last')
.animate({opacity: 1}, speed)
.fadeIn('slow')
}
interval = setInterval(removeFirst, pause);
});
</script>
$(document).ready(function(){
var first = 0;
var speed = 200;
var pause = 3500;
function removeFirst(){
first = $('ul#listticker li:first').html();
$('ul#listticker li:first')
.animate({opacity: 0}, speed)
.fadeOut('slow', function() {$(this).remove();});
addLast(first);
}
function addLast(first){
last = '<li style="display:none">'+first+'</li>';
$('ul#listticker').append(last)
$('ul#listticker li:last')
.animate({opacity: 1}, speed)
.fadeIn('slow')
}
interval = setInterval(removeFirst, pause);
});
</script>
Kode HTML
Masih pada tempat yang sama. masukan serangkaian kode HTML dibawah ini , dan letakan dibagian bawah dari rangkaian javascript yang ada diatas.
<ul id="listticker">
<li>
<div class="isikonten"><img src="URL IMAGE " alt="" width="40" height="40" />
<div class="judul"><a href="URL POST " target="_blank">JUDUL</a></div>
Label : ISI KATEGORI </div>
</li>
<li>
<div class="isikonten"><img src="URL IMAGE " alt="" width="40" height="40" />
<div class="judul"><a href="URL POST " target="_blank">JUDUL</a></div>
Label : ISI KATEGORI </div>
</li>
<li>
<div class="isikonten"><img src="URL IMAGE " alt="" width="40" height="40" />
<div class="judul"><a href="URL POST " target="_blank">JUDUL</a></div>
Label : ISI KATEGORI </div>
</li>
</ul>
<li>
<div class="isikonten"><img src="URL IMAGE " alt="" width="40" height="40" />
<div class="judul"><a href="URL POST " target="_blank">JUDUL</a></div>
Label : ISI KATEGORI </div>
</li>
<li>
<div class="isikonten"><img src="URL IMAGE " alt="" width="40" height="40" />
<div class="judul"><a href="URL POST " target="_blank">JUDUL</a></div>
Label : ISI KATEGORI </div>
</li>
<li>
<div class="isikonten"><img src="URL IMAGE " alt="" width="40" height="40" />
<div class="judul"><a href="URL POST " target="_blank">JUDUL</a></div>
Label : ISI KATEGORI </div>
</li>
</ul>
Keterangan :
URL IMAGE » Isi dengan link file gambar tempat anda mengupload.
JUDUL » Isikan dengan Judul Post / Artikel
ISI KATEGORI » Isi dengan label atau kategori artikel.
Saya hanya memberikan 3 headline pada project latihan ini. Tapi, bila anda ingin meletakan lebih banyak lagi, anda tinggal mengcopy selector li, isikonten dan judul seberapa banyak anda inginkan.
Apabila semuanya dirasa sudah cukup, Save halaman tersebut dan silahkan anda priview hasil project latihan kita kali ini.
Semoga bermanfaat.
