MA MUALLIMIN NW BORO'TUMBUH: Cara Membuat atau Menambahkan Kolom Baru di Blogspot
SITUS PRESIDEN RI

Selasa, 06 Maret 2012

Cara Membuat atau Menambahkan Kolom Baru di Blogspot

Bagaimana cara membuat atau menambahkan kolom baru di blogspot ? Pada tutorial ringan ini saya akan coba sedikit memberikan konsep yang sangat sederhana bagaimana cara membuat atau menambahkan kolom baru di blogspot, Cara Membuat  atau Menambahkan Kolom Baru di Blogspot          
baik itu membuat 2 kolom menjadi 3 kolom  maupun 4 kolom  atau bahkan lebih, jadi saya harapkan sobat blogger bisa berkreasi sendiri dengan panduan Cara Membuat  atau Menambahkan Kolom Baru di Blogspot                        
konsep dasar membuat kolom  baru  di blogspot. Saya akan berikan contoh dan ilustrasi sederhana dengan template 2 kolom, Cara Membuat  atau Menambahkan Kolom Baru di Blogspot                        
di mana sobat blogger ingin mengubah layout template 2 kolom ini menjadi 3 kolom. Seperti biasa saya menggunakan contoh dengan template minima.
Konsep dasar untuk membuat kolom baru :Cara Membuat  atau Menambahkan Kolom Baru di Blogspot          
  1. Mengubah nilai ukuran width main-wrapper, sidebar-wrapper, dan outer-wrapper, biasanya header-wrapper, dan footer-wrapper mengikuti width outer-wrapper
  2. Membuat definisi kolom baru pada section 2 (CSS)
  3. Peletakan tag div baru pada section 3 (HTML)  yang sudah dideklarasikan di bagian section 2 (CSS)
  4. Simpan dan lihat hasilnyaCara Membuat  atau Menambahkan Kolom Baru di Blogspot                        
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         

Cara Membuat  atau Menambahkan Kolom Baru di Blogspot                         
Mengubah  template 2 kolom menjadi 3 kolom Cara Membuat  atau Menambahkan Kolom Baru di Blogspot          
 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 :Cara Membuat  atau Menambahkan Kolom Baru di Blogspot          


#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 */
}


Cara Membuat  atau Menambahkan Kolom Baru di Blogspot         
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 :
       Cara Membuat  atau Menambahkan Kolom Baru di Blogspot          

#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 */
}  

        Cara Membuat  atau Menambahkan Kolom Baru di Blogspot              
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) :    Cara Membuat  atau Menambahkan Kolom Baru di Blogspot          

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

        Cara Membuat  atau Menambahkan Kolom Baru di Blogspot        
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. Cara Membuat  atau Menambahkan Kolom Baru di Blogspot 
Gunakan prinsip trial and error! Semoga berhasil mengubah layout 2 kolom template sobat blogger  menjadi 3 kolom atau lebih dengan konsep dasar di atas.
NB : Jangan lupa mengubah nilai width header dan footernya umumnya mengikuti nilai width outer Cara Membuat  atau Menambahkan Kolom Baru di Blogspot
ARTIKEL SERBA SERBI
ARTIKEL PENDIDIKAN LAINNYA
ARTIKEL TUTORIAL BLOG LAINNYA
Cara Mengukur Kekuatan Keyword 

Tidak ada komentar:

Poskan Komentar

Entri Populer