Sabtu, 02 Juli 2011

Archieve Calendar for Blogger Arsip

Sangkin 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 blogger from China! Yap dari sono ono obat paniang kepalo muncul :))
Tengok karya recent comments dari negeri tirai bambu berikut. Sedikit berbeda namun menawarkan feature tersendiri ;) Today gue bongkar mengenai Blogger AJAX Archive Calendar v1.0 created by LVCHEN. 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

blogger-archieve-calender.png
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,\'&#34;\')+\'">\'+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'>&nbsp;Sun</font>","&nbsp;Mon","&nbsp;Tue","&nbsp;Wed","&nbsp;Thu","&nbsp;Fri","<font color='#FF0000'>&nbsp;Sat&nbsp;</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/

Tidak ada komentar:

Posting Komentar