Makna dan Cara Menyesuaikan Unsur Tetap di Tumblr

Unsur tetap di Tumblr merujuk kepada sebarang elemen dalam tema anda yang tidak bergerak apabila penonton menatal skrin. Contohnya, sidebar yang "tetap" akan sentiasa berada di tempat yang sama walaupun anda menatal halaman.

Konsep Unsur Tetap

Unsur tetap didefinisikan melalui arahan CSS position: fixed. Ia memaksa elemen berada pada koordinat tetap berbanding jendela pelayar, tidak dipengaruhi oleh aliran dokumen HTML.

Struktur Tema Tumblr: HTML & CSS

Semua tema Tumblr ditulis dalam satu fail gabungan yang mengandungi HTML untuk struktur dan CSS untuk gaya. Walaupun banyak laman web memisahkan kedua-duanya, tema Tumblr biasanya menyatukan kedua-dua kod dalam satu fail.

Menemukan CSS Tema

Log masuk ke akaun Tumblr anda, pergi ke papan pemuka, klik ikon gear, pilih blog, dan pilih Customize di bahagian Theme. Klik Edit HTML di bawah tajuk tema dan anda akan melihat kod HTML dan CSS anda.

Mencari & Mengubah Elemen Tetap

Gunakan Ctrl‑F untuk mencari position: fixed atau position:fixed tanpa ruang. Elemen yang ditetapkan biasanya diikuti oleh blok {…}. Contoh:

#sidebar{position:fixed;}

Menentukan Posisi Elemen

Anda boleh menambah nilai jarak kepada tepi dengan arahan CSS seperti top, right, bottom atau left.

#sidebar{position:fixed; top:20px; right:10px;}

Penyata ini akan memposisikan sidebar 20 piksel dari atas dan 10 piksel dari kanan tetingkap pelayar.

Ubah Cara Posisi

Jika anda mahu menukar kedudukan elemen tetap, pertimbangkan atribut berikut:

• position: static — elemen kembali ke aliran normal HTML.
• position: relative — elemen digerakkan relatif kepada posisi asalnya.
• position: absolute — elemen dikeluarkan dari aliran dokumen dan diposisikan berbanding elemen induknya.

Contoh:

#sidebar{position:relative; right:20px;}

Eksperimen & Penyesuaian

Cuba kombinasi atribut di atas untuk mendapatkan tampilan yang diinginkan. Setelah selesai, simpan perubahan dan lihat hasilnya secara langsung di blog anda.

URL:https://ms.whycomputer.com/internet/1015019347.html