Selasa, 15 Maret 2011

Mengatur Ukuran Konten Template Blog

Cara mengatur ukuran konten yang terdapat pada blog meliputi:
- Mengubah Ukuran Halaman Blog,
- Mengubah Halaman Posting,
- Mengubah Ukuran Header,
- Mengubah Ukuran Sidebar, atau
- Mengubah Ukuran Footer.

Disini saya akan membahas semuanya sekaligus. Mungkin Anda sulit menemukan Template Blog yang cocok dengan selera Anda dan utamanya bahwa Template Blog di ibaratkan seperti sebuah tampilan rumah yang indah, bagus, dan mempesona agar banyak orang yang ingin berkunjung di Blog Anda. tapi bukan hanya tampilan saja yang digunakan melainkan tata letak dan ukuran setiap konten haruslah sesuai dengan isi dari blog itu sendiri, mungkin juga Anda ingin mengedit ukuran inilah itulah agar semua terlihat seperti keigninan Anda. tidak usah berlama-lama langsung saja saya akan memberikan caranya walau ini hanya ilmu yang sangat mudah:
Langkah awal :
- Login ke Blog Anda
- Klik Tata Letak
- Klik Edit HTML
- Saya sarankan sebelum Mengedit HTML di Blog Anda, silahkan Anda BackUp Template Anda terlebih dahulu agar nantinya jika terjadi sesuatu yang tidak di inginkan Anda bisa memasang template semula yang belum Anda Edit HTML nya. (dan setelah di Edit jangan langsung di save, cukup di Pratinjau lebih dahulu, bila sudah sesuai dengan keinginan Anda barulah Anda save hasil Editan Anda tadi).

Untuk mengubah ukuran Halaman Blog
Cari kode di bawah ini:

#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
Keterangan:
Untuk memudahkan mencari Kode di Atas gunakan bantuan dengan menekan Ctrl + F
Untuk mengubah ukuran lebar Halaman Blog, Anda cukup mengubah angka pada width sesuai dengan keinginan Anda.

Untuk mengubah ukuran Halaman Posting
Cari kode di bawah ini:

#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 */
}
Keterangan :
Untuk memudahkan mencari Kode di Atas gunakan bantuan dengan menekan Ctrl + F
Untuk mengubah ukuran lebar Halaman Posting, Anda cukup mengubah angka pada width sesuai dengan keinginan Anda.

Untuk mengubah ukuran Sidebar Blog
Cari kode di bawah ini:

#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 */
}
Keterangan :
Untuk memudahkan mencari Kode di Atas gunakan bantuan dengan menekan Ctrl + F
Untuk mengubah ukuran lebar Sidebar Blog, Anda cukup mengubah angka pada width sesuai dengan keinginan Anda.

Untuk mengubah ukuran Header Blog
Cari kode di bawah ini:

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
Keterangan :
Untuk memudahkan mencari Kode di Atas gunakan bantuan dengan menekan Ctrl + F
Untuk mengubah ukuran lebar Header Blog, Anda cukup mengubah angka pada width sesuai dengan keinginan Anda.

Untuk mengubah ukuran Footer Blog
Cari Code di bawah ini:

#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}
Keterangan :
Untuk memudahkan mencari Kode di Atas gunakan bantuan dengan menekan Ctrl + F
Untuk mengubah ukuran lebar Footer Blog, Anda cukup mengubah angka pada width sesuai dengan keinginan Anda.

Perhatian:
Jika lebar salah satu dari kelima elemen di atas (Halaman Blog, Halaman Posting, Side Bar Blog, Header Blog, dan Footer Blog) diubah, maka akan mempengaruhi keserasian elemen yang lain. Oleh karena itu, jika Anda ingin mengubah lebar salah satu elemen, maka Anda juga harus menyesuaikan dengan lebar elemen yang lain, karena jika antara satu elemen yang satu dengan yang lain tidak serasi, maka tampilan blog Anda akan menjadi kacau, Anda tidak mau kan kalau tujuan Anda yang mulanya ingin menyesuaikan tampilan blog Anda sesuai keinginan dan selera Anda malah justru merusak blog Anda sendiri. Seperti yang sudah saya bilang diatas, jangan langsung di save melainkan di pratinjau terlebih dahulu, jika sudah sesuai dengan keinginan Anda barulah Anda save.

Semoga Bermanfaat
Sumber: http://www.aziz-rhamadhan.co.cc/2010/05/cara-mengubah-ukuran-template-dan.html

5 komentar:

  1. Nice web,,,
    Mas kalo buat tab follower dipinggir/di sudut melayang gimana caranya?
    makasih...

    BalasHapus
  2. Thank's.. 4 u coment..
    kela uuyy.. cuang diteangan heula...
    hik..hik..

    BalasHapus
  3. wah..ada informasi yang boleh dikongsi bersama...tq...hehehe

    BalasHapus
  4. salam kenal sob,, jika ada yang berminat tukaran lnik banner kunjungi http://serbagunaa.blogspot.com/

    BalasHapus
  5. Bro.. gua mau nanya bro. gimana solusinya klau salah satu perintah diatas seperti :
    #outer-wrapper {
    width: 660px;
    margin:0 auto;
    padding:10px;
    text-align:$startSide;
    font: $bodyfont;
    }
    atau

    #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 */
    }

    tidak ditemukan didalam Templete HTML aku gimana bro.. mohon bantuannya http://interfacewirelessbridge.blogspot.com

    BalasHapus

Silahkan Isi Formulir Komentar. Terimakasih