Assalamuallaikum Wr Wb..

cs1.png

Selamat malam sahabatku yang ada di dunia maya, berjumpa lagi dengan saya kali ini. Pada kesempatan kali ini saya akan melanjutkan lagi tutorial tentang belajar mengedit css yang sudah lama sekali saya tunda pembahasannya, nah berhubung malam ini saya sedang free atau tidak ada kerjaan maka tutorial tersebut akan saya lanjutkan..

Tutorial kali ini adalah Cara Mengedit Css Bagian Bottom Content di mana tutorial malam ini merupakan tahap kesekian kalinya dalam pembuatan css, memang akhir-akhir ini saya lihat sudah banyak creator css yang bermunculan di dunia blogging dan itu menjadi sebuah kebanggan tersendiri buat saya karena para blogger yang sudah paham tentang css atau yang masih baru belajar membuat css mau berbagi kreasi mereka walaupun ada yang masih sederhana bagi para pemula. Tapi itu tidak menjadi masalah, karena setiap belajar suatu hal yang baru pasti membutuhkan proses belajar yang cukup lama dan tidak bisa instan. Nah... Bagi para pemula yang baru belajar membuat css saya akan memberikan satu tutorial yang di mana tutorial ini bisa kalian jadikan sebagai refernsi belajar kalian, silahkan di simak penjelasannya di bawah ini !!

Bottom content adalah elemen situs yang berada di bagian bawah (kaki) sebelum elemen #footer atau bisa di anggap sebagai paha suatu situs, bottom content juga bisa diartikan sebagai alas dasar dari ketiga elemen yaitu #navigation-menu, #category-bottom, dan #blogroll. Di dalam file css elemen (selector) bottom content di tulis seperti ini #bottom-content, bottom content menyangkut keseluruhan dasar dari menu navigasi, list category, dan menu blogroll. Jadi alas dasar ketiga elemen tersebut akan mengikuti aturan yang telah di sesuaikan di dalam file css. Sebagai contoh saya akan membuat elemen bottom content memiliki background warna hitam dan memiliki jarak yang agak renggang dengan elemen lainnya, maka caranya seperti ini.

#bottom-content { margin:5px;padding:10px;background:#000000;position:static; }

Sebagai contoh hasil dari kode di atas bisa di lihat di link berikut ini Prewiew Botto Content

Seperti yang telah kalian lihat pada contoh di page tersebut, bahwa elemen bottom content memiliki background warna hitam dan jarak agak renggang dengan elemen lainnya, itu bisa terjadi karena saya telah mengaturnya di dalam file css sehingga bisa menghasilkan tampilan seperti itu.

Bottom content juga bisa kita kreasikan dengan menambahkan background gambar di desainnya, caranya cukup menambahkan nilai value url(url_gambar)no-repeat (pengulangan gambar) left (posisi gambar),#000000 (warna background) di property background.

Nah... Sekarang saya akan membahas ketiga elemen yang ada di dalam area bottom content supaya kalian bisa paham sekalaian, seperti yang telah saya sampaikan di atas tadi bahwa elemen bottom content menampung tiga elemen yaitu #navigation-menu, #category-bottom, dan #blogroll.

1. #navigation-menu

#navigation-menu adalah alas dasar dari menu navigasi blog, di dalam elemen #navigation-menu terdapat 4 elemen lainnya yang di tampung yaitu #navigation-menu h3, #navigation-menu ol, #navigation-menu ul, dan #navigation-menu li.

- #navigation-menu h3 adalah selector yang mengatur judul "Navigasi".
- #naviagtion-menu ol adalah selector yang mengatur older list, namun biasanya situs jarang memakai elemen ol di dalam kode template.
#navigation-menu ul adalah selector yang mengatur eemen unolder list, berbeda dengan elemen ol, situs lebih sering memakai ul daripada memakai ol. Namun ada juga yang memakai keduanya di dalam kode template.

Lalu pada umumnya di dalam menu navigasi terdapat satu elemen yaitu .link-top, link top ini adalah selector untuk mengatur alas dasar button go to top. Posisinya terkadang tidak selalu di dalam elemen #navigation-menu tapi bisa di mana saja.

Untuk selector #category-bottom dan #blogroll tidak akan saya jelaskan lebih detail lagi karena di dalam elemen terdapat 4 elemen yang sama seperti elemen #navigation-menu, cuma fungsinya saja yang berbeda. #category-bottom adalah selector yang mengatur alas dasar menu kategori yang ada di blog dan #blogroll adalah selector yang mengatur alas dasar dari menu blogroll yang ada di blog. Lalu ada satu tips yang dapat kalian lakukan dalam mengedit css yaitu menyingkat selector caranya adalah seperti ini.

Dalam melakukan penyingkatan ini hanya bisa dilakukan kalau terdapat elemen yang sama lebih dari satu di blog, misalkan kita akan membuat judul navigasi, kategori, dan blogroll dengan desain yang sama kita bisa menggunakan kode berikut ini !

#bottom-content h3 { margin:3px;padding:7px;text-align:right;background:#000;color:#fff; }

Maka setiap elemen h3 yang ada di blog pada bagian bottom content tampilannya akan sama semua, cara ini juga bisa dilakukan pada elemen ol, ul, dan li tapi jika ol ul dan li di singkat maka setiap elemen ol ul dan li di keseluruhan blog akan memiliki tampilan yang sama. Baiklah ini saya kasih cara penulisan kode css #bottom-content beserta elemen yang di tampung.

#bottom-content { margin:0;padding:0;background:#000000; } #navigation-menu,#category-bottom,#blogroll { margin:5px;padding:0px;background:#00f; } #navigation-menu h3,#category-bottom h3,#blogroll h3 { margin:0;padding:8px 7px;background:#f00;text-align:center;color:#000; } #navigation-menu ol,#category-bottom ol,#blogroll ol { margin:4px;padding:0;background:#008000;list-style:none; } #navigation-menu ul,#category-bottom ul,#blogroll ul { margin:4px;padding:0;background:#222222;list-style:none; } #navigation-menu li,#category-bottom li,#blogroll li { margin:0;padding:7px 5px;background:#111111; }

Note :

Penulisan kode di atas saya singkat karena saya harus mencukupkan karakter teks handphone saya, jadi saya mohon maaf atas ketidaknyamanan ini. cara pada contoh di atas bisa kalian tulis satu per satu untuk selectornya.


Baca Juga = Cara Mengedit Css Bagian Pagination Links

Demikian yang dapat saya sampaikan tentang Cara Mengedit Css Bagian Bottom Content saya mohon maaf jika tutorial di atas sulit di pahami, jika kalian masih kebingungan dalam tutorial ini silahkan bertanya di kolom komentar.

Wassallamuallaikum Wr Wb..