Postingan yang satu ini hampir sama dengan postingan Blog Archive Blogger, hanya saja kalau Blogger Calendar Archive II yang ini terdapat perbedaan yaitu lebih simple dan jika mouse kita arahkan ke tanggal postingan (hover) maka tooltipnya akan ada dibawah kalendar tersebut, tidak seperti yang terdahulunya Blog Archive Blogger yang dibawah kalendarnya terdapat judul postingan yang apabila pada bulan tersebut jumlah postingannya banyak maka akan memakan tempat sampai kebawah.
Ya udah langsung menuju TKP ajah ya :
- Seperti biasa backup terlebih dahulu template anda.
- Tata Letak -> Edit HTML jangan lupa centang Expand Template Widget.
- Cari kode <head> - </head> letakkan kode dibawah ini diantaranya.
- Setelah itu cari kode ]]></b:skin> dan letakkan diatasnya.
- Save Template anda.
- Setelah itu masuk ke Tata Letak - Elemen Laman tambahkan kode dibawah ini.
- Ganti tulisan yang berwarna merah dengan alamat blog anda dan time zone (untuk indonesia +07:00).
- Save. (sumber)
<script type="text/javascript" src="http://yui.yahooapis.com/2.2.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.2.0/build/calendar/calendar-min.js"></script>
<script type="text/javascript">
//<![CDATA[
var _yourBlogUrl = "http://purplemoggy.blogspot.com"; //edit this
var _yourBlogTimeZone = "-08:00"; //edit this
_yourBlogTimeZone = encodeURIComponent(_yourBlogTimeZone);
var _dayTitles = new Array("","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","");
YAHOO.namespace("example.calendar");
function cal1Init() {
YAHOO.example.calendar.cal1 = new YAHOO.widget.Calendar("cal1","cal1Container");
YAHOO.example.calendar.cal1.addMonthRenderer(1, YAHOO.example.calendar.cal1.renderBodyCellRestricted);
YAHOO.example.calendar.cal1.addMonthRenderer(2, YAHOO.example.calendar.cal1.renderBodyCellRestricted);
YAHOO.example.calendar.cal1.addMonthRenderer(3, YAHOO.example.calendar.cal1.renderBodyCellRestricted);
YAHOO.example.calendar.cal1.addMonthRenderer(4, YAHOO.example.calendar.cal1.renderBodyCellRestricted);
YAHOO.example.calendar.cal1.addMonthRenderer(5, YAHOO.example.calendar.cal1.renderBodyCellRestricted);
YAHOO.example.calendar.cal1.addMonthRenderer(6, YAHOO.example.calendar.cal1.renderBodyCellRestricted);
YAHOO.example.calendar.cal1.addMonthRenderer(7, YAHOO.example.calendar.cal1.renderBodyCellRestricted);
YAHOO.example.calendar.cal1.addMonthRenderer(8, YAHOO.example.calendar.cal1.renderBodyCellRestricted);
YAHOO.example.calendar.cal1.addMonthRenderer(9, YAHOO.example.calendar.cal1.renderBodyCellRestricted);
YAHOO.example.calendar.cal1.addMonthRenderer(10, YAHOO.example.calendar.cal1.renderBodyCellRestricted);
YAHOO.example.calendar.cal1.addMonthRenderer(11, YAHOO.example.calendar.cal1.renderBodyCellRestricted);
YAHOO.example.calendar.cal1.addMonthRenderer(12, YAHOO.example.calendar.cal1.renderBodyCellRestricted);
YAHOO.example.calendar.cal1.selectEvent.subscribe(mySelectHandler, YAHOO.example.calendar.cal1, true);
YAHOO.example.calendar.cal1.changePageEvent.subscribe(myChangePageHandler, YAHOO.example.calendar.cal1, true);
YAHOO.example.calendar.cal1.renderEvent.subscribe(syncMonthYear);
YAHOO.example.calendar.cal1.render();
myChangePageHandler();
};
var myChangePageHandler = function(type,args,obj) {
var month = YAHOO.example.calendar.cal1.cfg.getProperty("pagedate").getMonth() + 1;
if (month.toString().length == 1) {
month = "0" + month;
}
var year = YAHOO.example.calendar.cal1.cfg.getProperty("pagedate").getFullYear();
document.getElementById("cal1Titles").innerHTML = "";
_dayTitles = new Array("","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","");
checkPostsForMonth(month, year);
};
function checkPostsForMonth(month,year) {
document.getElementById("cal1loadimg").style.display = "block";
var script = document.createElement("script");
script.setAttribute("type", "text/javascript");
var theUrl = _yourBlogUrl +"/feeds/posts/summary?alt=json-in-script&callback=checkPostsCallback&published-min=" + year + "-" + month + "-01T00%3A00%3A00" + _yourBlogTimeZone + "&published-max=" + year + "-" + month + "-31T23%3A59%3A59" + _yourBlogTimeZone + "&max-results=100";
script.setAttribute("src", theUrl);
document.documentElement.firstChild.appendChild(script);
};
function checkPostsCallback(json) {
if (json.feed.entry) {
for(i = 0; i < json.feed.entry.length; i++) {
var month = json.feed.entry[i].published.$t.substr(5,2);
var year = json.feed.entry[i].published.$t.substr(0,4);
var day = json.feed.entry[i].published.$t.substr(8,2);
var date = month + "/" + day + "/" + year;
var href = json.feed.entry[i].link[0].href;
var title = json.feed.entry[i].title.$t;
if (day.substr(0,1) == "0") {
day = day.substr(1);
}
document.getElementById("cal1Titles").innerHTML += "<li><a href='" + href + "'>" + title + "</a>";
_dayTitles[day] += "<li><a href='" + href + "'>" + title + "</a>";
YAHOO.example.calendar.cal1.addRenderer(date, myCustomRenderer);
}
YAHOO.example.calendar.cal1.render();
}
document.getElementById("cal1loadimg").style.display = "none";
};
function showDayTitles(day) {
document.getElementById("cal1Titles").innerHTML = _dayTitles[day];
}
var myCustomRenderer = function(workingDate, cell) {
var day = workingDate.toString().substr(8,2);
if (day.substr(0,1) == "0") {
day = day.substr(1);
}
cell.innerHTML = '<div onmouseover="showDayTitles(' + day + ');"><a href="javascript:void(null);" >' + YAHOO.example.calendar.cal1.buildDayLabel(workingDate) + "</a></div>";
YAHOO.util.Dom.addClass(cell, YAHOO.example.calendar.cal1.Style.CSS_CELL_SELECTABLE);
YAHOO.util.Dom.addClass(cell, YAHOO.example.calendar.cal1.Style.CSS_CELL_HIGHLIGHT1);
return YAHOO.widget.Calendar.STOP_RENDER;
}
var mySelectHandler = function(type,args,obj) {
var dates = args[0];
var date = dates[0];
var year = date[0];
var month = date[1];
if (month.toString().length == 1) {
month = "0" + month;
}
var day = date[2];
var element = YAHOO.util.Dom.getElementsByClassName("d" + day, "td", "cal1Container")[0];
if (day.toString().length == 1) {
day = "0" + day;
}
if (element.className.indexOf("highlight1") != -1) {
window.location = _yourBlogUrl + "/search?updated-min=" + year + "-" + month + "-" + day + "T00%3A00%3A00" + _yourBlogTimeZone + "&updated-max=" + year + "-" + month + "-" + day + "T23%3A59%3A59" + _yourBlogTimeZone;
}
};
var changeDate = function() {
YAHOO.example.calendar.cal1.setMonth(parseInt(YAHOO.util.Dom.get("cal1monthselect").value));
YAHOO.example.calendar.cal1.setYear(parseInt(YAHOO.util.Dom.get("cal1yearselect").value));
YAHOO.example.calendar.cal1.render();
myChangePageHandler();
}
var syncMonthYear = function(type) {
YAHOO.util.Dom.get("cal1monthselect").value = parseInt(YAHOO.example.calendar.cal1.cfg.getProperty("pagedate").getMonth());
var fullYear = parseInt(YAHOO.example.calendar.cal1.cfg.getProperty("pagedate").getFullYear());
var isYearFound = false;
var i = 0;
while(i < document.getElementById("cal1yearselect").options.length && !isYearFound) {
if (document.getElementById("cal1yearselect").options[i].value == fullYear) {
isYearFound = true;
}
i++;
}
if (!isYearFound) {
var option = document.createElement("option");
option.setAttribute("value", fullYear);
var text = document.createTextNode(fullYear);
option.appendChild(text);
document.getElementById("cal1yearselect").appendChild(option);
}
YAHOO.util.Dom.get("cal1yearselect").value = fullYear;
};
YAHOO.util.Event.addListener(window, "load", cal1Init);
YAHOO.util.Event.addListener("cal1dateselect", "click", changeDate);
//]]>
</script>
.yui-calcontainer {
position:relative;
padding:5px;
background-color:#F7F9FB;
border:1px solid #7B9EBD;
float:left;
overflow:hidden;
}
.yui-calcontainer iframe {
position:absolute;
border:none;
margin:0;padding:0;
left:-1px;
top:-1px;
z-index:0;
width:50em;
height:50em;
}
.yui-calcontainer.multi {
padding:0;
}
.yui-calcontainer.multi .groupcal {
padding:5px;
background-color:transparent;
z-index:1;
float:left;
position:relative;
border:none;
}
.yui-calcontainer .title {
font:100% sans-serif;
color:#000;
font-weight:bold;
margin-bottom:5px;
height:25px;
position:absolute;
top:3px;left:5px;
z-index:1;
}
.yui-calcontainer .close-icon {
position:absolute;
right:3px;
top:3px;
border:none;
z-index:1;
}
.yui-calcontainer .calclose {
background: url("calx.gif") no-repeat;
width:17px;
height:13px;
cursor:pointer;
}
/* Calendar element styles */
.yui-calendar {
font:100% sans-serif;
text-align:center;
border-spacing:0;
border-collapse:separate;
position:relative;
}
.yui-calcontainer.withtitle {
padding-top:1.5em;
}
.yui-calendar .calnavleft {
position:absolute;
cursor:pointer;
top:2px;
bottom:0;
width:9px;
height:12px;
left:2px;
z-index:1;
background: url("callt.gif") no-repeat;
}
.yui-calendar .calnavright {
position:absolute;
cursor:pointer;
top:2px;
bottom:0;
width:9px;
height:12px;
right:2px;
z-index:1;
background: url("calrt.gif") no-repeat;
}
.yui-calendar td.calcell {
padding:.1em .2em;
border:1px solid #E0E0E0;
text-align:center;
}
.yui-calendar td.calcell a {
color:#003DB8;
text-decoration:none;
}
.yui-calendar td.calcell.today {
border:1px solid #000;
}
.yui-calendar td.calcell.oom {
cursor:default;
color:#999;
background-color:#EEE;
border:1px solid #E0E0E0;
}
.yui-calendar td.calcell.selected {
color:#003DB8;
background-color:#FFF19F;
border:1px solid #FF9900;
}
.yui-calendar td.calcell.calcellhover {
cursor:pointer;
color:#FFF;
background-color:#FF9900;
border:1px solid #FF9900;
}
.yui-calendar td.calcell.calcellhover a {
color:#FFF;
}
.yui-calendar td.calcell.restricted {
text-decoration:line-through;
}
.yui-calendar td.calcell.previous {
color:#CCC;
}
.yui-calendar td.calcell.highlight1 { background-color:#CCFF99; }
.yui-calendar td.calcell.highlight2 { background-color:#99CCFF; }
.yui-calendar td.calcell.highlight3 { background-color:#FFCCCC; }
.yui-calendar td.calcell.highlight4 { background-color:#CCFF99; }
.yui-calendar .calhead {
border:1px solid #E0E0E0;
vertical-align:middle;
background-color:#FFF;
}
.yui-calendar .calheader {
position:relative;
width:100%;
text-align:center;
}
.yui-calendar .calheader img {
border:none;
}
.yui-calendar .calweekdaycell {
color:#666;
font-weight:normal;
text-align:center;
width:1.5em;
}
.yui-calendar .calfoot {
background-color:#EEE;
}
.yui-calendar .calrowhead, .yui-calendar .calrowfoot {
color:#666;
font-size:9px;
font-style:italic;
font-weight:normal;
width:15px;
}
.yui-calendar .calrowhead {
border-right-width:2px;
}
/* Specific changes for calendar running under fonts/reset */
.yui-calendar .calbody a:hover {background:inherit;}
p#clear {clear:left; padding-top:10px;}
<div id="cal1wrapper">
<div id="cal1select">
<select name="cal1monthselect" id="cal1monthselect">
<option value="0">January</option>
<option value="1">February</option>
<option value="2">March</option>
<option value="3">April</option>
<option value="4">May</option>
<option value="5">June</option>
<option value="6">July</option>
<option value="7">August</option>
<option value="8">September</option>
<option value="9">October</option>
<option value="10">November</option>
<option value="11">December</option>
</select>
<select name="cal1yearselect" id="cal1yearselect">
<option value="1995">1995</option>
<option value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
</select>
<input type="button" value="-->" id="cal1dateselect"/>
</div>
<br/>
<div id="cal1Container"><img src="http://www.sigmirror.com/files/52336_5adzm/indicator_yellow.gif" style="vertical-align:middle;"/> Please wait...</div>
<div style="clear:both;"></div>
<div id="calbackloadimg">
<pre id="cal1loadimg" style="display:none;"><img src="http://www.sigmirror.com/files/52336_5adzm/indicator_yellow.gif" style="vertical-align:middle;"/> Please Wait...</pre>
<pre id="cal1Titles"></pre>
</div>
</div>
0 komentar:
Post a Comment
saran, komentar dan kritikan anda sangat berharga buat saya, terima kasih.