Bagaimana cara membuat kalender seperti wordpress di blogger?Tutorial kali ini akan membahas tentang
cara bikin kalender seperti kalender yang ada di wordpress. Sebenarnya artikel panduan cara
membuat arsip calendar widget ini sudah saya tulis sejak 3 hari yang lalu, namun karena banyak kesibukan baru sekarang selesai dan bisa saya terbitkan.
Oh ia,,,
cara pasang kalender pada blogger kali ini lumayan
ribet, karena kita harus mengedit template yang kita gunakan, dan jika ada kesalahan maka ini bisa membuat template kita rusak.
Jika ingin tahu cara mudah pasang kalender di blogger silakan baca :
Kalender Lucu Untuk Blogger.
Sudah siap membuat arsip calendar widget sendiri dan edit templatenya. Jika sudah siap mari kita lanjutkan.
Tutorial Membuat Arsip Calendar Widget Seperti Wordpress
Berikut panduan cara membuat arsip calendar seperti wordpress di blogger.Langkan Pertama(seperti biasa) silakan login dulu ke blogger
Langkah Kedua Klik Design / Rancangan /Tata Letak. Jika kamu sudah memasang widget
Arsip silakan klik Edit dan jika kamu belum memasang widget arsip silakan klik Tambah / Add (pilih widget arsip)
Setting Widget Arsip- Pilih Flat List.
- Pilih Monthly
- Simpan :-)
Langkah Ketigakemudian klik Tab / Menu Edit HTML (khusu yg menggunakan tampilan baru silakan klik tab/menu Template, kemudian klik Edit HTML), sebagai gambaran untuk pengguna tampilan blogger baru silakan baca :
Cara Mengganti Template Blogspot - Blogger (Versi Baru).
Tips : Sebaiknya Backup dulu template yang kamu gunakan, agar jika terjadi hal-hal yang tidak diinginkan bisa dikembalikan seperti semual sebelum di edit.
Setelah berada di bagian
Edit HTML silakan centang pada kotak
Expand Widget Templates. Dan kemudian cari kode HIERARCHY pada template anda tersebut.
Oke, setelah ketemu kode
<b:if cond='data:style == "HIERARCHY"'> atau jika tidak ada cari kode ini
<b:if cond='data:style == "HIERARCHY"> (agar mudah menemukan kode tersebut silakan baca :
Cara Mudah + Cepat Mencari Kode Html di Blogger )
Bok kode mulai dari HIERARCHY tadi sampai kode </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>
</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 + "_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 class='hierarchy'>
<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' 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 == "expanded"'>
<a class='toggle' href='javascript:void(0)'>
<span class='zippy toggle-open'>▼ </span>
</a>
<b:else/>
<a class='toggle' href='javascript:void(0)'>
<span class='zippy'>
<b:if cond='data:blog.languageDirection == "rtl"'>
◄ 
<b:else/>
► 
</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>
Setelah kode di atas sudah di blog sekarang silakan ganti dengan 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='ahmadrifai'/>
<div id='calLoadingStatus' style='display:none; text-align:center;'>
<b>Loading...</b>
</div>
<div id='calendarDisplay'/>
</div>
<script src='http://ahmad-rifai-tools.googlecode.com/files/blog.ahmadrifai.net-kalender.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 + "&action=toggle" + "&dir=close&toggle=" + data:interval.toggleId + "&toggleopen=" + data:toggleopen'>
<span class='zippy toggle-open'>▼ </span>
</a>
<b:else/>
<a class='toggle' expr:href='data:widget.actionUrl + "&action=toggle" + "&dir=open&toggle=" + data:interval.toggleId + "&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>
Langkah KeEmpat (Terakhir)Cari Kode
]]></b:skin>
Jika sudah ketemu silakan masukkan kode berikut di atas kode ]]></b:skin> tadi
/*-----------------------------------*/
/* Arsip Kalender Widget */
/*-----------------------------------*/
#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;}
#ahmadrifai {font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;font-size:11px;font-weight:normal;}
#ahmadrifai a {font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;font-size: 11px; font-weight: normal; text-decoration: none;}
#ahmadrifai 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;}
Nah itulah tutorial / panduan cara pasang arsip calendar widget seperti wordpress
Selamat mencoba, dan semoga berhasil
