Jumat, 05 Oktober 2012

Cara Membuat Halaman Blog Full Screen

Apa yg Ingin lo lakukan bro jika melihat Halaman Blog yg sempit ? ? ? haha ya sebisa mungkin di perlebar donk haha, Nah untuk itu bro gua akan posting Tips Blogging tentang Cara Membuat Halaman Blog Full Screen, Bagi lo yg penasaran bro, silahkan simak uraian panjang berikut yg berfungsi menjelaskan oke bro :



1. Login Pada Blog lo bro >> klik Tata Letak >> Edit HTML >> Centang Expand Template 
     Widget ya bro, untuk Antisipasi kesalahan bro, lebih baik lo BACKUP dulu data lo bro ok.

2. Yang utama harus lo lakukan bro adalah dengan mengatur terlebih dahulu kode yg ingin lo 
     bikin full screen, ya kode yg gua sarankan disini adalah seperti berikut bro :

  • #outer-wrapper atau Sejenisnya ya bro
  • #sidebar-wrapper atau Sejenisnya ya bro
  • #main-wrapper atau Sejenisnya ya bro
  • #footer atau Sejenisnya ya bro


Untuk contoh Kode yg bisa Gua berikan bro

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {width: 1330px;margin: 0 auto;padding: 0px 0px;text-align: left; font: $bodyfont;background:#fff;}

#sidebar-wrapper {width: 190px;float: right;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 */}

#main-wrapper {width: 1100px;float: left;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 */}

Ket :
  1. Aturlah bro Width dari kode #outer-wrapper yang lo suka bro yg akan ber-efek pada KESELURUHAN HALAMAN BLOG lo bro, jgn salah ya bro.
  2. Aturlah bro Width dari kode #sidebar-wrapper yang lo suka bro yg akan ber-efek pada SIDEBAR BLOG lo bro, jgn salah ya bro.
  3. Aturlah bro Width dari kode #main-wrapper yang lo suka bro yg akan ber-efek pada HALAMAN POSTING BLOG lo bro, jgn salah ya bro.



dan untuk contoh Kode Footer-nya bro



/* Footer
----------------------------------------------- */
#footer {
   width: 1200px;
   clear:both;
   margin: 0 auto;
   padding-top:15px;
   line-height: 1.6em;
   text-transform:uppercase;
   letter-spacing:.1em;
   text-align: center;
}

Ket :
  1. Aturlah bro Width dari kode #footer yang lo suka bro yg akan ber-efek pada     FOOTER BLOG  lo bro atau bagian Bawah Gadget Blog lo bro (jika ada ya bro),
  2. width: 1200px; adalah Kode Hasil gabungan dari :                                                     Width #sidebar-wrapper  dan Width #main-wrapper , jgn salah ya bro.






3. Carilah bro kode </head> jika sudah dapat bro, letakkan Kode berikut diAtas Kode
     </head> ya bro:

Peraturan Pertama Bro, Kode diBawah Bro bisa lo pakai jika inginnya halaman full screen di HomePage oke bro :


<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style>
#sidebar-wrapper , #footer{
display: none !important;
}
#main-wrapper, .post {
width: 640px;
}
</style>
</b:if>


Peraturan Kedua Bro, Kode diBawah Bro bisa lo pakai jika inginnya halaman full screen di Postingan oke bro :


<b:if cond='data:blog.pageType == "item"'>
<style>
#sidebar-wrapper , #footer{
display: none !important;
}
#main-wrapper, .post {
width: 1200px;
}
</style>
</b:if>


Keterangan Penyelesaian-nya bro :
  1. Gunakan Kode , #footer Jika di blog lo pada bro ada Footer, tp jika tidak ada bro, gak usah di pakai oke bro.
  2. width: 1200px; adalah Kode Hasil gabungan dari :                                                     Width #sidebar-wrapper  dan Width #main-wrapper , jgn salah ya bro.

4. Dan yang Terakhir Tinggal lo Save Template deh bro . . . dan Lihat Hasilnya . . .



NB : Mohon Maaf Sebelumnya bro jika Tips Blogging gua satu ini terlalu panjang, gua hanya 
        ingin mempejelas agar lebih membuat para Pemula atau mungkin lo pada Blogger 
        Ahli bro . . .


Selamat Mencoba ya Bro ! ! !


Tidak ada komentar:

Posting Komentar