BloonOnline GoTemplatez VersiEdan
Facebook Twitter You Tube Friendfeed
Blog Seo Intermezo

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.

blog cat

Page views this post: reader

28 komentar:

Anonymous said...

loh koq tumben pertamaxxxxxx

Anonymous said...

mbaca dan membookmark...buat bacaan wajibku ..hehhehehhe

Jaloee said...

@ Anna 'dteepz

iye koq tumben pertamaxxx.. gie begadang yach..

Anonymous said...

Wah... hebat kang Jaloe...

Bagaimana kalau Kang Jaloe gabung di komunitas blogger http://kitablogger.com/??? Banyak ilmu kang jaloe yang perlu di share disana nih... Gabung yach... :)

Anonymous said...

walaah kaang,...ko aku peyeueennng ya....!!

Anonymous said...

keren sekali model koran gituan ya...
wekeke..., langsung posing duluan, karena pengin...

Baka Kelana said...

Mantap...

ini trik baru
dicopy dulu ya Bos

biar bisa dipelajari di rumah

Thanks banget

Anonymous said...

ha..ha... akhirnya..... saya cuma bisa ucapin MAKASIH, atas penyelesaian PR ini, oke... dech ntar aku praktekka.

Sukses selalu, betapa indahnya berbagi ilmu pengetahuan.... karena memberikan ilmu yang bermanfaat bisa menolong kit diakhirat......betul khan ??

Cebong Ipiet said...

xixiix ada ada aja singkatan CSS nya...iyah wong saya jg cara belajarnya gituh...dipelajari dulu kang...hampir smw postingan kang jaloee tak simpen xixiix

Unknown said...

lengkap bgt kang...

Anonymous said...

Wah, asyik nih Jurusnya ...

Subagya said...

seep untung kang jaloe dah jelasin, banyak yang nanya juga nih kang ke saya cuman saya bingung cara jelasinnya. Mantab.. good good good

Anonymous said...

trims infonya!

xTrade said...

hallo ..akang, diriku hendak bertanya, bagaimanakah menganti tulisan olderpos dan newer post dengan kata next..
bisakah itu? diriku bermaksud so you know masuk ke html edit dengan ilmu braile alias ngacapruk pokonya asal nemu kata newer dan older di ganti sam next dan back ..al hasil malah parno page na.xiixi. pengen gaya malah terpegaya ..hehe.
mohon pengobatan nya dari kang jaloe.
sikian ..wassalam....

Diana Yusuf said...

wah keren buanget nih kang, tapi sumpah kang aku malah pengennya di buatin ama kang jaloe aja dech...heheheh, boleh gag nih kang

Anonymous said...

walau agak mumet..tapi tetep gw baca. Ini ilmu soale..hik..hik..

idotkontji said...

selalu terdepan deh kang Jaloe mah... update teruss,,,,

Anonymous said...

selamat pagi, dengan tidak mengurangi rasa hormat dengan ini saya menyampaikan....walah.... langsung ke pointnya aja. Mhn Mf, bang... PRnya yang saya maksud adalah Layout
http://jaloee.blogspot.com...(he..he... dasar bcom rewel ).
Apa anda juga menggunakan tip diatas utk menyelesaikan "BELUM ON LINE" itu lho be'loon on line... thank's.

Jaloee said...

@ Bcom

ya seperti itulah sy buat-nya.. cuman ada beberapa lagi yg di tambahkan terutama lebar recent-postnya...

ya utak-atiklah.. dasarnya kan udah dapat sperti di atas

Anonymous said...

Wow....nice, nice...
Terima kasih ya mas. :)

Eni Widiyanti said...

salam fantastic mas mu nanya sayakan gaptek...malum gak pernah main-main sama yang namanya HTML lah wong ngga ngerti....tlng kasih tau gymana cara copy paste kode HTML ke blog ....masih bingung thk sarannya

Anonymous said...

wah, saya ndak bisa otak atik di wp om' hikzz :(

kayanya perlu dipermak alias bokmak biar maknyoss :D

saya sering juga CSS dan SEO om' malah seringnya ngembat :D

ajarin dunkzzzzz :D

Kang Musa said...

wah kang, bisa diterapkan ne.. numpang nyimpen tutorialnya y kang.. makasi..

Anonymous said...

wah..., siap ngoprek template lagi nie... :
)

Anonymous said...

ehemmmm, saya paling suka CSSnyahhhhh dan SEOnyahhhhh...wkwkwkwk

Herry Bong said...

wuihh blognya keren, aku uda pasang bannernya di blog aku, mohon di pasang jugga ya :D

sobat said...

numpang baca lagi,tetap aja tutornya keren

Tihang said...

wew..belum sampe ni ilmu kita!, kudu banyak kesini, biar bisa nyedot...

Post a Comment

" Apapun Yang Dapat Anda Lakukan, Atau Ingin Anda Lakukan Mulailah

Keberanian Memiliki Kecerdasan, Kekuatan Dan Keajaiban Di Dalam-nya"

Makacih Atas Komentar-Nya

 

Copyright 2009. Home | Serba Serbi Google | XHTML | CSS Design by Catalog-Tutorial