POSTING dengan efek MARQUEE
D ulu.... pernah muncul pertanyaan bagaimana cara membuat gambar bisa bergerak/berjalan seperti sama halnya dengan text yang bergerak dengan menggunakan perintah
Marquee , dan untuk pertanyaan ini sudah saya jawab
disini Ada lagi pertanyaan yang muncul, pertanyaannya kira-kira seperti ini :
Bagaimana cara membuat gambar yang berbingkai yang di dalamnya terdapat tulisan yang bergerak?
Pertanyaan yang cukup menantang sekaligus membingungkan. Pertanyaan ini muncul ketika saya sedang berchatting ria dengan salah seorang sobat, ketika itu saya tidak bisa menjawab langsung pertanyaan ini, dan saya meminta waktu untuk berpikir. Setelah waktu lumayan senggang barulah saya memikirkan jawabannya, dan akhirnya ketemu juga nih jawabannya. But i think, lebih baik jawaban ini saya tuliskan saja di postingan agar sobat yang lain yang sama-sama berminat dapat mengetahuinya.
Teknik dasar yang saya gunakan adalah saya membuat sebuah wadah, nah wadah tersebut saya isi dengan gambar serta tulisan yang berjalan sehingga antara gambar dengan tulisan dapat bersatu dalam satu wadah (frame), kemudian wadah tersebut saya beri bingkai. Maka hasil akhir dari teknik yang saya buat ini adalah sebuah gambar yang berbingkai yang di dalamnya terdapat tulisan yang berjalan. Masih bingung? ya udah baca lagi deh kelanjutannya biar lebih mengerti.
Untuk menampilkan sebuah gambar, tentu saja sobat harus mempunyai gambar yang telah di upload ke hosting tempat menyimpan gambar.
Untu membuat frame gambar silahkan ikuti langkah-langkah berikut :
• untuk template klasik
Sigin di blogger
Klik menu Template
Klik menu Edit HTML
Copy seluruh kode HTML yang ada, kemudian paste pada notepad lalu save untuk backup buat jaga-jaga apabila terjadi kesalahan editting
Copy paste kode berikut diatas kode <style>
Copy paste kode berikut pada tempat yang sobat inginkan
<table border="10" cellpadding="3" height="135" width="500"/> <tr> <td> <div id="gambar"> <div id="tulisan"> <marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="4" direction="left" width:500px height:25px;> Secantik BIDADARI yang setia menemani diriku </marquee> </div> </div> </td> </tr> </table>
Klik tombol Simpan Perubahan Template
Selesai.
• Untuk Template Baru
Sign in di blogger
Klik menu Layout
Klik menu Edit HTML
Klik tulisan Download Full Template, silahkan save dulu untuk berjaga-jaga apabila terjadi kesalahan editting
Copy paste kode berikut di antara kode <b:skin><![CDATA[ dan kode ]]></b:skin> , atau jika bingung simpan saja persis di atas kode ]]></b:skin>
#gambar { background:url('http://pic50.picturetrail.com/VOL399/8403005/15651300/237997613.jpg'); /* alamat gambar yg mau ditampilkan */ height:300px; /* untuk mengatur tinggi gambar */ width:500px; /* untuk mengatur lebar gambar */ } #tulisan { font-size:300%; /* ini adalah kode untuk merubah besarnya hurup */ font-weight:normal; /* ini agar hurup yg tampil normal, jika ingin tebal ganti dengan bold */ color:#ffffff; /* ini kode warna untuk hurup */ }
Klik tombol SIMPAN TEMPLATE
Klik menu Elemen Halaman
Klik tulisan Tambah sebuah Elemen Halaman
Klik tombol TAMBAHKAN KE BLOG di bawah tulisan HTML/JavaScript
Copy paste kode berikut pada elemen yang muncul
<table border="10" cellpadding="3" height="135" width="500"/> <tr> <td> <div id="gambar"> <div id="tulisan"> <marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="4" direction="left" width:500px height:25px;> Ini adalah photo putriku tersayang sedang menghirup udara pagi yang segar sambil bermain-main di lapangan tegal lega bandung. </marquee> </div> </div> </td> </tr> </table>
Klik tombol SIMPAN PERUBAHAN
Sorot elemen yang baru di buat, klik lalu tahan dan kemudian pindahkan pada tempat yang sobat inginkan (di drag and drop)
Klik tombol SIMPAN
Selesai.
Pada kode-kode diatas sudah saya sertakan keterangan tentang kode-kode css yang saya pasang untuk memudahkan sobat dalam hal mengedit sesuai keinginan sobat.
Selamat berkreasi !
Contoh marquee dengan background gambar
Secantik BIDADARI yang setia menemani diriku
Contoh marquere Background gambar dalam bingkai Tiga Dimensi
Scrip marquere Background gambar dalam bingkai Tiga Dimensi
<table bgcolor="#0077ff" border="10" cellpadding="3" height="135" style="width: 195px;"><tbody> <tr><td><br /> <marquee align="center" direction="up" height="132" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="2" width="192"><br /> <img height="130" src="https://lh4.googleusercontent.com/_dgj6_wF6PkM/TdCtIJZbWnI/AAAAAAAAAgM/P96mpmGd6rc/Picture%20C30%20237.gif" width="190" /><br /> <img height="130" src="https://lh3.googleusercontent.com/_dgj6_wF6PkM/TdCoKbGqkbE/AAAAAAAAAgE/01Q9xapXO4Q/s144-c/May16201104.jpg" width="190" /><br /> <br /> <img height="130" src="https://lh5.googleusercontent.com/_dgj6_wF6PkM/TdNCbjcjJGI/AAAAAAAAAhQ/763sKDA0QiE/s640/21.jpg" width="190" /><br /> <br /> <br /> <br /> <img height="130" src="https://lh4.googleusercontent.com/_dgj6_wF6PkM/TdCtIJZbWnI/AAAAAAAAAgM/P96mpmGd6rc/Picture%20C30%20237.gif" width="190" /><br /> <br /> <img height="130" src="https://lh4.googleusercontent.com/_dgj6_wF6PkM/TZ5iEMOFegI/AAAAAAAAAXo/0E5FkQHNdNw/bakar%20poto.jpg" width="190" /><br /> <br /> <img height="130" src="http://i598.photobucket.com/albums/tt69/Cyber011/74276.gif" width="300" /><br /> <br /> <br /> <br /> </marquee></td></tr> </tbody></table>
Contoh marquee Background gambar polos
Scipt untuk marquee Background gambar polos
<marquee align="center" direction="up" height="200" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="2" width="100%"><br /> <br /> <img height="130" src="https://lh4.googleusercontent.com/_dgj6_wF6PkM/TdCtIJZbWnI/AAAAAAAAAgM/P96mpmGd6rc/Picture%20C30%20237.gif" width="190" /><br /> <img height="130" src="https://lh3.googleusercontent.com/_dgj6_wF6PkM/TdCoKbGqkbE/AAAAAAAAAgE/01Q9xapXO4Q/s144-c/May16201104.jpg" width="190" /><br /> <br /> <img height="130" src="https://lh5.googleusercontent.com/_dgj6_wF6PkM/TdNCbjcjJGI/AAAAAAAAAhQ/763sKDA0QiE/s640/21.jpg" width="190" /><br /> <br /> <br /> <br /> <img height="130" src="https://lh4.googleusercontent.com/_dgj6_wF6PkM/TdCtIJZbWnI/AAAAAAAAAgM/P96mpmGd6rc/Picture%20C30%20237.gif" width="190" /><br /> <br /> <img height="130" src="https://lh4.googleusercontent.com/_dgj6_wF6PkM/TZ5iEMOFegI/AAAAAAAAAXo/0E5FkQHNdNw/bakar%20poto.jpg" width="190" /><br /> <br /> <img height="130" src="http://i598.photobucket.com/albums/tt69/Cyber011/74276.gif" width="300" /><br /> <br /> <br /> </marquee> <br />
Contoh marguere scroll
Tutorial blog belajar SEO blogger dan Tips dan Trik BLOGGER
Scrip untuk marguere scroll
<div align="left"><span style="color: white; font-family: georgia;"><b><marquee behavior="alternate" bgcolor="RED" scrollamount="3" width="100%"><br /> Tutorial blog belajar SEO blogger dan Tips dan Trik BLOGGER<br /> <br /> <br /> <br /> </marquee></b></span></div>
Contoh marquee Texs yang di dalam nya terdapat link :
tutorial-membuat-horizontal navigasi
Tutorial blog dan belajar SEO blogger
Tips dan Trik BLOGGER
Buat Kolom Dibawah Header Pada Magazine Template 2...
Free HTML dan PHP Editor
pasang-widget alexa di blog
tips-meningkatkan-alexa rank
tutorial-membuat-horizontal navigasi
Scrip marquee Texs yang di dalam nya terdapat Link
<marquee align="center" direction="up" height="100" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="2" width="100%"><br /> <a href="http://panduan-wongsalam.blogspot.com/2011/05/tutorial-membuat-horizontal-navigasi.html" target="new"> tutorial-membuat-horizontal navigasi</a><br /> <br /> <br /> <br /> <br /> <a href="http://panduan-wongsalam.blogspot.com/" target="new">Tutorial blog dan belajar SEO blogger<br /> <br /> Tips dan Trik BLOGGER<br /> </a><br /> <br /> <br /> <a href="http://draft.blogger.com/%20http://panduan-wongsalam.blogspot.com/2011/05/buat-kolom-dibawah-header-pada-magazine.html%0A%0A" target="new"> Buat Kolom Dibawah Header Pada Magazine Template 2... </a><br /> <br /> <br /> <a href="http://panduan-wongsalam.blogspot.com/2011/05/free-html-dan-php-editor.html" target="new"> Free HTML dan PHP Editor </a><br /> <br /> <br /> <a href="http://panduan-wongsalam.blogspot.com/2011/05/pasang-widget-alexa-di-blog.html" target="new"> pasang-widget alexa di blog</a><br /> <br /> <br /> <a href="http://draft.blogger.com/%20http://panduan-wongsalam.blogspot.com/2011/05/tips-meningkatkan-alexa-rank.html%20%0A" target="new">tips-meningkatkan-alexa rank</a><br /> <br /> <br /> <a href="http://panduan-wongsalam.blogspot.com/2011/05/tutorial-membuat-horizontal-navigasi.html" target="new"> tutorial-membuat-horizontal navigasi</a><br /> <br /> <br /> <br /> </marquee><br />
Selamat Berkreasi
Variasi dan efek Marquee
Sering kali muncul pertanyaan bagaimana cara membuat gambar bisa bergerak/berjalan seperti sama halnya dengan text yang bergerak dengan menggunakan perintah
Marquee , dan untuk pertanyaan ini sudah saya jawab
disini Ada lagi pertanyaan yang muncul, pertanyaannya kira-kira seperti ini :
Bagaimana cara membuat gambar yang berbingkai yang di dalamnya terdapat tulisan yang bergerak?
Pertanyaan yang cukup menantang sekaligus membingungkan. Pertanyaan ini muncul ketika saya sedang berchatting ria dengan salah seorang sobat, ketika itu saya tidak bisa menjawab langsung pertanyaan ini, dan saya meminta waktu untuk berpikir. Setelah waktu lumayan senggang barulah saya memikirkan jawabannya, dan akhirnya ketemu juga nih jawabannya. But i think, lebih baik jawaban ini saya tuliskan saja di postingan agar sobat yang lain yang sama-sama berminat dapat mengetahuinya.
Teknik dasar yang saya gunakan adalah saya membuat sebuah wadah, nah wadah tersebut saya isi dengan gambar serta tulisan yang berjalan sehingga antara gambar dengan tulisan dapat bersatu dalam satu wadah (frame), kemudian wadah tersebut saya beri bingkai. Maka hasil akhir dari teknik yang saya buat ini adalah sebuah gambar yang berbingkai yang di dalamnya terdapat tulisan yang berjalan. Masih bingung? ya udah baca lagi deh kelanjutannya biar lebih mengerti.
Untuk menampilkan sebuah gambar, tentu saja sobat harus mempunyai gambar yang telah di upload ke hosting tempat menyimpan gambar.
Untu membuat frame gambar silahkan ikuti langkah-langkah berikut :
• untuk template klasik
Sigin di blogger
Klik menu Template
Klik menu Edit HTML
Copy seluruh kode HTML yang ada, kemudian paste pada notepad lalu save untuk backup buat jaga-jaga apabila terjadi kesalahan editting
Copy paste kode berikut diatas kode <style>
#gambar { background:url('http://pic50.picturetrail.com/VOL399/8403005/15651300/237997613.jpg'); /* alamat gambar yg mau ditampilkan */ height:300px; /* untuk mengatur tinggi gambar */ width:500px; /* untuk mengatur lebar gambar */ } #tulisan { font-size:300%; /* ini adalah kode untuk merubah besarnya hurup */ font-weight:normal; /* ini agar hurup yg tampil normal, jika ingin tebal ganti dengan bold */ color:#ffffff; /* ini kode warna untuk hurup */ } Copy paste kode berikut pada tempat yang sobat inginkan
<table border="10" cellpadding="3" height="135" width="500"/> <tr> <td> <div id="gambar"> <div id="tulisan"> <marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="4" direction="left" width:500px height:25px;> Secantik BIDADARI yang setia menemani diriku </marquee> </div> </div> </td> </tr> </table> Klik tombol Simpan Perubahan Template
Selesai.
• Untuk Template Baru
Sign in di blogger
Klik menu Layout
Klik menu Edit HTML
Klik tulisan Download Full Template, silahkan save dulu untuk berjaga-jaga apabila terjadi kesalahan editting
Copy paste kode berikut di antara kode <b:skin><![CDATA[ dan kode ]]></b:skin> , atau jika bingung simpan saja persis di atas kode ]]></b:skin>
#gambar { background:url('http://pic50.picturetrail.com/VOL399/8403005/15651300/237997613.jpg'); /* alamat gambar yg mau ditampilkan */ height:300px; /* untuk mengatur tinggi gambar */ width:500px; /* untuk mengatur lebar gambar */ } #tulisan { font-size:300%; /* ini adalah kode untuk merubah besarnya hurup */ font-weight:normal; /* ini agar hurup yg tampil normal, jika ingin tebal ganti dengan bold */ color:#ffffff; /* ini kode warna untuk hurup */ }
Klik tombol SIMPAN TEMPLATE
Klik menu Elemen Halaman
Klik tulisan Tambah sebuah Elemen Halaman
Klik tombol TAMBAHKAN KE BLOG di bawah tulisan HTML/JavaScript
Copy paste kode berikut pada elemen yang muncul
<table border="10" cellpadding="3" height="135" width="500"/> <tr> <td> <div id="gambar"> <div id="tulisan"> <marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="4" direction="left" width:500px height:25px;> Ini adalah photo putriku tersayang sedang menghirup udara pagi yang segar sambil bermain-main di lapangan tegal lega bandung. </marquee> </div> </div> </td> </tr> </table> Klik tombol SIMPAN PERUBAHAN
Sorot elemen yang baru di buat, klik lalu tahan dan kemudian pindahkan pada tempat yang sobat inginkan (di drag and drop)
Klik tombol SIMPAN
Selesai.
Pada kode-kode diatas sudah saya sertakan keterangan tentang kode-kode css yang saya pasang untuk memudahkan sobat dalam hal mengedit sesuai keinginan sobat.
Selamat berkreasi !
Contoh marquee dengan background gambar
Secantik BIDADARI yang setia menemani diriku
Contoh marquere Background gambar dalam bingkai Tiga Dimensi
Scrip marquere Background gambar dalam bingkai Tiga Dimensi
<table bgcolor="#0077ff" border="10" cellpadding="3" height="135" style="width: 195px;"><tbody> <tr><td><br /> <marquee align="center" direction="up" height="132" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="2" width="192"><br /> <img height="130" src="https://lh4.googleusercontent.com/_dgj6_wF6PkM/TdCtIJZbWnI/AAAAAAAAAgM/P96mpmGd6rc/Picture%20C30%20237.gif" width="190" /><br /> <img height="130" src="https://lh3.googleusercontent.com/_dgj6_wF6PkM/TdCoKbGqkbE/AAAAAAAAAgE/01Q9xapXO4Q/s144-c/May16201104.jpg" width="190" /><br /> <br /> <img height="130" src="https://lh5.googleusercontent.com/_dgj6_wF6PkM/TdNCbjcjJGI/AAAAAAAAAhQ/763sKDA0QiE/s640/21.jpg" width="190" /><br /> <br /> <br /> <br /> <img height="130" src="https://lh4.googleusercontent.com/_dgj6_wF6PkM/TdCtIJZbWnI/AAAAAAAAAgM/P96mpmGd6rc/Picture%20C30%20237.gif" width="190" /><br /> <br /> <img height="130" src="https://lh4.googleusercontent.com/_dgj6_wF6PkM/TZ5iEMOFegI/AAAAAAAAAXo/0E5FkQHNdNw/bakar%20poto.jpg" width="190" /><br /> <br /> <img height="130" src="http://i598.photobucket.com/albums/tt69/Cyber011/74276.gif" width="300" /><br /> <br /> <br /> <br /> </marquee></td></tr> </tbody></table>
Contoh marquee Background gambar polos
Scipt untuk marquee Background gambar polos
<marquee align="center" direction="up" height="200" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="2" width="100%"><br /> <br /> <img height="130" src="https://lh4.googleusercontent.com/_dgj6_wF6PkM/TdCtIJZbWnI/AAAAAAAAAgM/P96mpmGd6rc/Picture%20C30%20237.gif" width="190" /><br /> <img height="130" src="https://lh3.googleusercontent.com/_dgj6_wF6PkM/TdCoKbGqkbE/AAAAAAAAAgE/01Q9xapXO4Q/s144-c/May16201104.jpg" width="190" /><br /> <br /> <img height="130" src="https://lh5.googleusercontent.com/_dgj6_wF6PkM/TdNCbjcjJGI/AAAAAAAAAhQ/763sKDA0QiE/s640/21.jpg" width="190" /><br /> <br /> <br /> <br /> <img height="130" src="https://lh4.googleusercontent.com/_dgj6_wF6PkM/TdCtIJZbWnI/AAAAAAAAAgM/P96mpmGd6rc/Picture%20C30%20237.gif" width="190" /><br /> <br /> <img height="130" src="https://lh4.googleusercontent.com/_dgj6_wF6PkM/TZ5iEMOFegI/AAAAAAAAAXo/0E5FkQHNdNw/bakar%20poto.jpg" width="190" /><br /> <br /> <img height="130" src="http://i598.photobucket.com/albums/tt69/Cyber011/74276.gif" width="300" /><br /> <br /> <br /> </marquee> <br />
Contoh marguee scroll
Tutorial blog belajar SEO blogger dan Tips dan Trik BLOGGER
Scrip untuk marguere scroll
<div align="left"><span style="color: white; font-family: georgia;"><b><marquee behavior="alternate" bgcolor="RED" scrollamount="3" width="100%"><br /> Tutorial blog belajar SEO blogger dan Tips dan Trik BLOGGER<br /> <br /> <br /> <br /> </marquee></b></span></div>
Contoh marquee Texs yang di dalam nya terdapat link :
Scrip marquee Texs yang di dalam nya terdapat Link
<marquee align="center" direction="up" height="100" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="2" width="100%"><br /> <a href="http://panduan-wongsalam.blogspot.com/2011/05/tutorial-membuat-horizontal-navigasi.html" target="new"> tutorial-membuat-horizontal navigasi</a><br /> <br /> <br /> <br /> <br /> <a href="http://panduan-wongsalam.blogspot.com/" target="new">Tutorial blog dan belajar SEO blogger<br /> <br /> Tips dan Trik BLOGGER<br /> </a><br /> <br /> <br /> <a href="http://draft.blogger.com/%20http://panduan-wongsalam.blogspot.com/2011/05/buat-kolom-dibawah-header-pada-magazine.html%0A%0A" target="new"> Buat Kolom Dibawah Header Pada Magazine Template 2... </a><br /> <br /> <br /> <a href="http://panduan-wongsalam.blogspot.com/2011/05/free-html-dan-php-editor.html" target="new"> Free HTML dan PHP Editor </a><br /> <br /> <br /> <a href="http://panduan-wongsalam.blogspot.com/2011/05/pasang-widget-alexa-di-blog.html" target="new"> pasang-widget alexa di blog</a><br /> <br /> <br /> <a href="http://draft.blogger.com/%20http://panduan-wongsalam.blogspot.com/2011/05/tips-meningkatkan-alexa-rank.html%20%0A" target="new">tips-meningkatkan-alexa rank</a><br /> <br /> <br /> <a href="http://panduan-wongsalam.blogspot.com/2011/05/tutorial-membuat-horizontal-navigasi.html" target="new"> tutorial-membuat-horizontal navigasi</a><br /> <br /> <br /> <br /> </marquee><br />
Selamat mencoba ....!
jangan lupa kasih Komentar Bro......Salam Buat Senior Master Blogger
Tidak ada komentar:
Posting Komentar