menambahkan kolom baru di blog

 menambahkan kolom

baik itu membuat 2 kolom menjadi 3 kolom  maupun 4 kolom  atau bahkan lebih, jadi saya harapkan sobat blogger bisa berkreasi sendiri dengan panduan









  • Mengubah nilai ukuran width main-wrapper, sidebar-wrapper, dan outer-wrapper, biasanya header-wrapper, dan footer-wrapper mengikuti width outer-wrapper
  • Membuat definisi kolom baru pada section 2 (CSS)
  • Peletakan tag div baru pada section 3 (HTML)  yang sudah dideklarasikan di bagian section 2 (CSS)
  • Simpan dan lihat hasilnya


    • Saya akan memberikan penjelasan pada masing-masing poin di atas, saya harapkan sobat blogger dapat mengikuti dengan seksama, baca perlahan-lahan dan pahami setiap petunjuknya.

    Cara Membuat  atau Menambahkan Kolom Baru di Blogspot                         
    Mengubah  template 2 kolom menjadi 3 kolom Cara Membuat  atau Menambahkan Kolom Baru di Blogspot          
    Poin pertama dilakukan adalah mengubah nilai outer-wrapper, main-wrapper dan sidebar-wrapper, pada contoh ini saya menggunakan template minima standart dengan kode CSS defaultnya :


    #outer-wrapper {
      width: 660px;
      margin:0 auto;
      padding:10px;
      text-align:$startSide;
      font: $bodyfont;
      }

    #main-wrapper {
      width: 410px;
      float: $startSide;
      word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
      overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
      }

    #sidebar-wrapper {
      width: 220px;
     float: $endSide;
      word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
      overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
    }



    Perhatikan nilai yang di cetak tebal yang nantinya nilai tersebut akan kita rubah. Dapat dilihat pada kode tersebut untuk ukuran outer-wrapper:660px, main-wrapper:410px, dan sidebar-wrapper:220px. Kalau sobat perhatikan jumlah width main dan sidebar adalah 630px, di mana sisa 30px adalah untuk margin dan padding atau istilah sederhananya adalah jarak pembatas antara masing container.Cara Membuat  atau Menambahkan Kolom Baru di Blogspot                        

    Poin kedua adalah menambahkan elemen kolom baru dengan membuat nilai CSSnya, dan ubah juga nilai width outer-wrapper, main-wrapper dan sidebar-wrappernya sehingga akan seperti ini kode yang baru :


    #outer-wrapper {
      width: 750px;
      margin:0 auto;
      padding:10px;
      text-align:left;
      font: $bodyfont;
      }

    #main-wrapper {
      width: 400px;
      margin-left: 20px;
      float: $startSide;
      word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
      }

    #sidebar-wrapper {
      width: 150px;
     float: $endSide;  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
    }

    #sidebar-wrapper2 {
      width: 150px;
      float: left;
      word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
    }  


    Perhatikan juga nilai width yang di cetak tebal , yang pada umumnya penjumlahan main-wrapper dan sidebar-wrapper tidak melebihi nilai outer-wrapper ( Width Outer > Main + Sidebar), sisa kekurangan nilai widthnya umumnya di gunakan untuk margin dan padding agar nantinya tidak berdempetan masing-masing container.          Cara Membuat  atau Menambahkan Kolom Baru di Blogspot          
    Sedangkan untuk container baru di tandai dengan warna biru. Nilai 750px tidak harus mutlak, sobat bisa mengubah nilai tersebut dan sesuaikan dengan kebutuhan sobat dan jangan lupa juga mengubah nilai width main dan sidebarnya.     Cara Membuat  atau Menambahkan Kolom Baru di Blogspot          
    NB : Biasanya saya mencopy kode  #sidebar-wrapper dan mengubah id nya menjadi id baru con: #sidebar-wrapper2 kemudian mengubah nilai floatnya menjadi left
            Cara Membuat  atau Menambahkan Kolom Baru di Blogspot 
    Poin yang ketiga membuat tag div sidebar baru di bagian section 3 (HTML), sebelumnya saya akan kasih lihat default kode template  minima 2 kolom (no expand widget templates)


    <div id='main-wrapper'>
            <b:section class='main' id='main' showaddelement='no'>
    <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
    </b:section>
          </div>
          <div id='sidebar-wrapper'>
            <b:section class='sidebar' id='sidebar' preferred='yes'>
    </b:section>
          </div>

    Kemudian kita akan memasukkan tag div sidebar baru ke dalam structur templatenya  :     Cara Membuat  atau Menambahkan Kolom Baru di Blogspot         

    <div id='sidebar-wrapper2'>

       <b:section class='sidebar' id='sidebar2'>
    </b:section>
    </div>
    <div id='main-wrapper'>
            <b:section class='main' id='main' showaddelement='no'>
    <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
    </b:section>
          </div>
          <div id='sidebar-wrapper'>
            <b:section class='sidebar' id='sidebar' preferred='yes'>
    </b:section>
          </div>

    Perhatikan text yang berwarna biru yang merupakan tag div sidebar barunya, sedangkan untuk yang di highlight hijau adalah nilai section class yang mempunyai arti  tampillan maupun widget yang di dalam container baru tersebut mengikuti aturan class sidebar seperti nilai background, h2, text dan lain-lain yang di tandai dengan dot [.] con : .sidebar {....} jika sobat ingin memodifikasi tampilan cointainer baru silahkan buat class tersendiri con : .sidebar2 {.....} kemudian ubah section class dengan class yang sobat buat con : <b:section class='sidebar2' id='sidebar2'>,         Cara Membuat  atau Menambahkan Kolom Baru di Blogspot          
    sedangkan untuk text yang di highlight merah merupakan id yang harus unik atau berbeda dengan id lainnya.
    Pada poin ini sebenarnya sobat blogger bisa merubah layout template yang nantinya akan saya bahas lebih dalam lagi pada tutorial berikutnya.Cara Membuat  atau Menambahkan Kolom Baru di Blogspot                        
    Cara Membuat  atau Menambahkan Kolom Baru di Blogspot                        
    Poin yang keempat adalah simpan hasil pekerjaan sobat dan lihat hasilnya jika terdapat kesalahan pada layoutnya seperti misalnya sidebar baru posisinya jatuh ke bawah, yang perlu di lakukan adalah mengatur nilai width ataupun nilai margin dan paddingnya

    NB : Jangan lupa mengubah nilai width header dan footernya umumnya mengikuti nilai width outer

    sources for:datapendidik.blogspot.com

    Label: |