Cara Membuat Tiga Kolom di Bawah Postingan


Cara Membuat Tiga Kolom di Bawah Postingan. hai sobat-sobat My Information, kembali lagi dengan saya. nah, pada tutorial kali ini saya akan menjelaskan cara membuat tiga kolom di bawah postingan blog. dengan membuat kolom tersebut, kita dapat menyimpan sebuah widget yang telah kita buat. oh iya, cara ini sudah sangat teruji dan terbukti berhasil. lihat screen short dari menu rancangan blog saya. bagaimana? tertarik juga? kalau tertarik silahkan ikuti tutorialnya di bawah ini  :

  • /* bottom
    ---------------------------- */ #bottom {
    width: 660px;
    position: relative;
    clear:both;
    margin: 0 auto;
    color:#fff;
    float: left;
    background:#BDBABD;
    padding: 15px 0 15px 0;
    }
    #bottom h2 {
    padding: 5px 0 2px 0;
    margin: 0 0 10px 0;
    color:#ff5a00;
    font-size: 24px;
    letter-spacing: -1px;
    border-bottom: 1px solid #fff;
    }

    #bottom ul {
    padding: 0;
    margin: 0;
    }
    #bottom ul li {
    line-height: 26px;
    list-style-type: none;
    border-bottom: 1px dashed #031c5d;
    }
    #bottom ul li a {
    display: block;
    padding: 0 10px;
    color:#0701FD;
    text-decoration: none;
    }
    #bottom ul li a:hover {
    background: #B1ACB1;
    }

    #left-bottom { /* yang ini nih kode kolom kiri */
    width: 205px;
    float: left;
    padding-left:10px;
    }
    #center-bottom { /* kalo yg ini kode kolom tengah */
    width: 205px;
    float: left;
    padding-left:10px;
    }
    #right-bottom { /* kalo yg ini kode kolom kanan */
    width: 205px;
    float: left;
    padding: 0 5px 0 10px;
    }
  • kemudian lihat pada kode </body>, dan cari kode yang mirip seperti ini 
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>
  • copas kode berikut di atas kode yang mirip tadi
  • <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>
  • masih ada lho kawann, yaitu simpan templatenya hahaha
Dapatkan update artikel terbaru kami langsung ke email anda
pasang iklan murah