Artikel ini menjelaskan cara merubah widget arsip/archive widget dari blogger menjadi kalender dengan menggunakan javascript dan juga CSS untuk mempercantik tampilannya

Merubah Widget Arsip Blogger menjadi Kalender - MKR site | Berbagi Tanpa Batas, Blogger Tips, Widget, Template

Artikel ini menjelaskan cara merubah widget arsip/archive widget dari blogger menjadi kalender dengan menggunakan javascript dan juga CSS untuk mempercantik tampilannya

Merubah Widget Arsip Blogger menjadi Kalender

Merubah Arsip Blogger menjadi Kalender
Bosan dengan tampilan Arsip dari blogger yang hanya berbentuk list. Kali ini saya akan membagikan Kode JS untuk merubah tampilan Arsip blogger menjadi kalender serta cara penggunaannya. Kode JS ini dibuat oleh phydeaux3 beberapa tahun lalu.
Dari kode ini saya buat beberapa tema yang mungkin anda sukai. Untuk pemasangannya tidaklah terlalu sulit. Nah langsung saja.

Cara Pemasangan di Blogspot

  1. Ke Blogger lalu pilih Tata Letak/Layout
  2. Pilih Blog Archive/Arsip Blog. Bagi yang sudah ada widget ini silahkan ke tahap selanjutnya.

    Menambahkan Widget Blog Archive/Arsip Blog

  3. Ikuti opsi yang ada pada gambar berikut. Pada bagian style pilih Flat List. Jangan Cek "Show Oldest Posts First", Pilih "Archive Frequency" berdasarkan bulan "Monthly" pada Date Format settingnya terserah anda.

    Opsi pengaturan pada widget Blog Archive/Arsip Blog

  4. klik Save / Simpan
  5. Selanjutnya ke Blogger > Settings > Template. Backup terlebih dahulu Template Anda lalun klik Edit HTML > Proceed
  6. Cari kode berikut.(Perhatikan idnya biasanya berbeda "BlogArchive1", bisa saja "BlogArchive2", "BlogArchive3" dan lain-lain)
    <b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
  7. Ganti kode yang diatas pada (tahap 6) dengan kode berikut:
    <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>
  8. Sekarang cari kode berikut </head> lalu letakkan kode berikut sebelumnya
    <script type='text/javascript'> 
    //<![CDATA[ 
    var bcLoadingImage = "http://1.bp.blogspot.com/-vPivuucfViM/UN8jzBwcZKI/AAAAAAAAHbY/at-JwuUBk_4/s1600/horizontal-loading.gif"; 
    var bcLoadingMessage = " Loading...."; 
    var bcArchiveNavText = "View Archive"; 
    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>
  9. klik Save/Simpan. Pemasangan sudah hampir selesai.

Penambahan CSS (Temanya)

  1. Masih di bagian Template cari kode berikut ]]></b:skin> dan letakkan salah satu tema berikut di atasnya/sebelum ]]></b:skin>

    LIGHT Theme by MBT

    LIGHT Theme by MBT


    /* Start of Post Navigator by MBT (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 {} 
    #calLoadingStatus img {display: block;width: 80px;margin: 10px auto;}
    /* End of Post Navigator by MBT (LIGHT Theme) ------ */ 
    • Untuk merubah warna teks (teks yang warna biru) ganti 0080ff menggunakan Hex Color Generator
    • Untuk merubah warna background cell yang aktif cari kode ini 53A9FF
    • Untuk merubah warna background cell pada saat di sorot cari kode 72B9FF

    DARK Theme by MBT

    DARK Theme by MBT


    /* Start of Post Navigator by MBT (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 {}
    #calLoadingStatus img {display: block;width: 80px;margin: 10px auto;}
    /* End of Post Navigator by MBT (DARK Theme) ------ */ 
    • untuk mengganti warna teks yang kuning cari kode ini F5F202

    YUI Theme by MKR

    YUI Theme by MKR


    #calendarDisplay{display:none}
    /* div that holds calendar */
    #blogger_calendar *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
    #blogger_calendar{margin:0 auto;width:100%;padding:150px 8px 8px;background:white url(http://2.bp.blogspot.com/-HXLtTZqqR8o/UOGfRnn1PgI/AAAAAAAAHlg/Bvsk9DUtQrw/w250/YUIb.png) no-repeat 100% 0}
    /* Table Caption - Holds the Archive Select Menu */
    #bcaption{padding:4px 10px;margin:0;font:bold 100% Tahoma,Arial,Sans-serif;background:#232F3F;border:1px solid #2B2B2B;border-radius:2px}
    /* The Archive Select Menu */
    #bcaption select{background:white;border:1px solid #2B2B2B;padding:1px;width:90%;color:#0D2B47;font-weight:bold;}
    /* The Heading Section */
    table#bcalendar thead{}
    /* Head Entries */
    table#bcalendar thead tr th{width:20px;text-align:center;padding:3px;border:1px solid #1A1A1A;font:bold 100% Tahoma,Arial,Sans-serif;background:#232F3F;border-radius:3px;color:#DFDFDF}
    /* The calendar Table */
    table#bcalendar{margin:0 0;width:100%}
    /* The Cells in the Calendar */
    table#bcalendar tbody tr td{cursor:pointer;text-align:center;border-radius:3px;padding:3px;border:1px solid #D6D6D6;color:#0D2B47;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 */
    table#bcalendar tbody tr td.firstCell{visibility:visible;background:#303030;background:rgba(0,0,0,0.41);border:1px solid #2C2C2C}
    /* Cells that have a day in them */
    td.filledCell{background:white;background:rgba(255,255,255,0.53)}
    td.filledCell:hover{background:#EBEBEB;background:rgba(235,235,235,0.75)}
    /* Cells that are empty,after the first row */
    td.emptyCell{visibility:hidden}
    /* Cells with a Link Entry in them */
    table#bcalendar tbody tr td.highlightCell{background:#232F3F;border:1px solid #2B2B2B}
    table#bcalendar tbody tr td.highlightCell:hover{background:#1B4174;border:1px solid #2B2B2B}
    /* Table Footer Navigation */
    table#bcNavigation{width:100%;padding:3px 5px;color:#DADADA;font:bold 100% Tahoma,Arial,Sans-serif;background:#232F3F;border:1px solid #2B2B2B;border-radius:2px}
    table#bcNavigation a:link{text-decoration:none;color:#DADADA}
    table#bcNavigation a:hover{color:white}
    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{}
    #calLoadingStatus img{display:block;width:80px;margin:10px auto}

    NB untuk menghilangkan backgroundnya ganti
    #blogger_calendar{margin:0 auto;width:100%;padding:150px 8px 8px;background:white url(http://2.bp.blogspot.com/-HXLtTZqqR8o/UOGfRnn1PgI/AAAAAAAAHlg/Bvsk9DUtQrw/w250/YUIb.png) no-repeat 100% 0}
    dengan:
    #blogger_calendar{margin:0 auto;width:100%;padding:8px 8px;background:white}

    Maeda Atsuko Theme by MKR

    Maeda Atsuko Theme by MKR


    #calendarDisplay{display:none}
    /* div that holds calendar */
    #blogger_calendar *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
    #blogger_calendar{margin:0 auto;width:100%;padding:180px 8px 8px;background:white url(http://3.bp.blogspot.com/-tUpLYt2VVbM/UOHCyQ1avhI/AAAAAAAAHnY/PosIclhWWvM/w250/AtsukoMaeda.png) no-repeat 50% -3px}
    /* Table Caption - Holds the Archive Select Menu */
    #bcaption{padding:3px 10px;margin:0;font:bold 100% Tahoma,Arial,Sans-serif;background:#1BA3CE;border-radius:2px}
    /* The Archive Select Menu */
    #bcaption select{background:white;border:1px solid #0081BE;padding:1px;width:90%;color:#0591C7;font-weight:bold}
    /* The Heading Section */
    table#bcalendar thead{}
    /* Head Entries */
    table#bcalendar thead tr th{width:20px;text-align:center;padding:3px;font:bold 100% Tahoma,Arial,Sans-serif;background:#1BA3CE;border-radius:3px;color:white}
    /* The calendar Table */
    table#bcalendar{margin:0 0;width:100%}
    /* The Cells in the Calendar */
    table#bcalendar tbody tr td{cursor:pointer;text-align:center;border-radius:3px;padding:3px;color:#01A5CE;border:1px solid #DCEFF5;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 */
    table#bcalendar tbody tr td.firstCell{visibility:visible;background:white;background:rgba(255,255,255,0.45)}
    /* Cells that have a day in them */
    td.filledCell{background:white}
    td.filledCell:hover{background:#D8F4FF}
    /* Cells that are empty,after the first row */
    td.emptyCell{visibility:hidden}
    /* Cells with a Link Entry in them */
    table#bcalendar tbody tr td.highlightCell{background:#1BA3CE}
    table#bcalendar tbody tr td.highlightCell:hover{background:#00BAF5}
    /* Table Footer Navigation */
    table#bcNavigation{width:100%;padding:3px 5px;color:white;font:bold 100% Tahoma,Arial,Sans-serif;background:#1BA3CE;border-radius:2px}
    table#bcNavigation a:link{text-decoration:none;color:#DBF5FF}
    table#bcNavigation a:hover{color:white}
    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{}
    #calLoadingStatus{background:white;padding:10px 0}
    #calLoadingStatus img{display:block;width:80px;margin:0 auto 10px}

    NB untuk menghilangkan backgroundnya ganti
    #blogger_calendar{margin:0 auto;width:100%;padding:180px 8px 8px;background:white url(http://3.bp.blogspot.com/-tUpLYt2VVbM/UOHCyQ1avhI/AAAAAAAAHnY/PosIclhWWvM/w250/AtsukoMaeda.png) no-repeat 50% -3px}
    dengan:
    #blogger_calendar{margin:0 auto;width:100%;padding:8px 8px;background:white}

    Oshima Yuko Theme by MKR

    Oshima Yuko Theme by MKR


    #calendarDisplay{display:none}
    /* div that holds calendar */
    #blogger_calendar *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
    #blogger_calendar{margin:0 auto;width:100%;padding:180px 8px 8px;background:white url(http://1.bp.blogspot.com/-AtBGLyhj-MU/UOFUMwFCxjI/AAAAAAAAHiQ/RPd_9yWaGds/w250/2011215_ohshimayuko.png) no-repeat 50% -10px}
    /* Table Caption - Holds the Archive Select Menu */
    #bcaption{padding:4px 10px;margin:0;font:bold 100% Tahoma,Arial,Sans-serif;background:#790000;border:1px solid #400;border-radius:2px}
    /* The Archive Select Menu */
    #bcaption select{background:white;border:0 solid #420000;width:90%;color:#8B0101;font-weight:bold;}
    /* The Heading Section */
    table#bcalendar thead{}
    /* Head Entries */
    table#bcalendar thead tr th{width:20px;text-align:center;padding:3px;border:1px solid #400;font:bold 100% Tahoma,Arial,Sans-serif;background:#790000;border-radius:3px;color:white}
    /* The calendar Table */
    table#bcalendar{margin:0;width:100%}
    /* The Cells in the Calendar */
    table#bcalendar tbody tr td{cursor:pointer;text-align:center;border-radius:3px;padding:3px;border:1px solid #CCC;color:#500;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:white;background:rgba(255,255,255,0.54)}
    td.filledCell:hover{background:#EBEBEB;background:rgba(255,255,255,0.79)}
    /* Cells that are empty,after the first row */
    td.emptyCell{visibility:hidden}
    /* Cells with a Link Entry in them */
    table#bcalendar tbody tr td.highlightCell{background:#790000;border:1px solid #9E0000}
    table#bcalendar tbody tr td.highlightCell:hover{background:#B60000;border:1px solid #9E0000}
    /* Table Footer Navigation */
    table#bcNavigation{width:100%;padding:3px 5px;color:#F1F1F1;font:bold 100% Tahoma,Arial,Sans-serif;background:#790000;border:1px solid #400;border-radius:2px}
    table#bcNavigation a:link{text-decoration:none;color:#DADADA}
    table#bcNavigation a:hover{color:white}
    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{}
    #calLoadingStatus img{display:block;width:80px;margin:10px auto}

    NB untuk menghilangkan backgroundnya ganti
    #blogger_calendar{margin:0 auto;width:100%;padding:180px 8px 8px;background:white url(http://1.bp.blogspot.com/-AtBGLyhj-MU/UOFUMwFCxjI/AAAAAAAAHiQ/RPd_9yWaGds/w250/2011215_ohshimayuko.png) no-repeat 50% -10px}
    dengan:
    #blogger_calendar{margin:0 auto;width:100%;padding:8px 8px;background:white}

    Takahashi Minami Theme by MKR

    Takahashi Minami Theme by MKR


    #calendarDisplay{display:none}
    /* div that holds calendar */
    #blogger_calendar *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
    #blogger_calendar{margin:0 auto;width:100%;padding:180px 8px 8px;background:white url(http://4.bp.blogspot.com/-Cw82RveNxSw/UOGuymiiDhI/AAAAAAAAHmc/7PwOKvVW1W4/w320/Minami.png) no-repeat 50% 0}
    /* Table Caption - Holds the Archive Select Menu */
    #bcaption{padding:3px 10px;margin:0;font:bold 100% Tahoma,Arial,Sans-serif;background:#BE3206;background:rgba(190,50,6,0.55);border:1px solid #BE3E00;border-radius:2px}
    /* The Archive Select Menu */
    #bcaption select{background:white;border:1px solid #BE3E00;padding:1px;width:90%;color:#B13100;font-weight:bold}
    /* The Heading Section */
    table#bcalendar thead{}
    /* Head Entries */
    table#bcalendar thead tr th{width:20px;text-align:center;padding:3px;font:bold 100% Tahoma,Arial,Sans-serif;background:#BE3206;background:rgba(190,50,6,0.55);border:1px solid #BE3E00;border-radius:3px;color:white}
    /* The calendar Table */
    table#bcalendar{margin:0 0;width:100%}
    /* The Cells in the Calendar */
    table#bcalendar tbody tr td{cursor:pointer;text-align:center;border-radius:3px;padding:3px;border:1px solid #FFC2AE;color:#CE3A01;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 */
    table#bcalendar tbody tr td.firstCell{visibility:visible;background:#C54204;background:rgba(197,66,4,0.41);border:1px solid #C74E0A}
    /* Cells that have a day in them */
    td.filledCell{background:white;background:rgba(255,255,255,0.53)}
    td.filledCell:hover{background:#FFE5D8;background:rgba(255,229,216,0.75)}
    /* Cells that are empty,after the first row */
    td.emptyCell{visibility:hidden}
    /* Cells with a Link Entry in them */
    table#bcalendar tbody tr td.highlightCell{background:#BE3206;background:rgba(190,50,6,0.8);border:1px solid #BE3E00}
    table#bcalendar tbody tr td.highlightCell:hover{background:#D63300;background:rgba(240,57,0,0.8)}
    /* Table Footer Navigation */
    table#bcNavigation{width:100%;padding:3px 5px;color:white;font:bold 100% Tahoma,Arial,Sans-serif;background:#BE3206;background:rgba(190,50,6,0.55);border:1px solid #BE3E00;border-radius:2px}
    table#bcNavigation a:link{text-decoration:none;color:#FFE4DB}
    table#bcNavigation a:hover{color:white}
    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{}
    #calLoadingStatus{background:white;padding:10px 0}
    #calLoadingStatus img{display:block;width:80px;margin:0 auto 10px}

    NB untuk menghilangkan backgroundnya ganti
    #blogger_calendar{margin:0 auto;width:100%;padding:180px 8px 8px;background:white url(http://4.bp.blogspot.com/-Cw82RveNxSw/UOGuymiiDhI/AAAAAAAAHmc/7PwOKvVW1W4/w320/Minami.png) no-repeat 50% 0}
    dengan:
    #blogger_calendar{margin:0 auto;width:100%;padding:8px 8px;background:white}

    Melody Theme by MKR

    Melody Theme by MKR


    #calendarDisplay{display:none}
    /* div that holds calendar */
    #blogger_calendar *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
    #blogger_calendar{margin:0 auto;width:100%;padding:170px 8px 8px;background:white url(http://3.bp.blogspot.com/-aXxGKQaOoWw/UOGfGHryQ5I/AAAAAAAAHlY/fwtpvAM5-Ac/w250/Melody.png) no-repeat 50% -3px}
    /* Table Caption - Holds the Archive Select Menu */
    #bcaption{padding:3px 10px;margin:0;font:bold 100% Tahoma,Arial,Sans-serif;background:#CC0039;background:rgba(204,0,57,0.59);border:1px solid #BE002E;border-radius:2px}
    /* The Archive Select Menu */
    #bcaption select{background:white;border:1px solid #BE002E;padding:1px;width:90%;color:#C70543;font-weight:bold}
    /* The Heading Section */
    table#bcalendar thead{}
    /* Head Entries */
    table#bcalendar thead tr th{width:20px;text-align:center;padding:3px;font:bold 100% Tahoma,Arial,Sans-serif;background:#CC0039;background:rgba(204,0,57,0.59);border:1px solid #BE002E;border-radius:3px;color:white}
    /* The calendar Table */
    table#bcalendar{margin:0 0;width:100%}
    /* The Cells in the Calendar */
    table#bcalendar tbody tr td{cursor:pointer;text-align:center;border-radius:3px;padding:3px;color:#CE013A;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 */
    table#bcalendar tbody tr td.firstCell{visibility:visible;background:#C50442;background:rgba(197,4,66,0.32)}
    /* Cells that have a day in them */
    td.filledCell{background:white;background:rgba(255,255,255,0.53)}
    td.filledCell:hover{background:#FFD8E0;background:rgba(255,216,224,0.67)}
    /* Cells that are empty,after the first row */
    td.emptyCell{visibility:hidden}
    /* Cells with a Link Entry in them */
    table#bcalendar tbody tr td.highlightCell{background:#CC0039;background:rgba(204,0,57,0.59)}
    table#bcalendar tbody tr td.highlightCell:hover{background:#EB0042;background:rgba(243,0,49,0.59)}
    /* Table Footer Navigation */
    table#bcNavigation{width:100%;padding:3px 5px;color:white;font:bold 100% Tahoma,Arial,Sans-serif;background:#CC0039;background:rgba(204,0,57,0.59);border:1px solid #BE002E;border-radius:2px}
    table#bcNavigation a:link{text-decoration:none;color:#FFDBE5}
    table#bcNavigation a:hover{color:white}
    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{}
    #calLoadingStatus{background:white;padding:10px 0}
    #calLoadingStatus img{display:block;width:80px;margin:0 auto 10px}

    NB untuk menghilangkan backgroundnya ganti
    #blogger_calendar{margin:0 auto;width:100%;padding:170px 8px 8px;background:white url(http://3.bp.blogspot.com/-aXxGKQaOoWw/UOGfGHryQ5I/AAAAAAAAHlY/fwtpvAM5-Ac/w250/Melody.png) no-repeat 50% -3px}
    dengan:
    #blogger_calendar{margin:0 auto;width:100%;padding:8px 8px;background:white}

  2. Klik Simpan/Save lalu lihat hasilnya

Sumber Kode: phydeaux3 dan MBT ~ Blogger Archive Calender
Satank Mkr Beri Komentar
Bagikan kepada teman!
Garis

47 comments:

  1. Asik ada gambar perempuanya.. :d

    BalasHapus
  2. makasih Work 100% tapi harus cermat,
    kalo g cermat ya hoax jdinya :p
    thanks kak :)

    BalasHapus
  3. wow, keren aku cuma bisa desain2 aja, wekeke :D

    BalasHapus
  4. keren, aku coba dulu ya mas :)

    BalasHapus
  5. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  6. wuuiiihhh makmur ehhh. ternyata sembunyiki pale disini :)

    apa kbr teman ?

    blognya bagus, ternyata oh ternyata dirimu :)

    BalasHapus
    Balasan
    1. alhamdulillah sangat baik..

      bagus!..
      tidak jugaji...
      karena banyak diluar sana yg lbih bagus.. (o)

      ternyata apa???

      Hapus
  7. kereeen euyy..
    pas banget ada anggota akb lagi :))

    BalasHapus
  8. Keren tutorialnya, org mksrki jg? (h)

    BalasHapus
    Balasan
    1. iye..

      kerenq juga tutorial diblogta'..
      salam kenal..

      ~~MKR~~

      Hapus
  9. waw....... keren bgt sob, tapi agak ribet, hehe,,

    maen2 sob ke markas ane http://rizapahlepi.blogspot.com/

    BalasHapus
  10. wah panjang sekali scriptnya gan.., postingan ini yang sedang saya cari gan, trims.
    Kalau sempat mampir mampir ke gubuk ane ya gan , trims

    BalasHapus
  11. gak bisa bos . di suruh masukkin

    BalasHapus
  12. gan... mohon pencerahannya gan.. kok saya pasang di blog saya.. ga kebacaa artikel yang ada di kalendernya kayak punya agan.. apa gara2 kebanyakan dalam 1 bulan?

    tolong cek di goedangaplikasi.blogspot.com yah gan.. terimakasih sebelumnya gan

    BalasHapus
    Balasan
    1. pada semua CSS yang ada pada contoh di atas memang menyembunyikan artikelnya..
      cobah rubah bagian #calendarDisplay menjadi display:block.

      Hapus
    2. Sip mas,.! work,.! blog walked,.www.cyb3rknight.net

      Hapus
    3. saya mau tanya setelah #calendarDisplay aku ganti block list nya berhasil muncul tapi gmn caranya kalo untuk nampilin nomor urutnya sama tulisan daftar artikel seperti punya mas ????

      Hapus
    4. gimana mas cara menampilkan daftar artikel di archive calender widget for blogger seperti di blognya mas??
      Terima kasih

      Hapus
  13. hallo met malem.....saya udah praktekan neh gan...tapi kok ada recent postnya..gimana cara ngilangin nnya....mohon solusinya...

    BalasHapus
  14. Gagal ditempat ane, hanya keluar bulan postingnya aja.. [-(

    BalasHapus
    Balasan
    1. Mungkin pada bulan itu tidak ada artikel atau mungkin JSON feednya tdk diaktifkan..

      Hapus
  15. Keren mas!
    tapi saya mau tanya kalau mau di buat seperti punya mas, gimana caranya ? ;(

    BalasHapus
  16. Balasan
    1. ada variabel yg dipanggil tapi tdak dapat ditemukan..
      biasanya terjadi pada variabel yg harus memenuhi min 2 syarat tertentu...
      jadi jika hanya ada satu syarat yg dapat dipenuhi bisanya muncul tulisan undifinied..

      Hapus
    2. Gini nih mas .. kan saya udah semua syarat tuh selesai .. terus SUKSES kan , nah pas saya Klik Format Template .. terus simpan template .. Eh nyatanya undefinied lagi .. :-?

      Hapus
  17. Bagaimana caranya untuk memberikan nomor urut pada daftar artikelnya gan ? :)

    BalasHapus
  18. mas, punya saya ko jadinya engga kya punya mas,
    punya saya kalendernya engga ada warnanya, jadi cuman tulisan sma tanggal - tanggalnya aja yg muncul,,
    itu knp yaah? mohon penjelasannya...

    BalasHapus
  19. terima kasih tutorialnya, keren =p~
    ijin repost kode di blog saya sob =p~

    BalasHapus
  20. thanks om, keren. walau ada sedikit jebakan kode pas di pratinjau jadi error, tapi pas diteliti harus ada salah satu kode yg dibuang.. :>)

    BalasHapus
  21. saya mau tanya setelah #calendarDisplay aku ganti block list nya berhasil muncul tapi gmn caranya kalo untuk nampilin nomor urutnya sama tulisan daftar artikel seperti punya mas ????

    BalasHapus
  22. Alhamdulillah berhasil....Biar bahasa indonesia gmana mas...

    BalasHapus
  23. Subhanallah..
    Berkat kerja keras anda, blog kami jadi cantik. Berharap, akhlak kami pun juga demikian..

    Terima kasih banyak (Admin),
    Jazakumullah Khairan Katsiran Wa Jazakumullah Ahsanal Jaza..

    BalasHapus
  24. kok pas view archive ga keluar full-answer.blogspot.com

    BalasHapus
  25. guy. how do use highlight same this? help me please!

    BalasHapus
  26. Ana udah ngikutin cara yang dijelaskan Mas Bro tapi kok gak tampil kaya kalender, apanya yang salah ya? :-?

    BalasHapus
  27. Keren!

    Tapi saya ingin template seperti anda,gimaan ya caranya?

    BalasHapus
  28. Sankyuu gan, work :d
    Mampir ke blog ane gan hahahaha :))

    BalasHapus
  29. error bang... artikel sama jumlahnya gk sesuai... kesalahannya dimana bang?

    BalasHapus
  30. Help bang... artikelnya gk kebaca semua...

    Misal 1 bulan saya posting 11 artikel, tapi yg kebaca di list artikelnya cuma 5, padahal di kalendernya kebaca 11...

    Apanya yg salah bang?... ;-(

    BalasHapus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA DI SINI...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

NB: Jangan menuliskan link aktif karena akan terhapus secara automatis.

Jika ingin menuliskan komentar yang keluar dari topik pada artikel ini silahkan kehalaman OOT (out of topic) dengan menekan tombol OOT di bawah

 
Design by MKR Copyright © 2012 ~ 2013 Powered by Blogger
TOP