Memperlebar Halaman Blogspot

Tentunya kita sering terpaku dengan template yang di sediakan oleh bloger bloger manapun, namun apa template tample tersebut bisa membuat kita pusa dengan fasilitas yang di berikan, kali ini saya ingin sedikit memodifikasi halaman blogger menjadi lebih lebar…jika anda pembaca tertarik, silahkan ikuti langkah langkah di bawah ini
  1. cari kode #header-wrap dan tambahkan kode ini {margin:0px auto; height:70px; width:1100px} fungsi diatas adalah merubah ukuran header menjadi lebar 1100 dan tinggi header 70 px.
  2. lalu perlebar content blog anda suapaya serasi. cari kode #container dan tambahkan kode ini {width:1100px; background: #3A4954; margin:0 auto 20px; padding-bottom:5px; border:1px solid #485865}    keterangan.width untuk memperlebar isi content sesuaikan dengan kebutuhan anda. background untuk latar warna belakang container, margin dan padding adalah untuk mengatur jarak header, contain dan footer
  3. perlebar juga footer sesuai kebutuhan anda. 
  4. pada intinya anda dituntut untuk bermain logika saat ingin memperlebar blog anda.
  5. jadi ketika anda ingin memperlebar blog anda, anda juga harus merubah element element yang berada di blog anda, mulai dari header, contain, footer bahkan element element nya jika masih kurang puas dengan tuturial di atas ada cara lain yang di berikan dari blogger hebat seperti di bawah ini
  6. sangat disarankan menggunakan google chrome saat mengedit lebar halaman blog anda, kenapa? karena di google chrome anda dapat melihat element dari blog dengan cara pilih element mana yang ingin kita inspeksi setelah itu klick kanan dan pilin inspection element.



DELAPAN LANGKAH MEMPERLEBAR HALAMAN BLOG


Sekarang saatnya untuk merubah lebar blog, dengan delapan langkah sebagai berikut.




Pertama, ubah width pada kode halaman blog, misalnya kita tentukan dengan lebar 900 pixel, seperti di bawah ini.


#outer-wrapper {
width: 900px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}


Kedua, agar jarak antara halaman posting dan side bar tidak terlalu jauh yang dapat menyebabkan tampilan blog kurang rapi/serasi, maka ubah juga width pada kode halaman posting, misalkan 550 pixel, seperti di bawah ini.


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


Ketiga, agar side bar kelihatan serasi dengan lebar halaman posting yang telah disesuakan tersebut maka Anda dapat merubahnya dengan lebar maksimal 350 pixel, yaitu 900 pixel (lebar halaman blog) dikurangi 550 pixel (lebar halaman posting). Namun agar jarak antara halaman posting dan side bar tidak berdempetan, Anda dapat memberi jarak antara 30 pixel sampai dengan 50 pixel sesuai selera masing-masing. Misalkan kita tentukan jaraknya 40 pixel, maka lebar side bar nya menjadi 310 pixel {900 – (550 + 40)} , seperti di bawah ini.


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


Keempat, agar tidak timpang, Anda dapat merubah lebar header blog menjadi 900 pixel, seperti di bawah ini.


#header-wrapper {
width:900px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}


Kelima, begitu juga dengan footer agar diperoleh lebar footer yang serasi dengan halaman blog, maka Anda dapat merubahnya menjadi 900 pixel, seperti di bawah ini.


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


Keenam, sebelum menyimpannya, alangkah baiknya Anda melihat tampilan previewnya terlebih dahulu. 




Ketujuh, jika sudah yakin, simpan template.


Kedelapan, selesai.




Yang ingin mencoba, selamat mencoba ya, semoga sukses!!




Sumber : www.tips-trik-blog.blogspot.com

2 thoughts on “Memperlebar Halaman Blogspot

  1. Risty says:

    Makasih ya untuk tutorialnya, saya memang sedang menyusun css template untuk blog saya yang lain dan kebetulan juga sedang cari tutorial untuk ngelebarin.

  2. mita says:

    Slm sjahtera..

    mau nanya sob, seusai ganti template blog saya bermasalah pd sidebar widget. widget yg mestinya ada di sebelah kanan semua berpindah kebawah posting. uda nyoba beberapa cara penyelesaian tp msh blm berhsl. beberapa tips yg saya dpt dr google jg blm berhsil saya terapkan di blog saya. mohon bantuannya. tlg krm ke email saya. trims.. btw, saya pk blogger.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s