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 {
width: 990px;
position: relative;
clear:both;
margin: 0 auto;
color:#000;
float: center;
background:transparent;
padding: 15px 0 15px 0; }
#bottom h2 {
padding-left: 5px;
margin: 0 0 10px 0;
background:#0B3B0B;
color:#fff;
font-size: 18px;
letter-spacing: 1px;
border-bottom: 1px solid #000; }
#bottom ul{padding:0; margin:0; color:#333}
#bottom ul li{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvbP-hYrKL4Qrti_LZ4b2RkNe79gb-4cQmvyefcrs8vTNiige4yHmBD0vunx9Zs00yr0cHIkQEukz5nxXGf07C_y36Yq3VONfEHf8G0Yyhd1tnIIOEzbFub_Km5BjZT21sIyDLocKhrMXC/s320/d3.gif') no-repeat; list-style-type:none; margin:0 0 10px; padding:0 0 10px 20px; border-bottom:1px dashed #CCCCCC; }
#bottom li{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvbP-hYrKL4Qrti_LZ4b2RkNe79gb-4cQmvyefcrs8vTNiige4yHmBD0vunx9Zs00yr0cHIkQEukz5nxXGf07C_y36Yq3VONfEHf8G0Yyhd1tnIIOEzbFub_Km5BjZT21sIyDLocKhrMXC/s320/d3.gif') no-repeat; list-style-type: none; margin: 0 0 10px; padding-left: 20px; }
#bottom ul li a:hover {
background: #B1ACB1;}
#left-bottom { /* kolom kiri */
background:#ffffff; width: 300px;
float: left;
margin-left:10px;
padding:5px; /* Jarak antara text dengan garis pinggir */
Border-top: 2px solid #1B2A0A; /* warna garis pinggir atas */
Border-bottom: 2px solid #1B2A0A; /* warna garis pinggir bawah */
Border-left: 2px solid #1B2A0A; /* warna garis pinggir kiri */
Border-right: 2px solid #1B2A0A; /* warna garis pinggir kanan */
Margin-bottom: 30px; /* jarak antara kolom dengan garis bawah template */
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px; }
#center-bottom { /* kolom tengah */
background:#ffffff; width: 300px;
float: left;
margin-left:10px;
padding:5px; /* Jarak antara text dengan garis pinggir */
Border-top: 2px solid #1B2A0A; /* warna garis pinggir atas */
Border-bottom: 2px solid #1B2A0A; /* warna garis pinggir bawah */
Border-left: 2px solid #1B2A0A; /* warna garis pinggir kiri */
Border-right: 2px solid #1B2A0A; /* warna garis pinggir kanan */
Margin-bottom: 30px; /* jarak antara kolom dengan garis bawah template */
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px; }
#right-bottom { /* kolom kanan */
background:#ffffff; width: 300px;
float: left;
margin: 0 5px 0 10px;
padding:5px; /* Jarak antara text dengan garis pinggir */
Border-top: 2px solid #1B2A0A; /* warna garis pinggir atas */
Border-bottom: 2px solid #1B2A0A; /* warna garis pinggir bawah */
Border-left: 2px solid #1B2A0A; /* warna garis pinggir kiri */
Border-right: 2px solid #1B2A0A; /* warna garis pinggir kanan */
Margin-bottom: 30px; /* jarak antara kolom dengan garis bawah template */
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px}
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 #1B2A0ABorder-bottom: 2px solid #1B2A0ABorder-left: 2px solid #1B2A0ABorder-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
0 komentar:
Posting Komentar
Terima kasih atas komentar anda