Sign by Danasoft - For Backgrounds and Layouts

MENU

HOME | KEMENAG | DISDIK | NISN | SERTIFIKASI | INPASSING | OPERATOR NPSN | DOWNLOAD | SMS GRATIS | TIPS DUNIA ANAK |

cara membuat widget headline Post widget dengan efek scrolling

Label: Diposting oleh Madrasah Ibtidaiyah DARUSSALAM

Headline post
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.

blogging1

blogging2

Kode CSS
Kita kembali ka halaman Page Elements. Buatlah sebuah halaman HTML baru dengan memilih add a gadget.

blogging

blogging

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>

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.

blogging

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>

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>

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.

blogging


Semoga bermanfaat.