Catatan Galung: Tips menambah kolom pada template baru

Karena banyaknya pertanyaan seputar bagaimana cara menambah kolom pada blog, akhirnya saya meluangkan waktu untuk menulis artikel ini. Sebenarnya untuk menambah sebuah kolom baru bukanlah sebuah hal yang terlalu sulit, akan tetapi tetap saja perlu sedikit pengetahuan untuk melakukannya.

Pada kesempatan kali ini saya tidak akan menerangkan bagaimana cara membuat kolom dengan bantuan gambar, akan tetapi seperti biasa saya akan menggunakan template Minima yang merupakan template resmi yang di sediakan blogger yang notabene tidak menggunakan gambar.

Jika mengacu kepada standarisasi dari template blogger, maka sebuah template akan mempunyai tiga elemen penting, yaitu :

Elemen Header

Elemen Outer

Elemen Footer

Untuk elemen Outer di bagi kembali menjadi :

Elemen main, elemen main ini adalah elemen tempat kita menyimpan posting, jadi apabila kita memposting sebuah artikel maka akan masuk dan di tampilkan pada elemen ini

Elemen Sidebar, elemen sidebar ini adalah merupakan elemen untuk menyimpan berbagai blog tools ataupun aksesori yang kita inginkan untuk mempercantik blog.

Akibat ketidak puasan dari sidebar yang hanya satu buah, maka jika kita menginginkan adanya sidebar tambahan maka kita tentu saja harus menambahnya sendiri, agar sedikit jelas maka akan saya perlihatkan kode template asli dari template minima (template baru/XML)


  

 
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

  &lt;html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'&gt;

<head>

<b:include data='blog' name='all-head-content'/>

<title><data:blog.pageTitle/></title>

<b:skin><![CDATA[/*

-----------------------------------------------

Blogger Template Style

Name: Minima

Designer: Douglas Bowman

URL: www.stopdesign.com

Date: 26 Feb 2004

Updated by: Blogger Team

----------------------------------------------- */
/* Variable definitions

  ====================

<Variable name="bgcolor" description="Page Background Color"

  type="color" default="#fff" value="#ffffff">

<Variable name="textcolor" description="Text Color"

  type="color" default="#333" value="#333333">

<Variable name="linkcolor" description="Link Color"

  type="color" default="#58a" value="#5588aa">

<Variable name="pagetitlecolor" description="Blog Title Color"

  type="color" default="#666" value="#666666">

<Variable name="descriptioncolor" description="Blog Description Color"

  type="color" default="#999" value="#999999">

<Variable name="titlecolor" description="Post Title Color"

  type="color" default="#c60" value="#cc6600">

<Variable name="bordercolor" description="Border Color"

  type="color" default="#ccc" value="#cccccc">

<Variable name="sidebarcolor" description="Sidebar Title Color"

  type="color" default="#999" value="#999999">

<Variable name="sidebartextcolor" description="Sidebar Text Color"

  type="color" default="#666" value="#666666">

<Variable name="visitedlinkcolor" description="Visited Link Color"

  type="color" default="#999" value="#999999">

<Variable name="bodyfont" description="Text Font"

  type="font" default="normal normal 100% Georgia, Serif" value="normal normal 100% Georgia, Serif">

<Variable name="headerfont" description="Sidebar Title Font"

  type="font"

  default="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif" value="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif">

<Variable name="pagetitlefont" description="Blog Title Font"

  type="font"

  default="normal normal 200% Georgia, Serif" value="normal normal 200% Georgia, Serif">

<Variable name="descriptionfont" description="Blog Description Font"

  type="font"

  default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif">

<Variable name="postfooterfont" description="Post Footer Font"

  type="font"

  default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif">

  */

/* Use this with templates/template-twocol.html */

body {

  background:$bgcolor;

  margin:0;

  color:$textcolor;

  font:x-small Georgia Serif;

  font-size/* */:/**/small;

  font-size: /**/small;

  text-align: center;

  }

  a:link {

  color:$linkcolor;

  text-decoration:none;

  }

  a:visited {

  color:$visitedlinkcolor;

  text-decoration:none;

  }

  a:hover {

  color:$titlecolor;

  text-decoration:underline;

  }

  a img {

  border-width:0;

  }

/* Header

  --------------------------------------- */

#header-wrapper {

  width:660px;

  margin:0 auto 10px;

  border:1px solid $bordercolor;

  }

#header-inner {

  background-position: center;

  margin-left: auto;

  margin-right: auto;

  }

#header { 

  margin: 5px;

  border: 1px solid $bordercolor;

  text-align: center;

  color:$pagetitlecolor;

  }

#header h1 {

  margin:5px 5px 0;

  padding:15px 20px .25em;

  line-height:1.2em;

  text-transform:uppercase;

  letter-spacing:.2em;

  font: $pagetitlefont;

  }

#header a {

  color:$pagetitlecolor;

  text-decoration:none;

  }

#header a:hover {

  color:$pagetitlecolor;

  }

#header .description {

  margin:0 5px 5px;

  padding:0 20px 15px;

  max-width:700px;

  text-transform:uppercase;

  letter-spacing:.2em;

  line-height: 1.4em;

  font: $descriptionfont;

  color: $descriptioncolor;

  }

#header img {

  margin-left: auto;

  margin-right: auto;

  }


/* Outer-Wrapper

  ------------------------------------------ */

  #outer-wrapper {

  width: 660px;

  margin:0 auto;

  padding:10px;

  text-align:left;

  font: $bodyfont;

  }

#main-wrapper {

  width: 410px;

  float: left;

  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: right;

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

  }


/* Headings

  ------------------------------------------- */

h2 {

  margin:1.5em 0 .75em;

  font:$headerfont;

  line-height: 1.4em;

  text-transform:uppercase;

  letter-spacing:.2em;

  color:$sidebarcolor;

  }


/* Posts

  ------------------------------------------ */

  h2.date-header {

  margin:1.5em 0 .5em;

  }

.post {

  margin:.5em 0 1.5em;

  border-bottom:1px dotted $bordercolor;

  padding-bottom:1.5em;

  }

  .post h3 {

  margin:.25em 0 0;

  padding:0 0 4px;

  font-size:140%;

  font-weight:normal;

  line-height:1.4em;

  color:$titlecolor;

  }

.post h3 a, .post h3 a:visited, .post h3 strong {

  display:block;

  text-decoration:none;

  color:$titlecolor;

  font-weight:normal;

  }

.post h3 strong, .post h3 a:hover {

  color:$textcolor;

  }

.post p {

  margin:0 0 .75em;

  line-height:1.6em;

  }

.post-footer {

  margin: .75em 0;

  color:$sidebarcolor;

  text-transform:uppercase;

  letter-spacing:.1em;

  font: $postfooterfont;

  line-height: 1.4em;

  }

.comment-link {

  margin-left:.6em;

  }

  .post img {

  padding:4px;

  border:1px solid $bordercolor;

  }

  .post blockquote {

  margin:1em 20px;

  }

  .post blockquote p {

  margin:.75em 0;

  }

/* Comments

  -------------------------------------------- */

  #comments h4 {

  margin:1em 0;

  font-weight: bold;

  line-height: 1.4em;

  text-transform:uppercase;

  letter-spacing:.2em;

  color: $sidebarcolor;

  }

#comments-block {

  margin:1em 0 1.5em;

  line-height:1.6em;

  }

  #comments-block .comment-author {

  margin:.5em 0;

  }

  #comments-block .comment-body {

  margin:.25em 0 0;

  }

  #comments-block .comment-footer {

  margin:-.25em 0 2em;

  line-height: 1.4em;

  text-transform:uppercase;

  letter-spacing:.1em;

  }

  #comments-block .comment-body p {

  margin:0 0 .75em;

  }

  .deleted-comment {

  font-style:italic;

  color:gray;

  }

#blog-pager-newer-link {

  float: left;

  }

  

  #blog-pager-older-link {

  float: right;

  }

#blog-pager { 

  text-align: center;

  }

.feed-links {

  clear: both;

  line-height: 2.5em;

  }

/* Sidebar Content

  ------------------------------------------ */

  .sidebar { 

  color: $sidebartextcolor;

  line-height: 1.5em;

  }

.sidebar ul {

  list-style:none;

  margin:0 0 0;

  padding:0 0 0;

  }

  .sidebar li {

  margin:0;

  padding:0 0 .25em 15px;

  text-indent:-15px;

  line-height:1.5em;

  }

.sidebar .widget, .main .widget { 

  border-bottom:1px dotted $bordercolor;

  margin:0 0 1.5em;

  padding:0 0 1.5em;

  }

.main .Blog { 

  border-bottom-width: 0;

  }


/* Profile 

  ------------------------------------------- */

  .profile-img { 

  float: left;

  margin: 0 5px 5px 0;

  padding: 4px;

  border: 1px solid $bordercolor;

  }

.profile-data {

  margin:0;

  text-transform:uppercase;

  letter-spacing:.1em;

  font: $postfooterfont;

  color: $sidebarcolor;

  font-weight: bold;

  line-height: 1.6em;

  }

.profile-datablock { 

  margin:.5em 0 .5em;

  }

.profile-textblock { 

  margin: 0.5em 0;

  line-height: 1.6em;

  }

.profile-link { 

  font: $postfooterfont;

  text-transform: uppercase;

  letter-spacing: .1em;

  }

/* Footer

  -------------------------------------------- */

  #footer {

  width:660px;

  clear:both;

  margin:0 auto;

  padding-top:15px;

  line-height: 1.6em;

  text-transform:uppercase;

  letter-spacing:.1em;

  text-align: center;

  }

/** Page structure tweaks for layout editor wireframe */

  body#layout #header { 

  margin-left: 0px;

  margin-right: 0px;

  }

  ]]></b:skin>

  

</head>

<body>

<div id='outer-wrapper'><div id='wrap2'>

<!-- skip links for text browsers -->

<span id='skiplinks' style='display:none;'>

<a href='#main'>skip to main </a> |

<a href='#sidebar'>skip to sidebar</a>

</span>

<div id='header-wrapper'>

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

<b:widget id='Header1' locked='true' title='3 kolom (Header)' type='Header'/>

</b:section>

</div>

  

<div id='content-wrapper'>

<div id='crosscol-wrapper' style='text-align:center'>

<b:section class='crosscol' id='crosscol' showaddelement='no'/>

</div>

<div id='main-wrapper'>

<b:section class='main' id='main' showaddelement='no'>

<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>

</b:section>

</div>

<div id='sidebar-wrapper'>

<b:section class='sidebar' id='sidebar' preferred='yes'/>

</div>

<!-- spacer for skins that want sidebar and main to be the same height-->

<div class='clear'>&#160;</div>

</div> <!-- end content-wrapper -->

<div id='footer-wrapper'>

<b:section class='footer' id='footer'/>

</div>

</div>

</div> <!-- end outer-wrapper -->

</body>

</html>

Dari kode diatas, yang perlu di perhatikan adalah kode di sekitar Outer-Wrapper :

/* Outer-Wrapper
------------------------------------------ */
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
#main-wrapper {
width: 410px;
float: left;
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: right;
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 */
}

Seperti saya singgung diatas bahwa Outer-Wrapper merupakan wadah untuk menyimpan main-wrapper serta sidebar-wrapper. Jadi jika kita ingin menambah kolom baru atau dengan kata lain sidebar baru, maka hal yang pertama wajib di lakukan adalah menambah nilai lebar dari Outer-wrapper itu sendiri.

Sekarang bagaimanakah cara menambahkan kolom baru? Yang pertama harus di pikirkan adalah berapakah lebar kolom baru yang mau kita buat. Ok, biar sejalan saya ambil contoh lebar yang akan di buat adalah sebesar 180 pixel, jadi secara otomatis kita harus merubah lebar dari Outer-wrapper terlebih dahulu, sehingga secara kasar lebar outer-wrapper menjadi : 410 pixel + 220 pixel + 180 pixel + 20 pixel = 830 pixel, biar ada sedikt sela, maka kita tambah 10 pixel sehingga nilainya menjadi 840 pixel. Untuk menambah kode sidebar baru, saya beri contoh seperti ini :

#sidebarbaru-wrapper {
width: 180px;
float: right;
padding-left:10px;
word-wrap: break-word;
overflow: hidden;
}

Maka apabila di tambahkan kodenya jadi seperti ini :

/* Outer-Wrapper
------------------------------------------ */
#outer-wrapper {
width: 840px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
#main-wrapper {
width: 410px;
float: left;
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: right;
padding-left:10px; /* yg ini tambahan juga biar tampak ada jarak sela */
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 */
}
#sidebarbaru-wrapper {
width: 180px;
float: right;
padding-left:10px;
word-wrap: break-word;
overflow: hidden;
}

Itu merupakan langkah pertama yang kita lakukan. langkah yang kedua adalah kita harus membuat kode yang di pasang pada bagian body. Sebagai contoh pada template diatas, kode id untuk sidebar adalah seperti ini :

Maka kewajiban selanjutnya adalah memasang kode untuk id sidebarbaru yang akan kita buat, kodenya seperti ini :

Apabila di padukan, simpanlah kode sidebaru di bawah kode sidebar yang asli, kodenya kira-kira seperti ini :

Kolom baru yang kita buat sudah tercipta. Agar tampak lebih menarik, maka sebaiknya kita pun mengubah lebar dari header serta footer dengan nilai yang sama untuk Outer-wrapper yaitu sebesar 840 px.

Masih bingung?

Agar tidak terlalu bingung, saya ajak sobat untuk mempraktekannya langsung. Silahkan sobat buat satu blog baru sebagai percobaan (jangan pada blog yang utama), pilihlah template minima yang biasa. Sudah siapkah sobat? Ok, kita langsung meluncur ke TKP dan saya asumsikan sobat sudah mempunyai satu blog baru sebagai bahan percobaan :

Klik menu Layout

Klik menu Edit HTML

Ingat ! jangan memberi tanda centang pada kotak kecil di samping tulisan Expand Widget Template, sekali lagi jangan mencentangnya, karena jika sobat mencentangnya nanti akan keluar kode-kode widget yang memusingkan kepala.

Cari kode seperti di bawah ini :

#header-wrapper { width:660px; margin:0 auto 10px; border:1px solid $bordercolor; }

ganti nilai 660px dengan 840px, sehingga kodenya jadi seperti ini :

#header-wrapper { width:840px; margin:0 auto 10px; border:1px solid $bordercolor; }

Cari kode seperti di bawah ini :

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

ganti nilai 660px menjadi 840px, sehingga kodenya menjadi seperti ini :

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

cari kode seperti di bawah ini :

#sidebar-wrapper { width: 220px; float: right; 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 */ }

Copy paste kode berikut persis di bawah kode yang seperti di atas :

#sidebarbaru-wrapper { width: 180px; float: right; psdding-left:10px; word-wrap: break-word; overflow: hidden; }

Cari kode seperti di bawah ini :

#footer { width:660px; clear:both; margin:0 auto; padding-top:15px; line-height: 1.6em; text-transform:uppercase; letter-spacing:.1em; text-align: center; }

Ganti nilai 660px menjadi 840 px, sehingga kodenya akan seperti ini :

#footer { width:840px; clear:both; margin:0 auto; padding-top:15px; line-height: 1.6em; text-transform:uppercase; letter-spacing:.1em; text-align: center; }

Cari kode seperti di bawah ini :

Copy kode berikut, lalu paste persis di bawah kode yang seperti di atas :

Klik tombol Simpan Template

Selesai.

Untuk melihat efek hasilnya, silahkan klik Elemen Halaman apakah sudah berformasi tiga kolom atau belum? jika sudah, silahkan isi sidebar tersebut dengan apa saja lalu lihatlah hasil nyatanya.

Langkah-langkah di atas merupakan metoda dasar saja, untuk menambahkan variasi lain, sobat memerlukan pengetahuan serta kretifitas. Agar sobat yakin dengan apa yang saya terangkan, sobat bisa melihat contoh yang sudah jadi, silahkan klik di sini !

Eh kunjungi juga ya blog baruku, coba klik di sini !

Selamat berexperimen !

Catatan Galung

Kamis, 06 September 2007

Tips menambah kolom pada template baru

Tidak ada komentar:

Posting Komentar