terbaru

Cara Mengedit Tampilan Judul Widget Sidebar Blog

: Rabu, Mei 17, 2017

Cara Mengedit Tampilan Judul Widget pada Sidebar Blog



Setiap anda menambahkan sebuah widget dan menulis judulnya saat form titlenya terbuka, maka secara otomatis, judul widget tersebut, juga akan muncul pada sidebar blog anda. Contohnya seperti ini:


Cara Mengedit Tampilan Judul Widget pada Sidebar Blog

Pada gambar diatas tampak ada 3 judul widget, yaitu widget Arsip Blog, Mengenai Saya dan Total Tayangan Laman. Tapi tampilan ketiganya masih standar. Hanya berupa teks biasa tanpa background apa-apa. Nah sekarang bagaimana cara menyulapnya agar tampak lebih menarik?

Jawabannya adalah dengan melakukan pengaturan pada kode CSS template blog anda. Caranya? Rumus sederhananya adalah dengan mencari selector:


.sidebar h3
.sidebar h2


.sidebar h3: untuk mengatur tampilan judul widget yang terdapat pada sidebar
.sidebar h2: untuk mengatur tampilan judul widget yang terdapat pada kolom dibawah sidebar.

Bagannya bisa dilihat seperti ini:


Cara Mengedit Tampilan Judul Widget pada Sidebar Blog


Dengan memahami bagan diatas, anda sudah bisa menentukan sikap, kode CSS yang akan anda gunakan untuk mengatur tampilan masing-masing judul widget diatas sesuai posisinya masing-masing, mulai dari background, jenis font, besar huruf, dan seterusnya. Contohnya seperti ini:

.sidebar h2{
background: #999999;
color: #FFFFFF;
font-size: 17px;
padding-left: 20px;
}
.sidebar h3{
background: #777777;
color: #FFFFFF;
font-size: 18px;
padding-left: 20px;
}


Anda bisa atur sendiri semua pengaturan dibawah selector .sidebar diatas sesuai keinginan anda.

Lalu bagaimana jika kode selector seperti diatas tidak ada pada blog anda? Gampang. Anda tinggal tambahkan kode tersebut. Persis seperti kode diatas, juga tidak masalah. Nanti detail pengarutan dibawahnya, bisa anda gonta-ganti sendiri sambil uji coba. Yang penting, letak kode tersebut, sudah cocok pada tempatnya, yaitu diantara kode:



<style type='text/css'> dengan </style>

A T A U

<b:skin><![CDATA dengan </b:skin>


Agar cepat mencari dimana letak kode tersebut, gunakan panduan Cara Cepat Mencari Kode HTML pada Template Blog


Contoh penyisipannya adalah seperti ini:


<style type='text/css'>
.sidebar h2{
background: #999999;
color: #FFFFFF;
font-size: 17px;
padding-left: 20px;
}
.sidebar h3{
background: #777777;
color: #FFFFFF;
font-size: 18px;
padding-left: 20px;
}
</style>

Komentar yang tidak relevan, jorok, spamming dan promosi link akan dihapus

Copyrights @ blogernas ■ Desember 2015 - Erianto Anas | Powered by Blogger