angkin tidak ada gawe, yakinlah sumpah obat pusing artikel kali ini mah :(( Enggak tauk juga bisa menclok lagi, dan setiap kali nemplok pasti ajah ada yg bikin penasaran Beben Koben si bloglang anu ganteng kalem tea. Masih ingat dong dengan koloni
dari negeri tirai bambu berikut. Sedikit berbeda namun menawarkan feature tersendiri ;) Today gue bongkar mengenai
. Terdapat 5 style theme calender termasuk default theme. Sebenarnya mah gampang tinggal langsung install sistem Add To Blogger itu tea. Namun waktu dipencet intall to blogger, tidak ada datanya :D
Maka dari itu Beben kesana kemari mencari kemana data yg masih valid. Akhirnya ketemu juga & masih berfungsi dengan baik :) Jika berbicara Blogger Archive Calendar tak afdhol kalau tidak melihat hack dari master phydeaux3 Kalender Arsip Blogger :-bd Hasil karya phydeaux3 menampilkan kalender arsip, dimana judul postingan pada bulan yg dituju akan terlihat dibawah kalender & link tanggal menjadi link arsip berdasarkan label b-)
Kalau sekarang yg akan dikuak dari blogger china, title postingan pada bulan yg dituju tidak akan tampak, link pada kalender menjadi link postingannya ;) Beben dulu sempat pakek yg dari pideaux3 :P
Sebelum memulai dan memang berniat akan dipakai pada blog sobat, ada baiknya mempertimbangkan beberapa hal berikut!
- Download/Backup Full Template
Kalau error terjadi jangan salahin koben, makanya save terlebih dahulu jika mo ngedit² template :P - Pertimbangkan
Karena hack arsip kalender memerlukan kode & script yg cukup lumayan besar. Arsip kalender akan mempengaruhi loading blog dikarenakan merender arsip ke tanggal² sebelumnya. - Buat gaya ajah LoL.
Keputusan ada ditangan sobat masing² :) Buat melihat lima gaya theme sobat buka halaman berikut
Blogger AJAX Archive Calendar Theme. Jika males & lemot :P screenshot ready here :D
Sikat bumbu²ne, dan masukin langsung via Add a Gadget ► HTML/Javascript
<div id="blogCalendar"></div>
<script type="text/javascript">
//<![CDATA[
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('D 2a(){w.1n=1n;w.1o=1o;w.P=P;w.1K=1K;w.3=3;w.1c=1c;w.1p=1p;w.S=S;w.1q=1q;w.2b=N 1r("2S","2T","2U","2V","2W","2X","2Y");w.1L=N 1r("2Z","32","33","36","37","38","39","3a","3b","3c","3d","3e");w.Y=N 1r("1d","3f","3g","3h","3i","3j","3k","2c","3l","10","11","12");w.1e=N 1r(31,28,31,30,31,30,31,31,30,31,30,31);w.1f=N 1g();w.B=N 1g();w.1s=0;w.1M=\'2d.3m.2e\';w.H=\'+2c:1t\';w.2f=1u;w.2g=3n;w.2h=\'<2i 2j="1N://2d-3o.3p.2e/3q/3r/3/3s-3t.3u"></2i>\'}D 3(a){9 b=a.14();9 c=3.Y[a.Q()]+\'\';9 d=3.1e[a.Q()];9 e=3.1f.1v();v(a.Q()==1&&(((b%4==0)&&(b%3v!=0))||(b%3w==0))){d=29;3.1e[1]=\'29\'}O 3.1e[1]=\'28\';9 f=a;f.3x (1);3.1s=f.3y();9 g=\'\';g+=\'<1h 1O="1w" 3z="0">\';g+=\'<T>\';U(9 h=0;h<7;h++){g+=\'<2k>\'+3.2b[h]+\'</2k>\'}g+=\'</T>\';9 i=0;U(h=0;h<3.1s;h++){v(i==0)g+=\'<T>\';g+=\'<E 17="1P">&K;</E>\';i++}U(h=1;h<=d;h++){v(i==0)g+=\'<T>\';v(h==e&&a.Q()==3.1f.Q()&&b==3.1f.14())g+=\'<E 17="1Q">\'+h+\'</E>\';O g+=\'<E 17="1P">\'+h+\'</E>\';v(i==6){g+=\'</T>\';i=0}O i++}v(i>0){U(9 j=0;j<(7-i);j++){g+=\'<E 17="1P">&K;</E>\'}g+=\'</T>\'}g+=\'</1h>\';1x g}D 1n(){I=3.B.Q()-1;V=3.B.14();v(I<0){I=11;V=V-1}I=3.Y[I];3.B=N 1g(V+\'/\'+I+\'/1 1t:1d\');3.P()}D 1o(){I=3.B.Q()+1;V=3.B.14();v(I>11){I=0;V=V+1}I=3.Y[I];3.B=N 1g(V+\'/\'+I+\'/1 1t:1d\');3.P()}D 1c(a,b,c){9 d=u.z(\'2l\');v(d!=1R)u.2m.1S.3A(d);v(b==11){9 e=\'1d\';9 f=a+1}O{9 e=3.Y[b+1];9 f=a}9 g=\'1y-2n=\'+a+\'-\'+3.Y[b]+\'-2o%W%W\'+3.H+\'&1y-18=\'+f+\'-\'+e+\'-2o%W%W\'+3.H+\'&18-1z=35&3B-3C=\'+c;9 h=u.1A(\'2p\');9 i=\'1N://\'+3.1M+\'/3D/3E/3F?3G=3H-3I-2p&3J=3.1p&\'+g;h.F(\'2j\',i);h.F(\'C\',\'2l\');h.F(\'2q\',\'1T/J\');u.2m.1S.1B(h)}D 1p(a){9 b=a.1U.3K;9 c=\'\';9 d=u.z(\'1V\');9 e=3.H;v(b!=1R){9 f=d.19(\'E\');U(9 i=0;i<b.R;i++){9 g=b[i].1y.$t.L(0,10);9 h=g.L(8,2);9 k=f[3.1s+(1C(h,10)-1)];9 l=b[i].1D.$t;9 j=0;3L(j<b[i].1W.R&&b[i].1W[j].3M!=\'3N\')j++;2r=j;v(h==c){9 m=k.1S;9 n=m.2s(\'G\');9 o=n.3O(/(18-1z=)(\\d+)/i);v(o==3P){v(3.2f){9 p=b[i].1y.$t.L(23,6);v(p!=3Q(e)){e=2t(p);e=e.1E(/\\-/,\'%2D\')}}9 q=g.L(5,2);v(h==3.1e[1C(q,10)-1]){9 r=g.L(0,4)+\'-\'+(1C(q,10)+1)+\'-1d\';v(r.R<10)r=r.L(0,5)+\'0\'+r.L(5,5)}O{9 r=g.L(0,8)+(1C(h,10)+1);v(r.R<10)r=r.L(0,8)+\'0\'+r.L(8,1)}n=\'1N://\'+3.1M+\'/3R?2u-2n=\'+g+\'2v%W%W\'+e+\'&2u-18=\'+r+\'2v%W%W\'+e+\'&18-1z=2\'}O n=n.1E(/(18-1z=)(\\d+)/i,\'$1\'+(o[2]*1+1));m.F(\'G\',n);m.F(\'1D\',l+\', \\n\'+m.2s(\'1D\'));3S}c=h;k.15=k.15=\'<a G=\'+b[i].1W[2r].G+\' 1D="\'+l.1E(/\\"/g,\'"\')+\'">\'+k.15+\'</a>\';k.3T=\'3U\'}}v(a.1U.2w$3V.$t*1>35)1c(g.L(0,4)*1,q*1,a.1U.2w$3W.$t*1+35);O{f=u.z(\'1X\').19(\'a\');f[0].F(\'G\',\'J:3.1n();\');f[1].F(\'G\',\'J:3.1o();\');f=u.z(\'1F\').19(\'a\');f[0].F(\'G\',\'J:3.B = N 1g();3.P();\');u.z(\'S\').A.M=\'1i\';u.z(\'1G\').A.M=\'1i\';u.z(\'1Y\').A.M=\'1a\';v(3.2g){9 s=d.19(\'1h\')[0].1Z-d.1Z;u.z(\'1F\').A.3X=s+\'20\'}}}D 1K(){9 a=u.1A(\'16\');a.F(\'C\',\'1X\');9 b=\'<16 C="S" A="M:1a">\';U(9 i=0;i<12;i++){b+=\'<a G="J:3.S(\'+i+\');">\'+3.1L[i]+\'</a><3Y>\'}b+=\'</16>\';9 c=\'<16 C="1G" A="M:1a"><2x 2y="3Z" 40="J:1x 1u;" 41="">\';c+=\'<42 A="2z:43;" 17="44" 2q="1T" 2A="\'+3.B.14()+\'" 2y="45" 46="v(2B.47==13||2B.48 == 13) {3.1q(w.2A); 1x 1u;}" /></2x></16>\';9 d=\'<1h 1O="1w"></2C><T><E><a G="J:1b(0);">&2E;&2E;&K;&K;</a></E>\';d+=\'<E A="1T-1O:1w;2z:49%"><X C="2F"> </X></E>\';d+=\'<E><a G="J:1b(0);">&K;&K;&2G;&2G;</a></E></T></2C></1h>\';d+=b+c;a.15=d;9 e=u.1A(\'16\');e.F(\'C\',\'1V\');9 f=u.1A(\'16\');f.F(\'C\',\'1F\');f.A.2H=\'2I\';9 g=\'<a G="J:1b(0);" 17="1Q">1Q</a>&K;&K;\';g+=3.Y[3.B.Q()]+\'/\';v(3.B.1v().4a().R<2)g+=\'0\'+3.B.1v();O g+=3.B.1v();g+=\'/\'+3.B.14();g+=\'<X C="1Y">\'+3.2h+\'</X>\';f.15=g;9 h=u.z(\'4b\');h.A.2H=\'1w\';h.1B(a);h.1B(e);h.1B(f);v(3.H.R<4&&3.H!=\'Z\')3.H=3.H+\':1t\';3.H=2t(3.H);3.H=3.H.1E(/\\-/,\'%2D\');3.P()}D P(){9 a=u.z(\'1Y\');a.A.M=\'1i\';9 b=3.B.Q();9 c=3.B.14();u.z(\'2F\').15=\'<X C="2J">\'+3.1L[b]+\'</X>&K;&K;&K;\'+\'<X C="2K">\'+c+\'</X>\';u.z(\'1V\').15=3.3(3.B);9 d=u.z(\'1G\');9 e=u.z(\'S\');v(3.1f>=3.B){9 f=u.z(\'1X\').19(\'a\');f[0].F(\'G\',\'J:1b(0)\');f[1].F(\'G\',\'J:1b(0)\');9 f=u.z(\'1F\').19(\'a\');f[0].F(\'G\',\'J:1b(0)\');e.A.M=\'1a\';d.A.M=\'1a\';3.1c(c,b,1)}O{a.A.M=\'1a\';e.A.M=\'1i\';d.A.M=\'1i\'}21("2J","S","22","y","2L");21("2K","1G","22","y","2L")}D S(a){3.B.4c(a);3.P()}D 1q(a){3.B.4d(a);3.P()}3=N 2a();D 24(a,b){9 p=u.z(a);9 c=u.z(b);9 d=(c["1H"]=="y")?p.4e+2:0;9 e=(c["1H"]=="x")?p.4f+2:0;U(;p;p=p.4g){d+=p.4h;e+=p.1Z}c.A.2M="2N";c.A.4i=d+\'20\';c.A.2I=e+\'20\';c.A.1j="2O"}D 1I(){9 p=u.z(w["1k"]);9 c=u.z(w["1l"]);24(p.C,c.C);4j(c["2P"])}D 1m(){9 p=u.z(w["1k"]);9 c=u.z(w["1l"]);c["2P"]=4k("u.z(\'"+c.C+"\').A.1j = \'25\'",4l)}D 2Q(){9 p=u.z(w["1k"]);9 c=u.z(w["1l"]);v(c.A.1j!="2O")24(p.C,c.C);O c.A.1j="25";1x 1u}D 21(a,b,d,e,f){9 p=u.z(a);9 c=u.z(b);p["1k"]=p.C;c["1k"]=p.C;p["1l"]=c.C;c["1l"]=c.C;p["1H"]=e;c["1H"]=e;c.A.2M="2N";c.A.1j="25";9 g=c.4m;U(9 i=0;i<g.R;i++){v(g[i].4n==\'4o\')26}v(f!=1R)p.A.4p=f;4q(d){2R"22": p.4r=2Q;p.1J=1m;c.27=1I;v(i==g.R)c.1J=1m;26;2R"4s": p.27=1I;p.1J=1m;c.27=1I;v(i==g.R)c.1J=1m;26}}',62,277,'|||Calendar||||||var|||||||||||||||||||||document|if|this|||getElementById|style|cur_day|id|function|td|setAttribute|href|timeZone|thisMonth|javascript|nbsp|substr|display|new|else|refreshTable|getMonth|length|monthTable|tr|for|year|3A00|span|month_label||||||getFullYear|innerHTML|div|class|max|getElementsByTagName|none|void|fetchposts|01|month_days|today|Date|table|inline|visibility|at_parent|at_child|at_hide|PrevMonth|NextMonth|addLink|yearTable|Array|startDay|00|false|getDate|center|return|published|results|createElement|appendChild|parseInt|title|replace|CalendarFooter|yearSelect|at_position|at_show|onmouseout|drawTable|month_label_real|base|http|align|Lastday|Today|undefined|firstChild|text|feed|CalendarTable|link|CalendarCaption|CalLoading|offsetLeft|px|at_attach|click||at_show_aux|hidden|break|onmouseover|||ArchiveCalendar|week_label|08|lvchen|com|timeZoneCheck|alignFooter|loading|img|src|th|jsonPosts|documentElement|min|01T00|script|type|titleLinkIdx|getAttribute|encodeURIComponent|updated|T00|openSearch|form|name|width|value|event|tbody||lt|CalendarMonth|gt|textAlign|left|monthTable_parent|yearSelect_parent|pointer|position|absolute|visible|at_timeout|at_click|case|Sun|Mon|Tue|Wed|Thu|Fri|Sat|January|||February|March|||April|May|June|July|August|September|October|November|December|02|03|04|05|06|07|09|blogspot|true|recentcomments|googlecode|svn|trunk|ajax|loader|gif|100|400|setDate|getDay|cellspacing|removeChild|start|index|feeds|posts|summary|alt|json|in|callback|entry|while|rel|alternate|match|null|unescape|search|continue|className|Linkday|totalResults|startIndex|paddingLeft|br|form2year|onsumbit|action|input|4em|yearInput|enteryear|onkeypress|keyCode|which|70|toString|blogCalendar|setMonth|setYear|offsetHeight|offsetWidth|offsetParent|offsetTop|top|clearTimeout|setTimeout|333|childNodes|nodeName|FORM|cursor|switch|onclick|hover'.split('|'),0,{}))//]]>
</script>
<script type="text/javascript">
//<![CDATA[
Calendar.base='YOUR-NAME-BLOG.blogspot.com';
Calendar.timeZone='+07';
Calendar.timeZoneCheck = true;
Calendar.week_label = ["<font color='#FF0000'> Sun</font>"," Mon"," Tue"," Wed"," Thu"," Fri","<font color='#FF0000'> Sat </font>"];
Calendar.month_label_real = ["Januari", "Februari", "Maret", "April", "Mei", "Juni", "Juli", "Agustus", "September", "Oktober", "November", "Desember"];
Calendar.drawTable();
//]]>
</script>
<style>
#blogCalendar {
display:block;
text-algin:center;
width:100%;
background: #FFFF99;
}
#CalendarCaption a
{
text-decoration:none;
}
#CalendarCaption{
border-bottom:1px solid #555;
width:100%;
margin:auto;
}
#CalendarTable a{
font-weight:bold;
text-decoration:none;
color:5599FF;
}
.Today{
background: #DBEAFF;
font-weight:bold;
text-decoration:none;
}
#CalendarFooter{
font-weight:bold;
background: #FFCC00;
}
.yearInput{
color: #000;
background: #888;
}
#monthTable{
color: #000;
padding:0 10px;
background: #888;
border:2px solid #999;
}
</style>
Urusan CSS sudah Koben minimalisir seminimal mungkin, jadi kalo mau divariasikan silahkan tambahkan saja. Jangan lupa ganti url blog
YOUR-NAME-BLOG.blogspot.com SAVE.
Good luck
This is CSS code variabel for theme! Kalau mau variasi CSS yg lainnya tinggal ganti saja bumbu CSS diatas ;)
MIMI CSS
#blogCalendar {
border:1px solid #fff;
width:100%;
margin:0;
}
#CalendarCaption {
border-bottom:1px dotted #222;
background:#CEE3F6;
margin:auto;
}
#CalendarCaption a {
color:#777;
text-decoration:none;
font-size:100%;
}
#CalendarCaption table {
color:#DF7401;
font-family:arial;
}
#CalendarTable {
background:#E3F6CE;
padding:0 0 5px;
}
#CalendarTable table {
text-align:center;
font-family:arial;
font-size:85%;
}
#CalendarTable table th {
color:#8B0000;
font-family:arial;
font-weight:lighter;
font-size:85%;
padding:3px;
}
#CalendarTable table td.Linkday a:hover {
text-decoration:none;
display:block;
background:#81BEF7;
color:#FFF;
}
#CalendarTable .Today {
color:#DF7401;
font-weight:700;
}
.Today a:visited,.Today a:link,.Today a:active,.Today a:hover {
text-decoration:none;
color:#ddd;
}
#CalendarTable .Lastday {
color:#999;
}
#CalendarFooter {
font-family:arial;
background:#CEE3F6;
color:#DF7401;
padding-top:2px;
padding-bottom:3px;
border-top:1px dotted #222;
font-size:80%;
}
#monthTable {
text-align:left;
font-family:arial;
font-size:85%;
background:#eee;
padding:5px;
}
.yearInput {
background:#eee;
color:blue;
padding:2px;
}
#CalLoading {
margin:0 0 0 2em;
}
ANNIE CSS
#blogCalendar {
border:1px solid #fff;
width:100%;
margin:0;
}
#CalendarCaption {
border-bottom:1px dotted #222;
background:#CEE3F6;
margin:auto;
}
#CalendarCaption a {
color:#777;
text-decoration:none;
font-size:100%;
}
#CalendarCaption table {
color:#DF7401;
font-family:arial;
}
#CalendarTable {
background:#E3F6CE;
padding:0 0 5px;
}
#CalendarTable table {
text-align:center;
font-family:arial;
font-size:85%;
}
#CalendarTable table th {
color:#8B0000;
font-family:arial;
font-weight:lighter;
font-size:85%;
padding:3px;
}
#CalendarTable table td.Linkday a:hover {
text-decoration:none;
display:block;
background:#81BEF7;
color:#FFF;
}
#CalendarTable .Today {
color:#DF7401;
font-weight:700;
}
.Today a:visited,.Today a:link,.Today a:active,.Today a:hover {
text-decoration:none;
color:#ddd;
}
#CalendarTable .Lastday {
color:#999;
}
#CalendarFooter {
font-family:arial;
background:#CEE3F6;
color:#DF7401;
padding-top:2px;
padding-bottom:3px;
border-top:1px dotted #222;
font-size:80%;
}
#monthTable {
text-align:left;
font-family:arial;
font-size:85%;
background:#eee;
padding:5px;
}
.yearInput {
background:#eee;
color:blue;
padding:2px;
}
#CalLoading {
margin:0 0 0 2em;
}
STAR CSS
#blogCalendar {
text-align:center;
border:0;
background:url(http://jessieshu1984.googlepages.com/blog01-7.jpg) no-repeat top;
font-family:arial;
height:180px;
line-height:14px;
margin:0;
}
#CalendarCaption a {
color:#777;
text-decoration:none;
font-size:80%;
margin:auto;
}
#CalendarCaption {
width:80%;
margin:auto;
}
#CalendarTable {
height:123px;
margin-top:2px;
}
#CalendarTable a {
font-weight:700;
color:purple;
}
#CalendarTable table {
width:auto;
border:0;
text-align:center;
font-size:80%;
padding-top:5px;
margin:auto;
}
#CalendarTable table th {
font-size:85%;
}
#CalendarTable table td {
border:0;
}
#CalendarTable a:link,#Calendar a:visited,#Calendar a:active {
font-weight:700;
text-decoration:underline;
}
#CalendarTable a:hover {
text-decoration:none;
}
#CalendarMonth {
font-size:90%;
}
.Today {
text-decoration:none;
color:#8B0000;
}
.Today a:visited,.Today a:link,.Today a:active,.Today a:hover {
text-decoration:none;
color:#ddd;
}
#CalendarFooter {
color:Green;
font-size:80%;
padding-top:10px;
}
#monthTable,.yearInput {
background:#eee;
}
DOGFOOT CSS
#blogCalendar {
text-align:center;
border:0;
background:url(http://jessieshu1984.googlepages.com/TomyAva-12.jpg) no-repeat top;
font-family:arial;
height:180px;
line-height:14px;
margin:0;
}
#CalendarCaption a {
color:#777;
text-decoration:none;
font-size:80%;
margin:auto;
}
#CalendarCaption {
width:80%;
margin:auto;
}
#CalendarTable {
height:120px;
margin-top:0;
}
#CalendarTable a {
font-weight:700;
color:purple;
}
#CalendarTable table {
width:auto;
border:0;
text-align:center;
font-size:80%;
padding-top:5px;
margin:auto;
}
#CalendarTable table th {
font-size:85%;
}
#CalendarTable a:link,#Calendar a:visited,#Calendar a:active {
font-weight:700;
text-decoration:underline;
}
#CalendarTable a:hover {
text-decoration:none;
}
#CalendarMonth {
font-size:90%;
}
.Today {
color:#8B0000;
text-decoration:none;
}
.Today a:visited,.Today a:link,.Today a:active,.Today a:hover {
text-decoration:none;
color:#ddd;
}
#CalendarFooter {
color:Green;
font-size:80%;
padding-top:5px;
}
#monthTable,.yearInput {
background:#eee;
}
Happy arsip kalender \m/
