Klo template ini hasil makeover dari template kalasik.. jadi lumayan ribet.. Berhubung kodok lagi baik, kali ini kodok ingin makeover template yg udah ada aja..nih kodok kasih tips makeover template ciptaan: Douglas Bowman..
Hasil makeoverkodok beri judul "H5N3 - Flu Kodok" karena paslagi ngulik templete ini hidung kodok lagi meler-meler... demi yang punya domain baru gak apalah..
oke kita mulai saja..
Pertama: Seperti biasa Ucapkan dulu bismillah dan berdoa <-- emang mau makan Dok..?
Kedua: Sedot template mu.. sebagai langkah berjaga-jaga.. jangan2 ketularan flu kodok..
Ketiga: Ubah template mu menjadi template kepunyaannya Douglas Bowman.. klo gak tau yang mana tempalte nya, silahkan lihat templatenya teman kita yang baru punya domen baru..
Keempat: Buka menu Edit HTML <---- Pasti udah tau dong caranya...?
Kelima: Sedot File2 berikut, kemudian Hosting di tempat kamu.. seperti Photoburket, pikasa, dll:
Body
Header
Main
Keenam : Setelah itu
cari kode berikut:
body {
margin: 0px 0px 0px 0px;
background:#fff url("http://www1.blogblog.com/dots/bg_dots.gif");
background-position: 50% 31px;
text-align:center;
font:x-small Verdana, Arial, Sans-serif;
color:$textcolor;
font-size/* */:/**/small;
font-size: /**/small;
}
Ganti Menjadi:
body {
margin: 0px 0px 0px 0px;
background:#fff url("#alamat linkBody");
background-position: 50% 31px;
text-align:center;
font:x-small Verdana, Arial, Sans-serif;
color:$textcolor;
font-size/* */:/**/small;
font-size: /**/small;
}
Cari:
#outer-wrapper {
background:url("http://www.blogblog.com/dots/bg_3dots.gif") no-repeat 250px 50px;
width:700px;
margin:0 auto;
text-align:$startSide;
font:$bodyfont;
}
Kemudian ganti menjadi:
#outer-wrapper {
background:url("#alamatlinkHeader") no-repeat 0 0;
width:810px;
margin:0 auto;
text-align:$startSide;
font:$bodyfont;
}
Cari:
#main-wrapper {
width:450px;
float:$endSide;
padding:100px 0 20px;
font-size:85%;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
Ganti menjadi:
#main-wrapper {
width:600px;
float:$endSide;
padding:220px 0;
font-size:85%;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
Cari:
#main {
background:url("http://www1.blogblog.com/dots/bg_dots2.gif") -100px -100px;
padding:20px 10px 15px;
}
Ganti menjadi:
#main {
background-image: url(#Alamat Link Main);
background-color: #f6f9f2;
background-position: left top;
background-repeat: no-repeat;
border-top:3px solid #f4f3eb;
border-left:2px solid #f4f3eb;
border-right:1px solid #f4f3eb;
border-bottom:2px solid #f4f3eb;
padding:35px 20px 20px 20px;
}
Cari:
#sidebar {
background:url("http://www1.blogblog.com/dots/bg_dots2.gif") 150px -50px;
padding:40px 10px 15px;
width:200px;
width/* */:/**/180px;
width: /**/180px;
}
Ganti Menjadi:
#sidebar {
background-color: #ffffff;
padding:5px 2px 2px 2px;
width:200px;
width/* */:/**/200px;
width: /**/200px;
}
Ketujuh:
Save editan tersebut, kemudian lihat Blog..
dengan hanya merubah CSSnya saksikan apa yang terjadi.. mungkin klo berhasil akan seperti ini: H5N3 - Flu Kodok
Sebelum
Klo ada masalah isi komen ya..kelemahan makeover ini:
1. Page elemen atau tata letaknya menjadi tidak beraturan.. tapi tidak mempengaruhi tampilannya kok..
2. Headernya tidak berada di atas.. tetapi sekolom dengan gatget... Kepada para suhu dimohon pencerahannya...
Makeover berikutnya:
Cara pasang icon yang ada balon dan bisa tuing-tung kayak punya kodok di atas...
Cara memasang smile icon..
ditunggu aja yah... tapi gak janji...
Catatan:
Heder, main, dan Body nya bisa kamu ganti sesuai dengan keinginan sendiri, asalkan ukuran pixelsnya sama. klo seandainya beda.. kamu tinggal atur ukuran CSSnya aja..
Bagi yang udah masang, jangan lupa pasang link Kodok ya...! Maksa...
Mohon dukungan dan partisipasinya dalam Gerakan" Satu Juta Posting Untuk Indonesia"
:D
BalasHapusthank youuu ... eh eh ... padahal bukan pengen tau backgroundnya pengen tau icon yang bisa tuing2 itu :p
tapi tetep thank you ;)
waduh? sayah mah kapok gonta ganti template or edit html mulu. *karena sayah emang ga ngerti* Bukannya napa2..ribedsnya itu loh.... ga lagi2 deh...
BalasHapusHehe...
BalasHapus@Fenty: yang tuing2 nya ntar yah.. kodok cari inspirasi dulu...
@Quinie: Ada yang gak pake ribet tuh mbak.. di atas...