Kali ini saya akan mencoba share membuat konten headline berupa postingan terbaru dengan efek Scrolling. Headline akan menggulung ke atas dengan sentuhan fade out ,seakan konten tersebut hilang dengan perlahan dan konten yang berada di bawahnya akan naik ke atas mengganti konten sebelumnya. Prinsip kerjanya berbeda dengan Marque. Apabila anda terbiasa memakai Marque untuk memberikan efek bergerak pada konten, akan memberikan ruang kosong dibagian akhir. Sedangkan pada project yang akan kita buat ini, akan selalu bersambung tanpa ada ruang kosong.
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.
1 komentar:
If you would like an alternative to randomly picking up girls and trying to find out the right thing to do...
If you'd prefer to have women hit on YOU, instead of spending your nights prowling around in crowded bars and night clubs...
Then I encourage you to view this eye-opening video to uncover a weird little secret that has the potential to get you your personal harem of hot women just 24 hours from now:
FACEBOOK SEDUCTION SYSTEM...
Posting Komentar