Selasa, 27 Juli 2010

Pengaturan Pada Lebar Blog

Jika anda merasa bahwa blog anda kurang lebar, dan ingin melebarkan blog anda, maka postingan ini mungkin akan sangat membantu anda bagi anda yang belum tahu kode-kode HTML. Jika anda ingin menalkukan sedikit pengeditan/pengaturan pada lebar blog, caranya sangat mudah. Sekarang, apakah anda sudah siap untuk mengganti lebar blog anda? Jika anda menjawab sudah, simak tutorial yang saya akan sampaikan ini:

  1. Login ke Blogger
  2. Masik ke Perancang Template
  3. Pilih Edit HTML
  4. Cari kode-kode yang saya berikan dan perhatikan tutorial dibawah ini:

#header {
 width: 720px;
  margin: 0 auto;
  background-color: $headerBgColor;
  border: 1px solid $headerBgColor;
  color: $headerTextColor;
  padding: 0;
  font: $headerFont;
}


Keterangan: Kode Width: 720px merupakan kode lebar Header anda, jadi jika anda ingin melebarkan header anda, maka gantilah angka 720 (misal: width: 960px), tapi ingat yang diganti hanyalah angkanya saja!

#content-wrapper {
 width: 720px;
  margin: 0 auto;
  padding: 0 0 15px;
  text-align: $startSide;
  background-color: $mainBgColor;
  border: 1px solid $borderColor;
  border-top: 0;
}

Keterangan: ubahlah angkanya seperti pada kode pertama, ini merupakan kode untuk melebarkan halaman blog anda. (misal: width: 960px)

}
#main-wrapper {
  margin-$startSide: 14px;
 width: 400px;
  float: $startSide;
  background-color: $mainBgColor;
  display: inline;       /* fix for doubling margin in IE */
  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: kode diatas adalah kode lebar postingan anda, cara untuk melebarkannya sama seperti cara pada pelebaran Header dan Halaman anda, hanya mengubah angka pada width

#sidebar-wrapper {
  margin-$endSide: 14px;
 width: 220px;
  float: $endSide;
  background-color: $mainBgColor;
  display: inline;       /* fix for doubling margin in IE */
  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: Kode ini adalah kode lebar sidebar anda, untuk mengubah lebarnya sama seperti cara mengubah lebar Header, Halaman, dan lebar area postingan anda.

Ingatlah! Kode setiap template akan berbeda-beda, jadi cari yang mirip/mendekati, semoga anda berhasil melebarkan blog anda. Jika anda memiliki kode yang berbeda dan ingin bertanya kepada saya tentang solusinya, maka tuliskan saja kodenya pada kotak komentar dibawah ini. Akhirnya, terselesaikan juga artikel yang berjudul pengaturan pada lebar blog ini. Terima kasih.

Tidak ada komentar:

Posting Komentar