DeddyCamp.com |
Posted: 08 Jul 2010 11:35 PM PDT Tutorial blog kali ini membahas tentang design template, multi kolom, pasti sudah banyak yang tau apa itu multi kolom, tapi saya yakin masih sedikit yang mengetahui cara membuatnya. Kali ini kita akan membuat muliti kolom tepat dibawah halaman blog kita atau biasanya letaknya dibawah kolom postingan, ambil contohnya saja yang ada di blog ini dimana saya membuat 3 kolom pada bagian bawah template. Banyak variasi yang bisa anda buat untuk mempercantik kolom-kolom ini. Dan disini saya akan mencoba tambahkan kode UL LI pada kolom, sehingga jika anda menggunakan kode ini, maka akan secara otomatis membentuk tulisan yang disertai garis putus-putus dibawah tulisan dan icon cantik yang mengawali tulisan. Kali ini saya akan gunakan template yang lebarnya 1000px sehingga saya menggunakan lebar kolom 990px. Baiklah, langsung praktek aja ya biar tau. 1. Seperti biasa login dulu ke blogger. 2. Klik Rancangan. 3. Pilih Edit HTML dan centang Expand Template Widget. 4. Tambahkan kode berikut tepat diatas kode ]]></b:skin> : #bottom { 5. Sekarang tuju bagian body atau bagian bawah template, lalu cari kode yang mirip dengan kode berikut : <div id='footer-wrapper'> <b:section class='footer' id='footer'/> </div> 6. Copas kode berikut ini tepat sebelum kode diatas : <div id='bottom'> <b:section class='bottom' id='left-bottom'/> <b:section class='bottom' id='center-bottom'/> <b:section class='bottom' id='right-bottom'/> </div> 7. Kemudian Simpan Template Anda. Sekarang anda bisa lihat hasilnya, jika tidak sesuai, silahkan anda ganti sesuai keinginan anda. Keterangan : #bottom { width: 990px --> lebar kolom keseluruhan, sesuaikan dengan lebar template anda. background:#0B3B0B --> latar belakang (background kolom). color:#fff --> warna tulisan judul #left-bottom { /* kolom kiri */ width: 300px --> lebar kolom kiri. -moz-border-radius-bottomleft:5px; -moz-border-radius-bottomright:5px; -moz-border-radius-topleft:5px; -moz-border-radius-topright:5px; --> garis melengkung pada setiap ujung kolom, semakin besar angkanya maka akan semakin lebar garis lengkungnya. Jika anda enggan membuat kolom melengkung, ganti saja angka 5px dan ganti dengan 0px. Atau hapus semua kode -moz-border-radius tersebut. Border-top: 2px solid #1B2A0A Border-bottom: 2px solid #1B2A0A Border-left: 2px solid #1B2A0A Border-right: 2px solid #1B2A0A --> untuk ketebalan garis pinggir masing-masing kolom, semakin besar angkanya maka akan semakin tebal garisnya. Jika anda tidak mau memakai garis pinggir, anda ganti saja angka 2px dengan 0px. Dan kode #1B2A0A adalah warna border / garis pinggir kolom. Untuk kode warna bisa di lihat disini. Sedangkan kode yang berwarna merah adalah icon untuk kode ul li, saya punya beberapa gambar berserta url nya dibawah ini, sesuaikan dengan keinginan anda. Pilih salah satu, dan copas pada kode yang berwarna merah. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkz8j6BWiqFXrzRmo6dvqtohIHfzTSz7kKec-icxKQ83M2jcD__7hpd1s9gP1r9j_t5a0Qujn4QiIZJ0kxeglu03EZKGluLjAP9PBEdKcqLQIDuYuOLkNrsC3TJ-JjIrW_K4nx5inyW9_1/s320/z3.gif https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij2Sp7X3DSTe9S7sN2kVDGy-hhgdmu4jELIVS_nqp8lOKh5rsV7wKA6SrVDpbkpY7DZu4EsgEDcwPSR1auSZOzNe6jRhJ5-Y3RML_m-UIZR712a4x1Y_pPZhWuEk3BZSqW1KbQhcNZy1QT/s320/d1.gif https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjN0tJFrht15d0W7D31fHgFZNkVVmpeVtEsMEM2JG4i4n-CB3i9Q8CD9hBzeg_mI9taxcMZXkj2h5QELq1EFlKdO3ILlkg7_g7-Hfsn_4Njk0ns8jKPKX77BpRWMT8WEDhN9ayp_nFh8Zle/s320/c3.gif https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUYUs6GJgLoPpiAQD6QhkZnS-Xvz5lJGBKR_nWEaO52OQ-7xfFIHeG0G5i1Nr_sTyhC8nMUe0a3f_s4jWL0DfL8cTmSYgZdn2oUh5kNug9IE2ag6sHaecPf1lU6TYTQD4VlmHtezDepkm7/s320/a2.gif Untuk melihat hasilnya, silahkan anda pasang recent posts atau recent comments pada kolom tersebut, maka akan terlihat bentuk icon pilihan anda. Selamat Mencoba |
You are subscribed to email updates from Tutorial Blog | Business | All in One To stop receiving these emails, you may unsubscribe now. | Email delivery powered by Google |
Google Inc., 20 West Kinzie, Chicago IL USA 60610 |
0 komentar:
Posting Komentar
Terima kasih atas komentar anda