Download template cerdaskom

Posted by Unknown on Jumat, 18 Mei 2012 0

Cerdaskom tips blogging: Kemarin cerdaskom mendapat request dari zokufo yang menanyakan tentang sidebar miliknya cerdaskom kok bisa berubah ketika masuk ke halaman posting bagian kiri dan bawah (footer) tidak kelihatan. Sebenarnya teknik ini tidak sepenuhnya karya dari cerdaskom, sebab cerdaskom banyak belajar dari kang rohman dalam krtutorplus, intinya templatenya dari kang rohman lalu saya modifikasi, nah bagaimana ceritanya, silakan download template blog cerdaskom disini (dapat digunakan untuk blogspot) Berikut ini penjelasan teorinya

Berikut ini adalah tampilan halaman depan

 Kemudian setelah posting dibuka akan seperti ini:

Bagaimana caranya menghilangkan bagian kiri dan bawah (footer), secara teori tempatkan kode dibawah ini tepat di ]]></b:skin> (warning jangan dipraktekkan dulu, saya akan berikan template lengkapnya untuk anda rombak di link paling bawah)

#header { 
  float:left;
  width:500px; 
  margin: 0px;
  border: 0px solid $bordercolor;
  text-align: left;
  color:$pagetitlecolor;}
#header2 {
  float:right;
  width:468px;
  margin: 0 auto;
  text-align: left;
  color:#555;}
.header .widget, .header2 .widget {margin:0 auto;padding:40px 0px 5px 0px;}
#header h1 {
  margin:0 auto;
  padding:10px 5px .15em;
  line-height:1.2em;
  text-transform:uppercase;
  letter-spacing:.1em;
  font: $pagetitlefont;}
#header a {
  color:$pagetitlecolor;
  text-decoration:none;}
#header a:hover {
  color:$pagetitlecolor;
  }
#header .description {
  margin:0 auto;
  padding:0 5px 5px;
  max-width:100%;
  text-transform:uppercase;
  letter-spacing:.01em;
  line-height: 1.2em;
  font: $descriptionfont;
  color: $descriptioncolor;}
#header img {
  margin-$startSide: auto;
  margin-$endSide: auto;}
#outer-wrapper {
  background:#ffffff;
  border-left:1px solid $bordercolor;
  border-right:1px solid $bordercolor;
  border-bottom:1px solid $bordercolor;
  width: 970px;
  margin:0 auto;
  padding:10px 10px 0px 0px;
  text-align:$startSide;
  font: $bodyfont;}
#crosscol-wrapper {padding:0 auto;margin:0 auto;}
.crosscol .widget {margin:0 auto;padding:0px 0px 6px 0px;}
#main-wrapper {padding-left:25px;
  width: 600px;
  float: $startSide;
  word-wrap: break-word;  overflow: hidden; }
#sidebar-wrapper {
  width: 320px;
  float: $endSide;
  word-wrap: break-word; overflow: hidden; }
#sidebarleft-wrapper {border-bottom:1px solid $bordercolor;
  width: 180px;
  float: $startSide;
  word-wrap: break-word; overflow: hidden; }
#footer {border-bottom:1px solid $bordercolor;
  width: 970px;
  float: $startSide;
  word-wrap: break-word; overflow: hidden; }

Yang artinya kurang lebih seperti ini :
Kita defenisikan terlebih dahulu masing-masing kolom seperti gambar diatas dengan maksud untuk menghilangkan(hidden) atau memunculkan kolom tersebut, selain itu ada juga perintah auto untuk membuat kolom otomatis melebar

Setelah bagian kolom didefenisikan maka kita masukkan perintah jika-maka (if-else-if) kurang lebih seperti ini:
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Download template oom (Header)' type='Header'>
<b:includable id='main'>


  <b:if cond='data:useImage'>
    <b:if cond='data:imagePlacement == &quot;BEHIND&quot;'>
      <!--
      Show image as background to text. You can't really calculate the width
      reliably in JS because margins are not taken into account by any of
      clientWidth, offsetWidth or scrollWidth, so we don't force a minimum
      width if the user is using shrink to fit.
      This results in a margin-width's worth of pixels being cropped. If the
      user is not using shrink to fit then we expand the header.
      -->
      <b:if cond='data:mobile'>
          <div id='header-inner'>
            <div class='titlewrapper' style='background: transparent'>
              <h1 class='title' style='background: transparent; border-width: 0px'>
                <b:include name='title'/>
              </h1>
            </div>
            <b:include name='description'/>
          </div>
        <b:else/>
          <div expr:style='&quot;background-image: url(\&quot;&quot; + data:sourceUrl + &quot;\&quot;); &quot;                        + &quot;background-position: &quot;                        + data:backgroundPositionStyleStr + &quot;; &quot;                        + data:widthStyleStr                        + &quot;min-height: &quot; + data:height                        + &quot;_height: &quot; + data:height                        + &quot;background-repeat: no-repeat; &quot;' id='header-inner'>
            <div class='titlewrapper' style='background: transparent'>
              <h1 class='title' style='background: transparent; border-width: 0px'>
                <b:include name='title'/>
              </h1>
            </div>
            <b:include name='description'/>
          </div>
        </b:if>
    <b:else/>
      <!--Show the image only-->
      <div id='header-inner'>
        <a expr:href='data:blog.homepageUrl' style='display: block'>
          <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
        </a>
        <!--Show the description-->
        <b:if cond='data:imagePlacement == &quot;BEFORE_DESCRIPTION&quot;'>
          <b:include name='description'/>
        </b:if>
      </div>
    </b:if>
  <b:else/>
    <!--No header image -->
    <div id='header-inner'>
      <div class='titlewrapper'>
        <h1 class='title'>
          <b:include name='title'/>
        </h1>
      </div>
      <b:include name='description'/>
    </div>
  </b:if>
</b:includable>
<b:includable id='title'>
  <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <data:title/>
  <b:else/>
    <a expr:href='data:blog.homepageUrl'><data:title/></a>
  </b:if>
</b:includable>
<b:includable id='description'>
  <div class='descriptionwrapper'>
    <p class='description'><span><data:description/></span></p>
  </div>
</b:includable>
</b:widget>
</b:section>
      <b:section class='header' id='header2' maxwidgets='1' showaddelement='yes'>
<b:widget id='HTML1' locked='false' title='' type='HTML'>
<b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>


  <b:include name='quickedit'/>
</b:includable>
</b:widget>
</b:section>

Kode tersebut ditempatkan persis dibawah kode sebelumnya, ribet juga yah, nah dari pada ribet mending modifikasi template blog aslinya.