Desember 04, 2011

Merubah Ukuran Halaman Sidebar, Post Body Dan Footer Blog

Situseo Blog : Merubah ukuran halaman sidebar, post body dan footer blog, dari setiap template yang ada memiliki ukuran ruang yang berbeda, baik itu halaman blog, header, post body, sidebar, dan footer karena setiap template yang dibuat oleh para designer mempunyai style yang berbeda.

Bila kita tidak merasa cocok dengan ukuran ruang template yang kita pakai, kita bisa merubahnya dengan ukuran yang kita inginkan, terutama bagi pengguna blogger-blogspot, sebagian besar template default yang disediakan blogger memiliki ruang halaman yang tidak penuh, masih banyak ruang yang tersisa yang bisa kita maksimalkan supaya lebih sesuai dengan keinginan.

elemen header sidebar post body dan footer

Ruang-ruang yang tersisa bisa kita manfaatkan untuk memaksimalkan halaman, header, post body, sidebar maupun bagian footer. Untuk merubah ukuran bagian-bagian tersebut, pertama kalian masuk pada menu Design atau Rancangan - edit HTML (sebelum melakukan perubahan template, sebaiknya melakukan back up template terlebih dahulu dengan mendownload Full template) dan temukan kode CSS dibawah ini :

#outer-wrapper {
width: 660px;
-----------------
#main-wrapper {
width: 410px;
-----------------
#sidebar-wrapper {
width: 220px;
-----------------
#footer-wrapper {
width: 660px;

Keterangan kode
#outer-wrapper : kode CSS untuk lebar halaman blog
#main-wrapper : kode CSS untuk lebar posting blog
#sidebar-wrapper : kode CSS untuk lebar sidebar blog
#footer-wrapper : kode CSS untuk lebar footer blog

Untuk melakukan perubahan ukuran perhatikan kode CSS yang diberi warna merah, dari kode CSS diatas yang memiliki ukuran lebar halaman = 660px, lebar post body = 410 dan bagian sidebar = 220, bila kita melakukan perubahan pada lebar halaman menjadi lebih lebar dari 660px, sebagai contoh menjadi 800px, elemen yang lain seperti post body, sidebar dan footer pun harus mengalami perubahan, bila tidak dirubah jarak post body, sidebar akan terlihat terlalu renggang dan elemen footer menjadi tidak sesuai. Intinya bila kita merubah salah satu elemen maka elemen lain harus mengalami perubahan, bila tidak hasilnya akan timpang. Saya rasa tidak memerlukan contoh yang lebih detil untuk bisa memahaminya, yang penting kita sudah tahu posisi tiap elemen tersebut.

Tiap template kode CSS nya berbeda penamaanya terutama untuk template custom yang bukan template bawaan dari blogger, tapi secara garis besar penamaan kode CSS nya tidak terlalu jauh dari nama-nama tersebut diatas. Bila sudah tahu cara merubah elemen blog, sekarang cobalah untuk Merubah Lebar Kotak Komentar, untuk mengetahui caranya klik link tersebut.

Semoga bermanfaat,

21 Diskusi untuk Merubah Ukuran Halaman Sidebar, Post Body Dan Footer Blog

4 Januari 2012 pukul 11.25  

kalo untuk mengubah header nya gimana mas

5 Januari 2012 pukul 15.08  

@ezonk Aieza: untuk mengubah bagian header cari kode
#header {
width:...px;
hight:...px;
}
isi aja yang ... dengan angka yang diinginkan, kalau tidak ada hight nya, cukup width nya saja yang di rubah

#header-wrapper { merupakan keseluruhan lebar bagian header, untuk merubah bagian header jangan melebihi ukuran #header-wrapper {

11 April 2012 pukul 20.25  

mas, saya pingin footer di template saya tuh jadi penuh.

gimana ya caranya?

12 April 2012 pukul 00.06  

@anggabp maksudnya penuh gimana? kurang jelas pertanyaanya

17 April 2012 pukul 08.35  

keren blognya,,

klo caranya bikin menu horizontal kya blog ini gimn?

24 April 2012 pukul 14.23  

Gan,, stelah aku utak-atik templete blogku postinganku jadi berantakan, Postingannya jadi ganda dlm 1 Entri., Minta bantuan gan, please ??, sbelumnya tdk aku back up template saya jd kesulitan mengembalikanny... Ni blogku : http://walfchild.blogspot.com

11 Agustus 2012 pukul 05.40  

Infonya bagus. Salam kenal, saya tunggu kunjungan baliknya oke . . .

21 September 2012 pukul 16.48  

Terima kasih gan, sangat bermanfaat untuk saya, bangun terus blognya gan.

6 Januari 2013 pukul 16.20  

makasih infonya mas bro!

3 April 2013 pukul 21.03  

keren banget nih blog nya sob,,,
artikel juga mantap
mampir di blog saya sob,,http://dhanicyx.blogspot.com

30 April 2013 pukul 11.23  

wah, blognya sangat menarik mas. saya juga pengen punya tampilan blog kayak gini. boleh nggak minta copy templatenya?

tolong kirim kesini yaa muklis.uye@gmail.com

Anonim
19 Mei 2013 pukul 12.46  

terimakasih banyak bro sangat bermanfaat.

6 Oktober 2013 pukul 11.47  

mantap sob

1 Oktober 2014 pukul 21.48  

MANTAB GAN.TERIMAKASIH BANYAK YA...LANGSUNG DI COBA UNTUK MERUBAH TEMPLATE BLOG SAYA, SALAM KENAL GAN, JANGAN LUPA MAMPIR YA
http://volimaniak.blogspot.com/

8 Maret 2015 pukul 18.09  

Kode diatas gak ada lo gan di blog ane. apakah versi yang 2015 sudah berbeda dengan versi 2011?

10 Oktober 2015 pukul 22.57  

Gan, mau nanya saya mau mengecilkan lebar bagian blog saya yang warna hitam di bawah, saya kurang tau apa itu yang dimaksud footer atau bukan, soalnya saya cari kode footer untuk merubah lebar sprti yang saya dpat di google tdak ketemu, kalau berkenan silahkan kunjungi ihnadarussunnah.blogspot.com

26 Desember 2017 pukul 09.19  

terima kasih.
http://mathcyber1997.com

30 Mei 2018 pukul 17.56  

mantab ilmunya, thanks
http://javanesetrans.blogspot.com

5 September 2018 pukul 17.53  

Mantap infonya, mampir juga ke http://medroid.tk

2 Maret 2019 pukul 17.33  

makasih bos, saya masih pemula, mau utak atik, ni punya saya: unyu

28 September 2019 pukul 19.11  

Gk semua template memiliki id atau class yang sama (tergantung si pembuat template) jadi susah saat mencari nih...

Apakan mas mengalami hal yang sama saat melakukan pencarian id dalam mengubah template?

Posting Komentar

supaya diskusi berjalan baik, gunakan tombol jawab untuk reply. penggunaan tombol jawab, jangan menghapus kode komentar pada kotak komentar, cukup mengetikan komentar disebelah atau dibawah kode komentar. Terima kasih.

rate this post
beri nilai posting ini
Terima kasih,
Ping your blog, website, or RSS feed for Free Web DirectoryMy Ping in TotalPing.comBloggers - Meet Millions of Bloggers
Protected by Copyscape Duplicate Content Check

Template by Dicas Blogger | Modifikasi ulang oleh Mas Dalang

101011  ©Situseo Blog | Powered by Blogger | Back to Top