Mengintip CSS di WordPress.com

struktur CSS di WordPress.comWow, kemarin sudah disibuki cara kerja HTML sekarang menyibukkan diri lagi mengintip cara kerja CSS di WordPress.com! CSS sempat disinggung-singgung di HTML. CSS di WordPress.com bisa ‘gitu?

CSS di WordPress.com?

Ya dan tidak. Iya, kalau sekedar ingin tahu apa peran CSS atas tampilan konten blog. Tidak, setelah peran mempercantik CSS diperlihatkan seperti lelucon posting lalu, CSS tidak bisa diterapkan. Tadi itu cuma demo!

Hehe.. ‘dilihat boleh dipakai jangan’ membuat kita penasaran. Dia adalah pemanis memancing kita berbelanja di akhir. Sebuah trik bisnis jitu! Semua tahu WordPress.com “mati”, sukar dioprek. Banyak pengguna usul, mungkin, agar blog dibuat sedikit “hidup”. Pilihan satu-satunya CSS (Cascading Styles Sheets); CSS membantu blog tampak hidup tanpa mengganggu struktur situs web atau blog. (Javascript, disingkat ‘js’, membuat blog lebih hidup lagi. Nanti.)

Disisipkanlah menu [Appearance]-[CustomDesign] di dashboard: Menu Appearance-Custom Design di WordPress.com
Klik CSS,
CSS Editor di WordPress.comPindahkan setting CSS ke ‘Don’t use TwentyEleven’s CSS… ‘ dan lihat halaman depan. Seperti ini,
Tampilan blog hanya HTML tanpa CSSGaring! HTML tanpa CSS, blog jadi gundul. Oke sudah mengintip, kembalikan setting CSS ke semula dan kita buat skrip CSS tambahan melengkapi skrip CSS asal/induk Twenty Eleven. (Tidak tahu disimpan di mana.)

Buat skrip mini CSS di WordPress.com

Kembali ke editor, hapus semua teks yang ada dan isi dengan 4 blok kode berikut:

#site-title {
	font-size:2em;
	font-family:Trebuchet MS;
}

#site-description {
	font-size:80%;
	color:#0000FF;
}

#democrats {
	background:blue;
	color:#FFFFFF;
}

#republicans {
	background:red;
}

Klik [Preview]. Ini hasilnya,Tampilan blog dengan CSS

Diskusi

Skrip CSS berisi kumpulan setting tampilan. Standar struktur CSS mengikuti pola gambar di atas. Selector atau selektor adalah nama, pada contoh #site-title, #site-description, #democrats, #republicans. Selektor diikuti properti dan nilai terpisah oleh ‘:‘ dan ditutup ‘;‘. Mudah, ya.

Dua blok pertama mengatur tampilan judul blog. Ada beda di dimensi atau ukuran font. Ternyata selain ‘px’ (piksel) yang kita kenal, dimensi font juga bisa diungkapkan dengan ’em’ dan ‘%’. Browser menerapkan ukuran standar 16px sebagai 1 em atau 100%. Font jadi lebih fleksibel menyesuaikan kemampuan browser. Kasus juga dialami blog ini, sempat memperhatikan font judul kurang mulus saat dibuka pertamakali?

Dua blok terakhir adalah ‘nama’ dan ‘setting’ CSS untuk posting. Kode HTML di posting seperti ini,

<div id="democrats">
<ul>
	<li>Franklin D. Roosevelt</li>
	<li>Harry S. Truman</li>
	<li>John F. Kennedy</li>
	<li>Lyndon B. Johnson</li>
	<li>Jimmy Carter</li>
	<li>Bill Clinton</li>
</ul>
</div>

<div id="republicans">
<ul>
	<li>Dwight D. Eisenhower</li>
	<li>Richard Nixon</li>
	<li>Gerald Ford</li>
	<li>Ronald Reagan</li>
	<li>George Bush</li>
	<li>George W. Bush</li>
</ul>
</div></code></pre>

Tag HTML <div> berfungsi mengelompokkan teks dengan ‘id’ (identitas) sama. Tidak perlu dijelaskan ‘kan asal warna latar merah dan biru, dan teks warna putih. Obama di mana? Lupa, seharusnya hadir di jajaran ‘Demokrat’.

Jadi nama untuk style dibuat di “luar” posting; posting memanggil nama style via tag HTML ‘div’ dan atribut ‘id’. Selesai.

Gampang, ya.

Eksperimen

Buat blog WordPress baru tema Twenty Eleven (Twenty Twelve?) untuk eksperimen. Bagus untuk belajar sayang tidak bisa disave kecuali iuran USD 30 per tahun. Tidak ada perkecualian?

Eureka! Ada, tema blog ‘Shift’ ini bisa lho!

 
:D  (demo mengintip css di worpdress.com selesai, nanti kita dalami mau?)
 

Tagged with: , , , , , , , , , , , ,
Ditulis dalam Blog HTML dan CSS, Blogging
15 comments on “Mengintip CSS di WordPress.com
  1. Jhuanita tryaz mengatakan:

    mantap mas brow
    saya sering mampir kesini tapi ini comment pertamaku…

    salam kenal kang.

  2. prasetya74 mengatakan:

    gan emg di wordpress tidak ada kode HTML ya??
    baru pemula…..

    • riosetoblog mengatakan:

      ada, menulis konten di editor ada pilihan mode ‘Visual’ atau mode ‘Text’. Klik ‘Text’, di sini kita harus tulis dengan kode html. selamat blogging!

  3. anakfositif mengatakan:

    Assalamualaikum..
    Kang, kenapa yaa CSS saya ga bisa di save?
    terus setiap script yang saya masukan,ga berfungsi..

    mohon pencerahannya,maklum pemula.. πŸ˜€

  4. klikbb mengatakan:

    mau nanya mas, gimana ya menampilkan widgets yang ada di sebelah kanan blog kita pada tiap postingan kita..soalnya di blog saya widgets nya hanya muncul pada homepage saja, klo di tiap postingan saya widgetnya tdk muncul.
    itu aja.
    terima kasih sblumnya.

  5. andyelmacz mengatakan:

    Mantap Sob., sdh lama cari post ginian maklum pemula..

    • riosetoblog mengatakan:

      sudah ketemu situsnya sekarang ‘kan? hehe.. selamat menikmati.

      • andyelmacz mengatakan:

        ada lagi yang lebih spesifik nggak sob.. buat blog sy kira kira bisa nggak diubah jenis font headnya thks

        • riosetoblog mengatakan:

          blog sudah bagus, tema yang dipakai? coba ke menu appearance (tampilan) – theme, klik ‘custom design’ – ‘font’; silakan ubah font dengan yang ada di sana untuk judul / header dan body… selamat mencoba, nanti saya berkunjung ke sana…πŸ˜€

          • andyelmacz mengatakan:

            temanya sunspot Mas Broo, ini juga baru dibuat 5 hari lalu. berawal dari searching jg termasuk belajar dari Blog Mas Broo juga, very thanks… iya untuk saran itu sy sudah coba Mas, pas sy save perubahannya malah masuk ke toko untuk pay $30 wkwkwkw

          • riosetoblog mengatakan:

            kembaran sama blog ini boleh, temanya ‘Sight’, bagus buat belajar, lumayan gratis font, CSS jalan…

Silakan komentar, 'like' juga oke

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: