Sabtu, 12 Februari 2011

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:


Diposting oleh Ichsan Saputra di 19.30
Label:

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)

Komentator Blog Ini

Memuat...