.

11/4/08

MEMPERLEBAR HALAMAN BLOG

Bosen juga kalo cuma ngasih link download konten. Tetap pada prinsip blog saya, konten dan blogging!! Jadi kalo di edisi lalu isinya cuman donlot aja, sekarang gantian dong ilmu blogging. Oke, sekarang saya akan membahas bagaimana cara memperlebar halaman blog kita. Kalo ada visitter yang dulu pernah berkunjung ke blog saya pasti pernah ngrasain, betapa sumpegnya blog saya karena emang halamannya sempit. Nah, sekarang udah digedein nih!! Gimana caranya?

Oke, kita bahas sekarang,
Mungkin dari sebagian besar template default yang disediakan blogger, tidak semuanya memeliki lebar halaman yang penuh. Rata – rata setiap template masih memiliki ruang untuk dimanfaatkan baik untuk memperlebar sidebar, ataupun halaman posting. Kali ini saya akan coba memberikan sedikit gambaran tentang memperlebar halaman blog. Cuma, cara ini akan lebih pas jika diaplikasikan di template minima, yaitu template default blogger. Tapi…tidak menutup kemungkinan juga dapat diaplikasikan di template default blogger yang lainnya. Oke….berikut penjelasannya.

Sebelumnya, saya asumsikan kalo temen2 sudah berada di menu edit html. Dan ingat…tidak usah memberikan tanda centang pada kolom expand template widget karena hanya akan membingungkan saja.

Sebelumnya, silahkan cari kode css #outer-wrapper. Untuk lebih mudah mencarinya, tekan ctrl+f lalu ketikkan kode yang di cari. Kalo sudah ketemu, maka akan tampak kode seperti berikut :

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

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

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

Penjelasan :
#outer-wrapper --> kode untuk lebar halaman blog.
#main-wrapper --> kode untuk lebar postingan blog
#sidebar-wrapper --> kode untuk lebar sidebar blog.

Untuk merubah lebar halaman blog, temen2 tinggal mengganti angka – angka yang terdapat pada setiap kode css diatas. Semakin besar angkanya, maka halaman blog pun semakin lebar. Contoh : Misalnya, temen2 ingin mengganti lebar halaman blog menjadi 950 pixel. Maka silahkan ganti jumlah angka pada tag width untuk kode css #outer-wrapper menjadi --> 950px; Sehingga hasilnya seperti dibawah ini :

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

Nah…setelah mengganti kode #outer-wrapper, jangan lupa untuk mengganti kode tag width pada #main-wrapper dan #sidebar-wrapper juga. Karena jika tidak diganti maka jarak antara halaman posting dan sidebar blog akan sangat lebar. Untuk mengantisipasinya, rubah juga angka pada tag width #main-wrapper dan #sidebar-wrapper menjadi 500px untuk #main-wrapperdan 400px untuk #sidebar-wrapper. Sehingga menjadi :

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

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


Untuk merubah lebar kolom pada #main-wrapper dan #sidebar-wrapper, harus sesuai dengan lebar kolom pada #outer-wrapper. Misalnya, lebar halaman blog 950px maka jumlah dari lebar postingan dan sidebar blog harus kurang dari 950px. Hal ini dikarenakan supaya postingan blog dan sidebar blog tidak berdempetan dan mempunyai jarak antara keduanya. Jarak antara postingan dan sidebar bisa disesuaikan dari 30px s.d 50px.

Nah…setelah merubah lebar bagian blog diatas, ada satu bagian lagi yang harus dirubah yaitu bagian bawah blog. Temen2 tinggal mencari kode #footer-wrapper dan rubah angka pada tag width-nya menjadi sama dengan lebar halaman blog (#outer-wrapper).

Jika semua bagian telah mengalami perubahan, maka sebelum nge-save template lebih baik melihat dulu hasil perubahan dengan mengklik pratinjau / preview. Jika memang sudah sesuai baru di save. Jika belum temen2 tinggal klik bersihkan edit / clear edit untuk mengembalikan perubahan2 yang telah terjadi pada template.

Pengalaman saya:
Saat saya memutuskan untuk memperlebar halaman blog, kode html blog saya itu beda!! dari semua kode-kode di atas hanya satu yang tidak bisa ditemukan. yaitu kode widht #footer-wrapper. Nah, saya coba cari dengan kopas ke notepad dan menggunakan feature find, tidak ditemukan. Ini, menyebabkan blog saya jadi kurang enak dipandang, soalnya slider ke bawahnya panjang banget. Mungkin ada diatara teman-teman yang memiliki masalah sama (jarang yang punya masalah kayak gini!!), mungkin bisa coba tips saya =
copy kode yang ada di bawah:

/* Footer
=================================== */
#footer {
  width:950px;
  clear:both;
  margin:0 auto;
  }
#footer hr {
  display:none;
  }
#footer p {
  margin:0;
  padding-top:15px;
  font:78%/1.6em "Trebuchet MS",Trebuchet,Verdana,Sans-serif;
  text-transform:uppercase;
  letter-spacing:.1em;
  }

Lalu, paste kode tersebut di bawah tag   /* Profile    , atau lebih tepatnya di bawah kode:

.profile-img {
  float: $startSide;
  margin-top: 0;
  margin-$endSide: 5px;
  margin-bottom: 5px;
  margin-$startSide: 0;
  border:4px solid #8b2;


atau lebih tepatnya lagi taruh di atas tag   #comments  {    ,atau lebih tepatnya di atas kode:

#comments  {
  border: 0;
  border-top: 1px dashed #eed;
  margin-top: 10px;
  margin-$endSide: 0;
  margin-bottom: 0;
  margin-$startSide: 0;
  padding: 0;
}

Nah, gampang kan? Kalo masih ada pertanyaan taruh aja di kotak komentar di bawah posting.
Oke, HAPPY BLOGGING!!kk-==-09\\




from http://yasin-marine.blogspot.com dengan sedikit perubahan.

20 komentar:

rezkizuka said...

Maap nih commentnya ga nyambung, mas dapet peer yak.. hehe3 lagi belajar ngasih peer. silahkan di cek di bayi-anak.blogspot.com/2008/11/wah-dapet-peer-nih.html

Eky Dakka said...

Wah punyaku gak sama neh, minta tolong dong :) Blog-ku ada "free space"nya antara post and side bar. Thanks y.. http://ekydakka.blogspot.com

Eky Dakka said...

Numpang Link skalian :)
| Eky Dakka | Free Download |Earn Money | Blogger Template | Become Rich | Love Story

ahmadmadara said...

@Eky Dakka: gimana yach, sy juga gak tau, soalnya saya pake template dari blogger, dan awalnya emang ada free space, but sy dah coba pake cara diatas, dan berhasil. untuk info lebih, bisa cari di blog kang Rohman.
www.kolom-tutorial.blogspot.com

Zebrakarta Jogja said...

thanks ya mas..
buat pencerahanku yang baru nge-blog..

rahman said...

mas makasihnya saya dah buat nih dan jalan..

teguh said...

thanks

M DARUL SE said...

Kami menyediakan ribuan lagu, buku, video dll, untuk siap di freedownload,

http://wuledtirtopekalongan.blogspot.com

M. DARUL, SE COPRAYAN BUARAN PEKALONGAN

facebook hacker said...

oke Q coba ahh

usaha online said...

yo i ....saya mengerti ...thx ya...

andayuna said...

good post....
mau tukar link dengan saya?

dedi ponky said...

Makasih banget ni aye jadi dapat ilmu
http://bikinwebprofesional.blogspot.com/

Jeanne said...

kaka sori kenapa y punyaku gk ada #outer ... nya
loveanimever.blogspot.com

Muhammad Haekal Dwinanda said...

wah, akhirnya dapet juga nih, saya masih newbie banget...
makasih kang...

Kang Indra said...

thanks bro...

http://www.aingindra.com/2010/10/mobil-keluarga-ideal-terbaik-indonesia.html

http://www.aingindra.com/2010/08/pasang-iklan-gratis-bisnis-online.html

Bagus Adi Setya' said...

makasih mas ilmunya..
kelihatannya codingnya da yang g sma, tp ntr q utek2 ndiri..

|software news|

Asriyatno said...

Makasih Bro! mantap tenan

pratama said...

Makasih mas...langsung coba nih

jasa seo murah said...

terima kasih atas pencerahannya, gan

reveer said...

duh pusingnya ya klo dah utak atik kaya gini,,
apalagi kita ga punya ilmunya,,
makasih nih infonay
jadi nambah tahu saya untuk utak atik blog,,

Post a Comment

Jangan Lupa Komentar ya...