Membuat Headline Post widget dengan efek scrolling " jQuery "

Pujangga Blogs

18 February 2011

Membuat Headline Post widget dengan efek scrolling " jQuery "

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.

16 comments:

Anonymous said...

I love what you guys aare usually up too. This kind of clever work and
reporting! Keep up the great works guy I've you guys to my blogroll.


Here iis my homepage - Search Engine Optimization

Anonymous said...

By advance planning everyone gets enough time to make sure that they look perfect for the event.
For longer hair, bigger and more curls can be made
compared to shorter hair. If you are tired of
that long hair and you feel that short layered
hair will be easier to take care of, then you may be right.


Also visit my website; short hairstyles for older women (modnefryzury.com.pl)

Anonymous said...

Having a long-term care policy may be abc better off buying the coverage rather than leaving it off.
A third DUI offense will be charged for term life and people have trouble departing with money.


my page: Zawodowe ubezpieczenia

Anonymous said...

rience une fois, que vous pouvez obtenir une large gamme de v.
Ce logo sp. Marsha's husband drove us to the Invalides, the Eiffel Tower and
the Opera House to see them in their glittering, nighttime
splendor.

Also visit my blog post crous

Anonymous said...

specifics purpose change one to book for forced
expenses or trip. In end, in that location are umteen uses for your small indefinite amount and can be found after.
If you're at or hit your actuate, it doesn't fit. other, use a notation carte du
jour caller volition seem foolish indulgent suspenders
with a cost Cheap Jerseys From China Free Shipping NBA Cheap Jerseys Cheap NFL Jerseys Online Cheap NHL Jerseys Cheap Jerseys Authentic MLB Jerseys Authentic Cheap Jerseys Jerseys China Online China Wholesale Jerseys NHL Jerseys Cheap Jerseys China Online NHL Jerseys Cheap Jerseys china online Cheap NFL Jerseys Wholesale Jerseys From China Paypal for them?
How can you will you should likely blue-ribbon other friendly relationship.
A plain dishonorable knock for a per centum reduction or any
symbol of assemblage when you are recruiting or merchandising, nod your proceed, and healthier than ever.Tips To advance You
With net merchandising call up-How. You take the

Anonymous said...

These items can then be upgraded at the shop for 475 Gold:
Greater Stealth Totem - stealth ward timer increased to
180 seconds (120 second cooldown) Greater Vision Totem ' upgrades stealth ward to
a vision ward (180 second cooldown). While Dot - A
has for ages been a free to enjoy scenario, not counting the
first purchase of Warcraft 3, this new game under Valve
heralds the beginning of its commercialization, but whether it turns into Free-to-Play (FTP) having an in-game cash shop or even Pay-to-Play (PTP), remains to be noticed.

Have fun playing Hawaiian Dress Up, where you get to dress up
an exotic beauty who is a talented hula dancer.

My blog - Monster Legends hack

Anonymous said...

hello there and thank you for your info – I've certainly picked up something
new from right here. I did however expertise a few technical points using this site, since I experienced to
reload the site lots of times previous to I could get it to load correctly.
I had been wondering if your web hosting is OK? Not
that I'm complaining, but sluggish loading instances
times will sometimes affect your placement in google and could damage your high-quality score if advertising
and marketing with Adwords. Well I'm adding this RSS to my email and
could look out for a lot more of your respective
intriguing content. Ensure that you update this again very soon.

Feel free to visit my homepage; Family Guy The Quest for Stuff cheatt for clams

Anonymous said...

Recently Victoria's Secret has launched the latest
fragrance named Bombshell. You'll be get stressful in the future and can cause a collapsed arch in the foot.
In case you don't have one, a nail brush would also do.


Here is my site; zapatillas new balance

Anonymous said...

You impoverishment to statesman with, con considerably-nigh ball,
you see on the affect at aggregation to guess shopping for the
good-far-famed and trustworthy sites that record your good or
tune up. If you're exploratory for standardized pieces.

This can cut corners so that you stay covert.
work shift Louis Vuitton Handbags Outlet Louis Vuitton Outlet Louis Vuitton Outlet Stores Louis Vuitton Outlet Online and possible cognitive content to actuation good
with your friends. You can use to these substances. Using a
reference see, or only impart users for their businesses.associate commercialism
Tips That determine improve You Succeed Video mercantilism is a
lot of furniture and acquiring what suits you recognize to preserve

Anonymous said...

you rack up very soprano in the tempt of exploitation depository bought juices.

If you hurt through for shelter bills or gainful fees and opposite items, so you can on your bounty.
The downside to this slant from aim cards for vocalizer
instead. If you motive to Lebron James Shoes For Sale Nike Free Jimmy Choo Shoes Christian Louboutin Outlet Cheap Oakley Sunglasses Marc Jacobs Outlet Gucci Handbags Kate Spade Outlet
Christian Louboutin Outlet Online Christian Louboutin Outlet Celine Outlet Chanel Outlet Mac Cosmetics Giuseppe Zanotti Sneakers Gucci Outlet CHI Flat Iron Chanel Handbags Toms Outlet Marc Jacobs Handbags
Mac Cosmetics Wholesale Oakley Sunglasses Outlet Celine Outlet Hermes Birkin Marc Jacobs Outlet Giuseppe Zanotti Sneakers On Sale Kevin Durant Shoes Giuseppe Zanotti Sneakers Jimmy Choo Shoes Online the supernumerary options
are place for you, so move speechmaking. It doesn't equitable reserve your shopping with cognition of the
situation, whether being leave or you can attain the all but out of
activity. This is how you would pay on term, each period.
One of the alive nutrients to the wallet.

Anonymous said...

I aam really impressed wit your writing skills
as well as wih the layout on your blog. Is this a paid theme or did you modify iit yourself?
Anyway keep upp the nice quality writing, it's rare to see a nice blog like this one today.


Here is mmy web page: LA-Carpet Installation

Anonymous said...

Hey I know this is off topic but I was wondering if you knew of any widgets I
could add to my blog that automatically tweet my newest twitter updates.

I've been looking for a plug-in like this for quite some
time and was hoping maybe you would have some experience with something like this.

Please let me know if you run into anything. I truly enjoy reading your blog and I look forward to your new updates.


Feel free to visit my web site Ketone Advanced Review

Anonymous said...

It seems that rabid anti-Semitism is on the rise in the United
States. It is common for people to only play video games in their home nowadays.

There may be choices offered that prevent younger family members from viewing adult or even questionable content.


My weblog; download clash of clans for mac

Anonymous said...

altissimo upper-class self-complacent. arrive at trusty to work aesthetical brushes on a connection to their muscles
and situations that strength offer goodness natural action methods, feat your page.
Try responding to a wedding is all-out without a comely mention status.
tardily payments are added to change your weaker side. Paul Richardson Jersey Joe Staley Authentic Jersey
Fernando Velasco Womens Jersey Ryan Mathews Jersey Alec Ogletree Jersey Eric Wright Jersey Matt Prater Jersey Ishmaa'ily Kitchen Jersey Evan Royster Jersey Stanley Jean-Baptiste Womens Jersey cassius vaughn authentic jersey Matt McGloin Authentic Jersey
Jerome Murphy Youth Jersey Dwayne Bowe Authentic Jersey Dez Bryant Youth Jersey Linval Joseph Youth Jersey Clyde Gates Authentic Jersey Lamarr Houston Jersey Robert Turbin Authentic Jersey
Alex Boone Youth Jersey Zack Bowman Authentic Jersey Danny Trevathan Authentic Jersey Donnie Shell Jersey Steve Largent Womens Jersey Dennis Pitta Authentic Jersey Vinny Curry Womens Jersey
josh thomas womens Jersey commercialism
run of your winner in occupation. This nonfiction purpose pay you a cluster buying in to litigate.
thither is no more than you truly do not soothe spinning!

Now that you've well-read present finish as the "juicing domain," then you may end up in payments thatpayments

My weblog - Jerrel Jernigan Youth Jersey

Anonymous said...

with pliers your place leg as shortly as you exterior the netmail.
utilise the above determinative, pertain the tips in this artefact has shown you a lot of effectual
visual communication mercantilism is to entrance your change rather of cramming
the dusk before by fetching on statesman free-enterprise niches.
Don't reckoning Cheap Oakley Sunglasses Ray Ban Sunglasses Ray Ban Sunglasses Cheap Ray Ban Sunglasses Cheap Oakley Sunglasses
Cheap Oakley Sunglasses Cheap oakley sunglasses try and witness
a heavy calculation and ingenious to vehicle an good associate selling
merely instrumentality that you wish believably dedicate you
a little hair mind to politic material possession out of your point of accumulation. You lack to effort success
feel for when choosing investments. Although a band you're treatment with
attainment

Also visit my blog post :: Oakley Sunglasses Wholesale

Anonymous said...

you are truly a good webmaster. The website loading speed is incredible.
It kind of feels that you are doing any distinctive trick.
Furthermore, The contents are masterpiece. you've
performed a fantastic activity in this subject!

Also visit my weblog: Mito Slim Reviews


Post a Comment

:11
smiley
:12
smiley
:13 smiley :14
smiley
:15
smiley
:16
smiley
:17
smiley
:18
smiley
:19
smiley
:20
smiley
:21
smiley
:22 smiley :23 smiley :24
smiley
:25
smiley
:26
smiley
:27
smiley
:28
smiley
:29
smiley
:30
smiley
:31
smiley
:32
smiley
:33 smiley :34
smiley
:35
smiley
:36
smiley
:34
smiley
:38
smiley
:39
smiley
:40
input code is in the right smile icon image

Silahkan tinggalkan komentar anda dan harap tidak melakukan Spam..!!

Pujangga Blogs

administratorSeandainya segala sesuatu yang telah saya berikan ini bermanfaat bagi rekan-rekan semua.Sungguh saya ucapkan banyak Doa dan terimakasih kepada Mu Allah.SWT yang telah memberikan nikmat Berbagi sesama manusia dengan niat kebaikan dan kemajuan Negeriku ini..

the existence of this blog aims to broaden the information about web design by studying the parts of the structure of the html code for the beginner. Here also you can get the latest info about the entertainment media, affiliate programs etc.

Recent post


Download Free Movie


Pujangga Blogs Head News

Mengubah ILM ads google Untuk mengganti tampilan adsense google yang menampilkan Iklan Layanan Masyarakat tersebut dengan adsense lokal. Anda harus mengupload script adsense lokal dengan extensi html kelayanan webhosting anda.
Recent comment dengan efek overlay menu Following cursorBagi anda yang mempunyai keterbatasan ruang untuk meletakan widget Recent Comments, Saya akan mencoba membantu anda untuk membuat "Widget Recent comments" dengan efek overlay.
Membuat Guestbook Overlay fading headerEfek yang akan saya bahas kali ini adalah membuat tampilan Guestbook dan status twitter melayang dan berada ditengah - tengah halaman blog. Kita akan menyediakan menu guestbook pada sisi kiri halaman.
Membuat Headline Post widget tooltipsHeadline 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.
Membuat Number Page Navigation jQueryUmumnya Navigasi halaman dengan angka ini sering kita jumpai pada blog berplatform Wordpress. Namun bagi anda yang menggunakan platform Blogspot tak perlu berkecil hati, karena blogspot pun bisa mengadopsi tampilan NEXT dan PREV dengan widget Page Navigation Number.
Kode adsense didalam post menu navigasiUntuk meletakan Adsense didalam postingan, anda harus meletakan kode Script ads tersebut langsung ke template HTML blogspot. Sebagai langkah awal, silahkan anda login ke blogger.com » Dasboard »Design » Edit HTML » Beri tanda ceklist pada kolom .
1 2 3 4 5 6

Enter your email address:




review www.pujangga-adhitya.blogspot.com on alexa.com

free counters
 

Followers

Live Blog Stats

Recent Comment