Memasukkan Sidebar Menjadi Tema di Tumblr

Penambahan bilah sisi ke bisnis Anda Tumblr menguntungkan tema dengan memberikan informasi tambahan tentang bisnis Anda, tautan keluar ke organisasi mitra atau situs web terkait atau bidang pencarian untuk menemukan konten tertentu di situs. Banyak tema dirancang untuk mendukung bilah sisi, tetapi Anda juga dapat memasukkannya ke dalam tema Anda dengan menggunakan editor HTML Tumblr. Membuat sidebar Anda sendiri dengan editor teks dan menatanya dengan CSS memberi Anda kendali penuh atas fungsi dan tampilannya, memungkinkan Anda menyesuaikan tampilannya dengan identitas bisnis Anda secara lebih akurat.

Tulis dan Beri Style Markup Sidebar

1

Tentukan apa yang ingin Anda tampilkan di sidebar dan tulis draf konten sidebar dalam dokumen teks biasa untuk digunakan nanti.

2

Buat dokumen HTML baru dengan tag untuk gaya menggunakan aplikasi pengeditan teks Anda. Struktur halaman HTML5 akan terlihat seperti berikut:

3

Sisipkan tag samping dengan id "sidebar" di badan dokumen HTML5. Tag samping akan terlihat seperti berikut:

4

Salin konten yang Anda buat sebelumnya untuk sidebar Anda dan tempelkan ke tag samping.

5

Gunakan markup yang sesuai standar untuk mengubah konten sidebar Anda ke HTML5. Misalnya, apit header dalam tag header, konten paragraf dalam tag paragraf, dan masukkan teks tautan dalam tag anchor dengan referensi hyperlink. Lihat panduan referensi HTML jika Anda tidak yakin bagaimana ini bekerja (lihat Sumberdaya).

6

Simpan file sebagai dokumen HTML ke desktop Anda

7

Buka browser web Anda, pilih "File", klik "Open" dan pilih dokumen HTML yang Anda simpan ke desktop. Browser Anda menampilkan sidebar tanpa gaya Anda.

8

Kembali ke editor teks Anda, tempatkan kursor Anda di antara tag gaya dan gaya markup Anda dengan mengandalkan pemilih "#sidebar" untuk menargetkan sidebar Anda. Bagaimana Anda menata bilah sisi akan sangat bergantung pada selera Anda, desain tema Tumblr Anda yang ada, dan markup di bilah sisi Anda. Gunakan panduan referensi CSS3 untuk memastikan Anda menyusun properti dan nilainya dengan benar (lihat Sumberdaya).

9

Putuskan apakah Anda ingin sidebar Anda di kiri atau kanan dan tetapkan properti float yang sesuai. Misalnya, jika Anda ingin sidebar di sebelah kiri konten utama, pemilih "#sidebar", properti dan nilai float Anda akan terlihat seperti berikut:

float:left; 

}

10

Uji tampilan sidebar Anda dengan mengklik segarkan di browser Anda dan lanjutkan menyesuaikan gaya markup Anda sampai Anda puas dengan tampilannya.

Masukkan Sidebar di Tema Tumblr Anda

1

Masuk ke dasbor Tumblr Anda, klik judul blog Anda di sidebar kanan, klik "Sesuaikan" dan klik "Edit HTML" untuk membuka editor kode sumber Tumblr.

2

Salin CSS dari dokumen HTML terbuka Anda dan tempelkan di akhir wilayah gaya tema Tumblr Anda.

3

Temukan pemilih CSS untuk wilayah konten utama Anda di editor Tumblr, letakkan kursor Anda setelah kurung kurawal dan tetapkan properti dan nilai float yang sama dengan bilah sisi Anda. Misalnya, jika sidebar Anda dimaksudkan untuk muncul di sebelah kanan, tetapkan properti float dengan nilai "right" ke pemilih penampung.

4

Salin tag samping dan isinya dari editor teks Anda dan tempelkan di tag tubuh tema Tumblr Anda. Jika Anda ingin sidebar muncul di kanan konten utama, letakkan setelah container itu; jika Anda ingin itu muncul di sebelah kiri, tempelkan sebelum wadah utama.

5

Klik “Update Preview”, klik “Appearance” dan klik tombol “Save” untuk menyelesaikan perubahan yang Anda buat pada tema Anda.