Serap Info

Browse Manual » Wiring » arsip » blog » cara » kalender » mengubah » menjadi » widget » Cara Mengubah Widget Arsip Blog Menjadi Kalender

---

Cara Mengubah Widget Arsip Blog Menjadi Kalender

4. Selanjutnya, masuk menu Template - Edit HTML.

5. Cari kode yang kurang lebih seperti ini :

<b:widget id=BlogArchive1 locked=false title=Arsip Blog type=BlogArchive>

...................................

...................................

................................... 

</b:widget>

6. Lalu ganti kode tersebut diatas dengan kode berikut ini :

<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 + &quot;_ArchiveList&quot;> 
    <b:if cond=data:style == &quot;HIERARCHY&quot;> 
     <b:include data=data name=interval/> 
    </b:if> 
    <b:if cond=data:style == &quot;FLAT&quot;> 
      <b:include data=data name=flat/> 
    </b:if> 
    <b:if cond=data:style == &quot;MENU&quot;> 
      <b:include data=data name=menu/> 
    </b:if> 
  </div> 
  </div> 
  <b:include name=quickedit/> 
  </div> 
</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/> 
<!-- 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 id=bcFootAll/> 
<td id=bcFootNext/> 
</tr></table> 
<div id=judul style=underline; text-align:center;>Baca Artikel :</div>  
<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=interval var=intervalData> 
  Configure your calendar archive widget - Edit archive widget - Flat List - Newest first - Choose any Month/Year Format 
</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=posts var=posts> 
<!-- posts not needed for Calendar --> 
</b:includable>
            <b:includable id=toggle var=interval> 
  <!-- Toggle not needed for Calendar --> 
</b:includable>
          </b:widget>

7. Selanjutnya letakkan kode berikut ini diatas kode </head> :

<script type=text/javascript> 
//<![CDATA[ 
var bcLoadingImage = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhf6UxWyyRiVyp6Aw1xFHzaV7gt6WSkXqYaorbFHQChyphenhyphenqktadeuoZP-CEYsEBJ_v6-wGj__Of5HaUlcuwaBxKl9uylTl4ZfEZFbt3spyEtUalDeHwXe5MXJvEwHM3spd1L0EBWq2CDjYeBx/s1600/ajax-loader(2).gif"; 
var bcArchiveNavText = "Lihat Arsip Blog"; 
var bcArchiveNavPrev = ◄; 
var bcArchiveNavNext = ►; 
var headDays = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
var headInitial = ["Su","Mo","Tu","We","Th","Fr","Sa"]; 
// Nothing to configure past this point ---------------------------------- 
var timeOffset; 
var bcBlogID; 
var calMonth; 
var calDay = 1; 
var calYear; 
var startIndex; 
var callmth; 
var bcNav = new Array (); 
var bcList = new Array (); 
//Initialize Fill Array 
var fill = ["","31","28","31","30","31","30","31","31","30","31","30","31"]; 
function openStatus(){ 
   document.getElementById(calLoadingStatus).style.display = block; 
   document.getElementById(calendarDisplay).innerHTML = ; 
  } 
function closeStatus(){ 
   document.getElementById(calLoadingStatus).style.display = none; 
  } 
function bcLoadStatus(){ 
   cls = document.getElementById(calLoadingStatus); 
   img = document.createElement(img); 
   img.src = bcLoadingImage; 
   img.style.verticalAlign = middle; 
   cls.appendChild(img); 
   txt = document.createTextNode(bcLoadingMessage); 
   cls.appendChild(txt); 
  } 
function callArchive(mth,yr,nav){ 
// Check for Leap Years 
  if (((yr % 4 == 0) && (yr % 100 != 0)) || (yr % 400 == 0)) { 
      fill[2] = 29; 
   } 
  else { 
      fill[2] = 28; 
   } 
   calMonth = mth; 
   calYear = yr; 
   if(mth.charAt(0) == 0){ 
      calMonth = mth.substring(1); 
      } 
   callmth = mth; 
   bcNavAll = document.getElementById(bcFootAll); 
   bcNavPrev = document.getElementById(bcFootPrev); 
   bcNavNext = document.getElementById(bcFootNext); 
   bcSelect = document.getElementById(bcSelection); 
   a = document.createElement(a); 
   at = document.createTextNode(bcArchiveNavText); 
   a.href = bcNav[nav]; 
   a.appendChild(at); 
   bcNavAll.innerHTML = ; 
   bcNavAll.appendChild(a); 
   bcNavPrev.innerHTML = ; 
   bcNavNext.innerHTML = ; 
   if(nav <  bcNav.length -1){ 
      a = document.createElement(a); 
      a.innerHTML = bcArchiveNavPrev; 
      bcp = parseInt(nav,10) + 1; 
      a.href = bcNav[bcp]; 
      a.title = Previous Archive; 
      prevSplit = bcList[bcp].split(,); 
      a.onclick = function(){bcSelect.options[bcp].selected = true;openStatus();callArchive(prevSplit[0],prevSplit[1],prevSplit[2]);return false;}; 
      bcNavPrev.appendChild(a); 
      } 
   if(nav > 0){ 
      a = document.createElement(a); 
      a.innerHTML = bcArchiveNavNext; 
      bcn = parseInt(nav,10) - 1; 
      a.href = bcNav[bcn]; 
      a.title = Next Archive; 
      nextSplit = bcList[bcn].split(,); 
      a.onclick = function(){bcSelect.options[bcn].selected = true;openStatus();callArchive(nextSplit[0],nextSplit[1],nextSplit[2]);return false;}; 
      bcNavNext.appendChild(a); 
     } 
   script = document.createElement(script); 
   script.src = http://www.blogger.com/feeds/+bcBlogId+/posts/summary?published-max=+calYear+-+callmth+-+fill[calMonth]+T23%3A59%3A59+timeOffset+&published-min=+calYear+-+callmth+-01T00%3A00%3A00+timeOffset+&max-results=100&orderby=published&alt=json-in-script&callback=cReadArchive; 
   document.getElementsByTagName(head)[0].appendChild(script); 
} 
function cReadArchive(root){ 
// Check for Leap Years 
  if (((calYear % 4 == 0) && (calYear % 100 != 0)) || (calYear % 400 == 0)) { 
      fill[2] = 29; 
   } 
  else { 
      fill[2] = 28; 
   } 
    closeStatus(); 
    document.getElementById(lastRow).style.display = none; 
    calDis = document.getElementById(calendarDisplay); 
    var feed = root.feed; 
    var total = feed.openSearch$totalResults.$t; 
    var entries = feed.entry || []; 
    var fillDate = new Array(); 
    var fillTitles = new Array(); 
    fillTitles.length = 32; 
    var ul = document.createElement(ul); 
    ul.id = calendarUl; 
    for (var i = 0; i < feed.entry.length; ++i) { 
      var entry = feed.entry[i]; 
      for (var j = 0; j < entry.link.length; ++j) { 
       if (entry.link[j].rel == "alternate") { 
       var link = entry.link[j].href; 
       } 
      } 
      var title = entry.title.$t; 
      var author = entry.author[0].name.$t; 
      var date = entry.published.$t; 
      var summary = entry.summary.$t; 
      isPublished = date.split(T)[0].split(-)[2]; 
      if(isPublished.charAt(0) == 0){ 
         isPublished = isPublished.substring(1); 
         } 
      fillDate.push(isPublished); 
      if (fillTitles[isPublished]){ 
          fillTitles[isPublished] = fillTitles[isPublished] +  |  + title; 
          } 
      else { 
          fillTitles[isPublished] = title; 
          } 
      li = document.createElement(li); 
      li.style.listType = none; 
      li.innerHTML = <a href="+link+">+title+</a>; 
      ul.appendChild(li); 
      } 
   calDis.appendChild(ul); 
   var val1 = parseInt(calDay, 10) 
   var valxx = parseInt(calMonth, 10); 
   var val2 = valxx - 1; 
   var val3 = parseInt(calYear, 10); 
   var firstCalDay = new Date(val3,val2,1); 
   var val0 = firstCalDay.getDay(); 
   startIndex = val0 + 1; 
  var dayCount = 1; 
  for (x =1; x < 38; x++){ 
      var cell = document.getElementById(cell+x); 
      if( x < startIndex){ 
          cell.innerHTML =  ; 
          cell.className = firstCell; 
         } 
      if( x >= startIndex){ 
          cell.innerHTML = dayCount; 
          cell.className = filledCell; 
          for(p = 0; p < fillDate.length; p++){ 
              if(dayCount == fillDate[p]){ 
                  if(fillDate[p].length == 1){ 
                     fillURL = 0+fillDate[p]; 
                     } 
                  else { 
                     fillURL = fillDate[p]; 
                     } 
                  cell.className = highlightCell; 
                  cell.innerHTML = <a href="/search?updated-max=+calYear+-+callmth+-+fillURL+T23%3A59%3A59+timeOffset+&updated-min=+calYear+-+callmth+-+fillURL+T00%3A00%3A00+timeOffset+" title="+fillTitles[fillDate[p]].replace(/"/g,)+">+dayCount+</a>; 
                 } 
              } 
          if( dayCount > fill[valxx]){ 
             cell.innerHTML =  ; 
             cell.className = emptyCell; 
             } 
          dayCount++; 
         } 
      } 
    visTotal = parseInt(startIndex) + parseInt(fill[valxx]) -1; 
    if(visTotal >35){ 
        document.getElementById(lastRow).style.display = ; 
       } 
  } 
function initCal(){ 
   document.getElementById(blogger_calendar).style.display = block; 
   var bcInit = document.getElementById(bloggerCalendarList).getElementsByTagName(a);
   var bcCount = document.getElementById(bloggerCalendarList).getElementsByTagName(li);
   document.getElementById(bloggerCalendarList).style.display = none; 
   calHead = document.getElementById(bcHead); 
   tr = document.createElement(tr); 
   for(t = 0; t < 7; t++){ 
       th = document.createElement(th); 
       th.abbr = headDays[t]; 
       scope = col; 
       th.title = headDays[t]; 
       th.innerHTML = headInitial[t]; 
       tr.appendChild(th); 
      } 
   calHead.appendChild(tr); 
  for (x = 0; x <bcInit.length;x++){ 
     var stripYear= bcInit[x].href.split(_)[0].split(/)[3]; 
     var stripMonth = bcInit[x].href.split(_)[1]; 
     bcList.push(stripMonth + ,+ stripYear + , + x); 
     bcNav.push(bcInit[x].href); 
     } 
  var sel = document.createElement(select); 
  sel.id = bcSelection; 
  sel.onchange = function(){var cSend = this.options[this.selectedIndex].value.split(,);openStatus();callArchive(cSend[0],cSend[1],cSend[2]);};
  q = 0; 
  for (r = 0; r <bcList.length; r++){ 
       var selText = bcInit[r].innerHTML; 
       var selCount = bcCount[r].innerHTML.split(> ()[1]; 
       var selValue = bcList[r]; 
       sel.options[q] = new Option(selText +  (+selCount,selValue); 
       q++ 
       }                   
   document.getElementById(bcaption).appendChild(sel); 
   var m = bcList[0].split(,)[0]; 
   var y = bcList[0].split(,)[1]; 
   callArchive(m,y,0); 
} 
function timezoneSet(root){ 
   var feed = root.feed; 
   var updated = feed.updated.$t; 
   var id = feed.id.$t; 
   bcBlogId = id.split(blog-)[1]; 
   upLength = updated.length; 
   if(updated.charAt(upLength-1) == "Z"){timeOffset = "+00:00";} 
   else {timeOffset = updated.substring(upLength-6,upLength);} 
   timeOffset = encodeURIComponent(timeOffset); 
} 
//]]> 
</script> 
<script src=/feeds/posts/summary?max-results=0&amp;amp;alt=json-in-script&amp;callback=timezoneSet/>

8. Kemudian, letakkan kode CSS* berikut ini diatas kode ]]></b:skin> :

/* Start of Post Navigator (Black n White Theme) ------ */

#calendarDisplay{display:block;}
/* div that holds calendar */

#blogger_calendar{margin:0 auto 0 0;width:100%}
/* Table Caption - Holds the Archive Select Menu */

#bcaption{border:1px solid #FFFFFF;padding:2px;margin:10px 0 0;background:#000000;font:bold 100% Tahoma,Arial,Sans-serif}
/* The Archive Select Menu */

#bcaption select{background:#ffff;border:0 solid #FFFFFF;color:#000000;font-weight:bold;text-align:center;width:75%}
/* The Heading Section */

table#bcalendar thead{}
/* Head Entries */

table#bcalendar thead tr th{width:70px;text-align:center;padding:3px;border:1px solid #FFFFFF;font:bold 100% Tahoma,Arial,Sans-serif;background:#000000;color:#fff}
/* The calendar Table */

table#bcalendar{border:1px solid #000000;border-top:0;margin:0 0 0;width:100%;background:#fff;text-align:center}
/* 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:#ffffff;text-decoration:none}
table#bcalendar tbody tr td a:hover{color:#ffffff;text-decoration:none}
/* First Row Empty Cells */

td.firstCell{visibility:visible}
/* Cells that have a day in them */

td.filledCell{background:#fff}
td.filledCell:hover{background:#FFFFFF}
/* Cells that are empty,after the first row */

td.emptyCell{visibility:hidden}
/* Cells with a Link Entry in them */

td.highlightCell{background:#000000;border:2px solid #FFFFFF}
td.highlightCell:hover{background:#FFFFFF;border:1px solid #000000}
/* Table Footer Navigation */

table#bcNavigation{width:100%;background:#000000;border:1px solid #FFFFFF;border-top:0;color:#fff;font:bold 100% Tahoma,Arial,Sans-serif}
table#bcNavigation a:link{text-decoration:none;color:#fff}
table#bcNavigation a:hover{text-decoration:none;color:#FFFFFF}
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{}
#judul{text-decoration:none;color:#fff;font:bold 100% Tahoma,Arial,Sans-serif;background:#000000;border:2px solid #FFFFFF;width:auto;margin-top:5px}
#calLoadingStatus img{display:block;width:auto;height:auto;margin:10px auto}
/* End of of Post Navigator (Black n White Theme) ------ */

9. Simpan Template.

10. Enjoy. smoke

*)Tema lain yang dapat digunakan :

/* Start of Post Navigator (Chocolate Theme) ------ */

#calendarDisplay{display:block;}
/* div that holds calendar */

#blogger_calendar{margin:0 auto 0 0;width:100%}
/* Table Caption - Holds the Archive Select Menu */

#bcaption{border:1px solid #ffffff;padding:2px;margin:10px 0 0;background:#D38F37;font:bold 100% Tahoma,Arial,Sans-serif}
/* The Archive Select Menu */

#bcaption select{background:#ffff;border:0 solid #ffffff;color:#D38F37;font-weight:bold;text-align:center;width:75%}
/* The Heading Section */

table#bcalendar thead{}
/* Head Entries */

table#bcalendar thead tr th{width:70px;text-align:center;padding:3px;border:1px solid #ffffff;font:bold 100% Tahoma,Arial,Sans-serif;background:#D38F37;color:#fff}
/* The calendar Table */

table#bcalendar{border:1px solid #D38F37;border-top:0;margin:0 0 0;width:100%;background:#fff;text-align:center}
/* 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:#ffffff;text-decoration:none}
table#bcalendar tbody tr td a:hover{color:#ffffff;text-decoration:none}
/* First Row Empty Cells */

td.firstCell{visibility:visible}
/* Cells that have a day in them */

td.filledCell{background:#fff}
td.filledCell:hover{color:#ffffff;text-decoration:none;background:#D38F37}
/* Cells that are empty,after the first row */

td.emptyCell{visibility:hidden}
/* Cells with a Link Entry in them */

td.highlightCell{background:#D38F37;border:2px solid #ffffff}
td.highlightCell:hover{background:#ffffff;border:1px solid #D38F37}
/* Table Footer Navigation */

table#bcNavigation{width:100%;background:#D38F37;border:1px solid #ffffff;border-top:0;color:#fff;font:bold 100% Tahoma,Arial,Sans-serif}
table#bcNavigation a:link{text-decoration:none;color:#fff}
table#bcNavigation a:hover{text-decoration:none;color:#ffffff}
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{}
#judul{text-decoration:none;color:#fff;font:bold 100% Tahoma,Arial,Sans-serif;background:#D38F37;border:2px solid #ffffff;width:auto;margin-top:5px}
#calLoadingStatus img{display:block;width:auto;height:auto;margin:10px auto}
/* End of of Post Navigator (Chocolate Theme) ------ */

Klik kanan lalu "Copy Image Location"

Klik kanan lalu "Copy Image Location"

Klik kanan lalu "Copy Image Location"

Bagaimana hasil modifikasi widget arsip blog nya???
Terima kasih, semoga bermanfaat dan jangan lupa tinggalkan komentar ya... :)