Mengatur Tampilan Judul Sidebar dan Tampilan Judul Artikel dengan CSS

Tulisan kali ini akan membahas tentang Cara Mengatur Judul Menu di Sidebar dan Judul Artikel di halaman postingan blogspot hanya dengan CSS, yang ilmunya aku pelajari dari Blognya Kang Rohman, kolom-tutorial.blogspot.com.

Dalam dunia blogging, kode CSS tak akan pernah luput dari sesuatu hal yang asyik untuk dipelajari dan dibahas. CSS merupakan singkatan dari Cascading Style Sheets, bahasa yang digunakan untuk mendefinisikan bagaimana elemen-elemen HTML ditampilkan di halaman browser. Dengan CSS, kita bisa mengatur tampilan blog seperti warna, font, tata letak, dan banyak hal yang dapat dilakukan hanya dengan perintah dari CSS, sehingga membuat blog kita terlihat lebih menarik dan mudah digunakan. CSS ini memisahkan presentasi atau tampilan dari struktur konten HTML.

Kan gak ayik jika kita terus-terusan mengganti template blog hanya diakibatkan karena ketidakcocokkan tampilan judul Siidebar dan Judul Postingan, misalnya warna yang tidak sesuai atau ukuran font-nya yang terlalu kecil atau terlalu besar. Solusinya, kita dapat berkreasi sendiri untuk menciptakan judul sidebar atau judul postingan artikel yang sesuai dengan selera kita.

Lalu caranya bagaimana? Berikut tips dan langkah-langkahnya.

1. Mengatur Tampilan Judul Sidebar

Untuk mengatur tampilan judul di sidebar tidaklah sulit, anda tinggal mengatur kode CSS untuk title sidebar, lalu dimanakah letak kode tersebut? jika merujuk pada template asli blogger, maka biasanya di tulis dengan kode sebagai berikut:

.sidebar h2 {
………………
………………
………………
}

Titik-titik pada bentuk tampilan CSS diatas adalah isi dari atribut tag yang mengatur judul sidebar, yang mengendalikan atau mendefinisikan tampilan judul sebuah Menu di sidebar. Silahkan tambahkan kode atau mungkin mengurangi kode yang ada sesuai kebutuhan.

Termasuk jika Anda ingin mengatur besarnya huruf judul sidebar, maka anda tinggal menambahkan atribut tag font-size sebagai berikut:

.sidebar h2 {
………………
………………
………………
font-size: 110%;
}

Nilai 110% merupakan nilai custom yang bisa diganti dengan nilai lainnya sesuai dengan selera yang Anda inginkan, misal: 120%, 200%, 250%, atau angka yang lainnya. Satuan persen ( % ) bisa juga bisa Anda ganti dengan satuan pixel (px), misal : 12px, 15px, 20px, atau angka yang lainnya.

Anda dapat menambahkan atribut kode lainnya, seperti:

• font-weight: Untuk menentukan seberapa tebal atau tipis tampilan font, dengan nilai yang ditentukan seperti bold, normal, bolder dan lighter atau berupa nilai numerik, dari 100 sampai 900, dengan batas angka 400 ditampilan normal batas angka 700 ditampilan tebal;
• text-transform: Untuk mengubah tampilan huruf besar dan kecil pada teks, dengan pilihan:
  
  1. none: Tidak ada perubahan pada teks dan ini adalah nilai default;
  2. capitalize: Mengubah huruf pertama setiap kata menjadi huruf kapital;
  3. uppercase: Mengubah semua huruf menjadi huruf kapital;
  4. lowercase: Mengubah semua huruf menjadi huruf kecil.
• text-align: Untuk mengatur perataan horizontal teks dengan nilai yang bisa digunakan seperti left, right, center, dan justify, yang masing-masing memiliki fungsi berbeda dalam mengatur posisi teks;
• border: Utuk mengatur tampilan bergaris di area text. Contohnya: border: 1px solid #000;, berarti bahwa akan ada garis mengelilingi tulisan judul sidebar sebesar 1 pixel dengan warna hitam;
• background: Untuk mengatur tampilan latar belakang dari text judul, termasuk penggunaan warna dan gambar. Misalnya: background: #fff;, berarti akan tampil warna latar putih di area text sidebar.
• padding: Untuk mengatur jarak antara text dengan batas area text sidebar. Nilai padding disesuaikan dengan kebutuhan dengan satuan pixel (px), misal : 5px, 7px, dll.

2. Mengatur Tampilan Judul Artikel

Jika mengacu pada template asli blogger, maka judul postingan akan di atur pada kode css seperti ini:

.post h3 {
………………
………………
………………
}

atau

.post h3 a, .post h3 a:visited, .post h3 strong {
………………
………………
………………
}

 

.post h3 strong, .post h3 a:hover {
………………
………………
………………
}

Anda tinggal menambahkan atau mengurangi atribut kode yang ada diposisi titik-titik. Caranya seperti pada cara mengatur Judul Menu Sidebar pada nomor 1. Anda tinggal berkreasi saja dengan CSS dan mengatur tampilannya sesuai dengan kebutuhan tampilan template blog Anda.

Semoga sumbangsih lewat tulisan kecil ini dapat membantu blogger Nusantara dimanapun berada, hahaha... Apalagi saat ini adalah moment menyambut Hari Sumpah Pemuda, dimana para Pemuda Pemudi indonesia saat ini dipertemukan dan disatukan melalui dunia perblogeran.

Semoga bermanfaat ya? Salam Blogger