Modifikasi Template Minima Blogger

Pada kesempatan kali ini saya ingin sharing dengan rekan-rekan blogger tentang bagaimana memodifikasi template MINIMA dua kolom bawaan blogger dengan menambahkan widget Tab menu dan tiga buah kolom pada bagian footernya.

Setelah kita login di blogger, kemudian cobalah membuat blog baru dengan template minima berwarna putih.

Setelah masuk pada "tata letak" lalu ke "edit html" dan jangan dicentang pada bagian Expand Template Widget, agar tidak membingungkan.

Langkah awal yang kita lakukan adalah merubah ukuran dari pada template tersebut. Sekarang kita cari kode dibawah ini

#header-wrapper {
width:660px;
margin:0 auto 10px;
}

untuk width : 660px dirubah menjadi 990px

kemudian kita cari kode dibawah ini :

#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:660px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}

dan kode dibawah ini

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

untuk width : 660px dirubah menjadi 990px
kemudian kita cari kode dibawah ini

#main-wrapper {
width: 560px;
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 */
}

#tabsidebar-wrapper{
width: 400px;/*Defina a largura do seu menu*/
margin:30px 0px 5px 0px;/*Margens ? Siga o racioc nio: 30px-superior, 0px-direita, 5px-inferior, 0px-esquerda Nesta ordem. Defina as margens de acordo com as necessidades do seu template*/
border: 1px none $bordercolor;
float:right; /*Aqui voc define qual o lado seu menu vai flutuar: right-direita, left-esquerda*/
}

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

huruf berwarna merah adalah bagian yang dirubah maupun kode yang harus ditambahkan,
langkah selanjutnya adalah cari kode dibawah ini :

.profile-link {
font: $postfooterfont;
text-transform: uppercase;
letter-spacing: .1em;
}

tambahkan kode dibawah ini dibawah kode di atas.

/*--------Tabber ---------------------------------*/
.tabberlive .tabbertabhide {
display:none; }
.tabber { }.tabberlive {
margin-top:1em;
}
/*------------ Tabernav=Navega o -------------------*/
ul.tabbernav{
margin:0;
padding: 8px 0;
border-bottom: 1px solid $bordercolor;
font: bold 12px Verdana, sans-serif;
}
ul.tabbernav li{
list-style: none;
margin: 0;
display: inline;
}
/*--- Judul Aktif ---*/
ul.tabbernav li a{
padding: 8px 0.5em;
margin-left:3px;
border: 1px solid $bordercolor;
border-bottom: none;
background:#D5DFE8;
text-decoration: none;
}
ul.tabbernav li a:link { color:$sidebarcolor; }
ul.tabbernav li a:visited { color: #667; }
ul.tabbernav li a:hover{
color:#B30000;
background: #dedede;
border-color: #dedede;
}
/*--- Judul Pasiv ---*/
ul.tabbernav li.tabberactive a{
background-color: #fff;
color:#B30000;
border-bottom: 1px solid #fff;
}
ul.tabbernav li.tabberactive a:hover{
color: $linkcolor;
background: white;
border-bottom: 1px solid white;
}

/*------ Tabbertab = Conte do da Tab -----------*/
.tabberlive .tabbertab {
background:#fff;
padding:5px;
border:1px solid $bordercolor;
border-top:0; font-size:90%;
}
.tabbertab ul {
list-style:none;
margin:0 0 0;
padding:0 0 0 0px;
}

/*----- Links Internos -----*/
.tabbertab li {
background: url("http://i8.tinypic.com/6lip3c7.gif") no-repeat;
background-position: 0px 5px;
margin:0;
padding:2px 0 3px 2px;
border-bottom:1px dotted #B30000;
text-indent:10px;
color: $linkcolor;
list-style:none;
}

/* If desired, hide the heading since a heading is provided by the tab */
.tabberlive .tabbertab h2 {
display:none;
}
.tabberlive .tabbertab h3 {
display:none;
}

/* Example of using an ID to set different styles for the tabs on the page */
.tabberlive#tab1 {
}

kemudian cari kode di bawah ini :

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

Rubah nilai width:660px menjadi width:990px.
Kemudian tambahkan kode dibawah ini dibawah kode di atas,

#footer-column-container {
clear:both;
}

.footer-column {
padding: 10px;
}

Kode yang baru kita tambahkan adalah rangkaian kode untuk penambahan kolom pada bagian footer.

Langkah selanjutnya adalah cari kode ]]></b:skin>

Tambahkan kode dibawah ini di bawah kode tersebut :

<script src=' http://nataludin.googlepages.com/tabber.js' type='text/javascript'/>

Kemudian cari kode :

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

Tambahkan kode di bawah ini di bawah kode di atas.

<div id='tabsidebar-wrapper'>

<div class='tabber' id='tab1'>

<div class='tabbertab'>
<b:section class='tabberlive' id='tabbertab1' maxwidgets='1' showaddelement='yes'>
<b:widget id='HTML1' locked='false' title='Recent Post' type='HTML'/>
</b:section>
</div>

<div class='tabbertab'>
<b:section class='tabberlive' id='tabbertab2' maxwidgets='1' showaddelement='yes'/>
</div>

<div class='tabbertab'>
<b:section class='tabberlive' id='tabbertab3' maxwidgets='1' showaddelement='yes'/>
</div>

<div class='tabbertab'>
<b:section class='tabberlive' id='tabbertab4' maxwidgets='1' showaddelement='yes'/>
</div>

</div><!-- End tab1-->

</div><!-- End Tabsidebar-->

Selanjutnya kita cari kode :

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

Ganti kode yang berwarna biru dengan kode di bawah ini, dengan tujuan kita menambah tiga kolom pada bagian footer.

<div id='footer-column-container'>

<div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>

<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>

<div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>

<div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'>

<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>

<div style='clear:both;'/>
<div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>

<b:section class='footer' id='col-bottom' preferred='yes'>
<b:widget id='Text2' locked='false' title='' type='Text'/>
</b:section>

</div>
<div style='clear:both;'/>

</div>

Sekarang coba simpan template anda. Dan apabila kita menuju ke Elemen halaman, maka akan nampak seperti gambar di bawah ini



Untuk menambahkan gadget pada masing-masing Tab, silahkan klik angka 1, lalu tambahkan gadget demikian juga dengan Tab 2 dan seterusnya. Perhatikan gambar.


Untuk melihat hasilnya coba lihat di sebelah pojok atas.