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 -1: Panduan BloGGeR Modifikasi Blog

Merubah lebar halaman dan kolom blog yang paling mudah akan terasakan ketika desain blog yang kita rubah tanpa menggunakan background image, seperti halnya Template Minima bawaan Blogger atau template-template yang lain dimana background image yang digunakan tidak harus dirubah baik tinggi (height) ataupun lebarnya (width) ketika semua bagian kolom dirubah ukurannya. Meskipun demikian, janganlah mengendorkan semangat kita apabila perubahan desain blog mengharuskan kita juga harus membuat background image yang baru guna disesuaikan dengan perubahan yang kita lakukan. Percayalah bahwa tuntutan dan keharusan membuat background image yang baru tersebut akan semakin meningkatkan pemahaman kita baik terhadap desain sebuah blog maupun pengetahuan kita akan desain gambar/image karena secara otomatis kita akan termotivasi untuk belajar tentang desain background image dengan mempelajari cara membuatnya menggunakan software yang sebelumnya tidak pernah kita sentuh, seperti Adobe Photoshop ataupun software yang lain.

Untuk melangkah lebih jauh pada bagian ini sebaiknya anda baca terlebih dahulu posting sebelum ini (Memperlebar Kolom dan Halaman Blog), atau anda bisa membukanya di sini !. Pada posting tersebut kita bisa belajar tentang dasar merubah kolom blog pada Template Minima yang akan menjadi dasar untuk lebih memahami cara merubah lebar kolom dan lebar halaman blog pada template bawaan blogger yang lain.

Sebelum mencoba melakukan perubahan pada template silahkan untuk mengikuti prosedur di bawah ini :

1. Login ke Blogger.
2. Dasbor (Dasboard).
3. KLIK TataLetak (Layout).
4. KLIK Edit HTML.
5. Amankan template. Lihat caranya di sini !.
6. Untuk mempercepat kerja, cari setiap KODE HTML menggunakan Ctrl+F. Untuk mengetahui lebih lanjut silahkan lihat di sini !.
7. KLIK Simpan Template pada setiap akhir proses (SAVE Template).
8. Lihat hasilnya dengan membuka blog.

I. Template Denim


KODE CSS yang harus di rubah :
#header {
        width: 760px; 
        margin: 0 auto;
        background-color: #336699;
        border: 1px solid #336699;
        color: #ffffff;
        padding: 0;
        font: normal normal 210% Verdana, Arial, Sans-serif;;
}
#content-wrapper {
        width: 760px; 
        margin: 0 auto;
        padding: 0 0 15px;
        text-align: left;
        background-color: #ffffff;
        border: 1px solid #cccccc;
        border-top: 0;
}
#main-wrapper {
        margin-left: 14px;
        width: 464px; 
        float: left;
        background-color: #ffffff;
        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 */
}
#sidebar-wrapper {
        margin-right: 14px;
        width: 240px; 
        float: right;
        background-color: #ffffff;
        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 */
}

Kunci Perubahan :


#header (width) = #content-wrapper (width) = A ,#main-wrapper (width) = B, #sidebar-wrapper (width) = C

A = B + C + 56px

Keterangan : Setiap perubahan pada B atau C atau ke dua-duanya, maka width pada #header dan #content-wrapper anda tinggal menjumlahkan keduanya kemudian ditambah 56px.


II. Template Rounders



KODE CSS yang harus di rubah :
#header-wrapper {      
/* background image di bawah ini harus di rubah dengan membuat background image baru sesuai width pada #outer-wrapper, background orisinil --> W=740px   H=8px  */
        background:#445566 url("http://www2.blogblog.com/rounders/corners_cap_top.gif") no-repeat left top;
        margin-top:22px;
        margin-right:0;
        margin-bottom:0;
        margin-left:0;
        padding-top:8px;
        padding-right:0;
        padding-bottom:0;
        padding-left:0;
        color:#ffffff;
}
/* background image di bawah ini harus di rubah dengan membuat background image baru sesuai width pada #outer-wrapper yang baru, background orisinil --> W=740px   H=8px  */
#header {
        background:url("http://www.blogblog.com/rounders/corners_cap_bot.gif") no-repeat left bottom;
        padding:0 15px 8px;
}
/* #outer-wrapper (width) = A */

#outer-wrapper {
        width: 740px;
        margin:0 auto;
        text-align:left;
        font: normal normal 100% 'Trebuchet MS',Verdana,Arial,Sans-serif;
}
/* #main-wrap1 (width) = B */
/* background image di bawah ini harus di rubah dengan membuat background image baru sesuai width pada #main-wrap1 yang baru, background orisinil --> W=485px   H=50px  */
#main-wrap1 {
        width:485px;
        float:left; 
        background:#ffffff url("http://www1.blogblog.com/rounders/corners_main_bot.gif") no-repeat left bottom;
        margin:15px 0 0;
        padding:0 0 10px;
        color:#333333;
        font-size:97%;
        line-height:1.5em;          
        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 sesuai width pada #main-wrap1 yang baru, background orisinil --> W=485px   H=50px  */
#main-wrap2 {
        float:left;
        width:100%; 
        background:url("http://www1.blogblog.com/rounders/corners_main_top.gif") no-repeat left top;
        padding:10px 0 0;
}

/* background image di bawah ini harus di rubah dengan membuat background image baru sesuai width pada #main yang baru, background orisinil --> W=485px   H=10px  */
/* #main (width) = C */
#main {
        background:url("http://www.blogblog.com/rounders/rails_main.gif") repeat-y left;
        padding:0;
        width:485px;
}
/* #sidebar-wrap (width) = D */
#sidebar-wrap {
        width:240px;
        float:right;
        margin:15px 0 0;
        font-size:97%;
        line-height:1.5em;
        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 */
}

/* .main .widget (width) = E */

.main .widget {
        margin-top: 4px;
        width: 468px;
        padding: 0 13px;
}

/* .main-blog (width) = F */

.main .Blog {
        margin: 0;
        padding: 0;
        width: 484px;
}

/* background image di bawah ini harus di rubah dengan membuat background image baru sesuai width pada #sidebar-wrap yang baru, background orisinil --> W=240px   H=8px  */

#sidebartop-wrap {
        background:#ccddcc url("http://www.blogblog.com/rounders/corners_prof_bot.gif") no-repeat left bottom;
        margin:0px 0px 15px;
        padding:0px 0px 10px;
        color:#334455;
}

/* background image di bawah ini harus di rubah dengan membuat background image baru sesuai width pada #sidebar-wrap yang baru, background orisinil --> W=240px   H=8px  */
#sidebartop-wrap2 {
        background:url("http://www2.blogblog.com/rounders/corners_prof_top.gif") no-repeat left top;
        padding: 10px 0 0;
        margin:0;
        border-width:0;
}

/* background image di bawah ini harus di rubah dengan membuat background image baru sesuai width pada #sidebar-wrap yang baru, background orisinil --> W=240px   H=30px  */
#sidebarbottom-wrap1 {
        background:#ffffff url("http://www.blogblog.com/rounders/corners_side_top.gif") no-repeat left top;
        margin:0 0 15px;
        padding:10px 0 0;
        color: #333333;
}

/* background image di bawah ini harus di rubah dengan membuat background image baru sesuai width pada #sidebar-wrap yang baru, background orisinil --> W=240px   H=30px  */
#sidebarbottom-wrap2 {
        background:url("http://www1.blogblog.com/rounders/corners_side_bot.gif") no-repeat left bottom;
        padding:0 0 8px;
}

/* background image di bawah ini harus di rubah dengan membuat background image baru sesuai width pada #outer-wrapper yang baru, background orisinil --> W=740px   H=8px  */
#footer-wrap2 {
        background:#445566 url("http://www2.blogblog.com/rounders/corners_cap_top.gif") no-repeat left top;
        color:#ffffff;
}

/* background image di bawah ini harus di rubah dengan membuat background image baru sesuai width pada #outer-wrapper yang baru, background orisinil --> W=740px   H=8px  */
#footer {
        background:url("http://www.blogblog.com/rounders/corners_cap_bot.gif") no-repeat left bottom;
        padding:8px 15px;
}

Kunci Perubahan Width (lebar):


1. #outer-wrapper (width) = A
2. #main-wrap1 (width) = B 
3. #main (width) = C
4. #sidebar-wrap (width) = D
5. .main .widget (width) = E
6. .main-blog (width) =  F

A = B + D + 15px, atau A = C + D + 15px

E = B - 17px, atau E = C - 17px

F = B - 1px, atau F = C - 1px

Kunci Perubahan Background Image:


1. Background Image pada syntax #main-wrap1, lebarnya disesuaikan dengan lebar pada syntax #main-wrap1 yang baru (B).
2. Background Image pada syntax #main-wrap2, lebarnya disesuaikan dengan lebar pada syntax #main-wrap1 yang baru (B).
3. Background Image pada syntax #main, lebarnya disesuaikan dengan lebar pada syntax #main yang baru (C).
4. Background Image pada syntax #header-wrapper dan syntax #footer-wrap1 (background sama), lebarnya disesuaikan dengan lebar pada syntax #outer-wrapper yang baru (A).
5. Background Image pada syntax #footer, lebarnya disesuaikan dengan lebar pada syntax #outer-wrapper yang baru (A).


Untuk sementara cukup dua template terlebih dahulu supaya nggak tambah pusing (karena aku juga jadi pusing saat nyusun postingnya ! Habis panjang juga, sih ...).

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 «

7 komentar:

  1. saya sudah mencoba merubah kolom blog, terutama di bagian posting. saya pingin kolom posting blog saya menjadi dua bagian, tapi sampai sekarang belum pernah bisa. mohon share ilmunya. trims..

    BalasHapus
  2. wah, trim's atas pemberitahuannya y mas ya...
    soale aku jga bru blajar bolg...

    BalasHapus
  3. Pusing bos!!! didalam tempel saya belum menemukan kode CSS yg Bos maksud diatas. sepertinnya saya harus kerja lembur & menempelkannya dulu kode CSS-nya .. saya akan coba semoga bisa!?. Kemungkinan bisa menghabiskan sampai 2/bungkus rokok + kopi neh..!! heheheehe..
    Terima kasih bos.. bos memang hebat (profesional) dan saya hanya pendatang baru blogger. Saya salah satu Penggemar bos!! Senang jika Bos mampir ke blog saya http://agungalbani.blogspot.com, sekedar mengisi Buku Tamu :-) Trims... Saya telah banyak belajar nge-blogger dari anda ...

    BalasHapus
    Balasan
    1. Ups !!! Saya berhasil menempelnya bos.. tinggal mengatur lebar dan tinggi yang bos maksud .. hehehehe.. :-P ( setengah/jam) saja

      Hapus
  4. saya ada masalah dengan template saya gan, ukuran laman dan lebar postingannya berbeda, ukuran lebar laman lebih kecil dibanding ukuran lebar postingan, ada baiknya agan lihat langsung disini pada contoh laman yang ada pada blog saya : http://www.ibnoe.info/p/iwebtool-speed-test.html , coba agan bandingkan dengan laman postingan, semua laman yang ada pada blog saya memiliki ukuran yang seperti itu, semoga saja agan bisa memberikan pencerahan....

    BalasHapus
  5. thanks gan buat info nya...goodjob :D

    BalasHapus
  6. thanks gan infonya.. kalau ada yang pengen cari panduan tentang wilcom atau software design lainnya dapat mengunjungi ...https://agungpanduan.blogspot.co.id/

    maaf blog baru..

    BalasHapus

 
GR | Edited by | gubhug reyot