Tips Membuat Multi Kolom

Diposting oleh -True Violet- Senin, 19 Oktober 2009
Langkah #1 :

  • Hal pertama yang harus di ingat adalah jangan mencentang kotak kecil di samping tulisan expand widget template karena jika sobat mencontengnya maka akan keluar kode widget yang bikin pusing kepala, jadi sekali lagi Jangan mencontengnya.


  • Tambahkan kode berikut persis di atas kode ]]> :


  • /* 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;
    }



  • Tuju bagian body yaitu pada bagian bawah kode template, dan cari kode yang mirip seperti ini :






  • Copy paste kode berikut persis di atas kode yang atas tadi :




  • Jangan lupa akhiri dengan mengklik tombol Simpan Template.


  • Selesai.



  • Langkah #2 :

  • Klik menu Elemen Halaman.


  • Lihat apakah kolom yang tadi dibuat sudah tampak atau belum? jika sudah, klik link Tambah sebuah Elemen Halaman, klik tombol TAMBAHKAN KE BLOG di bawah tulisan Feed, untuk sekedar mencoba, silahkan isikan dengan alamat berikut :


  • http://template-unik.blogspot.com/atom.xml

    atau

    http://rubrik-elektronik.blogspot.com/atom.xml

    atau juga yang ini :

    http://kolom-tutorial.blogspot.com/atom.xml

    Jangan lupa untuk klik tombol SIMPAN

  • Silahkan lihat hasilnya apakah sudah sukses atau belum? jika belum sukses coba lihat lagi lanhkah-langkah di atas, barangkali ada yang terlewatkan. Jika sudah sukses, ucapkan terima kasih kepada kang rohman



  • Masih kurang percaya dengan yang saya tulis, bolehlah lihat contoh jadinya. Silahkan klik di sini! atau jika ingin melihat aplikasi lain dari kode di atas bisa di lihat di sini!

    Pembuatan kolom yang seperti di atas, kebanyakan di gunakan untuk Recent Post atau juga Recent Comments. Untuk membuat Recent Posts atau juga Recents Comments akan saya bahas pada postingan berikutnya.

    Selamat bereksperimen !

    1 Responses to Tips Membuat Multi Kolom

    1. Tes..

       

    Posting Komentar

    Blogumulus by Roy Tanck and Amanda FazaniInstalled by CahayaBiru.com

    Followers