Tips Memasang Arsip Calendar Seperti Wordpress

Pembuatan Arsip Calendar Seperti Wordpress tidak sama dengan pembuatan widget-widget yang lain, sebab cara ini sedikit ribet dan bisa jadi gak berhasil jika kurang teliti dan dan memahaminya.

Hebatnya widget archive calender ini, selalin tampilannya yang menarik juga bisa membuat widget-widget yang ada diblog kita terkesan simple serta dapat menunjukkan pada tanggal mana kita membuat postingan dala perbulannya.

Untuk itu jika berminat untuk membuatnya pada blog anda, sediakan kopi hangat, sebungkus rokok dan camilan secukupnya serta konsentrasi yang utuh dalam tutorial ini. Jika semua tersedia ikuti langkah yang akan Kang Fathur berikan dan tataplah mata setajam-tajamnya untuk memahami Tips 'N Trick yang ini.

LIVE DEMO

Langkah Pertama

• Seperti biasanya untuk mengedit blog, login Blogger anda;
• Pilih Rancangan;
• Tambahkan widget Arsip Blog;
• Setting seperti gambar dibawah ini :

• Jika sudah di setting Simpan widget anda.

Langkah Kedua

• Pilih tab Edit HTML;
• Jangan lupa Expand Template Widget;
• Cari kode ]]></b:skin>
• Copy paste kode CSS berikut sebelum ]]></b:skin>

#blogger_calendar {font-family:Arial,Times New Roman, Sans-Serif; font-size:12px}
#bcalendar, #bcaption {margin:0 auto;}
table#bcalendar tbody tr td {height:25px;width:20px;padding-left:4px;}
table#bcalendar, table#bcalendar tbody td {border:1px solid #ccc;}
#bcalendar tbody tr td a{color:#fff;background:#777;margin-left:-3px;padding:5px 6px 5px 5px}
table#bcalendar, #bcaption {background:#eee;border:1px solid #999;}
#portalinfo {font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;font-size:11px;font-weight:normal;}
#portalinfo a {font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;font-size: 11px; font-weight: normal; text-decoration: none;}
#portalinfo a:hover {font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;font-size: 11px;font-weight: normal; text-decoration: underline;}
#bcaption {background:#ddd;padding:5px 0}
table#bcalendar thead {background:#777;color:#fff;}
table#bcalendar thead tr th {padding-left:7px;}
table#bcalendar tbody tr td a {font-weight:bold;}
#calendarDisplay ul {margin:200px;}
#calendarDisplay ul li {  background:transparent url(http://anangku.googlepages.com/blue.gif)  no-repeat !important; padding: 0 0 0 30px !important; font-size: 11px; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-weight: normal; margin:3px 0 0 0;}
#calendarDisplay a {font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 11px; font-weight: normal; color: #555; text-decoration: none;}
#calendarDisplay a:hover {font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 11px; color: #000; font-weight: normal; text-decoration: underline;}
#bcaption select {width:130px;}

• Selanjutnya cari kode <b:if cond='data:style == &quot;HIERARCHY&quot;'>
• Atau jika tidak ketemu / tidak ada cari kode ini <b:if cond='data:style == "HIERARCHY">
• Jika ketemu scroll roll kebawah sampai pada kode </b:widget> atau seperti kode dibawah ini :

    <b:if cond='data:style == &quot;HIERARCHY&quot;'>
     <b:include data='data' name='interval'/>
    </b:if>
    <b:if cond='data:style == &quot;FLAT&quot;'>
      <b:include data='data' name='flat'/>
    </b:if>
    <b:if cond='data:style == &quot;MENU&quot;'>
      <b:include data='data' name='menu'/>
    </b:if>
  </div>
  </div>
  <b:include name='quickedit'/>
  </div>
</b:includable>
<b:includable id='flat' var='data'>
  <ul class='flat'>
    <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>
</b:includable>
<b:includable id='menu' var='data'>
  <select expr:id='data:widget.instanceId + &quot;_ArchiveMenu&quot;'>
    <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 class='hierarchy'>
        <li expr:class='&quot;archivedate &quot; + 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' dir='ltr'>(<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:includable id='toggle' var='interval'>
  <b:if cond='data:interval.toggleId'>
  <b:if cond='data:interval.expclass == &quot;expanded&quot;'>
    <a class='toggle' href='javascript:void(0)'>
      <span class='zippy toggle-open'>&#9660;&#160;</span>
    </a>
  <b:else/>
    <a class='toggle' href='javascript:void(0)'>
      <span class='zippy'>
        <b:if cond='data:blog.languageDirection == &quot;rtl&quot;'>
          &#9668;&#160;
        <b:else/>
          &#9658;&#160;
        </b:if>
      </span>
    </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>

• Block kode diatas dan ganti kode berikut :

<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'>
<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='portalinfo'/>
<div id='calLoadingStatus' style='display:none; text-align:center;'>
<b>Loading...</b>
</div>
<div id='calendarDisplay'/>
</div>
<script src='http://zonaonline.googlecode.com/files/archive_calenderwordpress.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'>&#9660;&#160;</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'>&#9658;&#160;</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>

• Simpan Template;
• Lihat hasilnya.

Catatan : Jangan membuang atau mengganti tulisan link Portal Informasi Online

Source : Kang Fathur