Inilah pere yang harus saya balas.
Kalau ngga salah tebak mungkin pertanyaaan dari bcom ini, tentang layout mangga-cigazine . view : demo.
Benarkah ? Kalau benar tebakan saya . maka saya perlu jelaskan di sini, bahwa layout itu sumber source codenya sebagian saya ambil dari template “ Cellar Heat “ – mas Agus MU. Jadi jika ingin template minima postinganya seperti yang di miliki “ Cellar Heat “ maka donlot dulu template “ cellar heat “ tersebut. di sini.
Install source code Cella Heart Ke Minima Template
Setelah beres mendonlot, buat blog baru dan pilih template minima untuk kita jadikan kelinci percobaan-nya. kemudian buat postingan sebanyak 3 (tiga ) postingan.
Buka tab edit html ( biarkan saja kosong atau jangan di tandai kotak kecil di samping tulisan Expand Template Widget.)
ganti ukuran Outer-wrapper menjadi 730px.
#outer-wrapper {
width: 730px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
kemdian cari kode html ini.
<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>
Setelah itu ganti kode di atas dengan kode html dari template “ Cellar Heat “ yang di mulai dari .
<div class='column01'>
dan berakhir sampai tag penutupnya
</b:includable>
</b:widget>
</b:section>
</div>
* red . atau berakhir di atas kode html : <div id='column02'>
Langkah selanjutnya menganti kode Css : #main-wrapper dari template minima yakni.
#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 */
}
dengan kode css untuk main-post dari “ Cellar Heat “ yaitu. di mulai dari.
/* first post home page */
#post-one {
padding:30px 0 30px 4px;
width:700px;
color:#c0c0b4;
font-size:11px;
line-height:16px;
}
dan berakhir di
/* search results */ .search-results {
color:#fff;
font-size:12px;
padding:12px 0;
}
.search-results .bigger {
color:#fff;
font-size:14px;
}
Kemudian silahkan Pratinjau/Preview. jika melihat sidebarnya melorot kebawah, jangan khawatir biarkan saja dulu.
Sekarang kita telah mempunyai template minima bergaya ala “ Cellar Heat “.
* Trik yang sama saya pernah meng-install template karya kang “ Hackshopere Ramani “ . dengan cara seperti itu.
Membedakan Ukuran Antara Main-Post dan Mini-Post.
Sekarang bagaimana membedakan ukuran lebar posting dihalaman depan dengan halaman sub ? seperti kasus layout mangga-cigazine.
Beginilah trik Seo-nya ( Sistem Edit Obrak-abrik ).
Dalam template cella heart untuk main-postingan dan mini-post. ( atau istilah mas agus recent-post ) merupakan bagian dari syntak ini : column01.
maka trik yang saya gunakan menghapus ukuran pada selector .Columm 01. yakni width:720px;
.column01 {
width:720px; / ukuran lebar ini di hapus.
overflow:hidden;
float:left;
}
Kemudian skenario yang dua, saya menyembunyikan elemen sidebar pada halaman depan. Contohnya saya menambahkan widget “ Text “ . kemudian saya sembunyikan dengan cara menambahkan beberapa kode di antara widget- text seperti tulisan yang saya pertebal di bawah .
<b:widget id="Text1" locked="false" title="" type="Text">
<b:includable id="main">
<b:if cond='data:blog.pageType == "item"'>
<!-- only display title if it's non-empty -->
<b:if cond="data:title != """>
</b:if></b:if></b:includable></b:widget><h2 class="title"><data:title></data:title></h2>
<div class="widget-content">
<data:content>
</data:content>
</div>
<b:include name="quickedit">
</b:if>
</b:includable>
</b:widget>
red. ( untuk menampikan keseluruhan kode html elemen di atas mesti di tandai kotak kecil di samping Expand Template Widget )
tentang menyembunyikan widget atau elemen, lebih jelasnya bisa di baca di sini : bikin-blog-lebih-dinamis.
dan lakukan untuk elemen sidebar lainnya seperti itu.
Setelah itu , Selanjutnya saya merubah ukuran untuk main-post-nya ( agar sidebar nantinya tidak melorot ke bawah ) . dengan cara menganti ukuran width:700px; menjadi 490px; pada selector #post-one .
#post-one {
padding:30px 0 30px 4px;
width:700px; / ganti ukuran ini menjadi 490px;
color:#c0c0b4;
font-size:11px;
line-height:16px;
}
Penutup
Sebenarnya masih banyak pere yang mesti di kerjakan agar templatenya optimal dan sesuai dengan yang kita inginkan. dan saya percaya mas bcon ini tahu apa yang mesti di lakukan selanjutnya. lawong kerjaanya bikin template. xixiixixi…
Akan tetapi sebagai tanda terima kasih dan penghormatan atas kerja kerasnya Mas Agus Mu - dalam membuat template blogspot berbeda dari biasanya ( seperti template “ cellar heat ini ) , ada baiknya kita harus menyertakan link pada blog beliau, semacam special thank gitulah.
yuu met berpusing ria mas.
