silahkan buat dollar anda di indoptc sekarang juga

Saturday, February 14, 2009

Menambah Kolom Sidebar Menjadi Dua

kali ini saya bahas menambah sidebar pada template minima (template baru/XML) yang perlu diperhatikan adalah bagian Outer-Wrapper karena pada bagiaqn ini biasanya tempat untuk mengatus post dan side bar, next


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


Seperti saya singgung diatas bahwa Outer-Wrapper merupakan wadah untuk menyimpan main-wrapper serta sidebar-wrapper. Jadi jika kita ingin menambah kolom baru atau dengan kata lain sidebar baru, maka hal yang pertama wajib di lakukan adalah menambah nilai lebar dari Outer-wrapper itu sendiri.

Sekarang bagaimanakah cara menambahkan kolom baru? Yang pertama harus di pikirkan adalah berapakah lebar kolom baru yang mau kita buat. Ok, biar sejalan saya ambil contoh lebar yang akan di buat adalah sebesar 180 pixel, jadi secara otomatis kita harus merubah lebar dari Outer-wrapper terlebih dahulu, sehingga secara kasar lebar outer-wrapper menjadi : 410 pixel + 220 pixel + 180 pixel + 20 pixel = 830 pixel, biar ada sedikt sela, maka kita tambah 10 pixel sehingga nilainya menjadi 840 pixel. Untuk menambah kode sidebar baru, saya beri contoh seperti ini :

#sidebarbaru-wrapper {
width: 180px;
float: right;
padding-left:10px;
word-wrap: break-word;
overflow: hidden;
}


Maka apabila di tambahkan kodenya jadi seperti ini :


/* Outer-Wrapper
------------------------------------------ */
#outer-wrapper {
width: 840px;
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;
padding-left:10px; /* yg ini tambahan juga biar tampak ada jarak sela */
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 */
}
#sidebarbaru-wrapper {
width: 180px;
float: right;
padding-left:10px;
word-wrap: break-word;
overflow: hidden;
}


Itu merupakan langkah pertama yang kita lakukan. langkah yang kedua adalah kita harus membuat kode yang di pasang pada bagian body. Sebagai contoh pada template diatas, kode id untuk sidebar adalah seperti ini :



Maka kewajiban selanjutnya adalah memasang kode untuk id sidebarbaru yang akan kita buat, kodenya seperti ini :



Apabila di padukan, simpanlah kode sidebaru di bawah kode sidebar yang asli, kodenya kira-kira seperti ini :





Kolom baru yang kita buat sudah tercipta. Agar tampak lebih menarik, maka sebaiknya kita pun mengubah lebar dari header serta footer dengan nilai yang sama untuk Outer-wrapper yaitu sebesar 900 px.


  • Sign in di blogger

  • Klik menu Layout

  • Klik menu Edit HTML

  • Ingat ! jangan memberi tanda centang pada kotak kecil di samping tulisan Expand Widget Template, sekali lagi jangan mencentangnya, karena jika sobat mencentangnya nanti akan keluar kode-kode widget yang memusingkan kepala.

  • Cari kode seperti di bawah ini :



  • ganti nilai 660px dengan 840px, sehingga kodenya jadi seperti ini :




  • Cari kode seperti di bawah ini :



  • ganti nilai 660px menjadi 840px, sehingga kodenya menjadi seperti ini :



  • cari kode seperti di bawah ini :



  • Copy paste kode berikut persis di bawah kode yang seperti di atas :




  • Cari kode seperti di bawah ini :




  • Ganti nilai 660px menjadi 840 px, sehingga kodenya akan seperti ini :




  • Cari kode seperti di bawah ini :



  • Copy kode berikut, lalu paste persis di bawah kode yang seperti di atas :




  • Klik tombol Simpan Template

  • Selesai.

    Untuk melihat efek hasilnya, silahkan klik Elemen Halaman apakah sudah berformasi tiga kolom atau belum? jika sudah, silahkan isi sidebar tersebut dengan apa saja lalu lihatlah hasil nyatanya.


  • Jika anda mau memodifikasi sidebar supaya ada di kanan dan kiri maka anda harus merubah sedikit dari tutorial diatas, cari kode seperti ini

    #sidebarbaru-wrapper {
    width: 180px;
    float: right;
    padding-left:10px;
    word-wrap: break-word;
    overflow: hidden;
    }

    sobat perlu sedikit mengubah kode yang saya cetak merah menjadi seperti ini :



    #sidebarbaru-wrapper {


    width: 180px;


    float: left;


    padding-right:10px;


    word-wrap: break-word;


    overflow: hidden;


    }

    Terlihat pada huruf yang saya cetak ijo bahwa yang di ubah hanyalah dua baris kode saja, yang lainnya tidak perlu di ubah.

    Jika sudah selesai mengubahnya, jangan lupa untuk menutupnya dengan menekan tombol simpan template.

    Langkah selanjutnya adalah menuju ke bagian bawah template, yaitu pada bagian body,
    jika dulu saya menyarankan agar kode sidebaru di tempatkan seperti ini :

    <div id=’sidebar-wrapper’>
    <b:section class=’sidebar’ id=’sidebar’ preferred=’yes’>
    <b:widget id=’Profile1′ locked=’false’ title=’Mengenai Saya’ type=’Profile’/>
    <b:widget id=’BlogArchive1′ locked=’false’ title=’Arsip Blog’ type=’BlogArchive’/>
    </b:section>
    </div>

    <div id=’sidebarbaru-wrapper’>
    <b:section class=’sidebar’ id=’sidebarbaru’ preferred=’yes’/>
    </div>



    Maka apabila sidebar baru ingin di tempatkan di sebelah kiri, maka kode sidebar baru harus di pindahkan
    di atas kode main (posting) sehingga kodenya kira-kira akan menjadi seperti ini :

    <div id=’sidebarbaru-wrapper’> <!– perhatikan yang ini –>
    <b:section class=’sidebar’ id=’sidebarbaru’ preferred=’ye’/'>
    </div>

    <div id=’main-wrapper’> <!– perhatikan yang ini –>
    <b:section class=’main’ id=’main’ showaddelement=’no’>
    <b:widget id=’Blog1′ locked=’true’ title=’Posting Blog’ type=’Blog’/>
    </b:section>
    </div>

    <div id=’sidebar-wrapper’>
    <b:section class=’sidebar’ id=’sidebar’ preferred=’yes’>
    <b:widget id=’Profile1′ locked=’false’ title=’Mengenai Saya’ type=’Profile’/>
    <b:widget id=’BlogArchive1′ locked=’false’ title=’Arsip Blog’ type=’BlogArchive’/>
    </b:section>Rata Kiri
    </div>

    Apabila sudah selesai menempatkan kode sidebar baru, silahkan akhiri dengan menekan tombol Simpan Template, selesai.
    Silahkan lihat hasilnya !


    Komentar :

    ada 1
    Albert Pynstein said...
    pada hari 

    gagal juga mas, gimana ya caranya tolong dong di bantu.
    alamat blog saya ini mas :
    http://albertpynstein.blogspot.com
    trims atas perhatiannya

    Post a Comment

     

    Followers

    Blogroll

    mengapa dpr kita bisa bicra seperti itu ya, berkata bangsat saat rapat kayak orang yang gak tau tata krama dan etika saj .!!!!!!!!