• Home
    Ke Halaman Depan
  • Goresan Kecil
    Nulis Tentang Apa aja..
  • Tips Dan Trik
    Berbagai Tips dan Trik Ada di Sini..
  • Galery
    Photo, Gambar dan Banner..
  • Kuliah
    Materi kuliah dan akademis klick di sini..
  • Dwnload
    Download berbagai file, klick di sini..
  • TV
    Mau nonton TV, klick di sini..
  • Daftar Isi
    Lihat Daftar Isi, klick di sini..

Kamis, April 02, 2009

Makeover "H5N3 - Flu Kodok"

Baru aja login.. tautau udah ada yang nagih janji.. gak tau tuh.. mau nagih janji ato promosi domain baru.. kwok..kwok...kwok.. <----" gaya tertawa baru kodok". Padahal PR yang kodok kasih blum dikerjain.. hayuu......

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..? :)makan
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


Sesudah


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... :)pusing2

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... :)berlalat

Mohon dukungan dan partisipasinya dalam Gerakan" Satu Juta Posting Untuk Indonesia"

3 komentar:

  1. :D

    thank youuu ... eh eh ... padahal bukan pengen tau backgroundnya pengen tau icon yang bisa tuing2 itu :p

    tapi tetep thank you ;)

    BalasHapus
  2. waduh? sayah mah kapok gonta ganti template or edit html mulu. *karena sayah emang ga ngerti* Bukannya napa2..ribedsnya itu loh.... ga lagi2 deh...

    BalasHapus
  3. Hehe...
    @Fenty: yang tuing2 nya ntar yah.. kodok cari inspirasi dulu...
    @Quinie: Ada yang gak pake ribet tuh mbak.. di atas...

    BalasHapus

Terima kasih Udah berkomentar di sini.. :)