• Breaking News

    Panduan dan Tutorial Lengkap serta Materi Pelajaran di Mulyono Blog. Konten Terlengkap dan Terpercaya

    Kamis, 20 Oktober 2011

    Mengetahui Ukuran Header, Posting, Sidebar, Footer & Lebar Blogger

    Home >> Footer , Header , HTML , Sidebar >> Mengetahui Ukuran Header, Posting, Sidebar, Footer & Lebar Blogger

    Mengetahui Ukuran Header, Posting, Sidebar, Footer & Lebar Blogger

    Dalam edit template sobat, perlu kita ketahui berapa ukuran atau lebar elemen-elemen yang ada di blog. Untuk mengetahui Ukuran Header, Posting, Sidebar, Footer & Lebar Blogger sejuta trik blogger ingin sharing ke teman-teman. Sharing dalam posting ini mudah-mudahan bisa membantu mengedit blog sahabat semua. Yuk mulai saja.

    1. Mengetahui Ukuran / Lebar header

    #header-wrapper{
    background: #ffffff;
    width: 900px;
    height: 160px;
    font-size: 12px;
    margin: 0px auto 0px;
    padding: 0px;
    overflow: hidden;
    }

    2. Mengetahui Ukuran / Lebar halaman Posting

    #main-wrapper{
    float:left;
    width:590px;
    margin:0px 0px 5px 0px;
    padding:13px 10px 0px 10px;
    overflow: hidden;
    }

    3. Mengetahui Ukuran / Lebar sidebar

    #sidebar-wrapper{
    float:left;
    width:320px;
    margin:13px 0px 5px 0px;
    padding:0px;
    line-height:19px;
    display: inline;
    }

    4. Mengethui Ukuran / Lebar Footer
    /* Footer
    ----------------------------------------------- */
    #footer {
      width:950px;
      clear:both;
      margin:0 auto;
      padding-top:15px;
      line-height: 1.6em;
      text-transform:uppercase;
      letter-spacing:.1em;
      text-align: center;
    }



    a. Untuk mengedit ukuran/lebar Halaman Blog
    Cari kode di bawah ini:

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

    b. Untuk mengedit ukuran/lebar 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 */
    }

    c. Untuk mengedit ukuran/lebar Sidebar Blog
    Cari Code 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 */
    }


    d. Untuk mengedit ukuran Header Blog,
    Cari Code di bawah ini:

    #header-wrapper {
    width:660px;
    margin:0 auto 10px;
    border:1px solid $bordercolor;
    }


    e. Untuk mengedit 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;
    }

    Jika sahabat tidak menemukan kode seperti di atas, untuk mengetahui element seperti header, posting, sidebar dan lebar blogger, cukup mencari kode yang mirip dan ditunjukkan dengan width: (LEBAR) dan height:(TINGGI)

    Dengan Mengetahui Ukuran Header, Posting, Sidebar, Footer & Lebar Blogger tentunya akan memudahkan sahabat mengganti dan mengedit blog dengan menyenangkan seperti slogan blog ini.
    Happy Blogging! by. Sejuta Trik Blogger
    Home << Footer , Header , HTML , Sidebar << Mengetahui Ukuran Header, Posting, Sidebar, Footer & Lebar Blogger