Blogger Calendar Widget

Bagi anda yang ingin menambahkan kalender sebagai penanda jejak posting-posting di blog anda atau sebagai arsip dari artikel-artikel anda, kini anda bisa menampilkannya di blog anda (prinsipnya mirip dengan plugin calendar di Wordpress). Caranya cukup simpel sekali. Ikuti deh langkah-langkah berikut ya, Ok?

Nah, berikut ini akan coba saya jelaskan bagaimana memulai langkah awal untuk menampilkan kalender di blog anda. Tips ini tentunya khusus berlaku untuk anda yang sudah menjadi New Blogger. Untuk yang masih Old Blogger segeralah beralih ke New Blogger

Pertama-tama anda harus login ke blog anda masing-masing, ya iya lah anda kan mau ngutak-atik blog anda to? Masa anda mau login ke blog saya, mau jadi hacker ya sampeyan?

Nah, langkah selanjutnya setelah anda berhasil login, klik menu Edit Layout (atau Template) pada Dashboard anda dan kemudian pilih Page Elements. Pastikan pada template anda sudah ada elemen Blog Archive. Nah, jika belum ada, segera tambahkan pada template anda.

Selanjutnya, klik Edit pada elemen Blog Archive tersebut, dan di sana akan anda temui 3 macam style atau bentuk arsip, yaitu Hierarchy, Flat List, dan Dropdown Menu. ANDA HARUS MEMILIH FLAT LIST. Kemudian lihat ke bawah, di sana ada Archive Frequency, ada 3 pilihan Monthly, Weekly, dan Daily. ANDA HARUS MEMILIH MONTHLY.

Kemudian klik menu Edit Layout (atau Template) pada Dashboard anda dan kemudian pilih menu Edit HTML dan selanjutnya berikanlah tanda centang pada kotak Expand Widget Templates. Dan kemudian cari kode HIERARCHY pada template anda tersebut.

Oke, setelah ketemu kode HIERARCHY tersebut, blok kode mulai dari HIERARCHY sampai </b:widget>. Di bawah ini adalah kode yang harus anda blok:

    <b:if cond='data:style == "HIERARCHY"'>
     <b:include data='data' name='interval'/>
    </b:if>
    <b:if cond='data:style == "FLAT"'>
      <b:include data='data' name='flat'/>
    </b:if>
    <b:if cond='data:style == "MENU"'>
      <b:include data='data' name='menu'/>
    </b:if>
      .
      .
      .
     dst... dan seterusnya...
      .
      .
      .
    </a>
  </b:if>
 </b:if>
</b:includable>
<b:includable id='posts' var='posts'>
  <ul class='posts'>
    <b:loop values='data:posts' var='i'>
      <li><a expr:href='data:i.url'><data:i.title/></a></li>
    </b:loop>
  </ul>
</b:includable>
</b:widget>

Nah setelah di blok, DELETE atau HAPUS saja langsung kode tersebut, dan sebagai gantinya masukkan kode di bawah ini:

    <b:if cond='data:style == "HIERARCHY"'>
     <b:include data='data' name='interval'/>
    </b:if>
    <b:if cond='data:style == "FLAT"'>
      <b:include data='data' name='flat'/>
    </b:if>
    <b:if cond='data:style == "MENU"'>
      <b:include data='data' name='menu'/>
    </b:if>
<div id='blogger_calendar'>
<div id='anangcalendar'/><br/>
<table id='bcalendar'><caption id='bcaption'>

</caption>

<thead><tr><th abbr='Minggu' scope='col' title='Minggu'>M</th>
<th abbr='Senin' scope='col' title='Senin'>S</th>
<th abbr='Selasa' scope='col' title='Selasa'>S</th>
<th abbr='Rabu' scope='col' title='Rabu'>R</th>
<th abbr='Kamis' scope='col' title='Kamis'>K</th>
<th abbr='Jumat' scope='col' title='Jumat'>J</th>
<th abbr='Sabtu' scope='col' title='Sabtu'>S</th>

</tr></thead>

<tfoot><tr>
<td class='pad'/>
<td class='pad' colspan='3' id='next'/>
</tr></tfoot>

<tbody><tr><td id='cell1'> </td><td id='cell2'> </td><td id='cell3'> </td><td id='cell4'> </td><td id='cell5'> </td><td id='cell6'> </td><td id='cell7'> </td></tr>
<tr><td id='cell8'> </td><td id='cell9'> </td><td id='cell10'> </td><td id='cell11'> </td><td id='cell12'> </td><td id='cell13'> </td><td id='cell14'> </td></tr>
<tr><td id='cell15'> </td><td id='cell16'> </td><td id='cell17'> </td><td id='cell18'> </td><td id='cell19'> </td><td id='cell20'> </td><td id='cell21'> </td></tr>
<tr><td id='cell22'> </td><td id='cell23'> </td><td id='cell24'> </td><td id='cell25'> </td><td id='cell26'> </td><td id='cell27'> </td><td id='cell28'> </td></tr>
<tr><td id='cell29'> </td><td id='cell30'> </td><td id='cell31'> </td><td id='cell32'> </td><td id='cell33'> </td><td id='cell34'> </td><td id='cell35'> </td></tr>
<tr><td id='cell36'> </td><td id='cell37'> </td></tr>
</tbody>
</table><br/>
<div id='calLoadingStatus' style='display:none; text-align:center;'>
<img alt='loading' src=';http://anangku.googlepages.com/loading2.gif' style='vertical-align:middle'/> <b>Loading...</b>
</div>
<div id='calendarDisplay'/>

</div>

<script src='http://anangku.blogspot.com.googlepages.com/anangku.blogspot.com-bloggercalendar.js' type='text/javascript'/>

  </div>
  </div>
  <b:include name='quickedit'/>
  </div>
</b:includable>
<b:includable id='toggle' var='interval'>
  <b:if cond='data:interval.toggleId'>
  <b:if cond='data:interval.expclass == "expanded"'>
    <a class='toggle' expr:href='data:widget.actionUrl + "&amp;action=toggle" +       "&amp;dir=close&amp;toggle=" + data:interval.toggleId +       "&amp;toggleopen=" + data:toggleopen'>
        <span class='zippy toggle-open'>▼ </span>
    </a>
  <b:else/>
    <a class='toggle' expr:href='data:widget.actionUrl + "&amp;action=toggle" +         "&amp;dir=open&amp;toggle=" + data:interval.toggleId +         "&amp;toggleopen=" + data:toggleopen'>
          <span class='zippy'>► </span>
    </a>
  </b:if>
 </b:if>
</b:includable>
<b:includable id='flat' var='data'>
 <div id='bloggerCalendarList'>
  <ul>
    <b:loop values='data:data' var='i'>
      <li class='archivedate'>
        <a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>)
      </li>
    </b:loop>
  </ul>
 </div>
</b:includable>
<b:includable id='posts' var='posts'>
  <ul class='posts'>
    <b:loop values='data:posts' var='i'>
      <li><a expr:href='data:i.url'><data:i.title/></a></li>
    </b:loop>
  </ul>
</b:includable>
<b:includable id='menu' var='data'>
  <select expr:id='data:widget.instanceId + "_ArchiveMenu"'>
    <option value=''><data:title/></option>
    <b:loop values='data:data' var='i'>
      <option expr:value='data:i.url'><data:i.name/> (<data:i.post-count/>)</option>
    </b:loop>
  </select>
</b:includable>
<b:includable id='interval' var='intervalData'>
  <b:loop values='data:intervalData' var='i'>
      <ul>
        <li expr:class='"archivedate " + data:i.expclass'>
          <b:include data='i' name='toggle'/>
          <a class='post-count-link' expr:href='data:i.url'><data:i.name/></a>
            (<span class='post-count'><data:i.post-count/></span>)
          <b:if cond='data:i.data'>
            <b:include data='i.data' name='interval'/>
          </b:if>
          <b:if cond='data:i.posts'>
            <b:include data='i.posts' name='posts'/>
          </b:if>
        </li>
      </ul>
  </b:loop>
</b:includable>
</b:widget>

Untuk langkah terakhir, cukup anda memasukkan sebuah kode di bawah ini di bagian template anda persis sebelum tag </head>:

<link href='http://anangku.googlepages.com/anangku.blogspot.com-bloggercalendar.css' rel='stylesheet' type='text/css'/>

Ohya satu lagi, jangan lupa cek Time Zone anda apakah sudah betul di set pada [UTC+07.00] West Indonesian Time. Untuk nge-cek silahkan klik menu seting pada Dashboard anda, kemudian klik Setting, setelah itu klik Formatting. Nah, jika belum di set langsung aja diubah menjadi [UTC +07.00] West Indonesian Time. Penting!!!

Selamat mencoba!


Berikut ini ringkasan langkah-langkahnya:
1. Pastikan Arsip Artikel anda berbentuk Flat List dan Monthly
2. Ganti kode pada template (lihat penjelasan di atas)
3. Masukkan kode link CSS di head template.
4. Cek Time Zone anda, apa sudah benar memilih [UTC+07.00] West Indonesian Time
5. Selesai

Mudah bukan?

Hasilnya bisa di lihat di sidebar sebelah kanan.

Peringatan: Widget ini tidak nampak saat anda memilih untuk melihat terlebih dulu ("Preview") sebelum publish. Coba di "Publish" aja dulu baru kemudian dilihat perubahan yang terjadi, "View Blog".

This calendar is inspired by Phydeaux3. Merci beaucoup!