Wednesday, September 1

Custom Styles Untuk Gadget

Terkadang anda hanya menginginkan alat tertentu untuk berdiri di antara sisanya. Alih-nya font atau warna yang anda ingin menukar atau Alignment atau Posisi alat. Anda boleh mengubahnya mengikut arahan di bawah ini.

Pertama, anda perlu mendapatkan ID unik dari alat anda ingin berubah.

1. Untuk melakukan ini, kita harus pergi pada paparan Halaman Elemen.

2. Cari alat yang anda ingin tukar dan memberikan nama yang unik. Untuk contoh kali ini saya gunakan gadget yang saya pasang dalam page ini "Language Translator".

3. Bila saya dapatkan nama gadget yang ingin saya tetapkan, pergi  ke halaman Edit HTML dan pada ruang kod klik Ctrl + F.


4. Dalam teks bar yang muncul di bahagian atas kanan masukkan kata "Language Translator". Contoh gadget yang saya gunakan.
(Jika betul gadget ini terdapat dalam page anda, ianya pasti akan dipaparkan, adakalanya jika perkataan yang kita taip tidak bersamaan biasanya anda dengar bunyi amaran.)

Anda mungkin melihat sesuatu seperti ini di bawah
<b:widget id='HTML2' locked='false' title='Language Translator' type='HTML'/>

Language Translator adalah tajuk kepada gadget. Jika anda melihat hanya untuk sebelah kiri anda akan melihat tulisan HTML2 yang berwarna merah, inilah yang kita panggil unik ID..


5. Tulis atau copy dimana-mana Unik ID gadget ini. (Sebaiknya anda boleh gunakan notepad)

6. Sekarang di bar teks yang sama anda digunakan sebelumnya, masukkan kod ini di bawah ini.
</ B: skin>

 Sekali lagi ini akan memaparkan kod ini dalam laman HTML anda.

7. Sekarang tepat di atas kod anda baru saja menemukan masukkan kod ini d
# UniqueID {
your styles CSS Styles
}

8. Tukar teks Merah dengan unik ID anda hanya dijumpai. contohnya HTML2

9. Tukar gaya teks biru dengan mereka yang ingin anda tukar.

Kemungkinan tentang gaya CSS tidak terhad. Tambahkan dengan beberapa contoh kod dibawah.

Font Color:
color: # 000000;
Untuk pemilihan dan kod warna, anda boleh lihat pada TAB COLOR CODE yang saya sediakan.

Font Family:
font-family: FONT ANDA;

Warna Latar Belakang:
background-color: # 000000;

Latar Belakang Gambar:
background-image: url ('IMAGE ANDA');

Borders:
border-style: BORDER TYPE ANDA
border-width: 1px;

Hanya menukar teks Merah yang anda sukai.

Untuk mendapatkan bantuan lebih lanjut mengenai kod css, anda boleh klik pada link dibawah.
W3Schools

Selamat mencuba.

No comments:

Related Posts Plugin for WordPress, Blogger...