Minggu, 23 Agustus 2009

Membuat Kolom

Sebenarnya untuk membuat column baru lebih mudah daripada merubah column yang sudah ada. Kalau membuat sebuah kolom baru berarti kita membuat script yang sama seperti kolom terdahulu, dimana anda tinggal menambahkannya saja. Akan tetapi kalau anda merubah kolom yang sudah ada kita harus menyisipkan kode-kode tertentu didalam kode yang sudah ada.

Sekarang anggap saja kita akan membuat 2 column dibawah sidebar.

Untuk contoh kita akan merubah column sidebar:

#sidebar-wrap {
width:400px;
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 */
}

Karena kita akan membuat dua column dibawah sidebar tersebut maka kita harus membagi dua lebar sidebar diatasnya bahkan bisa lebih kecil karena harus dikurangi margin pinggir.
Ini hanya contoh:
1. Ganti kode #sidebar-wrap dengan kode baru ...contoh: #sidebarbawah-wrap
2. ubah lebar sidebar width:400px; menjadi width:180px;
3. untuk margin terserah apakah mau di rubah atau tidak

Hingga menjadi seperti ini:

#sidebarbawah-wrap {
width:180px;
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 */
}
karena kita akan membuat dua column letakan dibawahnya kode
#sidebarbawah1 {
}
hingga menjadi seperti ini

#sidebarbawah-wrap {
width:180px;
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 */
}
#sidebarbawah1 {
}

sekarang kita masukan kode tersebut terserah anda yang penting sesudah <head> dan sebelum </head&gt;
berarti kode yang harus kita buat selanjutnya adalah:
<div id="'sidebarbawah-wrap'">
<b:section class="'sidebarbawah'" id="'sidebarbawah'" preferred="'yes'">
</b:section>
</div>
<div id="'sidebarbawah-wrap'">
<b:section class="sidebarbawah1" id="sidebarbawah1" preferred="yes">
</b:section>
</div>

kemudian kita cari kode yang diawali dengan <div id="'sidebar-wrap'">
Contoh:
<div id="'sidebar-wrap'">
<b:section class="'sidebar'" id="'sidebar'" preferred="'yes'">
<b:widget id="'Profile1'" locked="'false'" title="'Mengenai" type="'Profile'/">
<b:widget id="'NewsBar2'" locked="'false'" title="''" type="'NewsBar'/">
</b:section>
</div>

letakan kode diatas diantara </b:section> .... </div>


hingga seperti ini
<div id="'sidebar-wrap'">
<b:section class="'sidebar'" id="'sidebar'" preferred="'yes'">
<b:widget id="'Profile1'" locked="'false'" title="'Mengenai" type="'Profile'/">
<b:widget id="'NewsBar2'" locked="'false'" title="''" type="'NewsBar'/">
</b:section>
<div id="'sidebarbawah-wrap'">
<b:section class="'sidebarbawah'" id="'sidebarbawah'" preferred="'yes'">
</b:section>
</div>
<div id="'sidebarbawah-wrap'">
<b:section class="sidebarbawah1" id="sidebarbawah1" preferred="yes">
</b:section>
</div>
</div>

yang harus di ingat setiap kode yang di awali dengan <div id= ......harus diakhiri dengan </div>

mengedit template sendiri harus sering mencoba bila terlalu lebar diperkecil kalau terlalu kecil ya di perlebar.

selamat mencoba

LOGIC| Cahyo

Membuat SCROLL di sidebar

Tentunya kita ingin menampilkan apa saja artikel yang telah ditulis atau beberapa artikel yang dianggap penting di Sidebar agar setiap pengunjung dapat dengan mudah melihat dan mengaksesnya. Atau mungkin daftar sesuatu yang membutuhkan tempat yang rapi dan teratur serta tidak melupakan keefisienan.
Seperti saya ingin menampilkan beberapa artikel yang terakhir sekali atau Recent Post saya buat, seperti dibawah ini :



Seperti yang diatas, saya menulisnya seperti ini:

<div style="overflow:auto;width:100%;height:250px;padding:10px;border:1px solid #eee">
<a href="http://ajarindong.blogspot.com/2009/06/cara-menghilangkan-tanda-obeng-di.html">Cara menghilangkan tanda Obeng di Template Blogger</a>
<br/>
<a href="http://ajarindong.blogspot.com/2009/06/cara-memasang-banner-ym.html">Cara memasang banner Yahoo!Messenger</a>
<br/>
<a href="http://ajarindong.blogspot.com/2009/06/cara-membuat-text-area.html">Cara membuat text area</a>
<br/>
</div>



Angka width:100% sengaja saya buat agar dapat menyesuaikan dengan lebar sidebar secara otomatis. Kemudian semua Url yang di cetak biru ganti dengan Url anda.