Cara Membuat Tulisan Bergerak di Header Blog

loading...

Selamat datang di The Royal Moringa. Pada pertemuan kali ini, saya akan membahas mengenai bagaimana membuat tulisan bergerak di blog/website anda. Tulisan bergerak ini biasanya terletak di bagian atas halaman utama. Tulisan bergerak atau moving text biasanya digunakan untuk mengucapkan selamat datang, info berita terbaru, pengumuman, dll. Nah, berikut langkah-langkah untuk membuat tulisan bergerak yang diletakkan di bawah menubar.

1. Log in ke akun blog anda > Pada dashboard pilih Theme > Edit HTML > cari ]]></b:skin> kemudian copy dan paste kode CSS berikut di atasnya.

                                           #welcome { background-color:#333; float: left; height: 43px; line-height: 43px; overflow: hidden; width:100%; } #welcome .contentfill { color: #ffffff; display: block; float: left; font-family: sans-serif; font-weight: bold; font-size: 14px; padding: 0 20px; position: absolute; text-transform: uppercase; } @media only screen and (max-width: 768px) { #welcome .contentfill {display:none} }

2. Berikutnya menuju bagian body lalu copy dan paste kode HTML berikut setelah script menubar anda biasanya ditandai dengan <!-- main navigation end --> atau <!-- menubar end --> bergantung nama dari menu navigasi anda.

                                           <div id="welcome"> <div class="contentfill"> <marquee direction="left" scrollamount="5" align="center">selamat datang di situs berbagi tutorial blogging</marquee> </div> </div>

3. Sekarang anda tinggal mengganti tulisan berjalan tersebut sesuai dengan keinginan anda. Untuk pengaturan pada marquee ada direction yaitu arah gerak teks, scrollamount yaitu kecepatan gerak teks, dan align yaitu rataan teks.

4. Anda dapat mengatur kode CSS di atas baik warna background, teks, margin, dan padding jika dibutuhkan > Save Theme dan lihat hasilnya

Nah, sekarang anda telah belajar bagaimana cara membuat teks bergerak di blog. Seandainya setelah anda save theme, widget teks berjalan tidak muncul maka langkah pertama yang harus anda lakukan adalah mencoba menuliskan style yang ada pada #welcome secara inline yaitu menjadi <div id="welcome" style="background-color:#333; float: left; height: 43px; line-height:  43px; overflow:hidden; width:100%;">. Jika belum berhasil silakan ditanyakan di kolom komentar. Terima kasih telah membaca!

loading...