Apapun yang terjadi kepada Anda, akan tetap menjadi sesuatu yang menguatkan Anda, bila Anda tidak mengijinkannya untuk melemahkan Anda.Maka mulailah dari tempat di mana Anda berada, dan mulailah sekarang. Anda sampai, hanya karena Anda berangkat.Dan ingatlah, bahwa Batas waktu itu dibuat bukan karena Anda harus selesai, tetapi karena Anda harus segera memulai. Dan setelah pengertian ini mendapatkan tempat yang kuat di hati Anda, perjelaslah bagi diri Anda sendiri, bahwa Keberhasilan Anda ada pada tempat yang lebih tinggi dari yang sedang Anda kerjakan sekarang. Kemudian, janganlah berlaku seperti orang yang mengeluhkan apa saja yang tidak terlihat di dalam sebuah gambar, Berfokuslah pada yang telah jelas terlihat, karena dari sana lah Anda mencapai tempat-tempat yang belum terlihat bahkan oleh imajinasi Anda. Lalu bekerja keraslah dalam kedamaian bahwa Anda telah melakukan yang benar. Janganlah berupaya menjelaskan mengapa Anda tidak mencapai yang belum Anda capai. Bekerjalah untuk mencapai yang telah jelas bagi Anda. Maka, Mulailah keberhasilan Anda dari mana pun Anda berada.(Mario Teguh)

20 Mar 2009

Cara Membuat kolom baru di blogspot

Blog adalah media ekspresi yang memberikan fasilitas para blogger untuk mengeksplorasi berbagai hal sekaligus berbagi. Karenanya page blog juga baiknya dapat mengakomodasi hal tersebut (wuih....seriuz amat kang...). Intinya, gimana sich cara buat halaman blog yang luas and bisa banyak dipost berbagai hal yang bermanfaat. Jawabannya....apa yah...? Yaa...h salah satunya tambahin kolomnya dunk.... Untuk template klasik (template saya juga lho..)biasanya hanya menyediakan dua kolom.

Pi, posting dan penambahan gadget kita kan kian hari kian banyak tuh, supaya punya medan halaman yang luas kita perlu nambah halaman...,intinyaaaaa....! Hahah.............INI DIA CARA NAMBAHIN KOLOM,saya dapat dari blognya Mas atau Kang atau Pak Subagya di http://subagya.blogspot.com. (Makacih aa kang)

Sung aja, saya akan berikan contoh dan ilustrasi sederhana dengan template 2 kolom, di mana sobat blogger ingin mengubah layout template 2 kolom ini menjadi 3 kolom. Temen2 tinggal liat aja tulisan yang dicetak tebal, seprti biasa masuk dulu ke EDIT HTML.

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.

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. 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.
NB : Biasanya saya mencopy kode #sidebar-wrapper dan mengubah id nya menjadi id baru con: #sidebar-wrapper2 kemudian mengubah nilai floatnya menjadi left

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 :


<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 : , 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.

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

COPYRIGHT TEXT MILIK KANG SUBAGYA

1 komentar:

  1. Hebat nich kanthymos, tutorial buat sidebar barunya bener2 jitu, gua add yach banner-nya di blog gue he he he

    BalasHapus

SOBAT KANG JURED