Search here

Type a word related to the post, then click the search button !

Memuat...
English
Bru masuk angin!

Arsip...

Flag Counters

Flag Counter

Pengikut

Recent Comments plus Kode CSS Box Gelap

Recent Comments

blog-indonesia.com

Vertical Menu

CLICK any categories for open!
Gubhug Reyot

Sobat Ngeblogh

Sobat Ngeblogh

Buat sobat blogger yang mau ikutan jadi follower silahkan KLIK link Follower (Follow) di ujung kanan-bawah. Dari hasil monitoring, ternyata yang link-nya telah dimasukkan ke "Sobat Ngeblogh" mengalami pertambahan pengunjung secara signifikan!
Terima kasih .: Salam :.
gubhug reyot

Rahasia Cara Merubah Lebar Halaman dan Kolom Blog -2: Tutorial BloGGeR Modifikasi Blog

Untuk mecoba apa yang kami sampaikan pada posting ini alangkah baiknya anda membuka dulu 2 (dua) posting sebelumnya yang di dalamnya juga terdapat prosedur untuk melakukan perubahan desain blog :

1. "Memperlebar Kolom dan Halaman Blog" yang bisa anda buka dengan KLIK di sini !.

2. "Rahasia Merubah Lebar Halaman dan Kolom Blog bagian pertama" yang terpostingkan di sini !.

III. Template Scribe


KODE CSS yang harus di rubah :

/* width (#outer-wrapper) = A */
#outer-wrapper {
        background-color:#473624;
        border-left:1px solid #332A24;
        border-right:1px solid #332A24;
        width:700px;
        margin:0px auto;
        padding:8px;
        text-align:center;
        font: normal normal 100% Georgia, Times New Roman,Sans-Serif;;
}
/* background image di bawah ini harus di rubah dengan membuat background image baru sesuai width pada #outer-wrapper baru, background orisinil --> W=700px   H=49px  
width (#main-top) = B */
#main-top {
        width:900px;
        height:49px;
        background:#FFF3DB url("http://www2.blogblog.com/scribe/bg_paper_top.jpg") no-repeat top left;
        margin:0px;
        padding:0px;
        display:block;
}
/* background image di bawah ini harus di rubah dengan membuat background image baru sesuai width pada #main-bot baru, background orisinil --> W=700px   H=81px  
 width (#main-bot) = C */
#main-bot {
        width:700px;
        height:81px;
        background:#FFF3DB url("http://www.blogblog.com/scribe/bg_paper_bot.jpg") no-repeat top left;
        margin:0;
        padding:0;
        display:block;
}
/* background image di bawah ini harus di rubah dengan membuat background image baru sesuai width pada #wrap2 baru, background orisinil --> W=700px   H=129px  
 width (#wrap2) = D */
#wrap2 {
        width:700px; 
        background:#FFF3DB url("http://www1.blogblog.com/scribe/bg_paper_mid.jpg") repeat-y;
        margin-top: -14px;
        margin-right: 0px;
        margin-bottom: 0px;
        margin-left: 0px;
        text-align:left;
        display:block;
}
/* width (#main) = E */
#main {
        width:480px;
        float:right;
        padding:8px 0;
        margin:0;
        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 */
}
/* width (#sidebar) = F */
#sidebar {
        width:300px;
        float:left;
        padding:8px 0;
        margin:0;
        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 */
}
/* background image di bawah ini harus di rubah dengan membuat background image baru dengan lebar (width) #outer-wrapper baru - 100px, background orisinil --> W=600px   H=3px  
 width (#footer) = #outer-wrapper baru - 100px = G */
#footer {
        clear:both; 
        background:url("http://www.blogblog.com/scribe/divider.gif") no-repeat top left;
        padding-top:10px;
        _padding-top:6px; /* IE Windows target */
}
/* background image di bawah ini harus di rubah dengan membuat background image baru dengan lebar (width) #outer-wrapper baru - 100px, background orisinil --> W=600px   H=3px  
 width (#header) = #outer-wrapper baru - 100px = H */
#header {       
        background:url("http://www.blogblog.com/scribe/divider.gif") no-repeat bottom left;
}

Kunci Perubahan Width (lebar):


1. #outer-wrapper (width) = A
2. #main-top (width) = B 
3. #main-bot (width) = C
4. #wrap2 (width) = D
5. A = B = C = D
6. #main (width) = E
7. #sidebar (width) =  F
8. #footer (width) = #outer-wrapper (width) - 100px = F
7. #header (width) = #outer-wrapper (width) - 100px = G

A = B = C = D = E + F + 20px

G = H = A - 100px

G = H -->  di gunakan sebagai ukuran lebar background image pada  #footer dan #header


Kunci Perubahan Background Image:


1. Background Image pada syntax #outer-wrapper, #main-top, #main-bot dan #wrap2 lebarnya sama. Sesuaikan dengan A, B, C, atau D.
2. Background Image pada syntax #footer dan #header lebarnya = A, B, C atau D dikurangi 100px atau = F dan G.

IV. Template Dots


KODE CSS yang harus di rubah :
/* background image di bawah ini harus di rubah posisi backgrounnya dengan menambahkan besar selisih perubahan yang dilakukan pada width (#main-wrapper) dengan 250px background-position orisinil = 250px 50px background-position baru = Selisih lebar main-wrapper baru ditambah orisinil = ((A) + 250px) 50px
width (#outer-wrapper) = A */
#outer-wrapper {
        background:url("http://www.blogblog.com/dots_dark/bg_3dots.gif") no-repeat 250px 50px;
        width:700px;
        margin:0 auto;
        text-align:left;
        font:normal normal 100% Verdana,Arial,Sans-Serif;
}
/* width (#main-wrapper) = B */
#main-wrapper {
        idth: 450px;
        float:right;
        padding:100px 0 20px;
        font-size:85%;
        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 */
}
/* width (#sidebar-wrapper) dan (#sidebar) = C */
#sidebar-wrapper {
        width: 200px;
        float:left;
        font-size:85%;
        padding-bottom:20px;
        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 {
        background:url("http://www2.blogblog.com/dots_dark/bg_minidots2.gif") 150px -50px;
        padding:40px 10px 15px;
        width: 200px;
        width/* */:/**/180px;
        width: /**/180px;
}
/* width (body#layout #sidebar-wrapper, body#layout #sidebar) = D */
body#layout #sidebar-wrapper, body#layout #sidebar {
        padding: 0;
        width: 240px;
}


Kunci Perubahan Width (lebar):


1. #outer-wrapper (width) = A
2. background-position (#outer-wrapper) = penambahan lebar pada #main-wrapper (E) + 250px (terdapat pada tag #outer-wrapper -->
background:url("http://www.blogblog.com/dots_dark/bg_3dots.gif") no-repeat 250px 50px;
E + 250px digunakan untuk mengganti angka 250px. 
3. E (selisih lebar) = width (#main-wrapper_baru) -  width (#main-wrapper_orisinil/lama) =  B_baru - B_orisinil
4. A (width-outer-wrapper) = B (width_main-wrapper) + C (width_sidebar-wrapper) + 50px
5. C = D 

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :


Update » January, 08, 2012

» Happy Blogging - gubhugreyot «

4 komentar:

  1. wah luar biasa neh bang blognya banyak ilmu yang bisa di peroleh

    makasih bang

    BalasHapus
  2. Makasih! Moga-moga bermanfaat bagi seluruh sobat blogger.

    Salam ...

    gubhug reyot

    BalasHapus
  3. Om yang punya ni blog saya kasih jempol 2 deh .
    Blog kamu bagus banget +++ .
    Tolong bantuin blog reyotane dong seperti blog ente . ( sama percis )
    Saya kasih Uang deh untuk imbalan nya .
    Tolong add saya di facebook : reza_irawan007@rocketmail.com
    Untuk lebih jelas gan = 0856 9356 8151

    BalasHapus

 
GR | Edited by | gubhug reyot