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

Cara Memperlebar Kolom dan Halaman Blog: Panduan BloGGeR Modifikasi Blog

Membuat desain blog sendiri, baik secara total maupun dari hasil meronovasi blog jadi merupakan kebanggaan tersendiri bagi seorang blogger. Banyak hal sebenarnya yang bisa kita lakukan terhadap desain sebuah blog (template), diantaranya dengan melakukan desain ulang pada ukuran (lebar) kolom, bentuk kolom, bentuk font, jenis font, tebal font, warna background dan warna font, background image, maupun variable lain dalam KODE html yang merupakan komponen dasar untuk membangun sebuah template seperti misalnya padding, margin, border dan beberapa yang lain.

Mendesain ulang lebar kolom sebuah blog sangat berguna sebagai langkah awal mengenal lebih dalam bagaimana sebuah blog dibangun. Melalui ini pula seorang blogger dapat melakukan beberapa penyesuaian terhadap lebar sebuah kolom (baik header, main, sidebar, ataupun footer) ketika sesuatu hal yang ingin dimuat terlalu kecil ataupun terlalu besar sehingga ketika dipaksakan mengakibatkan sebuah blog kehilangan harmonisasi ruang.

Sebagai bahan latihan kita akan mencoba melakukan perubahan pada desain template Minima bawaan Blogger yang mempunyai lebar 660px (outer-wrapper=halaman blog) dengan lebar sidebar = 220px dan main = 400px serta header = footer = outer-wrapper= 660px.

Untuk merubah lebar tiap kolom pada template minima sangat simple sekali karena hanya tiga komponen di atas tersebut yang harus di rubah. Dasar pedoman untuk perubahan adalah dengan cara mengambil ukuran lebar halaman blog yang kita inginkan dihubungkan dengan bagian mana yang lebarnya ingin dirubah untuk penyesuaian dengan kebutuhan yang ada. Sebaiknya lebar blog maksimal yang kita gunakan 1024px karena lebar satu halaman layar adalah 1024px (pixel).

Sebagai bahan percobaan kita akan melakukan perubahan pada template Minima dengan asumsi misalnya karena kita butuh sidebar diperlebar hingga 350px untuk memuat sebuah kalendar yang memang harus berukuran segitu untuk dapat tertampilkan secara sempurna.

Bagian yang harus kita rubah hanya pada KODE CSS di syntax :

#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 */
}

Rubah lebar (width) sesuai kebutuhan menjadi 350px, sehingga KODE CSS menjadi :
#sidebar-wrapper {
        width:350px;
        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 */
}

2. Misalnya bagian halaman posting sekaligus kita perlebar menjadi 500px. Untuk hal ini kita harus merubah lebar pada syntax :
#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 */
}

Rubah lebar (width) sesuai kebutuhan menjadi 500px, sehingga KODE CSS menjadi :
#main-wrapper {
        width: 500px;
        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 */
}

3. Perhatikan metode yang kita gunakan sebagai dasar perubahan :
A. Lebar (width) Desain asli template Minima :
- header = outer-wrapper = footer = 660px
- main = 410px
- sidebar = 220px

B. 660px - width(sidebar) - width(main) = x
- Keterangan : tanda (-) = dikurangi.
660px - 220px - 410px = 30px
angka 30px ini digunakan untuk variable seperti margin dan padding dan kita gunakan sebagai komponen nilai penghitung lebar supaya tetap simetris sesuai dengan aslinya.

C. Lebar sidebar baru = 350px, lebar main baru = 500px.
Lebar (width) pada header = lebar outer-wrapper = lebar footer = width baru =
Lebar (width) Sidebar + lebar (width) Main + 30px = width baru2
350px + 500px + 30px = 880px
880px = width baru pada sidebar, main dan outer-wrapper.

4. Setelah angka width baru pada header, outer-wrapper dan footer diketahui, maka bentuk KODE CSS nya menjadi :

A. Header :
#header-wrapper {
         width: 880px;
         margin:0 auto 10px;
         border:1px solid $bordercolor;
}

Catatan : - sebelum perubahan width:660px;

B. Outer Wrapper :
#outer-wrapper{
        width: 880px;
        margin:0 auto;
        padding:10px;
        text-align:$startSide;
        font: $bodyfont;
}
Catatan : - sebelum perubahan width:660px;
C. Footer :
#footer {
        width:880px;
        clear:both;
        margin:0 auto;
        padding-top:15px;
        line-height: 1.6em;
        text-transform:uppercase;
        letter-spacing:.1em;
         text-align: center;
}
Catatan : - sebelum perubahan width:660px;

5. Keterangan :

- Sebelum melakukan perubahan pada template lakukan prosedur standar yang harus dilakukan blogger :

1. Login ke Blogger.
2. Dasbor (Dasboard).
3. KLIK Tata Letak.
4. KLIK Edit HTML.
5. Amankan Template. Cara mengamankan template bisa dilihat di sini !.
6. Untuk memudahkan mencari KODE HTML gunakan Ctrl+F (pada keyboard). Kalau belum jelas caranya, anda bisa melihatnya di sini !.
7. Diakhir proses merubah lebar kolom jangan lupa KLIK Simpan Template (SAVE Template).
8. Untuk perubahan Kolom dari template bawaan Blogger yang lain anda bisa melihatnya di Rahasia Merubah Lebar Kolom Template Blogger yang akan kita postingkan secara berkesinambungan.

- Perubahan lebar kolom pada Template Minima merupakan dasar bagi perubahan untuk template bawaan blogger yang lain.

- Mengetahui cara-cara untuk merubah lebar kolom sangat berati bagi blogger saat melakukan banyak lagi perubahan desain yang lain, seperti misalnya menambah kolom baru, membuat 2 buah sidebar baik di satu sisi ataupun di kanan dan kiri, membuat kolom bagi widget baru dan banyak lagi hal menarik yang bisa dilakukan.

- Panduan modifikasi ini didasarkan pada Template Tata letak (Layout Templates)

Selamat berimprovisasi !

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 «

16 komentar:

  1. wow..kereen blognya..ajarin dong cara bikin kolom kategori yang nyentrik ntu..gimana ???

    BalasHapus
  2. Akan kita postingkan biar semua paham tentang merubah dan memodifikasi desain blog!

    Salam ....

    gubhug reyot

    BalasHapus
  3. GIMANA SIH CARANE BUAT BLOG SEPERTI PUNYANYA MAS SOALE AKU TERTARIK BANGET !!!!!!

    BalasHapus
  4. pak boz, kalau buat satu halaman pada blog berbeda dengan halaman lain gimana?. maksud q halaman satu lebarnya untuk posting 500, tetapi halaman posting yang lain 600

    BalasHapus
  5. mas kode nya d blog ku g ketemu..

    BalasHapus
  6. Om kluthuk , Gmna ni ? Halaman di blog saya yang untuk posting kecil banget ? Tolong dong kasih tau trik nya agar bisa memperbesar dan mempermudah tamu yang ingin membaca .
    Thanx , Bales message me lewat http://pengetahuansekitar.co.cc , Thanx .

    BalasHapus
  7. ya ampyun kini blog gue tambah ancur. somebody help me!.

    BalasHapus
  8. bagus bgt sich blog nyaaaaaaaaaaa..... ada templates seperti punya mas gak???

    BalasHapus
  9. mas. tolong berkunjung ke blog saya di http://www.zokerbro.tk gmn cara merapihkan blog saya. saya tak nemukan outer wrapper? apanya yanh salah? thanks

    BalasHapus
  10. thanky ya sob infonya berguna ane dah keliling2 nyari nih artikel ,,,,,,

    BalasHapus
  11. keren sob ijin nyoba

    BalasHapus
  12. Makasih bnyak tutornya pak.... Kunjungi juga blog gua pak ya
    All-star-lubis.Blogspot.co.id

    BalasHapus
  13. Hello, I am Eileen Anderson, currently living in Australia, I am a widow at the moment with Four kids and i was stuck in

    a financial situation in May 2017 and i needed to refinance and pay my bills. I tried seeking loans from various loan

    firms both private and corporate but never with success, and most banks declined my credit. But as God would have it, I

    was introduced to a woman of God a private loan lender who gave me a loan of 850,000USD and today am a business owner and

    my kids are doing well at the moment, if you must contact any firm with reference to securing a loan without collateral ,

    no credit check, no co signer with just 2% interest rate and better repayment plans and schedule, please contact Mrs Zhang

    Xin (zhangxinloancompanyasians@gmail.com). He doesn't know that am doing this but am so happy now and i decided to let

    people know more about him and also i want God to bless him more. You can contact him through his email .

    zhangxinloancompanyasians@gmail.com

    BalasHapus

 
GR | Edited by | gubhug reyot