Cara Membuat Tulisan Berjalan di Blog Lengkap

Cara Membuat Tulisan Berjalan di Blog Lengkap

Cara membuat teks marquee - UPDATE

Desain blog yang simple, responsive, unik, berkwalitas, dengan sedikit penambahan animasi yang memang penting dan berguna pasti diinginkan oleh setiap kalian yang telah memiliki blog. Bagi kalian yang belum memiliki blog, silahkan baca Cara Membuat Blog Gratis. Salah satu penambahan animasi yang dibutuhkan untuk sebuah blog adalah tulisan berjalan yang dapat dimanfaatkan untuk menampilkan sebuah informasi penting. Bagi kalia yang sedang mencari artikel tentang Cara Membuat Tulisan Berjalan di Blog Lengkap, kalian telah menemukan artikel yang tepat. Dimana pada artikel ini saya akan memberikan tutorial tentang Cara Membuat Tulisan Berjalan di Blog Lengkap dengan penambahan desain pada tulisan yang berjalan. Tutorial Cara Membuat Tulisan Berjalan mungkin banyak dibahas juga diblog lain, tapi tutorial Cara Membuat Tulisan Berjalan di Blog Lengkap yang benar-benar mudah untuk kalian pahami hanya ada dalam artikel ini. Dimana dalam artikel ini saya akan berikan bagaimana menambahakan background pada tulisan yang berjalan, menambahkan warna pada tulisan yang berjalan, menambah dan mengurangi kecepatannya, dan lain-lain.

Menjaga desain blog tetap responsive

Apa hubunganya animasi tulisan berjalan dengan desain blog yang responsive? Mengapa dalam artikel tentang Cara Membuat Tulisan Berjalan di Blog Lengkap saya sertakan tentang menjaga desain blog tetap responsive? Karena dalam setiap penambahan widget, salah satunya widget tulisan berjalan dapat mempengaruhi desain tema yang sesungguhnya sudah responsive menjadi tidak responsive. Selain itu penambahan dan penggunaan widget yang berlebihan juga dapat membuat blog menjadi berat. Ini karena kurangnya pengetahuan tentang bagaimana menambahkan widget dengan menjaga desain blog tetap responsive. Untuk itu perlu juga bagi kalian mempelajari tentang bagaimana Cara Desain Blog Tetap Responsive serta bagaimana Cara Meringankan Loading Blog. Agar dalam menambahkan setiap widget kalian bisa tetap menjaga desain blog kalian tetap responsive. Lebih detail danlengkap tentang hal ini silahkan baca artikel tentang Cara Desain Blog Tetap Responsive.

Cara Membuat Tulisan Berjalan di Blog

Secara default tulisan berjalan ditulis didalam tag marquee dengan contoh penulisan seperti kalian dapat lihat dibawah:

<marquee>Cara Membuat Tulisan Berjalan di Blog Lengkap</marquee>

Untuk melihat hasilnya silahkan salin script kode diatas dan tempel pada editor html-css. Maka kalian akan melihat tulisan "Cara Membuat Tulisan Berjalan di Blog Lengkap" berjalan, dan secara default memang tulisan yang ditulis didalam tag marquee berjalan kearah kiri dan tanpa desain apapun. Namun kalian juga bisa menambahkan desain pada tulisan berjalan dengan memperhatikan perintahnya atau kode yang dibutuhkan. Berikut adalah kode untuk menambahkan perintah atau desain pada tulisan yang berjalan:

1. bgcolor="value" akan memberikan warna background tulisan yang berjalan, sebagai contoh jika kalian menambahkan kode bgcolor="#eee" pada tag marquee maka background akan berwarna abu-abu.
2. scrollamount="value" akan mengatur kecepatan teks berjalan, contoh scrollamount="2"
3. scrolldelay="value" akan mengatur jeda pada tulisan yang berjalan permilidetik, contoh scrolldelay="500"
4. loop="value" akan memberikan nilai pengulangan tulisan berjalan, contoh untuk tulisan berjalan dengan pengulangan 3 putaran. Maka berikan value 3 seperti berikut: loop="3"
5. width="value" akan mengatur lebar bidang pada tulisan berjalan, jadi jika kalian menambahkan value width="50%" maka tulisan hanya akan berjalan setengah bidang yang kalian tentukan.
6. title="value" sama halnya dalam tag lainya bahwa title akan memberikan judul pada setiap teks, dalam hal ini adalah pada teks tulisan berjalan.
7. direction="value" akan mengatur arah tulisan berjalan, jika kalian ingin tulisan berjalan kearah kanan maka berikan value right. Contoh: direction="right"
8. behavior="value" akan mengatur tingkah laku pada tulisan yang berjalan. Sebagai contoh jika kalian ingin tulisan berjalan memantul mondar-mandir kekiri dan kekanan gunakan behavior="alternate". Jika ingin tulisan berjalan bergerak sekali jalan dan kemudian mengulang lagi gunakan behavior="slide". Jika ingin tulisan berjalan satu arah dari satu sisi ke sisi lain gunakan behavior="scroll"
9. Agar tulisan berjalan dapat berhenti saat dibawah mouse tambahkan kode onmouseover="this.stop()" onmouseout="this.start()"
10. Untuk memberikan desain pada tulisan itu sendiri tambahkan style pada tag marquee seperti contoh dibawah ini:

<marquee bgcolor="#eee" scrollamount="15" scrolldelay="500" style="font-size:18px;color:#ff0000;padding:10px;text-shadow:0px 3px 5px #000;">Cara Membuat Tulisan Berjalan di Blog Lengkap</marquee>

Yang paling penting dalam penggunaan Tulisan Berjalan di Blog adalah width="value", jadi hendaknya selalu gunakan width dengan value %. Contohnya adalah width="100%"
Dalam tulisan berjalan kalian juga bisa menggunakan link untuk mengarahkan pada halaman lain atau halaman yang sesungguhnya. Contoh penggunaan link pada tag marquee:

<marquee bgcolor="#eee" scrollamount="15" scrolldelay="500"><a href="https://www.multibisnisindo.com/detailpost/cara-membuat-tulisan-berjalan-di-blog-lengkap">Cara Membuat Tulisan Berjalan di Blog Lengkap</a></marquee>

Ok.... Lengkap sudah artikel ini, mudah-mudahan dapat bermanfaat.

UPDATE

Menambahkan teks marquee pada theme Hueman

Menanggapi pertanyaan rekan di grup tentang penambahan teks marquee, yang saya lihat dalam thread itu disertakan theme hueman. Oleh karena itu saya update artikel ini untuk penambahan teks marquee pada theme hueman. Update artikel ini saya ketik langsung tanpa draf, jadi mohon maaf jika mungkin penyusunan kalimatnya kurang rapih.

1. Melakukan edit pada element file home.php
   Silahkan buka file root_dir/po-content/theme/hueman/home.php

Menambahkan script marquee

Tambahkan sript marquee didalam div pembungkus dengan class="container" dan id="page", diluar div pembungkus class="container-inner".

Berikut adalah cuplikan kode penempatan marquee:

<?=$this->layout('index');?>

<div class="container" id="page">

	<marquee> CONTOH TEKS MARQUEE </marquee>

	<div class="container-inner">
		<div class="main">
			<div class="main-inner group">
              <section class="content box-content">
                ...
                ...
                ...
              </section>
			</div>
		</div>
	</div>
</div>

Saat anda menambahkan teks marquee lebih dari satu baris, ada kemungkinan baris-baris berikutnya akan sejajar kebawah/vertikal(tidak responsive). Dalam hal ini anda harus kreatif untuk membuatnya lebih responsive/horisontal.