Dalam tutorial ini, kita akan membahas bagaimana melakukan lima
kustomisasi CSS cepat yang membuat blog Anda menonjol. Bahkan jika Anda
tidak tahu apa itu CSS, Anda akan mampu mengikuti petunjuk dan mengubah
tampilan standar tema Anda.
Sebelum Kita Memulai, Anda Memerlukan...
tema dengan pilihan CSS kustom
atau plugin CSS kustom
atau tema anak
Jika Anda belum tahu bagaimana caranya, saya akan menunjukkan kepada
Anda bagaimana cara mendapatkan dan mengatur hal-hal ini. Dengan cara
itu Anda dapat dengan aman mengedit tata letak situs web atau blog Anda.
Jika situs web Anda sudah berjalan dan mendapatkan lalu lintas, itu
bisa menjadi ide yang baik untuk menggunakan plugin "maintenance" agar
pengunjung tidak menjadi bingung dengan perubahan tata letak.
Alternatif
lainnya adalah dengan mendirikan sebuah lingkungan pengembangan pada
mesin lokal Anda, dan kemudian meng-upload perubahan ke server setelah
mereka selesai.
Pada akhirnya, itu terserah kepada Anda.
Pilihan Tema Anda
Beberapa
tema sudah memiliki pilihan untuk mengganti bagian-bagian dari
stylesheet CSS, memungkinkan Anda untuk membuat tata letak Anda sendiri
tanpa menginstal plugin tambahan atau membuat tema anak. Ini dapat
ditemukan di bawah menu Appearance > Theme Options.
Kadang-kadang itu berada di salah satu subkategori, tapi lihat kotak yang memiliki judul "Edit CSS".
Advertisement
Plugin CSS Kustom
Jika tema Anda tidak memiliki pilihan seperti itu, plugin Jetpack dilengkapi
dengan fungsi CSS Editor, tapi untuk menggunakannya, Anda harus
menghubungkan plugin dengan akun WordPress.com Anda, atau membuat yang
baru.
Menghemat revisi Anda, yang membuatnya mudah untuk kembali
ke tata letak sebelumnya jika Anda merasa seperti mengacaukan di suatu
tempat di sepanjang jalan, tetapi jika Anda tidak tertarik pada fungsi
lain dari plugin Jetpack, alternatif yang lebih cepat adalah plugin CSS
kustom sederhana. Setelah
Anda menginstal dan mengaktifkan plugin, Anda dapat mengedit css dari
Appearance> custom css. (Di Jetpack, itu terletak di bawah pilihan
menu Appearance > Edit CSS.)
Membuat Tema Anak
Jika
Anda siap untuk membuat perubahan yang luas, ide terbaik adalah membuat
tema anak. Masalah dengan kustomisasi melalui menimpa adalah Anda
mendapatkan baris kode yang berlebihan, dan untuk edit yang luas ini
dapat membuat blog atau situs web memuat lebih lambat.
Plus, itu
jauh lebih mudah untuk melacak hal-hal ketika Anda mengedit kode di satu
tempat. Anda dapat menggunakan plugin seperti Orbisius Child Theme Creator atau menduplikat tema untuk langsung membuat tema anak. Atau, Anda hanya dapat membuat folder tema baru, menamakannya THEMENAME child,
membuat style.css di folder tema baru dan mengimpor stylesheet utama.
(THEMENAME harus diganti dengan tema yang ingin Anda edit.)
1
@import url("../THEMENAME/style.css");
Untuk info lebih lanjut tentang cara membuat tema anak, Anda bisa memeriksa panduan kami.
Sekarang Anda sudah siap, saatnya untuk mulai bekerja. Kita akan mulai
dengan sesuatu yang sangat mendasar: mengubah latar belakang blog/situs
web Anda. Saya juga akan menunjukkan cara menambahkan gambar latar
belakang bergaya.
Mengubah Warna Latar Belakang
Untuk
mengubah latar belakang situs web Anda, pertama Anda harus akrab dengan
styling dari tema. Apakah warna latar belakang hanya berada di dalam
body, atau dibangun ke frame tersendiri?
Beberapa tema yang tidak
seintuitif seperti yang lainnya, jadi jika yang saat ini Anda gunakan
lebih bisa dimengerti, Anda mungkin ingin mengubah ke tema yang berbeda
sebelum Anda mulai mengedit. (Salah satu yang saya gunakan dalam contoh
adalah Tema Catchbox gratis dan tema yang paling umum untuk memulai adalah twentyeleven.) Dengan tema yang paling lebar-penuh, warna latar belakang adalah berada di bawah body. Dan mengesampingkan ini cukup sederhana.
1
2
3
body {
background-color: #477C67;
}
Anda dapat menggunakan W3Schools HTML color picker untuk
mendapatkan warna Anda, atau menginstal ekstensi Chrome, plugin
Firefox, atau plugin WordPress untuk mempercepat hal-hal bersama ketika
Anda mengedit di mana saja.
Saya memilih warna latar belakang deep teal: #477C67: Jika
potongan kode ini tidak mengubah warna latar belakang blog Anda, ada
kemungkinan bahwa itu menggunakan kontainer kosong yang di-style untuk
mengisi latar belakang.
Jika Anda ingin menetapkan gambar sebagai
latar belakang, pertama kali upload gambarnya. Pastikan dengan resolusi
tinggi jika tidak maka tidak akan terlihat sangat baik. Kemudian copy
URL. Anda hanya perlu bagian setelah blog, jadi jika Anda meng-upload
file melalui WordPress, maka path-nya harus terlihat seperti ini:
"wp-content/uploads/2014/01/IMAGE.jpg"
Hasil akhir akan terlihat seperti ini: Hal
yang keren adalah bahwa gambar tetap statis bahkan ketika Anda
menggulir halaman ke bawah. Untuk foto yang sangat bagus yang Anda bebas
untuk menggunakannya tanpa memberikan kredit (meskipun hal ini mungkin
diterima), Anda bisa mengunjungi unsplash.com.
Meningkatkan Keterbacaan
Kadang-kadang
Anda tersandung tema yang sangat bagus. Ini terlihat mengagumkan, tapi
hanya ada satu masalah. Font-nya kecil dan abu-abu sehingga hampir tidak
dapat terbaca. Tapi jangan khawatir, Anda dapat mengubah ini dalam satu
langkah mudah.
1
2
3
4
body {
font-size: 16px;
color:#000
}
Tambahkan
potongan pendek dari kode ini ke CSS kustom, dan itu akan memperbaiki
masalahnya. (Letakkan setelah kode tentang latar belakang jika Anda
mengubah milik Anda.) Ukuran
yang baik untuk font standar dari situs web atau blog adalah 14-16
piksel. Hindari 12 piksel yang biasanya wajib, katakanlah, laporan
sekolah, karena tujuan utama Anda bukan untuk menghemat kertas. Anda
ingin konten Anda dapat bernapas, dan membuatnya lebih mudah dibaca.
Jika Anda merasa seperti font standar dari tema Anda terlihat tidak
profesional, Anda dapat menambahkan baris ini:
1
2
3
body {
font-family: Arial, Helvetica, sans-serif;
}
Membuat semuanya terlihat seperti ini:
1
2
3
4
5
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
color:#000
}
Mengubah Tampilan Link
Jika
Anda ingin mengubah warna link, Anda dapat melakukan ini cukup mudah.
Semua yang harus Anda lakukan adalah dengan menggunakan parameter untuk
link dalam css "a" dan kemudian mengubah warna apa yang Anda inginkan.
1
2
3
a {
color: #BA2323;
}
Saya memutuskan untuk menggunakan warna merah (#BA2323) dan berakhir seperti ini. Ada
beberapa lebih banyak pilihan untuk bagaimana Anda ingin men-style link
Anda. Misalnya, Anda dapat memutuskan bagaimana Anda ingin link untuk
bereaksi ketika seseorang men-hover di atasnya. Yang paling umum adalah
garis bawah, tapi Anda bisa membuatnya mengubah warna primer atau warna
latar belakang.
1
2
3
4
a:hover {
color: #222;
background-color:#BA2323;
}
Misalnya,
mengubah teks menjadi abu-abu, dan mengubah warna latar belakang ke
dalam warna teks biasa. Kemudian Anda dapat mengubah atyle dari link
yang telah dikunjungi. Umumnya adalah perubahan warna, tetapi Anda dapat
menggunakan salah satu perubahan sebelumnya juga.
1
2
3
a:visited {
color: #004A4A;
}
Mengubah Tampilan Headline
Judul
posting biasanya dalam elemen h1, dan sub-judul yang digunakan dalam
posting biasanya dalam sebuah elemen h2 (meskipun ini adalah sesuatu
yang Anda pilih sendiri ketika membuat posting). Tapi jika tema Anda
mengkhususkan style warna dari judul posting, mengubah style dari tag h1
tidak akan membantu. Jadi, Anda harus mencari tahu apakah tema yang
Anda gunakan melakukan hal ini atau tidak.
Anda dapat memeriksa
apakah tema Anda menggunakan style tertentu untuk judul posting atau
tidak dengan membuka sumber halaman, dan mencari (tekan Control-F)
"post title". Jika hasilnya menunjukkan "<h1
style="some-style"></h1>" kemudian Anda tidak men-style h1,
Anda harus menyediakan styling dalam atribut "some-style".
Atau,
jika Anda akan membuat beberapa perubahan, anda bisa menginstal ekstensi
browser yang menampilkan style CSS dari teks yang dipilih tersebut. Ini
biasanya akan "entry-title" karena itu adalah standar untuk pembangunan
WordPress.
Untuk melakukan ini, pergi ke Editor di bawah menu Appearance.
dan cari "some-style". Seperti yang saya sebutkan, style biasanya
adalah "entry-title". Kemudian lihat baris mana yang Anda butuhkan untuk
ditimpa. Kadang-kadang, ada style khusus untuk judul yang terhubung
sehingga Anda mungkin harus mengubahnya juga. Ini muncul sebagai "h1 a
{" atau "some-style a {".
Untuk mengedit warna dan ukuran dari judul saya, saya harus menambahkan baris berikut:
1
2
3
4
5
6
7
8
.entry-title {
color: #WANTEDCOLOR;
font-size: WANTEDSIZEpx;
}
.entry-title a {
color: #WANTEDCOLOR;
}
Saya memilih biru muda (#5CBDBD). Harap
dicatat bahwa saya menggunakan warna yang cukup mencolok untuk
membuatnya jelas perubahan apa yang saya buat untuk tema. Anda mungkin
ingin menjadi sedikit lebih halus dan menemukan skema warna yang lebih
baik.
Jika Anda ingin mengedit style dari headline yang Anda gunakan dalam konten Anda, maka bukannya .some-style, Anda membukanya dengan h1{} atau h2{} atau h3{}.
Sudut-sudut Membulat dan Merata
Jika
ada sudut yang Anda rasa harus membulat, atau beberapa yang telah
dibulatkan terlalu banyak, berikut adalah perbaikan cepatnya.
Temukan
kontainer yang bersangkutan dalam stylesheet asli. (Buka stylesheet
asli di dalam dashboard WordPress, atau dalam sebuah file teks dan
kemudian cari beberapa teks yang unik ke kontainer yang ingin Anda edit.
Atau Anda dapat menggunakan plugin.) Widget biasanya di bawah .widget, dan kontainer posting ini biasanya di bawah konten.
Kode untuk digunakan di sini adalah:
1
2
-moz-border-radius: SIZEpx;
border-radius: SIZEpx;
Jika
Anda ingin menimpa sudut melengkung saat ini dan mengubahnya menjadi
datar, cukup mengatur ukuran menjadi 0. Jika Anda ingin melihat
bagaimana kurva mencari kontainer tertentu, mulailah dengan 5, dan lihat
bagaimana tampilannya.
Umumnya, Anda bisa mencari di halaman
jika Anda ingin mengedit sudut-sudut dari seluruh halaman. Anda biasanya
dapat menemukan isi kontainer dengan mencari .hentry jika
Anda ingin mengedit sudut dari konten. Anda mungkin harus mengedit
header dan footer secara terpisah. Atau menemukan widget dengan mencari
widget.
Mengubah Skema Warna dari Widget
Salah
satu cara termudah untuk mengatur skema warna keren untuk widget Anda
adalah dengan memiliki warna latar belakang yang berbeda untuk widget
itu sendiri dari judul widget. Anda melakukan ini dengan
mengidentifikasi kelas style dari judul widget. (Jika Anda tidak
mengingat bagaimana caranya, copy judul widget dan cari di sumber
halaman. Di keterangan h1 di sekitar judul, kelasnya terungkap.)
Ini cenderung hanya widget-title. Dan jika Anda ingin mengubah warna latar belakang dari widget itu sendiri, temukan style untuk widget, yang biasanya di bawah .widget. Kemudian Anda memilih warna dan menambahkan kode ini ke css kustom atau tema anak Anda:
1
2
3
4
5
6
.widget {
background: #COLOR;
}
.widget-title {
background-color: #COLOR;
}
Saya
memilih oranye dan teal tanpa alasan tertentu. Seperti yang Anda lihat,
jika tidak ada judul, ini tidak termasuk bagian judul dari skema warna,
jadi jika Anda ingin konsistensi Anda harus menambahkan judul ke semua
widget Anda.
Kesimpulan
Sementara pada
awalnya ini mungkin tampak sangat menakutkan untuk mulai bermain-main
dengan kode-kode dari situs web Anda, kebanyakan stylesheet cukup
intuitif bahwa jika Anda memiliki pengetahuan dasar dari fungsi
Wordpress, Anda akan dapat tetap mengatasinya.
Tentu saja, dengan
ini kita baru saja mengikis permukaannya, tapi Anda cukup tahu untuk
membuat beberapa pilihan edit menjadi lebih baik.
Share
No comments
for "5 Kustomisasi CSS Cepat Ramah-Pemula yang Membuat Blog Anda Menonjol"
No comments for "5 Kustomisasi CSS Cepat Ramah-Pemula yang Membuat Blog Anda Menonjol"
Post a Comment