Artikel copy paste berkualitas mengenai semuanya yang baru dan bermanfaat untuk di share ulang

Cara Membuat Headline Post Scroll JQuery



Membuat Headline Post  Dengan Efek Scroll 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. Membuat Headline Post  Dengan Efek Scroll JQuery 
blogging1

blogging2

Kode CSS Membuat Headline Post  Dengan Efek Scroll JQuery 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.
Membuat Headline Post  Dengan Efek Scroll JQuery 
<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>
Membuat Headline Post  Dengan Efek Scroll JQuery 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 
Membuat Headline Post  Dengan Efek Scroll JQuery 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
Membuat Headline Post  Dengan Efek Scroll JQuery 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 liisikonten dan judul seberapa banyak anda inginkan. 

Apabila semuanya dirasa sudah cukup, Save halaman tersebut dan silahkan anda priview hasil project latihan kita kali ini. Membuat Headline Post  Dengan Efek Scroll JQuery 
blogging


Semoga bermanfaat.
Sumber
Share this post
  • Share to Facebook
  • Share to Twitter
  • Share to Google+
  • Share to Stumble Upon
  • Share to Evernote
  • Share to Blogger
  • Share to Email
  • Share to Yahoo Messenger
  • More...

1 comments

  1. Tutorial Basi kagak bisa diblok tulisannya (copy) gimana tuh emangnya kita disuruh ketik manual yah.......dasar pelit blogger yang baik bukan kayak gitu mohon dikoreksi..........wkwkwkwkwkwkwkwkwk

    BalasHapus

thx for coming... :) please leave your comment

:) :-) :)) =)) :( :-( :(( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ :-$ (b) (f) x-) (k) (h) (c) cheer

Google+ Followers

 
Posts RSSComments RSSBack to top
© 2011 Copy bin Paste ∙ Designed by BlogThietKe
Released under Creative Commons 3.0 CC BY-NC 3.0 Pakar SEO | Parfum Cinta | gamis murah | Kanopi Murah Semarang

Wedding Organizer Semarang Murah