Judul di atas merupakan finishing dari meodifikasi "Edel2Xtemplate", yang sekarang template tersebut digunakan "Sharing Post".
Template ini termodifikasi berkat rasa penasaran yang sangat kuat di hati saya saat melihat model template Magazine Blogger yang dijual dengan harga $ 50 s/d $ 85. Coba anda lihat di model situs tersebut di sini.
Semula saya mengejar turorial dari Kang Jaloee, namun nampaknya masih ada teka-teki besar yang perlu saya pecahkan. Karena info dari beliau kita harus download dulu template Cellar Heat kemudian mengganti beberapa kode pada template yang akan kita modifikasi. Padahal saya ingin murni dari template yang ada, misal MINIMA yang merupakan sasaran empuk untuk di EDEL2X.
Langkah yang aku gunakan adalah melihat kode sumber dari template "Allsporting" di atas, kemudian aku copas dalam MSword. Kalau kita melihat dari susunan template gratis dengan template "Premium" jelas berbeda. Susunan HTML pada template ini tidak dikelompokkan per bagian misal untuk Main-Wrapper sendiri, Sidebar juga sendiri dan seterusnya. Justru dalam kode sumber template ini, pengelompokkan didasarkan berdasarkan pengaturan ukuran Padding, Margin, Color dst....
Selama dua hari saya mreteli satu persatu dan aku selundupkan di MINIMA yang ada. Setelah berduel dengan ERROR, justru akhirnya saya menemukan cara bagaimana membagi Kolom Main ( tempat Posting ) menjadi 2 atau 3, tergantung selera kita.
Berikut langkah-langkah yang aku kerjakan :
Sebaiknya praktekkan di MINIMA dulu ( Namun saya menerapkan pada template yang sudah saya modifikasi sebelumnya ), masuk pada edit HTML kemudian buat susunan kode seperti ini ( Ingat jangan centang kotak Expand ):
/* ----- MAIN ----- */
#content-wrapper {
width: 998px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
position: relative;
text-align: left;
background: $contentbgColor;
border: 1px solid $contentBorderColor;
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 */
}
#main-wrapper {
float: left;
width: 654px;
margin: 0px 4px 0px 0px;
padding: 0px 0px 0px 0px;
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 */
}
Tambahkan kode berikut :
#main-left {
width: 654px;
float: left;
margin: 4px 4px 4px 0px;
padding: 0px;
color: $textColor;
font: $textFont;
background: $postbgColor;
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 */
}
#main-right{
float:right;
margin: 4px 4px 4px 4px;
padding: 0px;
background:$postbgColor;
width:260px;
line-height:1.2em}
#main-right h2{
margin-bottom:5px;
padding-bottom:5px;line-height:1.1em;
font:normal normal 148% Trebuchet, Trebuchet MS, Arial, sans-serif;color:#996600;border-bottom:1px solid #000000}
#main-right img{margin-bottom:4px;border:1px solid #000000}
#main-left .widget{
margin: 0px 5px 5px 5px;
padding: 0px 10px 10px 4px;
}
#main-right .widget {
margin: 0px 0px 5px 0px;
padding: 10px 10px 10px 10px;
}
Langkah selanjutnya adalah tambahkan kode dibawah ini di atas kode </head>
<style type='text/css'>
<b:if cond='data:blog.pageType != "item"'>
#main-left {
width:376px;
}
.post-body img{
width:350px;
}
</b:if>
</style>
Kemudian pada bagian body, buat susunan dibagian <div id='content-wrapper'>
<div id='main-wrapper'>, dengan susuna seperti ini:
<div id='content-wrapper'>
<div id='main-wrapper'>
<div id='main-left'>
<b:section class='main' id='main-left' preferred='yes'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>
<div id='main-right'>
<b:if cond='data:blog.pageType != "item"'>
<b:section class='main-right' id='main-right' preferred='yes'/>
</b:if>
</div>
</div>
Sebelum anda menyimpan template, coba preview dulu apa sudah berhasil atau belum.
Setelah berhasil baru di save.
Fungsi dari kode <b:if cond='data:blog.pageType != "item"'> adalah untuk menyembunyikan kolom kanan pada sub halaman, dan saat anda mengklik "Label atau Kategori maka kolom kanan Main tetap ada di Homepage.
SIlahkan anda rubah ukuran Margin, Padding, Color, font sesuai dengan kondisi template anda. Meskipun hasilnya tidak sebagus template yang aku "Intip" namun teka-teki selama ini terjawab sudah, dan ini sebagai modal saya untuk edel2x template selanjutnya.
Saya bisa, pasti anda bisa... yang penting semangat.
Template ini termodifikasi berkat rasa penasaran yang sangat kuat di hati saya saat melihat model template Magazine Blogger yang dijual dengan harga $ 50 s/d $ 85. Coba anda lihat di model situs tersebut di sini.
Semula saya mengejar turorial dari Kang Jaloee, namun nampaknya masih ada teka-teki besar yang perlu saya pecahkan. Karena info dari beliau kita harus download dulu template Cellar Heat kemudian mengganti beberapa kode pada template yang akan kita modifikasi. Padahal saya ingin murni dari template yang ada, misal MINIMA yang merupakan sasaran empuk untuk di EDEL2X.
Langkah yang aku gunakan adalah melihat kode sumber dari template "Allsporting" di atas, kemudian aku copas dalam MSword. Kalau kita melihat dari susunan template gratis dengan template "Premium" jelas berbeda. Susunan HTML pada template ini tidak dikelompokkan per bagian misal untuk Main-Wrapper sendiri, Sidebar juga sendiri dan seterusnya. Justru dalam kode sumber template ini, pengelompokkan didasarkan berdasarkan pengaturan ukuran Padding, Margin, Color dst....
Selama dua hari saya mreteli satu persatu dan aku selundupkan di MINIMA yang ada. Setelah berduel dengan ERROR, justru akhirnya saya menemukan cara bagaimana membagi Kolom Main ( tempat Posting ) menjadi 2 atau 3, tergantung selera kita.
Berikut langkah-langkah yang aku kerjakan :
Sebaiknya praktekkan di MINIMA dulu ( Namun saya menerapkan pada template yang sudah saya modifikasi sebelumnya ), masuk pada edit HTML kemudian buat susunan kode seperti ini ( Ingat jangan centang kotak Expand ):
/* ----- MAIN ----- */
#content-wrapper {
width: 998px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
position: relative;
text-align: left;
background: $contentbgColor;
border: 1px solid $contentBorderColor;
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 */
}
#main-wrapper {
float: left;
width: 654px;
margin: 0px 4px 0px 0px;
padding: 0px 0px 0px 0px;
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 */
}
Tambahkan kode berikut :
#main-left {
width: 654px;
float: left;
margin: 4px 4px 4px 0px;
padding: 0px;
color: $textColor;
font: $textFont;
background: $postbgColor;
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 */
}
#main-right{
float:right;
margin: 4px 4px 4px 4px;
padding: 0px;
background:$postbgColor;
width:260px;
line-height:1.2em}
#main-right h2{
margin-bottom:5px;
padding-bottom:5px;line-height:1.1em;
font:normal normal 148% Trebuchet, Trebuchet MS, Arial, sans-serif;color:#996600;border-bottom:1px solid #000000}
#main-right img{margin-bottom:4px;border:1px solid #000000}
#main-left .widget{
margin: 0px 5px 5px 5px;
padding: 0px 10px 10px 4px;
}
#main-right .widget {
margin: 0px 0px 5px 0px;
padding: 10px 10px 10px 10px;
}
Langkah selanjutnya adalah tambahkan kode dibawah ini di atas kode </head>
<style type='text/css'>
<b:if cond='data:blog.pageType != "item"'>
#main-left {
width:376px;
}
.post-body img{
width:350px;
}
</b:if>
</style>
Kemudian pada bagian body, buat susunan dibagian <div id='content-wrapper'>
<div id='main-wrapper'>, dengan susuna seperti ini:
<div id='content-wrapper'>
<div id='main-wrapper'>
<div id='main-left'>
<b:section class='main' id='main-left' preferred='yes'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>
<div id='main-right'>
<b:if cond='data:blog.pageType != "item"'>
<b:section class='main-right' id='main-right' preferred='yes'/>
</b:if>
</div>
</div>
Sebelum anda menyimpan template, coba preview dulu apa sudah berhasil atau belum.
Setelah berhasil baru di save.
Fungsi dari kode <b:if cond='data:blog.pageType != "item"'> adalah untuk menyembunyikan kolom kanan pada sub halaman, dan saat anda mengklik "Label atau Kategori maka kolom kanan Main tetap ada di Homepage.
SIlahkan anda rubah ukuran Margin, Padding, Color, font sesuai dengan kondisi template anda. Meskipun hasilnya tidak sebagus template yang aku "Intip" namun teka-teki selama ini terjawab sudah, dan ini sebagai modal saya untuk edel2x template selanjutnya.
Saya bisa, pasti anda bisa... yang penting semangat.
