[ Tutorial Blogging ] Modifikasi Judul Label Blog

Oke, kali ini Linna akan kembali dengan sesi tutorialnya hehe.. walaupun mungkin saja kebanyakan sudah bisa melakukannya, well.. setidaknya aku hanya membuat ini sebagai backup-an kalau kalau suatu saat aku membutuhkannya. Yah, itung itung daripada googling terus iya kan? Nah, cukup pembukaannya. Sekarang, aku akan coba menerangkan bagaimana cara untuk memodifikasi judul pada label agar tidak hanya judul label dengan settingan default blogger tetapi akan dirubah sesuai keinginan kita. Modifikasi judul label ini antaranya: MEMBERIKAN ICON DI SAMPING JUDUL PADA LABEL BLOG, MENGUBAH BACKGROUND JUDUL LABEL BLOG, MEMBERIKAN BORDER PADA JUDUL LABEL, dan MENGATUR UKURAN BACKGROUND PADA JUDUL LABEL BLOG. Disini ada dua cara yaitu menggunakan Edit HTML dan menggunakan CSS pada pengaturan Tingkat Lanjut di Perancangan template. 


Cara pertama [menggunakan Edit HTML]: 
1. Caranya adalah, buka bagian Template, kemudian klik Edit HTML seperti gambar di bawah ini 

2. Klik Lanjutkan, kemudian jangan lupa Centang kotak Expand Template Widget 

3. Cari kode ]]></b:skin>
4. Kemudian letakkan kode di bawah ini tepat DI ATAS kode tersebut 
.sidebar h2 {
color: #ffffff;
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjT_HAV0wpsgFyGXQr3XVtx48UR6e1i2-Xgqq58QeEK6NE4oC8Eh0_ANgCNurtDagLLuFJQwSG5WfvBsWoXMnXQ0HeIcOB7EoeaRE1k3iV4b42PnppsRmuV60xnhrj0z_6pQYp0KA4Dvsw/s1600/pencil006.png")no-repeat 4px;
background-color: #91BBF2;
font-size: 25px;
font-family: Agency FB;
font-weight: bold;
text-align:left;
margin: -.33em -.60em .70em -.33em;
padding: 1px 9px 8px 50px;
border:4px dotted #1189F2;
letter-spacing:0em;
text-transform:capitalize;
repeat-x top left;
}
 
Cara kedua [menggunakan template desaigner/ubahsesuaian/perancangan template]: 
Untuk cara kedua ini, menurutku lebih mudah karena kita hanya tinggal memasukkannya di bagian css-nya.
1. Caranya adalah buka Template, kemudian klik Ubahsesuaian seperti di bawah ini
 
2. Setelah itu akan muncul tampilan seperti berikut Pilih menu Tingkat Lanjut ==> Tambahkan CSS 
 
3. Setelah itu masukkan kode yang sama seperti kode di atas.. di dalam kotak yang telah disediakan..
4. Hasilnya adalah seperti berikut:


Penjelasan apabila ingin memodifikasinya:
1. color : untuk merubah-rubah warna font pada judul label blog. Jika bingung ingin mencari kode warna apa, bisa memilihnya disini
2. background:url : untuk memberikan icon pada di samping judul label. Yang perlu dilakukan adalah mengganti link https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjT_HAV0wpsgFyGXQr3XVtx48UR6e1i2-Xgqq58QeEK6NE4oC8Eh0_ANgCNurtDagLLuFJQwSG5WfvBsWoXMnXQ0HeIcOB7EoeaRE1k3iV4b42PnppsRmuV60xnhrj0z_6pQYp0KA4Dvsw/s1600/pencil006.png menjadi link gambar yang telah dipilih. Usahakan gambarnya adalah dengan format .gif atau .png agar tidak muncul background putih di belakang icon tersebut.
 3. backgroud-color: untuk mengganti warna background sesuai dengan warna yang diinginkan
4. font-size: untuk merubah ukuran font apakah ingin kecil atau besar. Jangan lupa menambahkan px di belakang ukurannya.
5. font-family: untuk merubah bentuk font yang diinginkan
6. font-weight: isikan 'bold' agar tulisan tebal, 'underline' agar tulisannya memiliki garis bawah, atau 'italic' agar tulisannya miring.
7.  border : 4px --> tebal border, dotted--> bentuk border, bisa diganti dengan solid untuk membuat border garis saja, #1189F2--> warna border
8. untuk mengubah ukuran ukuran kotak ataupun peletakan icon, cobalah ganti angka-angka pada margin dan padding  (jangan takut salah ^^) sesuai dengan keinginan..


nb: ini tutorial kedua yang aku buat.. hehe karena mungkin terlalu gampang, jadi yang udah master nggak perlu baca..

heechul: telat mbul!!
rin ah: ah iya!

Komentar

Posting Komentar

Syarat menambahkan komentar:

>> Jangan berkomentar dengan menggunakan Anynomous
>> Gunakan account google kamu atau jika tidak gunakan URL, yang penting ada nama kalian.. :)
>> Tidak menerima komentar berisi spam..
>> Apabila komentar tidak muncul, berarti komentar kalian belum di moderasi. Jadi tolong mengerti ya.. :)

terimakasih

-------------------------------------||-------------------------------------

Regulation to fill the comment box:

>> Don't use Anynomous
>> Use your google account or just your link/ URL. The main point is, always put your name here :)
>> Cannot receive any spam comment such as comment that it's not relevant with my topic
>> When your comment does not appear, it because I haven't approve that or I haven't read that. So just wait until I read that, please understand :)

Thank you