SYAARAR.COM
  Home  |  Refleksi  |  Kombur  |  Religous  |  Free Code  |  Download  |
Modifikasi SYAARAR Template 02
Ditulis oleh : Syamsul Arham
Tanggal : 23 Mei 2008, 12:44:5
Dibaca : 3125

1. Bagaimana caranya agar nama masing-masing bagian tersebut dapat ditengah (centre) 2. Pada bagian kanan, sebenarnya saya hanya membutuhkan sebuah side bar (right bar) dan agak kecil (ukuran lebar sama dengan Right1 Sidebar) memanjang ke bawah. Kolom ini ingin saya isi dengan kutipan-kutipan kalimat super. Bagaimana cara memanipulasinya?

Seorang sahabat saya mengirimkan pertanyaan untuk melakukan memodifikasi SYAARAR Template 02. Adapun pertanyaannya:

 

  1. Bagaimana caranya agar nama masing-masing bagian tersebut dapat ditengah (centre)
  2. Pada bagian kanan, sebenarnya saya hanya membutuhkan sebuah side bar (right bar) dan agak kecil (ukuran lebar sama dengan Right1 Sidebar) memanjang ke bawah.  Kolom ini ingin saya isi dengan kutipan-kutipan kalimat super.  Bagaimana cara memanipulasinya?
Untuk melakukan modifikasi template sesuai dengan permintaan bisa dilakukan sebagai-berikut: 

Judul Konten di tengah:

  1. Login ke akun blogger
  2. Pilih “Layout”
  3. Klik “Edit HTML“
  4. Cari script di bawah ini:


    /* Headings----------------------------------------------- */ 
    h2 {
      margin:1.5em 0 .75em;
      font:$headerfont;
      line-height: 1.4em;
      text-transform:uppercase;
      letter-spacing:.2em;
      color:$sidebarcolor;
      background: #eeefff;
    }


  5. Tambahkan script “text-align:center;” dan hasilnya sbb:


    /* Headings----------------------------------------------- */ 
    h2 {
      margin:1.5em 0 .75em;
      font:$headerfont;
      line-height: 1.4em;
      text-transform:uppercase;
      letter-spacing:.2em;
      color:$sidebarcolor;
      background: #eeefff;
      text-align:center;
    }

  6. Klik “Simpan Template”, sampai disini proses memindahkan judul konten ketengah selesai.
 

Right Side hanya satu kolom

  1. Cari script di bawah ini:


    <div id='center-wrapper'>
            <b:section class='centerbar' id='centerbar' preferred='yes'>
    --- baris ini ada scriptnya kalau sudah diisi ---
    </b:section>
          </div>
            <div id='sidebar-wrapper'>
            <b:section class='sidebar' id='sidebar' preferred='yes'>
    --- baris ini ada scriptnya kalau sudah diisi ---
    </b:section>
          </div>

  2. Hapus script di atas
  3. Cari script di bawah ini:


    #center-wrapper {
      width: 170px;
      float: right;
      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: 170px;
      float: right;
      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 */
    }

  4. Hapus script di atas
  5. Geser kursor ke atas akan ditemukan script di bawah ini:


    #top-sidebar-wrapper {
      width: 350px;
      float: left;
      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 */
    }

  6. Ganti nilai width menjadi 170px dan hasilnya:


    #top-sidebar-wrapper {
      width: 170px;
      float: left;
      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 */
    }

  7. Geser lagi ke atas, akan ditemui script:


    #main-wrapper {
      width: 430px;
      float: left;
      padding: 10px;
      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 */ 
    }

  8. Ganti nilai width menjadi 610px, sehingga script adalah:


    #main-wrapper {
      width: 610px;
      float: left;
      padding: 10px;
      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 */ 
    }

  9. Klik “Simpan Template”, sampai disini proses editing selesai. Silakan lihat hasilnya.
  10. Catatan: Setiap penambahan atau pengurangan nilai width di “#main-wrapper” akan mempengaruhi nilai width di “#top-sidebar-wrapper” dan #left-sidebar-wrapper”.
Mudah-mudahan ini sesuai dengan harapan, jika masih belum silakan hubungi saya untuk diperbaiki lagi.

 



Post related
  • SYAARAR Template 02
  • Desain Layout 01
  • Tags
    Social Media

    Posting komentar Anda :
    Name :
    Email :
    Website :
    Comment :
    Validation word :


     

    ┬ęSYAARAR.Com. All rights reserved.