Bagaimana membedakan ukuran antara Main Post Dan Mini Post pada template species baru

Kena dech akhirnya saya dapat PR jugaxx  dari Bcom …  tadinya sempat males  ngerjain-nya..hihihihi. but karena sudah pesan via comment box beberapa kale, mau tidak mau harus membalasnya juga.

Inilah pere yang harus saya balas.

Bang jawaban tentang membuat width posting dihalaman depan dengan halaman sub berbeda tolong dijawab, ya.

Makasih

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.

Dan seperti kata-kata bcon sendiri trik yang saya gunakan ini adalah pake ilmu  CSS ( contek sana sini )  atau SEO ( Sistem Edit Obrak-abrik ).

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.

Page views this post: reader