Bagaimana Cara Membuat Blog 3 Kolom

Bagaimana Cara Membuat Blog 3 Kolom-   Kali ini saya mengajak anda untuk mengetahui bagaimana cara membuat kolom di blog kita menjadi 3 kolom. Sebenarnya sudah banyak tutorial seperti ini di google, namun saya yakin masih banyak diantara anda yang belum mengetahuinya.

Ini adalah lanjutan dari tutorial kami sebelumnya, 'Bagaimana cara membuat blog di blogspot'

Dan disini saya akan mencoba tambahkan kode UL LI pada kolom, sehingga jika sobat 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. Klik Tata Letak
2. Pilih Edit HTML dan centang Expand Template Widget
3. 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/AVvXsEi504ArQEuqyyl-BT2gXtAy0dxxp8wD4lD9VvgKuJYIhnbI5oIbB5ZCmVw0w4CkZO4KeJ9SNTDN3kAFHV_bi887VTN42MkzBSPGZ_7DmceAEXjRhONxA5ASBLGkoPCKUV6PKia2isHTBMyQ/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/AVvXsEi504ArQEuqyyl-BT2gXtAy0dxxp8wD4lD9VvgKuJYIhnbI5oIbB5ZCmVw0w4CkZO4KeJ9SNTDN3kAFHV_bi887VTN42MkzBSPGZ_7DmceAEXjRhONxA5ASBLGkoPCKUV6PKia2isHTBMyQ/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}

4 . 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>

5.  Letakkan 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>

6. Kemudian simpan Template anda.

Sekarang agan bisa lihat hasilnya, jika tidak sesuai, silahkan sobat ganti sesuai keinginan sobat.

Keterangan :

• #bottom { width: 990px
  --> lebar kolom keseluruhan, sesuaikan dengan lebar template sobat.
  
• 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 sobat 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 sobat tidak mau memakai garis pinggir, sobat ganti saja angka 2px dengan 0px. Dan kode #1B2A0A adalah warna border / garis pinggir kolom.

Sedangkan kode yang berwarna merah adalah icon untuk kode ul li, saya punya beberapa gambar berserta url nya dibawah ini, sesuaikan dengan keinginan sobat. Pilih salah satu, dan copas pada kode yang berwarna merah.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0uIcdfAiwLe9ruibMw_Y7CkFh5iH-VA6g1F3vcAr6kXHz4zSP21IL0sRf2qtbZ4TGWVONx_bsUdCr7DCM8CN9Qoj4pxViz3OzPDsDDq8Bmu1xfzCQIvzwoiNsK82Fs3r2YBXrQhAy5-sO/s320/z3.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7Sd8oo6elNyQouuU9UjlLeumEBclklWzVg1kR7o2anXu2KhNxUvUDR1dU-iDpAKkF7yK1NgPrRwBQe01tPFiR_jVzn6rF3zuK4NggADwzpt36Mw2rEOKxmlUQTRypNmnFh0ZwV_rB0sPf/s320/z2.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjH_sE2UQNQ3ksw0b7c11egsX5jicB1xTXYJD4OESWdocV6f5YpSLzdjqsERscZ-yqces4COH2WPdoT3bwyBFV7BoCJzrg3yvgGWZlmvRbrafAvZnk0KFZYF3IjozUIKsdhNFwMY6k7cHuj/s320/z1.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBmYY_GFzJE3VQwSC66ok05C1UFYNdS6_IbPWtWxcJPOWVX42gmVG-VMLDOH7Q072HVtfL_mIlUcKGoZc-h4QoWgNPamj1mX_2OSMcJsRAHfBlkOF0GKoa5W9-Z2t3UElcHkalainCKrdj/s320/d1.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcqMXsASxrxDfvx7HY7Ax1kpYj-bt2Qtz2VOrk04JFRStUrT-91GWCtFU5JE1fYzToue2UvhKzWUaIhS2_a2YJWFnRoEIS992Al8ZWSMuP_ftvL6ZDqbQIajJY_Yrjxe3wnTlRnsXE4hSS/s320/d2.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi504ArQEuqyyl-BT2gXtAy0dxxp8wD4lD9VvgKuJYIhnbI5oIbB5ZCmVw0w4CkZO4KeJ9SNTDN3kAFHV_bi887VTN42MkzBSPGZ_7DmceAEXjRhONxA5ASBLGkoPCKUV6PKia2isHTBMyQ/s320/d3.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEin8cQZOlRJbs4c-_61TKNWq7f6LiPeeZ2AfDzhAqVY5KEtM4WGpElNJxeYephpy57bNIS-KJYd_fcaBNOk4QODhHvXd0Xs8RnSBvUNUmPfo0tpqxncVeLp2OPHHV4uCaJc3wKY71bZSxZ1/s320/c1.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiN714ao07bMHjeXk4mkPnxY2Y55rBnmnX5VtvmoGC-_-VRSUrXkEVW0RDgp2UO-zKu7-EU4FsjXbA0kCCOSZkgbYUThKCwMLE89RqYSOTPbiwoq7O-1AlGVwKeaifv2QXpJBtSyJqiyFrp/s320/c2.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNPzPt6S40jHBNGjhbnKZA6_TocOB1EDGvjxNzln99lhXZm0hVF8JjM10jWS78X8NERyLw7pSaoA0EVy-P6sAk3txMUzrR0C7VC4qGcdR20exilaIP9WVq-7hJIZXOE6zfir1fbe6ZST9t/s320/c3.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv89hSXfOayoq_Gt66nziqc4ZhdIqswDIZmBgonLFgfqaOmhJ_g_dMFAFGfvLcMmpkdlRJV7QiPDa5-RrqyAfvN7ShyphenhyphenDyWy0jO5J6QeNxVzkbcaqvFhgXa6x1o1bahj5iAYrBShBFuItvC/s320/a1.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimMpgsTcLabkaM4FZWV2hrKbMkF2l-g8te4XUVo8ET9s4M7HtB9fYuO154_76hjH1_uofNmvO0Jmvwfut2-ZUffQ_PP1Kx3l7dsgtZecSDFsQM0uyXWO6cfNMclO36ETIxhC2GT3c4NFci/s320/a2.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLRf5XLhPZepjkdf09ckEzITEHUjWMa2ftLoh5Xus5SfLGDe1TrAjkN960_coacSvfz_sF0DPBAESmRVhKIk0EzCNglzu0h0LSLQxfjTEagSx888oJC58suTrHMKDgvBrS7tHDGmzZy_TR/s320/a3.gif

Untuk melihat hasilnya, silahkan sobat pasang recent posts atau recent comments pada kolom tersebut, maka akan terlihat bentuk icon pilihan sobat.

Good Luck, ya gan..!!

Bagaimana Cara Membuat Blog 3 Kolom