Memasukkan Sidebar ke Tema di Tumblr

Penambahan bar sisi untuk perniagaan anda Tumblr menguntungkan tema dengan memberikan maklumat tambahan mengenai perniagaan anda, pautan keluar ke organisasi rakan kongsi atau laman web yang berkaitan atau bidang carian untuk mencari kandungan tertentu di laman web ini. Banyak tema yang dirancang untuk menyokong bar sisi, tetapi anda juga dapat memasukkannya ke dalam tema anda dengan menggunakan editor HTML Tumblr. Membuat bar sisi anda sendiri dengan penyunting teks dan menggayakannya dengan CSS memberi anda kawalan sepenuhnya terhadap fungsi dan penampilannya, yang membolehkan anda memadankan penampilannya dengan lebih tepat dengan identiti perniagaan anda.

Tulis dan Gaya Penanda Bilah Sisi

1

Tentukan apa yang anda mahu muncul di bar sisi anda dan tulis draf kandungan bar sisi dalam dokumen teks biasa untuk digunakan nanti.

2

Buat dokumen HTML baru dengan tag untuk digayakan menggunakan aplikasi penyuntingan teks anda. Struktur halaman HTML5 akan kelihatan seperti berikut:

3

Masukkan tag sampingan dengan id "bar sisi" di badan dokumen HTML5. Tanda samping hendaklah seperti berikut:

4

Salin kandungan yang anda buat lebih awal untuk bar sisi anda dan tampalkan ke tag samping.

5

Gunakan markup yang mematuhi piawaian untuk menukar kandungan bar sisi anda ke HTML5. Sebagai contoh, sertakan header dalam tag header, isi perenggan dalam tag perenggan, dan lampirkan teks pautan dalam tag anchor dengan rujukan hyperlink. Rujuk panduan rujukan HTML jika anda tidak pasti cara kerjanya (lihat Sumber).

6

Simpan fail sebagai dokumen HTML ke desktop anda

7

Buka penyemak imbas web anda, pilih "File", klik "Open" dan pilih dokumen HTML yang anda simpan ke desktop anda. Penyemak imbas anda memaparkan bar sisi anda yang tidak bergaya.

8

Kembali ke editor teks anda, letakkan kursor anda di antara tag gaya dan gaya markup anda bergantung pada pemilih "#sidebar" untuk menargetkan bar sisi anda. Cara anda menggayakan bar sisi akan sangat bergantung pada selera anda, reka bentuk tema Tumblr anda yang ada dan penandaan di bar sisi anda. Gunakan panduan rujukan CSS3 untuk memastikan anda menyusun sifat dan nilainya dengan betul (lihat Sumber).

9

Tentukan sama ada anda mahu bar sisi anda di kiri atau kanan dan tetapkan harta apungan dengan sewajarnya. Contohnya, jika anda ingin bar sisi di sebelah kiri kandungan utama, pemilih "#sidebar", harta benda dan nilai anda akan kelihatan seperti berikut:

float:left; 

}

10

Uji penampilan bar sisi anda dengan mengklik refresh pada penyemak imbas anda dan terus menyesuaikan gaya markup anda sehingga anda berpuas hati dengan penampilannya.

Masukkan Sidebar dalam Tema Tumblr Anda

1

Log masuk ke papan pemuka Tumblr anda, klik tajuk blog anda di bar sisi kanan, klik "Sesuaikan" dan klik "Edit HTML" untuk membuka editor kod sumber Tumblr.

2

Salin CSS dari dokumen HTML terbuka anda dan tampal di hujung kawasan gaya tema Tumblr anda.

3

Cari pemilih CSS untuk wilayah kandungan utama anda di editor Tumblr, letakkan kursor anda selepas pendakap keriting dan tetapkan harta dan nilai apungan yang sama dengan bar sisi anda. Sebagai contoh, jika bar sisi Anda dimaksudkan untuk muncul di sebelah kanan, tetapkan properti apung dengan nilai "kanan" ke pemilih kontainer.

4

Salin teg samping dan kandungannya dari penyunting teks anda dan tampalkannya di label badan tema Tumblr anda. Sekiranya anda mahu bar sisi muncul di sebelah kanan kandungan utama, letakkan di sebelah bekas itu; jika anda mahu ia muncul di sebelah kiri, tampalkannya sebelum bekas utama.

5

Klik "Kemas kini Pratonton", klik "Penampilan" dan klik butang "Simpan" untuk menyelesaikan perubahan yang Anda buat pada tema anda.