Tutorial: Membuat Tampilan Karya FAQ

Archive FAQ > Tutorial: Membuat Tampilan Karya

Introduksi

Tutorial ini akan memandu Anda langkah demi langkah untuk membuat tampilan karya (tampilan karya) di Archive of Our Own – AO3 (Arsip Milik Kita). Setelah melalui tutorial ini, Anda akan dapat membuat tampilan karya Anda sendiri, menggunakan CSS untuk menentukan gaya pilihan Anda, dan mengaplikasikan tampilan karya tersebut pada karya pilihan Anda.

Tutorial ini mengasumsikan bahwa:

Anda sudah paham cara memposting karya pada AO3. Jika Anda belum pernah memposting karya di AO3, silakan lihat Pertanyaan Umum Mengenai Memposting dan Menyunting atau ikuti langkah-langkah pada Tutorial: Memposting Karya.
Anda memiliki pengetahuan dasar mengenai CSS. Jika Anda membutuhkan penjelasan lebih luas mengenai CSS, situs web Tutorial CSS W3Schools menawarkan kursus dasar gratis.
Anda mengakses AO3 dengan menggunakan tampilan asli (Archive 2.0). Jika Anda menggunakan tampilan pilihan, mohon sesuaikan perbedaan antara tata letak tampilan pilihan situs Anda dengan deskripsi pada instruksi.

Jika Anda tidak yakin tentang apa itu tampilan karya, atau jika Anda lebih memilih untuk menggunakan tampilan yang sudah ada untuk karya Anda, silakan kunjungi Pertanyaan Umum Mengenai Tampilan dan Antarmuka Arsip.

Navigasi formulir Create New Skin (Buat Tampilan Baru)

Untuk memulai, pertama-tama silakan menuju halaman Skins (Tampilan) Anda:

Log masuk dan akses Dashboard (Dasbor) Anda dengan menekan sapaan "Hi, (nama pengguna)!" dan pilih "My Dashboard" (Dasbor Saya) pada menu tarik-turun, atau tekan kursor pada gambar profil Anda.
Pilih "Tampilan" pada menu yang dapat ditemukan di samping halaman atau di atas halaman jika Anda mengakses AO3 melalui sebuah gawai.

Langkah ini akan membawa Anda ke laman My Site Skins (Tampilan Situs Saya), yang memberikan daftar tampilan situs pilihan Anda dan menyediakan tombol untuk mengakses tampilan karya pilihan Anda serta tampilan karya yang tersedia untuk publik. Untuk mengetahui perbedaan antara tampilan situs dan tampilan karya, silakan kunjungi Apa itu tampilan?

Untuk tutorial ini, kita ingin membuat tampilan karya, jadi pilihlah "My Work Skins" (Tampilan Karya Saya), kemudian pilih "Create Work Skin" (Buat Tampilan Karya). Anda akan diarahkan pada formulir Buat Tampilan Baru.

Pemasangan Tampilan Karya Baru

Kolom yang wajib diisi untuk membuat tampilan baru menggunakan CSS pilihan adalah Type (Tipe), Title (Judul), dan CSS. Kolom lain tidak wajib diisi, tetapi kita akan menjelajahi setiap kolom yang ada dalam tutorial ini.

Anda dapat kembali dan menyunting isi setiap kolom ini setelah Anda mengajukannya (lihat Menyunting Tampilan Karya Anda untuk mengetahui caranya).

Type (kolom wajib diisi): Jika Anda memilih tombol "Create Work Skin (Buat Tampilan Karya) pada laman Tampilan, tampilan yang muncul akan otomatis menjadi "Work Skin" (Tampilan Karya).
Title (kolom wajib diisi): Berikan judul yang deskriptif untuk tampilan Anda, sehingga tampilan tersebut dapat dibedakan dari tampilan lainnya yang akan Anda buat nantinya. Judul tampilan harus unik. Oleh karena itu, kami merekomendasikan Anda menyertakan nama pengguna Anda di judul tampilan (contoh: "Tampilan Homestuck (nama pengguna)").
Description: Apa yang menonjol dari tampilan Anda? Apakah ada tema yang spesifik? Anda dapat melihat beberapa contoh deskripsi tampilan pada laman Tampilan Situs Publik atau Tampilan Karya Publik .
Upload a preview: Anda dapat mengunggah tangkapan layar desain CSS Anda sebagai pratinjau di bagian ini. Anda juga dapat kembali dan melakukan hal ini nanti setelah Anda mencoba menggunakan tampilan karya Anda.
Apply to make public: Fitur ini tidak lagi berlaku. Tampilan pilihan tidak lagi dapat dilihat oleh publik pada saat ini, dan memberikan tanda centang pada kotak ini tidak memiliki pengaruh apapun pada pengaturan privasi tampilan Anda.
CSS: Kolom terakhir pada formulir Buat Tampilan Baru adalah tempat Anda memasukkan CSS pilihan Anda. Dalam bagian selanjutnya, kami akan menjelaskan bagaimana cara memasukkan CSS yang akan membentuk desain baru pada karya Anda.

Anda mungkin telah melihat tombol pada bagian atas laman yang dilabeli "Use Wizard" (Gunakan Wizard). Tombol tersebut akan mengarahkan Anda pada Site Skin Wizard (Wizard Tampilan Situs), yang sayangnya hanya dapat digunakan untuk membuat tampilan situs dan bukan tampilan karya (Apa itu Wizard Tampilan?)

Namun jangan khawatir—dengan tutorial ini Anda akan menjadi seorang ahli dalam waktu singkat!

Menggunakan CSS

Karena alasan keamanan, jenis property dan value CSS yang dapat ditunjang oleh AO3 terbatas. Kode program yang tidak ditunjang oleh AO3 akan dihapus setelah Anda menyimpan perubahan yang Anda buat.

Anda dapat melihat pratinjau daftar lengkap property CSS yang ditunjang dengan menekan simbol tanda tanya warna biru ? yang terletak di atas kolom CSS. Anda mungkin ingin mengunjungi Property dan value CSS apa saja yang dapat saya gunakan di tampilan pilih? untuk informasi tambahan mengenai fon, warna, URL, dan sebagainya.

Memasukkan CSS Anda

Pada bagian ini, Anda memasukkan CSS yang menentukan jenis desain yang dapat diaplikasikan pada karya-karya Anda. Silakan masukkan CSS Anda atau ikuti contoh di bawah.

Katakanlah Anda memiliki karya dengan HTML sebagai berikut:

  
Kepada Billy,
Inilah surat yang telah kutulis untukmu. Kuharap engkau sangat terkesan olehnya.
Salam,
Adelaide

Tanpa adanya tampilan karya yang diaplikasikan, teks ini akan muncul dengan desain karya awal AO3.

Teks karya dalam contoh di atas dengan desain Arsip awal: fon Sans Serif, warna hitam

Jika kita ingin teks ini tampil layaknya tulisan tangan, seperti gambar di bawah, kita harus membuat desain pilihan menggunakan CSS.

Teks karya dengan fon 'Comic Sans MS' dikelilingi oleh batas tebal warna hitam, dengan lapisan di antara batasan dan teks. 'Adelaide' berukuran sedikit besar dan berwarna merah. Tulisan 'sangat' digarisbawahi dua kali.

Pertama-tama, marilah beri teks ini batas tebal berwarna hitam, ubah fon teks, dan tingkatkan ukuran fon teks. Untuk melakukan hal-hal tersebut, masukkan kode berikut pada kolom CSS tampilan karya Anda:

  
#workskin .letter {
border: 1px solid;
padding: 15px;
font-size: 1.1em;
font-family: "Comic Sans MS", cursive, sans-serif;
}

Selanjutnya, tambahkan desain spesial untuk nama pengirim ("Adelaide") pada kolom CSS. Masukkan CSS berikut untuk meningkatkan ukuran fon dan memberikan warna merah pada nama pengirim:

  
#workskin .signature {

font-size: 1.2em;
color: red;
}

Terakhir, untuk menggarisbawahi kata yang dipertegas ("sangat"), tambahkan CSS ini:

  
#workskin em {
border-bottom: 3px double;
}

Kolom CSS Anda sekarang sudah memiliki CSS dengan tiga desain berbeda:

  
#workskin .letter {
border: 1px solid;
padding: 15px;
font-size: 1.1em;
font-family: "Comic Sans MS", cursive, sans-serif;
}
#workskin .signature {
font-size: 1.2em;
color: red;
}
#workskin em {
border-bottom: 3px double;
}

Referensi CSS W3Schools menyediakan daftar property CSS tambahan berguna yang dapat Anda tambahkan pada karya Anda.

Kami juga menyarankan Anda mengunjungi Tampilan Karya Publik untuk contoh-contoh desain.

Catatan: Sangatlah penting untuk menempatkan pemilih CSS Anda (contoh: elemen .letter, .signature, dan em ) di bawah id #workskin sehingga desain-desain Anda hanya diterapkan pada isi karya yang telah Anda pilih, yaitu seluruh karya di bawah ringkasan dan di atas tombol "Top" (Atas) pada laman karya Anda. Namun, jika Anda lupa untuk menempatkan CSS Anda di bawah id #workskin, kami akan menambahkannya secara otomatis untuk Anda setelah Anda mengajukan kode CSS Anda.

Menyimpan Tampilan Karya Baru Anda

Setelah Anda meninjau kembali CSS Anda dan puas dengan kodenya, pilih tombol "Submit" (Ajukan) untuk menyimpan tampilan karya baru Anda. Desain Anda tidak akan diaplikasikan pada karya lainnya kecuali Anda menambahkan tampilan tersebut pada setiap karya secara manual (kita akan membahas hal ini di bagian Menerapkan Tampilan Karya Anda).

Setelah Anda memilih "Ajukan", kami akan menghapus semua kode yang tidak ditunjang oleh AO3 dan memastikan bahwa semua selector ditempatkan di bawah #workskin id.

Menyunting Tampilan Karya Anda

Segera setelah mengajukan tampilan karya baru, Anda dapat meninjau kembali kode Anda dan memilih tombol "Edit" (Sunting) untuk membuat perubahan yang diinginkan.

Menerapkan Tampilan Karya Anda

Anda telah membuat tampilan karya—sekarang, Anda dapat menerapkan tampilan ini pada karya manapun milik Anda di AO3. Beberapa catatan yang perlu diingat:

Satu karya hanya dapat menggunakan satu jenis tampilan.
Satu jenis tampilan dapat diterapkan pada banyak karya.
Jika Anda menghapus sebuah tampilan, karya-karya dengan tampilan tersebut tidak lagi dapat memakai desainnya.
Jika Anda menciptakan karya bersama seorang pencipta rekan, pencipta rekan tersebut juga dapat menerapkan tampilan karya pada karya bersama milik kalian.

Jika Anda sudah menetapkan suatu karya yang akan menggunakan format yang baru Anda buat, silakan menuju laman Edit Work (Sunting Karya) pada karya Anda. Kunjungi Bagaimana cara saya menyunting karya? jika Anda ingin melihat caranya.

Pada bagian Associations (Asosiasi) dari laman Sunting Karya, pilih judul tampilan karya Anda dari daftar "Select Work Skin" (Pilih Tampilan Karya).

Jika pemilih CSS pada tampilan karya Anda sudah sesuai dengan elemen pada HTML karya Anda (seperti semua tanda

atau ), Anda dapat melewati bagian selanjutnya dan langsung menuju bagian Menyimpan dan Meninjau Karya Anda. Contohnya, Anda ingin memberikan dua garis bawah pada semua teks garis miring pada karya Anda. Mengaplikasikan tampilan karya dengan CSS berikut dapat memberikan dua garis bawah secara otomatis pada semua teks yang ditandai dengan tanda :

  
#workskin em {
border-bottom: 3px double;
}

Menggunakan Pemilih CSS pada HTML Karya Anda

Jika pemilih CSS Anda belum sesuai dengan HTML karya Anda, sekaranglah saatnya menambah tanda

dan , class, dan id pada markah (rangkaian tanda) karya Anda. Anda dapat menyunting markah karya Anda dengan menuju bagian Work Text (Teks Karya) dari laman Edit Work (Edit Karya). Pastikan untuk memilih tombol "HTML".

Jika Anda telah memasukkan CSS Anda sendiri di bagian Memasukkan CSS Anda, silakan tambahkan pemilih CSS Anda yang cocok sekarang pada markah karya Anda. Jika tidak, kami akan meneruskan dari contoh kami yang sebelumnya.

Pada contoh ini, Anda memiliki karya yang berisi markah berikut:


Kepada Billy,
Inilah surat yang telah kutulis untukmu. Kuharap engkau sangat terkesan olehnya.
Salam,
Adelaide

Untuk menerapkan tiga desain dari contoh tampilan karya, Anda perlu memasukkan elemen dan atribut HTML yang cocok dengan pemilih pada CSS Anda:


Untuk menerapkan desain surat, selubungi seluruh area teks dalam tanda  dengan class .letter yang dirujuk dalam tampilan karya Anda.
Untuk menerapkan desain tanda tangan, tambahkan class .signature dari tampilan karya Anda hingga ke paragraf akhir.

Untuk menerapkan desain garis bawah, tidak diperlukan kode tambahan karena pemilih em yang Anda gunakan pada CSS tampilan karya Anda sudah cocok dengan tanda  pada markah di atas.


Markah baru Anda sekarang sudah sama dengan contoh berikut:


Kepada Billy,
Inilah surat yang telah kutulis untukmu. Kuharap engkau sangat terkesan olehnya.
Salam,
Adelaide

Menyimpan dan Meninjau Karya Anda

Anda dapat meninjau karya Anda dengan desain terbarunya dengan memilih tombol "Preview" (Pratinjau), atau menyimpan perubahan secara langsung dengan memilih "Post Without Preview" (Memposting Tanpa Meninjau).

Selamat, karya Anda sudah indah sekarang!

Jika Anda mengikuti contoh dari bagian Memasukkan CSS Anda dan bagian Menggunakan CSS Selector dalam HTML Karya Anda, karya Anda seharusnya sudah mirip sebuah surat yang ditulis tangan sekarang.

Teks karya dari contoh tutorial dengan fon 'Comic Sans MS', dikelilingi oleh batas tebal warna hitam, dengan lapisan antara batas dan teks.

Jika Anda ingin menerapkan tampilan karya Anda pada beberapa karya secara bersamaan, kunjungi Bagaimana cara saya bisa menyunting beberapa karya secara bersamaan? Mohon diingat bahwa Anda masih perlu memasukkan pemilih CSS Anda pada HTML masing-masing karya jika Anda belum melakukannya.

Untuk informasi lebih lanjut mengenai cara memposting dan menyunting karya-karya, silakan kunjungi Pertanyaan Umum mengenai Memposting dan Menyunting. Anda mungkin juga ingin melihat Tutorial: Memposting Karya untuk panduan langkah demi langkah.

Di mana saya bisa mendapatkan informasi jika pertanyaan saya tidak terjawab di sini?

Untuk informasi lebih lanjut mengenai tampilan, termasuk tampilan situs dan tampilan publik, kunjungi Pertanyaan Umum mengenai Tampilan dan Antarmuka Arsip. Beberapa pertanyaan yang sering ditanyakan mengenai AO3 secara umum telah terjawab di Pertanyaan Umum mengenai AO3. Pertanyaan dan jawaban mengenai Ketentuan Layanan kami dapat ditemukan di Pertanyaan Umum mengenai Ketentuan Layanan. Anda juga mungkin ingin melihat Masalah-Masalah Umum kami. Jika Anda membutuhkan bantuan lebih lanjut, silakan hubungi Komite Dukungan kami.

Archive of Our Own^beta