Skip to main content

Tutorial Float Widget With Scrolling Text And Background Image

eastbullet Tutorial

Float widget bukan sahaja boleh terdiri dari gambar-gambar atau iklan. Kita juga boleh menggabungkan scrolling text/tulisan bergerak untuk dijadikan float widget bersama background. Ianya boleh digunakan untuk menarik perhatian mengunjung membaca apa yang tertulis di situ. Sebelum ini EB ada sediakan tutorial float widget with image, kali ini ikuti pula tutorial float widget with scrolling text and background image. Suka untuk EB sarankan supaya anda baca dulu tutorial float widget with image terlebih dahulu sebelum baca yang ini.

Langkah Pertama :

Cara kali ini melibatkan Edit HTML (untuk blogspot) dan CSS file dalam Appearance>Editor (untuk wordpress). Jadi langkah pertama, masuk ke ruangan Edit HTML/Editor blog anda.

tutorial tulisan bergerak dan widget terapung
tutorial tulisan bergerak dan widget terapung
Dalam kotak coding tersebut, tambah code seperti di bawah (untuk blogspot user, pastikan code tersebut dipaste sebelum </head> tekan Crtl+F untuk cari) (untuk wordpress, pastelah di bahagian bawah sekali supaya senang nak rujuk lepas-lepas ni) :

.gerak{
background:url(TUKAR KEPADA URL IMAGE) no-repeat;
width:200px; <!– tukarkan pada kelebaran image –>
height:150px; <!– tukarkan pada ketinggian image –>
padding:40px 20px;
position:fixed;
top:20px;
right:0px;
}

Langkah kedua :

Untuk pengguna Blogspot, buka Page Element dalam new tab dan Add a Gadget berjenis HTML/JavaScript. Dan pengguna WordPress, gunakan widget text dalam Appearance > Widgets. Kemudian pastekan code di bawah ini :

<marquee class="gerak" direction="up" behavior="scroll" scrollamount="4" onmouseover="this.stop()" onmouseout="this.start()">TUKAR PERKATAAN NI KEPADA YANG ANDA MAHU</marquee>

Selepas save, kini anda boleh lihat float widget bersama scrolling text dan background image dipaparkan pada blog. Untuk menukarkan apa yang ditulis dalam float widget, hanya gantikan text yang telah EB highlight di atas. Contoh hasil daripada tutorial float widget with scrolling text and background image ni boleh lihat dalam blog EB lagi satu.  ( boleh klik ). Sebarang masalah yang berbangkit, silalah jangan malu bertanya dalam komen di bawah ataupun guna contact form yang disediakan.

eastbullet

Eastbullet nama samaran dari nama sebenar Naim. Merupakan seorang pekerja 8 pagi - 5 petang. Meminati bidang IT, coding, photoshop dan games. Meluangkan lebih dari 3 jam menggunakan internet.

6 thoughts to “Tutorial Float Widget With Scrolling Text And Background Image”

  3. assalam,. nak tanye,. macam mana nak masuk kn,. url (blog org lain) dlm entri pastu ubah perkataan url tu,. pastu boleh klik,. ? ajar pliz

    Reply

    1. buat macam ni :
      <a href="gantikan url blog orang lain tu kat sini dengan http:// sekali ye!" rel="nofollow">Yang ni pulak perkataan yang nak ditunjukkan pada umum</a>

      Reply

Leave a Reply