Hanya arsip

halaman asli ada di http://kolom-tutorial.blogspot.com

Ganti Warna Sidebar Minima

Adakah diantara sobat pecinta template minima? jawabannya kemungkinan banyak, diantaranya
adalah sobat junyan. Di balik kecintaannya terhadap template minima, ada sedikit keinginan
yang masih belum bisa di lakukan yaitu mengubah warna kolom sidebar agar tidak sama dengan
warna kolom posting. Memang jika sobat merujuk kepada kode asli dari template tersebut, walhasil
tidak akan bisa membuat keduanya berbeda warna karena memang di desain untuk satu warna.
Apabila sobat ingin merubahnya tentu saja itu bisa di lakukan dan saya kira tidaklah terlalu
sulit untuk melakukannya.

Karena saat ini template minima masih terbagi dua yaitu minima klasik dan minima baru maka
akan saya coba bahas satu persatu. Sebai catatan yaitu template yang di gunakan adalah template minima
berwarna putih.

  • Minima Klasik
  • Untuk merubah warna kolom sidebar minima, silahkan cari kode seperti di bawah ini :

    /* Content
    ———————————————– */
    @media all {
    #content {
    width:660px;
    margin:0 auto;
    padding:0;
    text-align:left;
    }
    #main {
    width:410px;
    float:left;
    }
    #sidebar {
    width:220px;
    float:right;
    }
    }

    Agar warna sidebar bisa berubah warna, sobat tinggal menyisipkan kode warna yang di inginkan, contoh
    warna krem :

    background:#f5ede3;

    Agar tulisan yang ada di sidebar tidak terlihat menabrak dinding sidebar, sobat bisa memberi sedikit
    sentuhan dengan menambahkan kode padding, misal :

    padding : 7px;

    Maka apabila kode-kode diatas di sisipkan pada kode kolom sidebar, maka kodenya akan jadi seperti ini :

    /* Content
    ———————————————– */
    @media all {
    #content {
    width:660px;
    margin:0 auto;
    padding:0;
    text-align:left;
    }
    #main {
    width:410px;
    float:left;
    }
    #sidebar {
    width:220px;
    float:right;
    background:#f5ede3; /*ini kode tambahannya */
    padding:7px;/*ini kode tambahannya */
    }
    }

    Sangat mudah bukan? tidak terlalu banyak kode yang harus di tambahkan. Bagaimana apabila
    kolom posting ingin di beri warna juga? sobat hanya tinggal menyisipkan kode warna diantara
    kode posting, yaitu bagian #main;

    #main {
    width:410px;
    float:left;
    background:#f5ede3; /* ini kode tambahannya */
    padding:7px;/* ini kode tambahannya */
    }

  • Minima baru
  • Untuk template baru, ada sedikit perbedaan dalam hal pewarnaan yaitu memakai variable
    warna. Dengan adanya variable warna maka si pemakai template dapat mengubah warna secara
    praktis di bagian menu Font dan Warna. Contoh variable warna dari template minima
    seperti ini :


    <Variable name="bgcolor" description="Page Background Color"
    type="color" default="#fff" value="#ffffff">

    Tugas dari sobat adalah membuat variable baru, terserah namanya apa, akan tetapi di sarankan
    untuk membuat nama variable dengan yang mudah di ingat. Masih bingung? silahkan ikuti langkah berikut ini:

    Sisipkan kode berikut diantara kode variable :


    <Variable name="sidebarbgcolor" description="Warna background sidebar"
    type="color" default="#999" value="#e6e6e6">


    Tambahkan kode berikut pada kode untuk kolom sidebar, yang warna merah adalah kode yang harus di tambahkan :

    /* Outer-Wrapper
    ———————————————– */
    #outer-wrapper {
    width: 660px;
    margin:0 auto;
    padding:10px;
    text-align:left;
    font: $bodyfont;
    }

    #main-wrapper {
    width: 410px;
    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 */
    }

    #sidebar-wrapper {
    width: 220px;
    float: right;
    background:$sidebarbgcolor; /* ini kode tambahannya */
    padding: 7px; /* ini kode tambahannya */
    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 */
    }

    Jika penambahan kode sudah selesai, jangan lupa untuk menekan tombol Simpan Template.
    Bagaimana jika kolom posting juga ingin berwarna? seperti yang tadi juga, silahkan buat variable warna
    dan sisipkan kode diantara kode kolom posting. Trus bagaimana apabila kolom sidebarnya ada dua? sama
    saja, tinggal buat variable, kemudian sisipkan kode tambahan pada sidebar yang satunya lagi.

    Sedikit tambahan, sebenarnya untuk variable warna bisa juga tidak usah dibuat. Caranya sobat langsung
    menuliskan kode warnanya pada kode sidebar, contoh :

    /* Outer-Wrapper
    ———————————————– */
    #outer-wrapper {
    width: 660px;
    margin:0 auto;
    padding:10px;
    text-align:left;
    font: $bodyfont;
    }

    #main-wrapper {
    width: 410px;
    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 */
    }

    #sidebar-wrapper {
    width: 220px;
    float: right;
    background:#e6e6e6; /* ini kode tambahannya */
    padding: 7px; /* ini kode tambahannya */
    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 */
    }

    Akan tetapi apabila kode warna langsung di pasang seperti itu maka pada menu Font dan Warna,
    warna tersebut tidak bisa di ubah-ubah.

    mau melihat contoh sidebar minima yang punya warna berbeda, silahkan klik di sini !

    selamat mencoba !

    27 September 2007 - Posted by | blog tutorial, modifikasi blog

    12 Komentar »

    1. yang ini-ini ana butuh banget..
      makasih ya mas

      Komentar oleh evan | 31 Oktober 2007 | Balas

    2. Ass. Kang Rohman Sukses selalu yach..saya ada masalah dgn blog waktu ganti template klasik semua daftar link yg sudah dibuat hilang semuanya…gmana ngebalikin lagi…terus saya coba buat blog lagi..template minima 3 kolom tapi daftar link yg saya buat di kiri,kanan, dan dibawah kok nga ,muncul help me…

      Komentar oleh Utar | 22 Desember 2007 | Balas

    3. @utar : seharusnya sebelum ganti template, sobat membuatkan sebuah backup. Agar nanti bisa di masukan kembali berbagai data yang sebelumnya

      Komentar oleh rohman | 22 Desember 2007 | Balas

    4. Ass..Kang rohman, trims banyak tips-tipsnya yang gampang diikuti.
      Saya mau tanya gimana caranya bikin garis pembatas antar sidebar atau dalam kolom postingan..thanks…

      Komentar oleh Saefudin Amsa | 10 Februari 2008 | Balas

    5. Hari ini telah ku edit warna sidebar papa blog ku…Terima kasih….

      Komentar oleh Kholish | 18 Februari 2008 | Balas

    6. top markotop!!!

      Komentar oleh DEWA..."TheArtMaker" | 22 Maret 2008 | Balas

    7. Coursework Good! Great way of knowled sharing

      Komentar oleh Dissertation Writing Services | 2 Mei 2008 | Balas

    8. om naza menyisipkan kode di main wrapper kok kolom postingnya tetap ngikut warna kolom sindebar. apanya yang salah ya om

      Komentar oleh NAZA LUCKZANA BANYU BENING | 11 Mei 2008 | Balas

    9. terima kaciiih banget. caca udah bisa buat warna berbeda. merdekaaaa

      Komentar oleh naza | 13 Mei 2008 | Balas

    10. thanks banget ya..

      Komentar oleh Anonymous | 17 Juni 2008 | Balas

    11. kang kalo untuk mengganti warnanya gimana ya???

      Komentar oleh andrian | 2 Agustus 2008 | Balas

    12. Thanks bgt y…

      Komentar oleh kawel | 21 Agustus 2008 | Balas


    Tinggalkan Balasan

    Isikan data di bawah atau klik salah satu ikon untuk log in:

    Logo WordPress.com

    You are commenting using your WordPress.com account. Logout / Ubah )

    Gambar Twitter

    You are commenting using your Twitter account. Logout / Ubah )

    Foto Facebook

    You are commenting using your Facebook account. Logout / Ubah )

    Foto Google+

    You are commenting using your Google+ account. Logout / Ubah )

    Connecting to %s

    %d blogger menyukai ini: