Tutorial Membuat List Ticker Fade Jquery
Kali ini saya mendapat tugas membuat
tutorial list ticker fade menggunakan jquery. Yang kemudian diposting pada blog. Agak
bingung sih sebenarnya gimana caranya bikin, syntaknya seperti apa, jadinya
nanti seperti apa.. Setelah mencari
banyak referensi dari berbagai sumber akhirnya saya agak sedikit mengerti apa
yang dimaksud list tiker ituu..
Ticker adalah konten html pada web
design yang berfungsi untuk menampilkan ringkasan artikel. Biasanya ticker
memiliki ciri-ciri selalu bergerak, baik vertikal maupun horizontal. Namun pada
postingan kali ini saya akan membuat ticket yang bergerak vertikal. Inilah
hasilnya percobaanku.. Semoga benar dan bermaanfaat. Berikut tutorialnya
Buka blogger.com melalui browser anda.
Login dan buka menu template, kemudian klik Edit HTML. Kami anjurkan anda untuk
mencadangkan terlebih dahulu file template anda untuk keamanan seandainya anda
melakukan kesalahan saat edit kode HTML.
1.
Buka
blogger.com melalui browser anda
2.
Login
masukkan email dan password anda.
3.
Selanjutnya
anda akan dibawa ke halaman tatap muka yakni dashbor
4.
Pada
pojok kanan klik menu design
5.
Kita
akan dibawa ke halaman template kemudian klik Edit HTML
1.
Didalam
kotak box cari kode ]]></b:skin>.
Masukkan kode dibawah ini di atas kode ]]></b:skin>.
#newsticker-demo {
width:310px;
background:#EAF4F5;
padding:5px 5px 0;
font-family:Verdana,Arial,Sans-Serif;
font-size:12px;
margin:20px auto;
}
#newsticker-demo a { text-decoration:none; }
#newsticker-demo img { border: 2px solid #FFFFFF; }
#newsticker-demo .title {
text-align:center;
font-size:14px;
font-weight:bold;
padding:5px;
}
.newsticker-jcarousellite { width:300px; }
.newsticker-jcarousellite ul li{ list-style:none;
display:block; padding-bottom:1px; margin-bottom:5px; }
.newsticker-jcarousellite .thumbnail { float:left;
width:110px; }
.newsticker-jcarousellite .info { float:right; width:190px;
}
.newsticker-jcarousellite .info span.cat { display: block; font-size:10px;
color:#808080; }
.clear { clear: both; }
1.
Kalau
sudah simpan template
1.
Selanjutnya
buka menu Tata Letak. Klik Tambahkan Gadget. Pilih Javascript dan letakkan kode HTML
di bawah ini ke dalam gadget.
1.
Pilih HTML/ Javascript dan klik tanda + yang ada disampingnya.
10. Letakkan kode HTML di bawah ini ke dalam
gadget.
<div
class='newsticker-jcarousellite'>
<ul>
<li>
<dt
class="heading">Tentang Saya</dt><dd
class="text"><img class="GR_effect"
width="100" height="132" src="
https://lh3.googleusercontent.com/-mdHWQVRsFtQ/AAAAAAAAAAI/AAAAAAAAAHg/cwvL1f23N98/s120-c/photo.jpg"
/>Seorang wanita yang ingin sukses dimasa depanya. Orang tualah alasan
mengapa dia hidup. Ingin membahagiakan orang tua. Sepi adalah dia. Diam adalah
dia. Seorang anak yang butuh sayap untuk
terbang tinggi mencapai cita, dan sayap itu tidak lain ialah restu dari ibu .
Jika restu itu telah ku dapatkan, aku bisa bebas terbang menggapai cita-citaku
ibu. Tolong jangan batasi aku
dengan segala kekhawatiranmu akan putrimu ini. Kita punya Tuhan yang selalu
menjaga kita, jadi percayakan putrimu ini pada Tuhan.
</dd>
</li>
<li>
<dt
class="heading">Teman atau Pacar? </dt><dd
class="text"><img class="GR_effect"
width="100" height="132" src="
https://indrathegunners.files.wordpress.com/2015/03/wpid-20150325173738.jpg"
/>2 komponen penting dalam hidup saling berseberangan satu sama lain?
Memilih salah satunya bukanlah bunuh diri tapi sama halnya dengan kehilangan
satu paru-paru dengan kata lain jauh lebih buruk dan menyiksa. Rasanya enggak
adil kalau kita harus memilih antara pacar atau sahabat. Di satu sisi kita
seneng karena punya pacar baru, tapi di sisi lain kita enggak mau sahabat yang
udah dikenal lama harus mundur karena enggak mau ngeganggu kita dengan si
pacar. </dd>
</li>
<li>
<dt
class="heading">Pengen Mobil??? </dt><dd
class="text"><img class="GR_effect"
width="100" height="132" src="
http://cdn.sindonews.net/dyn/620/content/2015/12/28/120/1072640/mobil-ini-rajai-penjualan-kendaraan-penumpang-t3A.jpg"
/>Membeli mobil bukanlah sesuatu yang mudah untuk dilakukan. Berbagai hal
sangat diperlukan sebagai bahan pertimbangan sebelum mobil nongkrong di garasi
rumah kita. Bila Anda menginginkan berbagai pertimbangan dan referensi tentang
mobil yang ingin anda beli (baru ataupun bekas), kami menyediakan secara
lengkap berbagai referensi dan spesifikasi mobil yang anda kehendaki lengkap
dengan gambar dalam ukuran besar. </dd>
</li>
<li>
<dt class="heading">Wanita Dan
Usia </dt><dd class="text"><img
class="GR_effect" width="100" height="132"
src=" http://www.aktualpost.com/wp-content/uploads/2015/11/nenek.jpeg"
/>Semakin sering mata anda melihat wanita cantik, maka umur anda akan
bertambah setiap kalinya. Berdasarkan hasil riset di Kenya, saat tanpa berkedip
anda menatap gambar wanita cantik selama 10 menit, maka umur anda akan
bertambah selama 10 tahun. Ayo segera lakukan dan habiskan air mata anda demi
umur yang semakin panjang. Capailah umur hingga seribu tahun untuk kepuasan
hidup anda!!!! Setelahnya silahkan anda menikah sebanyak anda suka setelah
istri atau suami anda meninggal</dd>
</li>
</ul>
</div>
<script src='http://yourjavascript.com/11115283233/jquery-latest.pack.js'
type='text/javascript'></script>
<script
src='http://yourjavascript.com/38222121171/jcarousellite-1.0.1c4.js'
type='text/javascript'/></script>
<script
type='text/javascript'>
$(function() {
$(".newsticker-jcarousellite").jCarouselLite({
vertical: true,
visible: 4,
auto:500,
speed:1000
});
});
</script>
<div>
<a
style="font-size:10px;" href="http:// liachamidah.blogspot.com/">http://
liachamidah.blogspot.com/</a></div>
2.
Kemudian Simpan
12. Lihat
blog anda, dan perhatiakn hasilnya disamping kanan. Gambar dan text yang bergerak
vertikal.
Demikianlah cara singkat dan mudah membuat List Ticker Fade di Blogspot.
Tidak ada komentar:
Posting Komentar