Cara Membuat Bilah Sisi Tetap di Tumblr

Jika Anda pernah menggulir ke bawah halaman Web dan item di dalamnya tidak bergerak, Anda telah menyaksikan tag posisi CSS beraksi. Blogger Tumblr yang menambahkan tag ini ke template mereka dapat membuat efek yang sama di blog mereka. Tempat yang bagus untuk mencoba ini ada di sidebar Anda. Setelah Anda menambahkan tag posisi ke kode HTML blog Anda, sidebar Anda tetap ada saat orang menggulir ke atas dan ke bawah halaman blog Anda.

Kunjungi dasbor Tumblr Anda, lalu klik ikon pengaturan dan nama blog yang ingin Anda perbarui. Jika Anda hanya memiliki satu blog, klik namanya.

Klik "Sesuaikan" diikuti oleh "Tambahkan HTML." Tumblr membuka tema Anda dan menampilkan kode HTML-nya.

Klik di mana saja di dalam kode dan tekan "Ctrl-A" diikuti oleh "Ctrl-C" untuk menyalin kode ke clipboard Windows. Buka dokumen Notepad baru dan rekatkan kode ke dalam dokumen. Langkah-langkah ini memastikan bahwa Anda memiliki salinan cadangan dari template asli Anda.

Kembali ke kode HTML Tumblr dan tekan "Ctrl-F" untuk membuka kotak pencarian. Ketik "bilah sisi" di kotak pencarian itu, lalu tekan "Enter." Tumblr menemukan kemunculan pertama "bilah sisi" dan menampilkan bagian kode yang berisi kata itu. Kode yang ditemukannya akan terlihat mirip dengan berikut ini:

pembungkus #sidebar { warna: {warna:Latar Belakang}; }

Baris kode pertama berisi kata-kata #wrapper #sidebar. Tanda kurung kiri mengikuti kata-kata itu.

Tempelkan kode berikut tepat di bawah baris kode pertama:

posisi: tetap; kanan: 100 piksel;

Atribut position menginstruksikan browser untuk memperbaiki sidebar agar tidak bergerak saat Anda menggulir. Atribut kanan memberi tahu browser berapa banyak piksel yang Anda inginkan agar tepi kanan bilah sisi berada dari margin kanan halaman Web. Dalam contoh ini, atribut kanan memiliki nilai 100px.

Klik "Perbarui Pratinjau" untuk melihat pratinjau perubahan Anda. Seret bilah gulir jendela ke atas dan ke bawah dan Anda akan melihat bahwa bilah sisi Anda tidak bergerak. Klik "Simpan" untuk menyimpan perubahan Anda.

Tips

Anda mungkin ingin bereksperimen dengan nilai yang berbeda untuk atribut yang tepat jika Anda ingin menyesuaikan posisi horizontal bilah sisi. Misalnya, jika Anda mengubah nilai dari 100 piksel menjadi 50 piksel, bilah sisi bergerak lebih jauh ke kanan sebesar 50 piksel.

Peringatan

Berhati-hatilah saat Anda bekerja di editor HTML, karena mengubah kode yang ada secara tidak sengaja dapat memiliki efek dramatis pada tata letak halaman Anda. Jika Anda mengubah kode dan tidak dapat menemukan cara untuk membatalkan perubahan, Anda selalu dapat menghapus semua yang ada di editor HTML dan menempelkan kode cadangan yang Anda salin ke editor untuk mengembalikannya ke kondisi semula.