ဘေလာ့ဂါ မ်ားအတြက္ Wordpress Archive

Wordpress မွာ လူၾကိဳက္မ်ားတဲ့ widget တစ္ခု ျဖစ္တဲ့ Archive Calendar widget ေလးကို ကၽြန္ေတာ္ တို႕ Blogspot ဘေလာ့ဂ္ ေတြမွာ ဘယ္လို ထည့္ရမလဲ ဆိုတဲ့ နည္းေလး တစ္ခု ေဝမွ်ခ်င္ပါတယ္..။

ထံုးစံ အတိုင္းေပါ့ဗ်ာ Layout -> Edit HTML ထဲကို သြားလိုက္ပါ..

ပံုအၾကီးၾကည့္ရန္ပံုကိုနွိပ္ပါ

ျပီးရင္ေတာ့Download Your Template ဆိုတာေလးကို လုပ္ထားလိုက္ေပါ့ ဒါမွ တစ္ခုခု လြဲေခ်ာ္ ခဲ့သည္ ရွိေသာ္ ကိုယ့္အရင္ တန္းပလိတ္ကို ျပန္ထည့္လို႕ရတာေပါ့..။

ျပီးရင္ Ctrl + F ကို နွိပ္ျပီး့ ေဟာ့ဒီ ေအာက္က ကုဒ္ေလးကို ရွာလိုက္ပါ Expand Widget Templates မလုပ္ထားပါနဲ႕...

<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>

အဲဒီေနရာမွာ တစ္ခု သတိထားရမွာက title='Blog Archive' ဆိုတဲ့ ေနရာမွာ ကိုယ္က တစ္ျခား နာမည္ တစ္ခုခု ကိုေျပာင္းေပးထားတယ္ ဆိုရင္ အဲဒီ နာမည္ကို အစားထိုးထည့္ျပီး ရွာနိုင္ပါတယ္..ဒီလိုမွ မဟုတ္ရင္ေတာ့ ေတြ႕မွာ မဟုတ္ပါဘူး...။

ကဲ ေတြ႕ျပီ ဆိုရင္ေတာ့ ေဟာဒီ ေအာက္က ကုဒ္ေတြကို အဲဒီ စာေၾကာင္းေနရာမွာ အစားထိုးလိုက္ပါ..

<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + "_ArchiveList"'>
<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='toggle' var='interval'>
<!-- Toggle not needed for Calendar -->
</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>

<div id='blogger_calendar' style='display:none'>
<table id='bcalendar'><caption id='bcaption'>

</caption>
<!-- Table Header -->
<thead id='bcHead'></thead>
<!-- Table Footer -->

<!-- Table Body -->
<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 id='lastRow'><td id='cell36'> </td><td id='cell37'> </td></tr>
</tbody>
</table>
<table id='bcNavigation'><tr>
<td id='bcFootPrev'></td>
<td id='bcFootAll'></td>
<td id='bcFootNext'></td>
</tr></table>

<div id='calLoadingStatus' style='display:none; text-align:center;'>
<script type='text/javascript'>bcLoadStatus();</script>
</div>
<div id='calendarDisplay'/>
</div>

<script type='text/javascript'> initCal();</script>

</b:includable>
<b:includable id='posts' var='posts'>
<!-- posts not needed for Calendar -->
</b:includable>
<b:includable id='menu' var='data'>
Configure your calendar archive widget - Edit archive widget - Flat List - Newest first - Choose any Month/Year Format
</b:includable>
<b:includable id='interval' var='intervalData'>
Configure your calendar archive widget - Edit archive widget - Flat List - Newest first - Choose any Month/Year Format
</b:includable>
</b:widget>

ထည့္ျပီးျပီ ဆိုရင္ အရင္ Preview ခလုတ္ ကို နွိပ္ၾကည့္လိုက္ပါ ဘာ Error မွ မျပဘူး ဆိုရင္ သင့္ Templete ကို SAVE လုပ္နိုင္ပါျပီ..။

Save လုပ္ၿပီးသြားျပီ ဆိုရင္ ေနာက္တစ္ဆင့္ အေနနဲ႕ ဒီေအာက္က ကုဒ္ေလးကို ရွာလိုက္ပါ..

]]></b:skin>

ေတြ႕ျပီဆိုရင္ ေအာက္မွာ ေဖာ္ျပထားတဲ့ ကုဒ္ေတြကို အဲဒီ အေပၚမွာ ထည့္ေပးပါ..

/* Archive Calendar CSS
----------------------------------------------- */

/* div that holds calendar */
#blogger_calendar { margin:5px 0 0 0;width:98%;}

/* Table Caption - Holds the Archive Select Menu */
#bcaption {border:1px solid $bcTableBorderColor;padding:2px;margin:10px 0 0;background:$bcMenuBackgroundColor;font:$bcCalenderFonts}

/* The Archive Select Menu */
#bcaption select {background:$bcMenuBackgroundColor;border:0 solid $bcMenuBackgroundColor;color:$bcMenuTextColor;font-weight:bold;text-align:center;}


/* The Heading Section */
table#bcalendar thead {}

/* Head Entries */
table#bcalendar thead tr th {width:20px;text-align:center;padding:2px; border:1px outset $bcTableBorderColor; font:$bcCalenderFonts;background:$bcTableHeaderBackgroundColor;color:$bcTableHeaderTextColor}

/* The calendar Table */
table#bcalendar {border:1px solid $bcTableBorderColor;border-top:0; margin:0px 0 0px;width:95%;background:$bcTableBackgroundColor}

/* The Cells in the Calendar */
table#bcalendar tbody tr td {text-align:center;padding:2px;border:1px outset $bcTableBorderColor; color:$bcTableTextColor;font:$bcCalenderFonts;}

/* Links in Calendar */
table#bcalendar tbody tr td a:link, table#bcalendar tbody tr td a:visited, table#bcalendar tbody tr td a:active {font-weight:bold;color:$bcCalenderLinksColor;}
table#bcalendar tbody tr td a:hover {color:$bcCalenderLinksHoverColor;}

/* First Row Empty Cells */
td.firstCell {visibility:visible;}

/* Cells that have a day in them */
td.filledCell {}

/* Cells that are empty, after the first row */
td.emptyCell {visibility:hidden;}

/* Cells with a Link Entry in them */
td.highlightCell {background:$bcTableHighLightColor;border:1px solid $bcTableBorderColor}

/* Table Footer Navigation */
table#bcNavigation  {width:95%;background:$bcTableFooterBackground;border:1px solid $bcTableBorderColor;border-top:0;color:$bcTableTextColor;font:$bcCalenderFonts;}
table#bcNavigation a:link {text-decoration:none;color:$bcFooterLinksColor}
td#bcFootPrev {width:10px;}
td#bcFootAll{text-align:center;}
td#bcFootNext {width:10px;}
ul#calendarUl {margin:5px auto 0!important;}
ul#calendarUl li a:link {}

ျပီးရင္ေတာ့ ကိုယ့္ရဲ့ Calendar ရဲ့ စာလံုး အရြယ္ အေရာင္ ေနာက္ခံ ဘက္ဂေရာင္း အေရာင္ အစရွိသျဖင့္ ကိုယ့္စိတ္ၾကိဳက္ကို ဘေလာ့ဂါ Layout ->Fonts and Colors ထဲမွာ စိတ္ၾကိဳက္ ျပင္နိုင္ဖို႕ အတြက္ ေအာက္က ကုဒ္ေလးေတြကို ကၽြန္ေတာ္တို႕ ဘေလာ့ရဲ့ မိန္းဖရိမ္ ျဖစ္တဲ့ body နဲ႕ ဘေလာ့တန္းပလိတ္ကို ေရးဆြဲသူ ရဲ့ အခ်က္အလက္ေတြ ေရးထားတဲ့ ေနရာၾကားထဲကို ထည့္ေပးပါ တစ္ခ်ိဳ႕ တန္းပလိတ္မ်ားကေတာ့ ကာလာ Variable ကုဒ္ေတြ ပါျပီးသားဆိုရင္ အဲဒီေအာက္မွာ ထည့္လိုက္ေပါ့ဗ်ာ..ၿပီးရင္ တစ္ခါ ထပ္ျပီး Save လုပ္လိုက္လို႕ ရပါျပီ..။

ေနာက္တစ္ဆင့္ အေနနဲ႕ကေတာ့ Layout -> Page Elements ထဲက ကိုယ့္ archive widget ကို ေအာက္က ပံုေလး အတိုင္း Setting လုပ္ေပးလိုက္..

ၿပီးရင္ေတာ့ သင့္ဘေလာ့ဂ္ရဲ့ ဆိုဒ္ဘားမွာ Wordpress Style Archive Calendar ေလး ေပၚေနပါျပီ..ကိုယ္ၾကိဳက္သလို အေရာင္ေရြးခ်ယ္ဖို႕ကေတာ့ အေပၚမွာ ေျပာထားခဲ့သလိုပဲ Layout ->Fonts and Colors ထဲမွာ သြားျပင္လိုက္ေပါ့ဗ်ာ..

အဲဒီလို အေရာင္ ျပင္ေနတဲ့ အခ်ိန္မွာေတာ့ ေအာက္က Preview မွာ Calendar ထဲ ရက္စြဲေတြ မေပၚေနလို႕ လန္႕ေတာ့ မသြားပါနဲ႕ အားလံုး ျပီးလို႕ save လုပ္ျပီးမွ ကိုယ့္ဘေလာ့ဂ္ ကိုဝင္ၾကည့္မွ အကုန္ျမင္ရမွာပါ..

 ၿပီးပါၿပီ ...