Kanibal Template Blogger

Pada minggu kemarin saya mencoba memodifikasi template Minima yang ada dengan menggunakan sistem campur aduk tutorial yang saya dapatkan dari beberapa sumber, termasuk di dalamnya menggunakan sistem CSS ( Contak Sana Sini ) dari beberapa Website berbasis wordpress.

Dari kode sumber halaman website tersebut, saya copas ke notepad. Lalu saya pelajari kode CSS & javascript yang ada bersama eyang google. Meski sudah menghabiskan weekend dan 3 pack "123" akhirnya hasilnya sangat memuaskan bagi saya, namun saya tidak tahu apa sangat jelek bagi rekan-rekan blogger.

Saya menyebutnya sebagai "KANIBAL TEMPLATE MAGAZINE BLOGGER", sebab mulai dasar template hingga Javascript yang terpasang merupakan hasil copas dari beberapa sumber. Dengan menggunakan kemampuan CSS ( Contek Sana Sini ),ASP (Asal Sedot Pakai praktek ) dan PHP (Pakai Hancur Pugar lagi ) akhirnya jadi juga template kanibal ini.

Dan template ini merupakan draft blog yang saya gunakan untuk satuan dimana saya "Nebeng" makan dan ngasih belanja mbok dhewor.

Yang perlu saya garis bawahi adalah, bagaimana cara menambahkan kolom-kolom dibawah Main-wrapper ( tempat posting ) yang ukurannya sama besar. Berikut bentuk kolom-kolom yang saya tambahkan :


Kalau anda berkenan untuk sharing mari kita bahas cara membuatnya :

Langkah awal tentunya backup dulu template anda, tapi saya sarankan untuk praktek ini buatlah blog baru saja.... seperti apa yang saya kerjakan dalam memodifikasi template.

1. Masuk ke blogger lalu tambahkan CSS ini sebelum kode ]]></b:skin>

/* ----- fblock ----- */
.fblock1 h2{
margin: 0px 0 0px 0;
padding: 0px 0px 3px 5px;
text-align: left;
font-size: 11px;
overflow:hidden;
height:30px;
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 */
}
.fblock1 h2 a:link, .fblock1 h2 a:visited{
color:#fff;
}
.fblock1 {
width: 305px;
float:left;
margin: 0px 0px 0px 5px;
padding: 5px;
background:#ffffff;
border: 1px solid #f3f3f3;
display:inline;
color:#000;
font-family:century gothic,Arial,verdana, sans-serif;
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 */
}
.fblock1:hover {
width: 305px;
float:left;
padding: 5px;
background:#ffffff;
border: 1px solid #f3f3f3;
display:inline;
color:#000;
font-family:century gothic,Arial,verdana, sans-serif;
}
.fblock1 p{
margin:5px 5px;
color:#fb7305;
}
.fblock1 img {
float:left;
border:1px solid #393F42;
margin:5px 5px 5px 5px;
padding:0 0;
}
#fblock1 .widget {
margin: 0px 0px 0px 0px;
padding: 15px 15px 15px 15px;
background: #ffffff;
border: 1px solid #e6e6e6;
}

.fblock2 h2{
margin: 0px 0 0px 0;
padding: 0px 0px 3px 5px;
text-align: left;
font-size: 11px;
overflow:hidden;
height:30px;
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 */
}
.fblock2 h2 a:link, .fblock2 h2 a:visited{
color:#fff;
}
.fblock2 {
width: 302px;
float:right;
margin: 0px 4px 5px 0px;
padding: 5px;
background:#ffffff;
border: 1px solid #f3f3f3;
display:inline;
color:#000;
font-family:century gothic,Arial,verdana, sans-serif;
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 */
}
.fblock2:hover {
width: 302;
float:right;
padding: 5px;
background:#ffffff;
border: 1px solid #f3f3f3;
display:inline;
color:#000;
font-family:century gothic,Arial,verdana, sans-serif;
}
.fblock2 p{
margin:5px 5px;
color:#fb7305;
}
.fblock2 img {
float:left;
border:1px solid #393F42;
margin:5px 5px 5px 5px;
padding:0 0;
}
.fcats{
overflow:hidden;
font-size:11px;
color:#9e5c1b;
padding: 0 0 0 0px;
margin:1px 0 0px 0;
height:15px;
}
.fcats a:link,.fcats a:visited {
overflow:hidden;
font-size:9px;
color:#841c0a;
padding: 0 0 0 0px;
margin:0px 0 0px 0;
height:13px;
}
.auth{
overflow:hidden;
font-size:9px;
color:#9e5c1b;
padding: 0 0 0 0px;
margin:0px 0 0px 0;
}
.fmeta{
overflow:hidden;
font-size:9px;
color:#9e5c1b;
padding: 0 0 0 0px;
margin:0px 0 0px 0;
}
.fmeta a:link,.fmeta a:visited{
overflow:hidden;
font-size:9px;
color:#841c0a;
padding: 0 0 0 0px;
margin:0px 0 0px 0;
}


2. Selanjutnya kita pasang kode dibawah ini pada bagian bawah Main-wrapper dibawah: </b:section>

<div class='fblock1'>
<b:section class='content1' id='content1' showaddelement='yes'/>
</div>

<div class='fblock2'>
<b:section class='content2' id='content2' showaddelement='yes'/>
</div>

Kemudian simpan template anda.

3. Langkah selanjutnya adalah masuk pada " Tambahkan elemen halaman " pada bagian HTML/ Javascript, lalu tambahkan kode berikut :

<img src='YOUR-IMAGE-LINK' width='100' height='60' alt=''/>

<div class='fcats'><a href='YOUR-CATEGORY-LINK' title='YOUR-CATEGORY-TITLE' rel='category'>YOUR-CATEGORY-TITLE-HERE</a></div>

<h2><a href='YOUR-POST-LINK' title='YOUR-POST-TITLE-HERE'>YOUR-POST-TITLE</a></h2>

<div class='auth'> Posted by Author </div>
<div class='fmeta'> POST-DATE |
<a href='YOUR-POST-LINK' title='Comment on YOUR-POST-TITLE'>ADD COMMENTS</a>
</div>

4. Langkah ke empat silahkan anda berpusing ria dalam mengatur width dan height di masing-masing tambahan kode di atas.

Pada modifikasi kali ini beberapa bagian saya hilangkan dengan menambahkan kode :

visibility: hidden;
display: none;

Juga saya menambahkan kode tabpage agar tampilan menjadi "ciamik".

Untuk melihat demo dari hasil template kanibal ini, silahkan klik DEMO

Komentar anda bersifat membangun... sangat 10000 x saya hargai