Choose Your Language
English French German Spain Italian Dutch Russian Portuguese Japanese Korean Arabic Chinese Simplified
Language

Perlu Disini

Untuk mempercepat download software silahkan klik DISINI.
Agar dapat meng-extract kompressan software klik DISINI.

Loading

Memperluas Halaman Blog

Kawan blogger yang pernah berkunjung ke blog saya pasti tahu keadaan blog saya yang dulu. Dulu blog saya ini masih sangat biasa, tetapi dengan mulai aktifnya didunia blogging membuat saya terus dan terus berkembang maju.



Kali ini saya akan memberikan trick memperluas / memperlebar tampilan halaman blog anda. Akan saya berikan empat langkah mulai dari latar belakang template, Header, NavBar Menu dan Sheet halaman blog anda.

Inilah hasil perbedaannya
   Gambar sebelum diperuas

   Gambar sesudah diperluas

Terlihat perbedaannya kan. Langsung saja ya kita ke topik. Berikut langkah-langkahnya :
Peringatan : Sebelum mengedit template Anda, simpanlah sebuah salinan dari template tersebut dengan Download Template Lengkap. agar ketika terjadi kesalahan bisa mengembalikan keadaan semula.

Ikuti langkah-demi langkah.

1. Login ke account blog anda.
2. Pilih Tata Letak kemudian Edit HTML. "tidak usah mencentang expand the widget"
3. Cari kode seperti ini atau sejenisnya saja. Agar mudah tekan F3 pada keyboard anda.

#wrap {

    width: 1130px;
    margin: 0px auto 0px;
    padding: 0;
    position: relative;
}                                                                                                                       

   Ket : Ubah angka warna merah diatas sesuai dengan keinginan anda.
            ANGKA HARUS SAMA ANTARA:
                  #wrap {
                  #header-wrapper{
                  #outer-wrapper {
            Kode diatas untuk memperlebar latar belakang sebuah template.

4. Kemudian cari kode seperti ini atau sejenisnya.

#header-wrapper{
    width: 1130px;
    height: 400px;
    font-size: 11px;
    margin: 0 auto 0;
    padding: 0;
    overflow: hidden;
        background:url(http://i270.photobucket.com/albums/jj104/lgtoews/2988370271_04e7911f3f_o.jpg) repeat left center;
}

   Ket: Ubah angka bewarna merah sesuai dengan keinginan anda.
           ANGKA HARUS SAMA ANTARA
                 #wrap {
                 #header-wrapper{
                 #outer-wrapper { 
            Kode diatas untuk mengatur lebar Header blog anda.

5. Cari kode seperti ini atau sejenisnya.

#NavbarMenu {
    background:#000000;
    width: 1090px;
    height: 36px;
    font-size: 13px;
    color: #FFF;
    font-weight: bold;
    margin: 0 auto 0;
    padding: 0 20px;
}                                                                                                                       

Ket: Ubah angka bewarna merah sesuai keinginan anda. Bagi beberapa blog, untuk angka NavbarMenu     ini tidak harus sama dengan #wrap #header-wrapper #outer-wrapper. Biasanya ukurannya  lebih kecil dengan selisih angka 40. Sesuaikan sendiri saja. Pasti kalian bisa :) 
       Kode diatas untuk mengatur lebar NavBar menu blog anda.

6. Kemudian  langkah selanjutnya cari kode berikut ini.

#outer-wrapper {
        background:#fff;
    width: 1130px;
    margin:0px auto 0;
    padding-top: 20px;
    line-height: 18px;
}                                                                                                                       

   Ket: Ubah angka bewarna merah sesuai dengan keinginan anda.
          ANGKA HARUS SAMA ANTARA
                 #wrap {
                 #header-wrapper{
                 #outer-wrapper {
       Kode diatas untuk memperlebar sheet pada halaman blog anda.

7. Simpan Template.

Selesai sudah.Semoga bermanfaat. Jika ada yang kurang paham silahkan Tanya atau komentar dibawah. Oke! Untuk postingan selanjutnya saya akan memberikan trick menambahan widget atau Sidebar dua kolom. Tunggu saja postingan selanjutnya.  


Artikel Terkait:

10 komentar:

M.Asrori Ardiansyah mengatakan...

mas, gimn cara baca artikel diblog ini kl dibuat transparan bgini?? apa apa nyiksa mata?

DEMPO AWANG PUTRA ELANG ANTARNUSA mengatakan...

Mav, mungkin servernya lg down. Sebenarnya blog ini enggak transparan...

Paksi Dirgantara mengatakan...

@m.asrori: ya tul tu, mngkin server U lgi down, coba di ulang di lain waktu klo server U saat kondisi bagus.

Anonim mengatakan...

kang di kode HTML ane g da kode #header-wrapper{
da jg #header-inner{
gmana y mas...??? sori newbie

Anonim mengatakan...

pertanyaan saya juga sama seperti yang diatas,..
di template saya tidak didapatkan kode2 yang disebutkan,..terima kasih,...
mohon pencerahaannya

Siburian Blogger mengatakan...

iya mas, di blog saya juga ga ada tuh!

blogadexme mengatakan...

Makasih ya...atas tutorial yang di kasih..bermanfaat bnget, dah bosan nee tmpilan blog yng kecil...Thnks y..

ahmad faiz mengatakan...

aku dah lama pengen memperluas blogku, ternyata gitu caranya

info guru mengatakan...

begitu toh caranya,
mau perluas dulu halaman agar nggak sempit.hehe

thanks infonya

Adul mengatakan...

thnk u so much..!

Posting Komentar

 
KLIK DI SINI UNTUK MEMBUATTEXT ON YOUR DEKSTOP| BARU. . . MOZILLA FIREFOX 4.0 ALPHA 1 PORTABLE FULL. KLIK DISINI| KUNJUNGI BERBAGAI SOFTWARE GRATISAN FULL ALIAS NO TRIAL | TERIMA KASIH TELAH BERKUNJUNG