Post Game

Cara Membuat Widget Kalender Arsip Untuk Blog

Sekarang kamu bisa membuat arsip blog jadi lebih luar biasa yaitu sebuah penemuan terbaru arsip blog berbentuk kalender, kamu bisa meletakan widget ini pada bagian sidebar. Dengan tampilan kalender arsip yang sudah dimodifikasi dan script yang tidak rumit, membuat widget ini mudah untuk dibuat.

Untuk membuatnya kamu harus hati-hati dan ikuti semua langkah-langkah yang akan saya berikan, pastikan sama. Sebelum itu saya dapatkan widget ini dari MBT. Dan berikut cara membuat kalender arsip untuk blog.

DEMO

1. Login ke blog kamu.
2. Pilih Tata Letak > Add Gadget > Pilih Arsip Blog

3. Perhatikan pilihan gambar di bawah ini, pastikan kamu mengaturnya percis kaya gambar di bawah ini ok.

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

Temukan saja kode yang berwarna merah, untuk lebih jelasnya kode yang berwarna merah adalah judul widget.

6. Setelah ketemu, ganti kode nomor 5 dengan kode di bawah 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 + "_ArchiveList">
    <b:if cond=data:style == "HIERARCHY">
     <b:include data=data name=interval/>
    </b:if>
    <b:if cond=data:style == "FLAT">
      <b:include data=data name=flat/>
    </b:if>
    <b:if cond=data:style == "MENU">
      <b:include data=data name=menu/>
    </b:if>
  </div>
  </div>
  <b:include name=quickedit/>
  </div>
</b:includable>
<b:includable id=toggle var=interval>
  <!-- Toggle not needed for Calendar -->
</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></thead>
<!-- 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>
<td id=bcFootAll></td>
<td id=bcFootNext></td>
</tr></table> 
<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=posts var=posts>
<!-- posts not needed for Calendar -->
</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=interval var=intervalData>
  Configure your calendar archive widget - Edit archive widget - Flat List - Newest first - Choose any Month/Year Format
</b:includable>
</b:widget>

7. Langkah selanjutnya cari kode </head> dan copy kode di bawah ini tepat di atas kode </head>

<!-- Blogger Archive Calendar by  blazerracing.blogspot.com -->
<script type=text/javascript>
//<![CDATA[
var bcLoadingImage = "http://mybloggertricks.googlecode.com/files/loading-trans.gif.png";
var bcLoadingMessage = " Loading....";
var bcArchiveNavText = "Lihat Arsip";
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;alt=json-in-script&amp;callback=timezoneSet></script>
<!-- End Blogger Archive Calendar by blazerracing.blogspot.com  -->

8. Sekarang untuk memodifikasi tampilan arsip kalendernya, pilih salah satu dari 2 kode di bawah ini dan letakan tepat di atas kode ]]></b:skin>

GAYA 1

/* Start of Post Navigator by BlazerBlog (LIGHT Theme) ------ */
#calendarDisplay {display:none;}
/* div that holds calendar */
#blogger_calendar { margin:0px auto 0px 0px;width:100%;}
/* Table Caption - Holds the Archive Select Menu */
#bcaption {border:1px solid #C7C7C7;padding:2px;margin:10px 0 0;background:#fff;font:bold 100% Tahoma, Arial, Sans-serif}
/* The Archive Select Menu */
#bcaption select {background:#ffff;border:0 solid #C7C7C7;color:#0080ff;font-weight:bold;text-align:center;}
/* The Heading Section */
table#bcalendar thead {}
/* Head Entries */
table#bcalendar thead tr th {width:20px;text-align:center;padding:3px; border:1px solid #C7C7C7; font:bold 100% Tahoma, Arial, Sans-serif;background:#fff;color:#0080ff;}
/* The calendar Table */
table#bcalendar {border:1px solid #C7C7C7;border-top:0; margin:0px 0 0px;width:100%;background:#fff}
/* The Cells in the Calendar */
table#bcalendar tbody tr td {cursor:pointer; text-align:center; border-radius:4px; padding:3px;border:1px solid #C7C7C7; color:#666;font:bold 100% Tahoma, Arial, Sans-serif;}
/* 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:#dddddd;}
/* Cells that are empty, after the first row */
td.emptyCell {visibility:hidden;}
/* Cells with a Link Entry in them */
td.highlightCell {background:#53A9FF;border:1px solid #C7C7C7}
td.highlightCell:hover {background:#72B9FF;border:1px solid #C7C7C7}
/* Table Footer Navigation */
table#bcNavigation  {width:100%;background:#fff;border:1px solid #C7C7C7;border-top:0;color:#0080ff;font:bold 100% Tahoma, Arial, Sans-serif;}
table#bcNavigation a:link {text-decoration:none;color:#0080ff}
table#bcNavigation a:hover{text-decoration:underline;}
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 {}
/* End of Post Navigator by BlazerBlog (LIGHT Theme) ------ */

GAYA 2

/* Start of Post Navigator by BlazerBlog (DARK Theme) ------ */

#calendarDisplay {display:none;}
/* div that holds calendar */
#blogger_calendar { margin:5px 0 5px 10px;width:98%;}
/* Table Caption - Holds the Archive Select Menu */
#bcaption {border:1px solid #666666;padding:2px;margin:10px 0 0;background:#333333;font:bold 100% Tahoma, Arial, Sans-serif}
/* The Archive Select Menu */
#bcaption select {background:#333333;border:0 solid #333333;color:#dddddd;font-weight:bold;text-align:center;}
/* The Heading Section */
table#bcalendar thead {}
/* Head Entries */
table#bcalendar thead tr th {width:20px;text-align:center;padding:2px; border:1px outset #666666; font:bold 100% Tahoma, Arial, Sans-serif;background:#333333;color:#dddddd}
/* The calendar Table */
table#bcalendar {border:1px solid #666666;border-top:0; margin:0px 0 0px;width:95%;background:#333333}
/* The Cells in the Calendar */
table#bcalendar tbody tr td {text-align:center;padding:2px;border:1px outset #666666; color:#F5F202;font:bold 100% Tahoma, Arial, Sans-serif;}
/* 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:underline;}
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 {}
/* Cells that are empty, after the first row */
td.emptyCell {visibility:hidden;}
/* Cells with a Link Entry in them */
td.highlightCell {background:#000000;border:1px solid #666666}
/* Table Footer Navigation */
table#bcNavigation  {width:95%;background:#333333;border:1px solid #666666;border-top:0;color:#F5F202;font:bold 100% Tahoma, Arial, Sans-serif;}
table#bcNavigation a:link {text-decoration:none;color:#F5F202}
table#bcNavigation a:hover{text-decoration:underline;}
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 {}
/* End of Post Navigator by BlazerBlog (DARK Theme) ------ */  

9. Klik dulu pertinjauan lalu simpan.

Go to link Download

Cara Membuat Kalender Sederhana Menggunakan Excel

Tahun baru sebentar lagi, tapi kalender belum punya. Bagaimana kalo kita bikin sendiri kalendernya? Caranya pun cukup mudah, tinggal menggunakan program excel kok. Berikut tutornya.

1.    Buka program Microsoft excelnya.

2.    Sekarang ketikan nama – nama hari pada sel yang tersedia, seperti gambar berikut.


3.    Tidak lupa juga untuk mengatur lebar / ukuran kolom / baris, caranya blok sel hari - hari yang tadi telah dibuat buka tab home lalu pilih pada Format > Column Width. Lalu berikan saja nilai 15.




4.     Langkah selanjutnya adalah memblok sel – sel dan menggabungkanya menggunakan fitur merge & center seperti berikut. Blok 5 sel ke bawah, lalu pilih merge & center, lalu copy atau seret ke hari yang lain, buatlah sebanyak lima baris.


5.    Lalu blok bagian atas dan gabungkan menggunakan perintah merge & center, Lalu ketikan bulan yang ini diisikan, misalnya januari.



6.    Jangan lupa juga untuk memberikan garis tepi / border pada kalender dengan mengunakan Border > All Borders.



7.    Langkah terakhir adalah mengisi tanggal kalender, pertama lihat tanggal pada kalender komputer. Lalu sesuaikan isi tanggal pada excel dengan pada kalender komputer, contoh pada tanggal kalender hari rabu bertanggal 1 maka isikan pada sel rabu angka satu.



8.    Untuk mempermudah pengisian, pada hari kamis cukup isikan formula = 1 + cell (sebelumnya), contohnya = 1 + (E5), lalu cukup drag / Tarik ke sel berikutnya.


9.    Lalu pada sel minggu ketik formula = 1 + (G5) / sel sabtu, lalu tarik ke bawah.



10.    Lakukan hal yang sama pada hari senin.



11.    Lalu tarik ke seluruh harinya, maka hari pun akan mengikuti sesuai dengan formula yang diberikan, dan jangan lupa juga atur harinya agar sesuai dengan kalender komputer, jangan sampai ada tanggal yang melebih tanggal 30/31.



12.    Misi selesai, selanjutnya tugas Anda untuk medekorasi tanggal yang anda telah buat, sesuai dengan kreasi dan selera anda.

Selamat mencoba, semoga bermanfaat. :D

Go to link Download