//under the same sky

Tuesday, August 23, 2011 at 9:04 AM with ≡

Cara membuat template Denim (seperti Lulu)

Assalamu'alaikum...

sekarang Lulu bakalan ngebuatin tutorial cara membuat template BLOG seperti Lulu :D penasaran'kan?? langsung saja ke pembicaraan!!

Dashboard >> Design >> Edit Html

Click "Download Full Tempelate" untuk berjaga jaga kalau tidak menjadi.

Kalau udah scroll page HTML mu kebawah, Kamu klik seperti gambar ini :D

Tu kan, click tau.
Kalau sudah, keluar 1 page lagi, kamu click menurut gambar ini:

Udah klik itu kamu lihat Blog kamu (preview)nanti nampak berantakan kan? Namanya juga baru ganti tempelate. So, akan nampak seperti ini:

Lihat yang berkotak merah di header itu? Kita mau transparentkan benda biru itu. Caranya:
Pergi ke Dashboard >>Design >>Edit HTML cari kode ni:

/* Variable definitions
====================

Dah ketemu? dibawah kode /* Variable definitions tu ada kode ini:

<Variable name="headerBgColor" description="Page Header Background Color"
type="color" default="#336699" value="#336699">
<Variable name="headerTextColor" description="Page Header Text Color"
type="color" default="#ffffff" value="#ffffff">
<Variable name="headerCornersColor" description="Page Header Corners Color"
type="color" default="#528bc5" value="#528bc5">

DELETE semuanya dan gantikan dengan ini:

<Variable name="headerBgColor" description="Page Header Background Color"
type="color" default="transparent" value="transparent">
<Variable name="headerTextColor" description="Page Header Text Color"
type="color" default="#ffffff" value="#ffffff">
<Variable name="headerCornersColor" description="Page Header Corners Color"
type="color" default="transparent" value="transparent">

Selesai? SAVE Tempelate. Nanti benda biru itu lenyap seperti ini:

Sebenarnya ada cara yang lain, yaitu pergi ke halaman Tempelate Designer lalu jadikan transparent semua bagian headernya, tapi mending pakai cara ini, nggak ribet tinggal gonta ganti kode aja.

Sekarang, time to berikan Background. Jangan pergi ke Tempelate Designer karena nggak bisa lewat situ. Ini kan tempelate Classic ! Jadi, ikot cara ini:

Dashboard >>Design >>Edit HTML

cari kode body { paste kode ini dibawahnya:

background-image:url(URL BACKGROUND);
margin: 0;
padding: 0px;
font: x-small Sans Serif, Arial;
text-align: center;
color: $textColor;
font-size/* */:/**/small;
font-size: /**/small;
}

Yang URL BACKGROUND itu diganti pakai URL Bg mu sendiri, karena Lettha baik hati, silakan ambil salah satu Background ini:

URL: http://i21.photobucket.com/albums/b260/-Hamstertje13/cute_background_03.gif

URL: http://i838.photobucket.com/albums/zz306/sweetlilcraft/Background/wwww327.gif

URL: http://i838.photobucket.com/albums/zz306/sweetlilcraft/Background/w22.gif

URL: http://i269.photobucket.com/albums/jj41/xXxFOB_FanxXx/background-3.jpg

URL: http://i838.photobucket.com/albums/zz306/sweetlilcraft/Background/wwww155.gif

URL: http://i153.photobucket.com/albums/s213/manga476/Cute%20Background/thcute-4.jpg

URL: http://i153.photobucket.com/albums/s213/manga476/Cute%20Background/cute-background-1-038.gif

Dah ambil? hahaha jadi Copycat dulu. Ambil 1 aja :PKalau sudah kamu ganti background nya, dia akan seperti ini:

Bagus kan? Sekarang berbackground.

Nah, ini time untuk RAPATKAN HEADER DENGAN BODY BLOG. So, kamu butuh header yang oke, jangan header yang biasa, nanti jelek. Kamu bisa liat cara membuat Rounded Corner Header DISINI .
Cara membuat headernya sebentar kan? paling cuma beberapa jam menit aja kok :D
Kalau sudah, kamu upload headermu ke blog kamu di Page Element, click edit bagian header, kamu upload headermu tadi.
Kalau sudah, nanti kamu pasti kecewa banget, kamu pikir tempelate kamu udah rusak, blog kamu jadi jelek karena headernya berpisah kayak gini:

*aku ambil dulu dari kak Lettha^^*

So, biar menyambung dengan body blog, kamu ke:

Dashboard >>Design >>Edit HTML

cari kode #header-wrapper { dibawah kode #header-wrapper { tu ada kode kode kan?
Gantikan kode dibawah kode #header-wrapper { itu dengan kode ini:

margin:0;
padding: 0;
background-color:transparent;
text-align: $startSide;
}

Belummmm !!!!! Cari lagi kode ini:

#header {

Lihat kode kode dibawah kode #header { tersebut ! Gantikan semua kode itu lalu gantikan dengan kode ini:

width: 761px;
margin: 0 auto;
background-color: transparent;
border: 1px solid transparent;
color: transparent;
padding: 0;
font: normal normal 210% Verdana, Arial, Sans-serif;;}

Dah siap? SAVE TEMPELATE ! Hebadd, nanti tempelate kamu jadi seperti Tempelate Lettha :D
Dia akan seperti ini:

Headernya udah bersambung dengan blognya

Selesai deh!

Full Credit to Chocolettha

Labels: Tutorial