McJ Tutorialz ★

McJellyz Tutorialz.

★ How To : Use & edit Denim Classic Blogger Template - part 2

Hi korang ! Lama kan korang tunggu part 2 denim template ni? Hihi. Sorry tau. Saya cuma tunggu masa yang sesuai je. Sekarang saya dah edit blog, baru semangat nak buat tutorial ni. Kalau tak baca lagi part 1, ni link dia >CLICK< Hehe. Okay let's get started.

Tukar Warna Link.

Kan warna link blog korang warna biru kan? Camni nak tukarkan :

First, pergi Dashboard > Design > Edit HTML.

Ctrl + F serentak, cari code ni :

<Variable name="linkColor" description="Link Color"

Kat bawah code tadi ada code ni :

type="color" default="#336699" value="#336699">

Yang warna merah tu is code warna. Tukarkan code tu kalau nak warna lain. Boleh rujuk di sini.

Lepastu preview , then Save :)

Buat Page Footer.

First, bukak GIMP 2.6 > File > New > Buat width ngn height 760x150 > Bukak Advanced Options > Nanti ada nampak Fill With : RGB Colour. Tukarkan RGB Colour ke Transparency > Click OK.

Nanti nampak macam ni :

Okay , kat kotak tools tu , pilih button kotak then bawah tu pilih rounded corners. Bagi radius dia 20-40. Macam ni :

Okay, kalau korang ingat tutorial buat header kat part 1, mmg senang lah ni. korang drag mouse korang kat atas bakal footer korang. Kalau kat header kan buat kat bawah, ni buat kat atas dia. Kalau terkeluar takpe. Nanti jadi mcm ni :

Pastu, guna Brush Tool, pilih warna putih pastu colour kat situ. Dia takkan ganggu bahagian luar sebab kita dah pilih bahagian untuk diwarnakan. So colourkan je cacai barai kay :D

Okay. Dah siap base dia. Save sebagai .PNG file tau. contohnya :

footeruntukblog.PNG

Bila tekan save, nanti keluar kotak ni :

Ikut je gambar atas ni :D

Pastu bukak kat Photoscape. Then edit macam biasa. Ingat, disebabkan dia .PNG bila edit dia tak ganggu transparency footer tu. Cuma nampak putih je. dah siap edit. Save sebagai .PNG file jugak !

Then upload ke photobucket. Amik code html dia, pastu pergi Design.

Kalau taktau camne nak buat guna tutorial INI.

Pastu Save. Nanti nampak dia berjarak macam ini :

ni blog tester baru btw :p

Nak rapatkan, pergi Design > Edit HTML.

Ctrl+F serentak, cari code ni :

#footer .widget {

Kat bawah #footer .widget { tu ada code ni :

margin:.5em;
padding-top: 20px;

Yang saya warnakan merah tu, tukarkan jadi kosong. Nanti jadi macam ni :

margin:.0em;
padding-top: 0px;

Preview, pastu Save. InsyaAllah akan jadi macam ni :

Ni nampak buruk sebab saya buat blog tester baru. Kalau guna satu per satu dari part 1 ni nanti lawa la :P

Pasang Link Hover.

Ramai jugak tanya saya, "Kak, nape takleh buat hover kat denim template? saya tak jumpe code bla bla ". Ini sebab denim template tak dilengkapi dengan code tu -.- So kita kena buat penambahan lah.

First, pergi Dashboard > Design > Edit HTML.

Ctrl+F serentak, cari code ni.

]]></b:skin>

Dah jumpa ? Letak code ni pulak sebelum code ]]></b:skin> tadi :

a:hover {
color:#000000; background:url(URL GMBR);
background-repeat:repeat;
text-decoration:none
}

URL GMBR tu gantikan dengan URL gambar yang korang nak lah :D Boleh cari di sini.

Pastu save ! :)

Saya dah penat dah hihi. Nak part 3? Comment lah apa yang korang nak okay :)

And sorry tak buat twitter status tu. Code yang saya simpan dah hilang. Kena buat balik -__-

Adios ~

- Tutorial List
- Personal Blog

p/s ; This blog is for tutorials only.
p/s(ii) ; I'm more active on my personal blog.