Cara membuat slide dengan efek marquee ~ Tutorial Blogger

Rabu, 04 Mei 2011

Cara membuat slide dengan efek marquee

Rabu, 04 Mei 2011 | 07:42

Noer Cholis

10 comments

Animasi slide foto atau gambar dengan menggunakan efek marquee, tidak kalah menarik bila dibanding dengan animasi flash. Selain lebih ringan, animasi slide ini dilengkapi efek onmouseover, sehingga pada saat pointer mouse diletakkan diatas salah satu gambar atau foto yang sedang berjalan secara otomatis akan berhenti. Dan pada saat itu pula terjadi efek transform yang mengakibatkan gambar menjadi berukuran lebih besar. Dan pada saat bersamaan apabila pointer mouse ditahan beberapa saat diatas gambar, maka akan muncul sebuah "tooltip" atau catatan mengenai gambar - gambar tersebut.

Berikut bentuk animasi slide dengan efek marquee :

Bila anda berminat untuk memasang animasi ini pada atau anda, silahkan ikuti langkah - langkah berikut ini :
1. Login ke blogger dengan ID anda.
2. Klik Rancangan.
3. Dan KLik tab Edit HTML.

4. Cari kode di bawah ini atau yang mirip dengan kode ini :

</head>

5. Copy kode di bawah ini dan taruh sebelum kode </head> :

<script type='text/javascript'>
$(document).ready(function(){
$("a.tooltip").easyTooltip();
});
</script>
<script type='text/javascript'>
//<![CDATA[
(function($){$.fn.easyTooltip=function(options){var defaults={xOffset:20,yOffset:30,tooltipId:"easyTooltip",clickRemove:false,content:"",useElement:""};var options=$.extend(defaults,options);var content;this.each(function(){var title=$(this).attr("title");$(this).hover(function(e){content=(options.content!="")?options.content:title;content=(options.useElement!="")?$("#"+options.useElement).html():content;$(this).attr("title","");if(content!=""&&content!=undefined){$("body").append("<div id='"+options.tooltipId+"'>"+content+"</div>");$("#"+options.tooltipId).css("position","absolute").css("top",(e.pageY-options.yOffset)+"px").css("left",(e.pageX+options.xOffset)+"px").css("display","none").fadeIn("fast")}},function(){$("#"+options.tooltipId).remove();$(this).attr("title",title)});$(this).mousemove(function(e){$("#"+options.tooltipId).css("top",(e.pageY-options.yOffset)+"px").css("left",(e.pageX+options.xOffset)+"px")});if(options.clickRemove){$(this).mousedown(function(e){$("#"+options.tooltipId).remove();$(this).attr("title",title)})}})}})(jQuery);
//]]>
</script>

6. Simpan Template.

Langkah selanjutnya anda tinggal menampilkan Animasi slide foto atau gambar pada halaman depan blog anda.
Perhatikan langkah berikut :
1. Klik Rancangan dan pilih Elemen Laman

2. Tambah Gadget

3. Pada jendela baru anda Anda pilih gadget HTML/JavaScript

4. Copy dan paste kode dibawah ini pada gadget tersebut :

<a href="ULR ARTIKEL" target="_blank" title="KETERANGAN ARTIKEL ATAU GAMBAR  >>KLIK UNTUK MEMBACA ARTIKEL INI."><img src="ULR GAMBAR" /></a>

</marquee></div>
</div>

Catatan :
Diantara kode diatas terdapat kode link seperti berikut :

<a href="ULR ARTIKEL" target="_blank" title="KETERANGAN ARTIKEL ATAU GAMBAR >>KLIK UNTUK MEMBACA ARTIKEL INI."><img src="ULR GAMBAR" /></a>

Silahkan ganti ULR ARTIKEL , KETERANGAN ARTIKEL ATAU GAMBAR , dan ULR GAMBAR, milik anda.

5. Simpan.

Selamat mencoba dan Semoga bermanfaat.... Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini. Jangan lupa luangkan waktu untuk beri komentar ya......, Terima kasih.

Ping your blog, website, or RSS feed for Free

Related Articles :
Baca artikel lain :
Informasi Artikel :

Judul : "Cara membuat slide dengan efek marquee"
Diulas Oleh : Noer Cholis | Rabu, 04 Mei 2011 | 07:42
Description : Animasi slide foto atau gambar dengan menggunakan efek marquee, tidak kalah menarik bila dibandin...
Label : css,Efek,Gambar,JavaScript,Marquee,Tutorial blog
Posisi Rich Snippets : Rating: 3.4

Sampai saat ini baru ada : 10komentar

>>> Silahkan tambahkan komentar Anda...

10 komentar:

Erma19 Mei 2011 07:02
bagus banget mas.... terima kasih ya,,,,
selamat berkarya terus mas...
BalasHapus
admin25 Juni 2011 14:47
thanks for this information , follow me kevinringo.blogspot.com , for more information, thanks
BalasHapus
mashari22 Juli 2011 20:03
mas, saya membaca judul "import ke facebook', maksudnya import dari facebook atau export ke facebook. terimakasih
BalasHapus
Noer24 Juli 2011 09:05
impor blog ke facebook maksudnya memasukkan blog yang kita miliki kedalam akun facebook, yang nantinya sebagai catatan difacebook. Dan yang di tampilkan adalah feed rss atau seluruh artikel yang ada pada blog kita. selain itu akan selalu update otomatis, ketika kita posting artikel terbaru.
BalasHapus
poles marmer21 Februari 2012 08:13
terima kasih ya,,,,
BalasHapus
Noer21 Februari 2012 16:00
poles marmer...., sama-sama
BalasHapus
andi hastanto28 Februari 2012 09:28
bos kok slide dengan efek marquee nya gakk jalan yaaa
ada peasn gini bos

Kami tidak dapat menyimpan template Anda.
Harap perbaiki kesalahan di bawah, dan kirimkan template Anda lagi.
Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar.
Pesan error XML: The element type "style" must be terminated by the matching end-tag "".
BalasHapus
Noer Cholis1 Maret 2012 00:29
andi hastanto...., kode yang saya berikan saya cek tidak ada masalah, pesan yg anda terima menunjukkan: ada tag akhir yang terhapus pada saat anda menyisipkan kode.

sebagai alternatif untuk mencoba, anda bisa menjadikan satu kode pd langkah 5 yg atas dan kode pada langkah 4 yg bawah, langsung pada gadget.

silahkan dicoba, semoga berhasil.
BalasHapus
FLADYAN ARMANDITO11 Maret 2012 06:48
gimana ya caranya agar slide nya itu ada di sebelah kanan posting dan berbentuk vertikal ?
BalasHapus
Balasan