Cara Menciptakan Goresan Pena Berjalan Di Blog
 |
| misal Tulisan Berjalan |
Minggu kemudian ada mitra saya sebut saja Otong nanya begini ‘ eh, bro kira-kira bakal keren ya kalau blog kita dibawahnya (footer) sanggup dikasih teks berjalan ibarat kayak di diberita-diberita yang ada di TV ’ spontan eksklusif saya komentari bahwa hal tersebut sangat mungkin untuk diterapkan juga di Blog.
melaluiataubersamaini wajah lugu mitra saya nanya lagi, ‘ emang gimana cara membuat goresan pena berjalan di blog ? ’ nah, daripada saya jelasin cara membuat goresan pena berjalan tersebut eksklusif lewat mulut, agak ribet juga, untuk itu saya tulis di blog ini, itung-itung nambah jumlah postingan blog.
Sekedar informasi, kalau di dunia blogging Tulisan Berjalan itu disebut Marquee, bersama-sama saya juga sedikit resah kenapa teks berjalan disebut Marquee padahal kalau diartikan kedalam bahasa indonesia, Marquee berarti Tenda Besar. Entah apa filosofi dibalik pemilihan kata Marquee tersebut.
Dah, dari tadi ngoceh mulu, kini kita masuk pada Teknik Membuat Tulisan Berjalan (Marquee) di Blog.
misal Tulisan Berjalan / Marquee Standar
Untuk membuat Tulisan Berjalan ibarat diatas, kita membutuhkan aba-aba html ibarat dibawah ini :
<marquee>misal Teks Yang Dikenai Marquee</marquee>
Si <marquee> inilah yang nantinya akan membuat seluruh Tulisan atau Teks yang diapit aba-aba tersebut sanggup bergerak.
Yang diatas itu kan Tulisan Berjalan yang biasa saja tanpa pelengkap efek apapun pada aba-aba html. Kita pun sanggup memvariasikan aba-aba <marquee> diatas dengan JavaScript atau HTML yang lain, biar lebih terang kita masuk teladan saja.
Teknik Menambahkan Warna Background di Tulisan Berjalan
Untuk menambahkan warna background, kita perlu menyisipkan style="background: warna;" kedalam aba-aba marquee-nya, dibawah ini yaitu teladan kalau kita ingin memdiberi warna abu-abu pada Marquee Text.
<marquee style="background: gray;">misal Teks Yang Dikenai Marquee melaluiataubersamaini Background Abu-abu</marquee>
Maka hasil dari aba-aba HTML diatasa akan nampak ibarat ini.
Tulisan Berjalan diatas susah untuk dibaca bukan ? kita juga sanggup mengganti warna dari Teks diatas, biar kontras dengan backgroundnya.
Teknik Merubah Warna Tulisan Berjalan
Disini saya akan mencotohkan bagaimana mengganti warna Tulisan Berjalan diatas dengan warna Putih biar teks tersebut praktis untuk terbaca.
Kode yang kita pakai yaitu ibarat ini :
<marquee style="background: gray; color: white;">misal Teks Yang Dikenai Marquee melaluiataubersamaini Background Abu-abu Teks Putih</marquee>
Dan Hasilnya akan nampak ibarat dibawah ini :
Teknik Membuat Tulisan Berjalan Setengah Layar
Selain mengganti warna dan juga background kita juga sanggup membuat Tulisan Berjalan tersebut spesialuntuk tampil dari tengah, tidak full dari kanan ke kiri.
Dan cara ini tergantung dari Div atau Nav pembungkus Marquee Teks tersebut, artinya kalau lebar selector Div spesialuntuk 500px maka Tulisan berjalan akan muncul pada pixel ke 250 - 0 (tengah ke kiri).
misal penerapan dalam aba-aba HTML :
<marquee width="50%">misal Teks Yang Dikenai Marquee Width 50%</marquee>
Kode HTML diatas akan membuat goresan pena 'misal Teks Yang Dikenai Marquee' akan berjalan dari tengah-tengah layar menuju ke kiri, atau lebih jelasnya ibarat teladan dibawah ini :
Dan Anda pun bebas mengganti persentase tersebut. Semakin kecil maka semakin ke kiri pula teks yang akan tampil.
Diatas kita spesialuntuk memakai HTML dan CSS bukan, nah kini kita akan menambahkan JavaScript kedalam kode <marquee> tersebut.
Teknik Membuat Tulisan Berjalan melaluiataubersamaini Jeda
Jika normalnya Tulisan Bejalan atau <marquee> selalu berjalan tanpa henti dari kanan ke kiri, maka kita sanggup menyuruhnya untuk berhenti sejenak (jeda) dengan cara menambahkan aba-aba diberikut.
<marquee scrolldelay="500">misal Teks Yang Dikenai Marquee Scrolldelay 500</marquee>
500 disini maksudnya yaitu 0,5 Detik bukan 500 Detik. Makara aba-aba diatas kalau dijalankan akan membuat Teks yang ada didalam kode <marquee></marquee> berhenti sejenak setiap 0,5 Detik.
contohnya ibarat dibawah ini :
Teknik Mengatur Kecepatan Tulisan Berjalan
Walaupun standar dari Marquee Text sudah sesuai (tidak terlalu cepat atau lambat) namun kalau Anda merasa Tulisan Berjalan tersebut begitu amat cepat, Anda sanggup dengan praktis mengatur kecepatannya, yaitu dengan menambahkan scrollamount="angka"
misal penerapan dalam HTML :
<marquee scrollamount="10">misal Teks Yang Dikenai Marquee melaluiataubersamaini Speed Scroll Amount 10</marquee>
Dan aba-aba tersebut akan menghasilkan efek ibarat ini :
Saya sendiri tidak tahu persis makna dari angka 10 tersebut, apakah 10px per detik atau apalah saya kurang tahu, Tapi yang terang kalau Anda merubah angkanya menjadi lebih besar, maka Kecepatan Tulisan Berjalan tersebut akan makin cepat.
Teknik Membuat Tulisan Berjalan Dari Kiri ke Kanan
Seperti yang kita tiruana tahu, bahwa Standar dari Teks Berjalan yaitu mengarah Dari Kanan ke Kiri. Namun kali ini kita akan mencoba hal yang tidak sama yaitu membalikkan arah pergerakannya (kiri ke kanan).
Kode HTML pelengkap yang kita butuhkan adalah direction="right" yang nanti akan kita pasangkan dengan <marquee> tentunya.
misal penggabungan :
<marquee direction="right">misal Tulisan Berjalan Dari Kiri ke Kanan</marquee>
Dan kesannya akan menjadi ibarat ini :
Teknik Membuat Tulisan Berjalan Memantul
Agar Tulisan Berjalan tersebut sanggup memantul, kita cukup menambahkan behavior="alternate".
misal penambahan ke dalam HTML :
<marquee behavior="alternate">misal Tulisan Berjalan melaluiataubersamaini Efek Memantul</marquee>
Hasilnya sehabis kita terapkan :
Teknik Membuat Tulisan Berjalan Dari Bawah ke Atas
Sebenarnya aba-aba untuk membuat Tulisan Berjalan Dari Bawah ke Atas sama saja dengan dengan Teknik Membuat Tulisan Berjalan Dari Kiri ke Kanan, spesialuntuk saja kita mengubah valuenya menjadi direction="up"
misal penerspan :
<marquee direction="up">misal Tulisan Berjalan Dari Bawah ke Atas</marquee>
Dan Hasilnya :
Kata "up" juga sanggup Anda ganti dengan down (untuk memdiberi efek goresan pena berjalan dari atas ke bawah).
Teknik Membuat Tulisan Berjalan Berhenti Ketika Disentuh Oleh Kursor Mouse
Membaca dalam kondisi teks sedang berjalan memang saya akui cukup susah, nah untuk itu ada aba-aba JavaScript (JS) untuk memecahkan persoalan tersebut, yaitu onmouseover="this.stop()" onmouseout="this.start()" aba-aba JS tersebut fungsinya untuk menghentikan laju Tulisan Berjalan tersebut, dengan catatan ada Kursor Mouse yang melewati atau bersentuhan dengan Tulisan Berjalan.
misal Penggabungan JavaScript diatas dengan aba-aba HTML Marquee :
<marquee onmouseover="this.stop()" onmouseout="this.start()">misal Teks Yang Dikenai Marquee Dan Akan Berhenti Jika Ada Kursor Diatasnya</marquee>
Dan hasil dari kerja sama JavaScript dan HTML diatas yaitu ibarat dibawah ini :
| Teknik Memasang Kode Marquee di Dalam Artikel | Teknik Memasang Kode Marquee di Dalam Widget |
|---|---|
| 1. Masuk ke dalam Text Editor, kemudian pilih Mode HTML 2. Copy dan Paste aba-aba Marquee Anda disini 3. Beralihlah ke Mode Compose (jika berhasil text 4. akan berjalan) 4. Untuk memastikan aba-aba berjalan tepat klik pada Pratinjau | 1. Masuk ke dalam sajian Tata Letak kemudian Klik Tambahkan Gadget 2. Pilih opsi HTML/JavaScript 3. Copy dan Paste aba-aba Marquee pada textare yang sudah disediakan 4. Klik Simpan dan silahkan dilihat hasilnya |
Sebenarnya masih banyak variasi-variasi yang sanggup kita lakukan dengan <marquee> ini. Kalau sempat nanti niscaya artikel cara membuat goresan pena berjalan ini nantinya akan saya Update, jadi tidakboleh sungkan-sungkan untuk membookmark halaman ini untuk mendapat update.an terbaru ihwal cara membuat goresan pena berjalan, hhe.
Akhir kata saya ucapkan terimaksih banyak sudah bersedia membaca artikel cara membuat goresan pena berjalan ini.
Komentar
Posting Komentar