Tutorial membuat template blogger dari dasar (Part IV)

Oke seperti janji saya di post sebelumnya, kali ini kita akan membahas tentang penjelasan dasar untuk mengatur properti CSS dari bagian-bagian yang ada dalam template. 

Dalam tutorial ini akan dijelaskan dasar-dasar kode untuk mengatur properti di setiap bagian pada CSS. 

Untuk belajar awal, kita akan pelari 2 bagian sederhana dari CSS, yaitu bagian Main dan Post. 

Setelah belajar 2 bagian ini, diharapkan bisa mengerti bagian lain, karena strukturnya hampir sama. Berikut ini contoh kode CSS, untuk bagian Main dan Post : 

 #main {   
 margin: 0px 0px 0px 0px;   
 padding: 0px 0px 0px 0px;   
 min-width: 400px;   
 max-width: 400px;   
 background: $mainbgColor;   
 color: #111111;   
 font: $textFont;   
 }   
 .post {   
 margin: 0px 20px 10px 0px;   
 padding: 10px 20px 10px 2px;   
 line-height: 1.5em;   
 text-align: left;   
 background: $postbgColor;   
 }  

#Main dan .post adalah judul dari setiap bagian yang ada di CSS. Kode properti dari setiap bagiannya harus ada dalam tanda {.......}. Untuk sementara kita fokus untuk kode yang ada dibagian. post, terutama kode yang ditulis dengan warna merah, yaitu margin dan padding .

• Margin : mengatur jarak dibagian tersebut dengan bagian yang lebih besar yang ada diluarnya. Ada 4 angka untuk mengatur properti dari margin, yaitu angka 1: mengatur margin atas, angka 2: margin kanan, angka 3: margin bawah dan angka 4: margin kiri. Pada dasarnya mengatur properti margin adalah searah jarum jam, yang dimulai dengan margin atas. Pada kasus diatas, bagian induk untuk post adalah bagian Main. Lihat garis putus putus yang ada diluar batas warna biru (bagian post), ditempatkan didalam warna hijau (bagian Main ) adalah berdasar pada kode perintah, tulisan yang berwarna merah yang ada dibagian .post. Jika semua properti margin di .post di set 0, maka ukuran dari bagian .post akan sama persis dengan bagian Main. Margin boleh bernilai negatif, artinya jika bernilai negatif maka bagian perbatasan akan mengarah ke batas bagian induknya, dan mungkin akan tumpang tindih.

• Padding : mengatur jarak pada bagian tersebut dengan bagian yang lebih kecil yang ada didalamnya. Dalam bagian .post dikasus diatas, bagian yang lebih kecil adalah Post- body . Ada 4 angka juga untuk mengatur properti dari padding , yang didefinisikan sama dengan bagian margin, yaitu searah dengan jarum jam yang dimulai dari atas. Lihat bahwa artikel yang ada dibagian post-body ada didalam bagian post. Padding tidak boleh bernilai negatif.

• Min-width dan Max-width : mengatur lebar dari setiap bagiannya. biasanya cukup dituliskan width = 400 px (untuk contoh), akan tetapi menjadi lebih bagus jika mengatur lebar sedetail mungkin, karena jika tidak ditulis secara detail terkadang lebar dari suatu bagian yang sudah didefinisikan akan berubah semakin kecil/lebar dalam beberapa situasi dan dilihat dengan browser yang berbeda. Dengan mengatur lebar sedetail mungkin diharapkan lebar akan terlihat sesuai dengan yang diinginkan walau dilihat dengan browser yang berbeda-beda. Dengan mengatur lebar sedetail mungkin dapat juga untuk menghindari kesalahan pada saat penulisan kode.

• Background : mengatur warna latar belakang dari suatu bagian. Pengaturan ini menggunakan kode heksadesimal untuk warna. Selain warna, gambar juga dapat ditetapkan sebagai latar belakang.

• Color : mengatur warna tulisan dengan menggunakan kode heksadesimal untuk warna.

• Font : mengatur huruf dari tulisan.

• Text-align : mengatur alignment tulisan. Ada 3 opsi pilihan, yaitu, left, center dan right.

• Line-height : mengatur jarak, atau tinggi, diantara 2 baris tulisan.

Tutorial ini hanya dasar saja beberapa kode yang penting dalam template blogger. Yang paling penting adalah mengerti tentang kode perintah Margin dan Padding. Tutorial selanjutnya tentang gambaran singkat mengenai bagian dan unsur-unsur yang ada didalam template blogger. 

Bagian Dan ElEmen Umum Template Blogger

Dalam tutorial ini akan dijelaskan bagian dan elemen umum yang ada dalam template blogger beserta fungsi dari bagian dan elemen tersebut. Elemen pada dasarnya adalah setiap objek yang membuat fungsi di blog, sedangkan bagian/cointainers adalah suatu bagian yang besar yang berisi elemen-elemen yang lebih kecil. Elemen-elemen yang dibahas disini nantinya belum tentu elemen yang harus ada disetiap template Blogger, tapi hanya beberapa elemen umum yang sering dipakai didalam template Blogger. Untuk memahami bagian ini, kita akan merujuk pada gambar yang ada di tutorial Struktur dari kode CSS. 

Simbol # dan . menunjukkan atribut dari elemen (semacam klasifikasi dari jenis elemen). Jika belum paham dengan simbol ini, diabaikan aja dulu tidak usah perlu dipikirkan secara serius. 

Global :

• body {.....} : mengatur sifat umum dari template, jika elemen yang dibawahnya tidak didefinisikan, maka properti yang ada dibagian ini yang berlaku.

• #outer-wrapper {.....} : Bagian awal dan terbesar dari template. Didalam bagian ini berisi header wrapper, content-wrapper, dan footer-wrapper.

• #content-wrapper {.....} : suatu bagian yang berisi sidebars dan main.

• a {.....} : mengatur properti dari tulisan yang mempunyai link.

• a:visited {.....} : mengatur properti dari tulisan yang mempunyai link setelah dikunjungi. 

• a:hover {.....} : mengatur properti dari tulisan yang mempunyai link disaat mouse ada diatas tulisan tersebut. Karena semua kode harus ditulis didalam {.....} setelah judul elemen, maka untuk penjelasan berikutnya hanya ditulis judul elemennya saja.

Header :

• #header-wrapper : Bagian yang membungkus judul dan deskripsi blog/website (Blog Title dan Blog Description).

• #header : Bagian yang ada didalam header-wrapper.

• #header h1 : Perintah yang ada didalam bagian ini mengatur tampilan dan tata letak judul blog (Blog Title).

• #header h1 a : Mengatur properti link di judul blog.

• #header .description : Mengatur properti dari deskripsi blog.

• #header a img : Mengatur properti dari gambar yang ada didalam header. 

Main:

• #main-wrapper : bagian yang didalamnya terdiri atas Date Header, Blog Posts, Comments, Feed Link, dan setiap widget yang ditempatkan di atas atau bawah artikel (Blog Posts).

• #main : bagian yang ada didalam main-wrapper.

• #main .widget : mengatur properti dari semua widget yang ada didalam bagian main.

• h2.date-header - mengatur properti dari Date Header (yang ada diatas Post Title).

• .post - mengatur properti pada bagian Blog Posts.

• .post h3 - mengatur properti dari judul artikel (Post Title).

• .post-body p - mengatur properti dari body atau isi artikel (post).

• .post ul - mengatur properti dari unordered list (daftar yang tidak bernomor).

• .post ol - mengatur properti dari ordered list (daftar bernomor).

• .post li - cmengatur properti dari daftar individu didalam unordered list atau ordered list.

• a img - mengatur properti secara umum dari sebuah gambar (memacu pada link; dan gambar pada link itu sendiri).

Sidebar:

• sidebar-wrapper : bagian yang membungkus semua element dan isi yang ada didalam sidebar.

• .sidebar : bagian yang ada didalam sidebar-wrapper.

• #sidebar1 : mengatur properti didalam sidebar1.

• #sidebar2 : mengatur properti didalam sidebar2. Jika ingin properti yang ada didalam sidebar1 dan sidebar2 sama, ma ka properti cukup diatur di .sidebar dan tidak perlu ditulis didalam #sidebar1 dan #sidebar2 lagi di kode CSS.

• .sidebar .widget : mengatur properti semua widget (yang ditambahkan melalui Added Page Element) di sidebar.

• #sidebar1 .widget : hanya mengatu widget di sidebar1.

• .sidebar .BlogArchive : mengatur properti Blog Archive. Ini secara teknis merupakan widget disidebar juga, akan tetapi mengatur properti di sidebar widget tidak mengubah widget untuk Blog Archive. Oleh sebab itu properti di .BlogArchive pengaturannya ditulis sendiri.

• .sidebar h2 : mengatur properti judul (title/header) pada sidebar widget.

• .sidebar #BlogArchive1 h2 : mengatur properti judul pada Blog Archive. Miscellaneous: Pada dasarnya, bagian Profile ( About Me ) terletak didalam sidebar , tetapi dalam penjelasan ini diletakkan di bagian Miscellaneous.

• #Profile1 : mengatur properti dari About Me.

• #Profile1 h2 : mengatur judul (title/header) pada About Me. 

• .profile-img a img : mengatur gambar didalam About Me.

• .profile-textblock : mengatur deskripsi penulis pada About Me.

• .profile-data : mengatur data penulis pada About Me.

• .profile-datablock : mengatur keseluruhan data dalam About Me.

• blockquote : mengatur teks dalam tanda kutip (quoted text) pada artikel.

• code : mengatur tulisan dalam tags code di artikel.

Post - Footer :

• .post-footer : mengatur semua properti didalam post-footer.

• .post-footer-line : mengatur properti setiap baris baru di post-footer.

• .post-footer a : mengatur properti link text didalam post-footer.

• .post-footer .post-comment-link a : mengatur link di "comment" dalam post-footer.

• #blog-pager : mengatur properti link pada tulisan "newer posts", "home", dan "older posts".

• #blog-pager-newer-link : mengatur properti pada link "newer posts".

• #blog-pager-older-link : mengatur properti pada link "older posts" link. 

• .feed-links : mengatur properti pada link "Subscribe to: Posts (Atom)". 

Comment :

• #comments : mengatur semua properti pada bagian comment.

• #comments a : mengatur properti link didalam bagian comment.

• #comments h4 : mengatur header dibagian comment.

• .deleted-comment : mengatur properti untuk deleted comment.

• .comment-author : mengatur properti untuk comment author.

• .comment-body p : mengatur properti comment body.

• #comments ul : mengatur unordered list didalam bagian comment.

• #comments li : mengatur daftar individu didalam comment. 

Footer :

• #footer-wrapper : bagian yang membungkus semua elemen dan isi didalam footer section.

• #footer : bagian yang ada didalam footer-wrapper.

• #footer h2 : mengatur properti dari judul (title/header) di footer.

• #footer .widget : mengatur properti widget yang ada di footer.

• .footer a : mengatur properti link di footer.

 Dengan mengerti dan memahami bagian-bagian diatas, kita akan dapat dengan cepat menemukan kode dan mengubahnya untuk mengganti bagian-bagian dari template tertentu sesuai dengan selera, misalnya ingin mengganti huruf, warna tulisan, background, padding, dsb.

Untuk mengubah bagian-bagian tersebut, yang dilakukan hanyalah memodifikasi kode yang ada didalam {.......} pada bagian yang ingin kita ubah saja.

Tutorial selanjutnya kita akan membahas tentang mengatur ukuran template 

See You Next Time.