Membuat Arsip Blog Ala Kalender

• J-GazaWidget
• Kirim ke teman
• Print this page
• Facebook
• Gbookmarks
• 9 comments

Ponari Bukan Dukun Cilik

Seperti biasa, pagi tadi saya blogwalking ke purplemoggy tempat saya belajar ngerusak blog. Hari ini saya mendapat ilmu baru yakni membuat Arsip Blog Model Kalender. Contohnya seperti dalam blog ini disidebar sebelah kanan

Meskipun sobat semua mungkin sudah banyak yang tahu tentang tutorial ini, saya tetap ingin mempublish lagi agar tidak lupa kalau membuat blog baru. Cara Membuatnya :

1. Copy script ini

<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> 
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.2.0/build/calendar/assets/calendar.css"/>

Masuk ke Template -> Edit HTML -> cari kode </head> -> pastekan diatas kode tadi

2. Langkah kedua, copy script ini :

<script type="text/javascript">
//<![CDATA[
 /*
  Created by: PurpleMoggy
  http://purplemoggy.blogspot.com
 */
 
 var _yourBlogUrl = "http://ponarijombang.blogspot.com"; //edit this
 var _yourBlogTimeZone = "+07:00";
 
 _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>

Ganti alamat blog saya menjadi alamat blog sobat, tapi jangan ganti alamat blog purplemoggy

Masuk ke Template -> Edit HTML -> cari kode <div id='content-wrapper'> -> pastekan diatas kode tadi -> Simpan

3. Terakhir, Copy script ini

<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="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>

<div id="cal1Container"><img src="http://img239.imageshack.us/img239/9057/40lf8.gif" style="vertical-align:middle;"/> Loading...</div>
<div style="clear:both;"></div>

<div id="calbackloadimg">
 <pre id="cal1loadimg" style="display:none;"><img src="http://img239.imageshack.us/img239/9057/40lf8.gif" style="vertical-align:middle;"/> Loading...</pre>
 <pre id="cal1Titles"></pre>
</div>

</div>

Masuk ke Template -> Page Elements dan tambahkan HTML/Javascript baru -> Pastekan disitu -> Simpan

Selesai dan jadilah Blog Archive versi Kalender

Related Posts by Categories