Hiển thị tiện ích Lưu trữ của blogspot dưới dạng Calendar
Phan Nhật Chánh - Official website
Trang chủ Archive Blogger Calendar Customize Widget Hiển thị tiện ích Lưu trữ của blogspot dưới dạng Calendar

Hiển thị tiện ích Lưu trữ của blogspot dưới dạng Calendar

   Nov 10, 2014 Nov 10, 2014    November 10, 2014
Báo lỗi bài viết×
Bài viết: Hiển thị tiện ích Lưu trữ của blogspot dưới dạng Calendar
Thủ thuật này sẽ giúp bạn dễ dàng hiển thị tiện ích lưu trữ mặt định của blogspot/blogger dưới dạng một bộ lịch cho blog của bạn. Tiện ích này đả được chia sẽ khá lâu, hôm nay xin chia sẽ lại cho bạn nào chưa biết. Và với nhiều theme được thiết kế sẳn giúp cho bạn dể dàng lựa chọn một theme phù hợp với blog của bạn

tao lich luu tru cho blogspot blogger, hien thi tien ich luu tru blogspot blogger duoi dang lich calendar, Blog Archive calandar, huong dan tao lich cho blogspot blogger

Như thường lệ, trước khi thực hiện thay đổi mã trong template, bạn nên sao lưu Mẫu (template) lại bằng cách nhấp vào nút Sao lưu / Khôi phục >> Tải xuống mẫu hoàn chỉnh để có gặp trục trặc đặng còn đường mà khôi phục

- Bước 1: Đăng nhập vào Blogger, đến Bố cục >> Thêm Tiện ích >> Lưu trữ Blog
- Bước 2: Thiết lập giống như hình dưới đây, sau đó Lưu lại
- Bước 3: Đến Mẫu (template) >> Chỉnh sửa HTML và tìm BlogArchive tương tự như hình dưới đây:

- Bước 4: Thay đoạn code được khoanh vùng vừa tìm được như hình phía trên bằng đoạn code dưới đây:
<b:widget id='BlogArchive1' locked='false' title='Lưu trữ Blog' 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>
- Bước 5:Tiếp theo, thêm đoạn javascript dưới đây vào trước thẻ </head> trong Mẫu (template) của bạn: 
<script type='text/javascript'>
//<![CDATA[
var bcLoadingImage = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLapZKC2oV5Zz2wzm0EfKyGd3wS0eu1eHQ2KFKFVkxELb_U8cQKXpKgvayNSyN_Y_oUkO5hoGkfdtoGG4OdmTcAn54u62t5ETW3U8NJKnyOyl7aR8YCfnyvCdhLleUR_eAS7stR0zcKJg/s1600/horizontal-loading.gif";
var bcLoadingMessage = " Đang tải....";
var bcArchiveNavText = "Xem lưu trữ";
var bcArchiveNavPrev = '←';
var bcArchiveNavNext = '→';
var headDays = ["Chủ nhật","Thứ 2","Thứ 3","Thứ 4","Thứ 5","Thứ 6","Thứ 7"];
var headInitial = ["CN","T2","T3","T4","T5","T6","T7"];

var timeOffset;
var bcBlogID;
var calMonth;
var calDay = 1;
var calYear;
var startIndex;
var callmth;
var bcNav = new Array ();
var bcList = new 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){
  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 = 'Tháng trước';
      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 = 'Tháng sau';
      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){
  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&alt=json-in-script&callback=timezoneSet'></script>
- Bước 6: Lưu Mẫu (template) lại, tới đây việc cài đặt tiện ích gần như hoàn tất
- Bước 7: Việc tiếp theo là định dạng kiểu dáng hiển thị bộ lịch bằng CSS, bạn có thể lựa chọn một trong các kiểu dáng dưới đây và thêm mã CSS vào trước thẻ ]]></b:skin> trong Mẫu (template) của bạn và Lưu lại

Kiểu hiển thị 1

#calendarDisplay {display:none;}
#blogger_calendar { margin:0px auto 0px 0px;width:100%;}
#bcaption {border:1px solid #C7C7C7;padding:2px;margin:10px 0 0;background:#fff;font:bold 100% Tahoma, Arial, Sans-serif}
#bcaption select {background:#ffff;border:0 solid #C7C7C7;color:#0080ff;font-weight:bold;text-align:center;}
table#bcalendar thead {}
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;}
table#bcalendar {border:1px solid #C7C7C7;border-top:0; margin:0px 0 0px;width:100%;background:#fff}
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;}
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;}
td.firstCell {visibility:visible;}
td.filledCell {  background:#fff;}
td.filledCell:hover {  background:#dddddd;}
td.emptyCell {visibility:hidden;}
td.highlightCell {background:#53A9FF;border:1px solid #C7C7C7}
td.highlightCell:hover {background:#72B9FF;border:1px solid #C7C7C7}
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;}

Kiểu hiển thị 2

#calendarDisplay {display:none;}
#blogger_calendar { margin:5px 0 5px 10px;width:98%;}
#bcaption {border:1px solid #666666;padding:2px;margin:10px 0 0;background:#333333;font:bold 100% Tahoma, Arial, Sans-serif}
#bcaption select {background:#333333;border:0 solid #333333;color:#dddddd;font-weight:bold;text-align:center;}
table#bcalendar thead {}
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}
table#bcalendar {border:1px solid #666666;border-top:0; margin:0px 0 0px;width:95%;background:#333333}
table#bcalendar tbody tr td {text-align:center;padding:2px;border:1px outset #666666; color:#F5F202;font:bold 100% Tahoma, Arial, Sans-serif;}
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;}
td.firstCell {visibility:visible;}
td.filledCell {}
td.emptyCell {visibility:hidden;}
td.highlightCell {background:#000000;border:1px solid #666666}
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;}

Kiểu hiển thị 3 

#calendarDisplay{display:none}
#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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFLFUXmx9vEnMDhdLSd8o_YW6LoO8QmXvKjiFrJWud_Meep7tpcu1SaVWSRsTiz_1sDroLOD9DfFifo9Jb5-aegcx1bimfgChnBNZnr5YFi5_V39qXdiKzBV-Qgpi7PUju1bvrAfitpps/w250/YUIb.png) no-repeat 100% 0}
#bcaption{padding:4px 10px;margin:0;font:bold 100% Tahoma,Arial,Sans-serif;background:#232F3F;border:1px solid #2B2B2B;border-radius:2px}
#bcaption select{background:white;border:1px solid #2B2B2B;padding:1px;width:90%;color:#0D2B47;font-weight:bold;}
table#bcalendar thead{}
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}
table#bcalendar{margin:0 0;width:100%}
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}
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}
table#bcalendar tbody tr td.firstCell{visibility:visible;background:#303030;background:rgba(0,0,0,0.41);border:1px solid #2C2C2C}
td.filledCell{background:white;background:rgba(255,255,255,0.53)}
td.filledCell:hover{background:#EBEBEB;background:rgba(235,235,235,0.75)}
td.emptyCell{visibility:hidden}
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#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}

Kiểu hiển thị 4 

#calendarDisplay{display:none}
#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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhlY_gMNzucFM6aIrldk25HbctCEL7zrucfXpStO3LRinic9oIpSjQ3l45bNBjQDDGZHRVGIzvZJ9LAGHh7ilhi96jmLVXlaQb97ufOK7NcyPX0PH2iT9sKE1v2-breQBzH6TOcRx5-P8/w250/AtsukoMaeda.png) no-repeat 50% -3px}
#bcaption{padding:3px 10px;margin:0;font:bold 100% Tahoma,Arial,Sans-serif;background:#1BA3CE;border-radius:2px}
#bcaption select{background:white;border:1px solid #0081BE;padding:1px;width:90%;color:#0591C7;font-weight:bold}
table#bcalendar thead{}
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}
table#bcalendar{margin:0 0;width:100%}
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}
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}
table#bcalendar tbody tr td.firstCell{visibility:visible;background:white;background:rgba(255,255,255,0.45)}
td.filledCell{background:white}
td.filledCell:hover{background:#D8F4FF}
td.emptyCell{visibility:hidden}
table#bcalendar tbody tr td.highlightCell{background:#1BA3CE}
table#bcalendar tbody tr td.highlightCell:hover{background:#00BAF5}
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}

Kiểu hiển thị 5 

#calendarDisplay{display:none}
#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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9hFzsw7OfHO9wY7jTf2fgD8-_QV5zp5cVxcNCufV_Q2s7KXubKCyRZMo8EYMpxWtL0CFCOJa-_tDaQ6SOctMM9zyNJBNgfBxOL-vxF9RPdMjEZ36UfWMMYagFfX1uO7BXT5FoksrmY40/w250/2011215_ohshimayuko.png) no-repeat 50% -10px}
#bcaption{padding:4px 10px;margin:0;font:bold 100% Tahoma,Arial,Sans-serif;background:#790000;border:1px solid #400;border-radius:2px}
#bcaption select{background:white;border:0 solid #420000;width:90%;color:#8B0101;font-weight:bold;}
table#bcalendar thead{}
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}
table#bcalendar{margin:0;width:100%}
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}
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}
td.firstCell{visibility:visible}
td.filledCell{background:white;background:rgba(255,255,255,0.54)}
td.filledCell:hover{background:#EBEBEB;background:rgba(255,255,255,0.79)}
td.emptyCell{visibility:hidden}
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#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}

Kiểu hiển thị 6 

#calendarDisplay{display:none}
#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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizbq_S-Ubh3ZQELMPwxCRTMgS0ATMoXJovdH3GD1wXZdRuGoyYjCBZPFuVPNqsr1jajOGID3MNuYOH_dgsWptSHYsiqOBQPy1K2r7IlNfPloqv1b79-wj2fTLQ8yCLvmTTUEQLcFLCsX0/w320/Minami.png) no-repeat 50% 0}
#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}
#bcaption select{background:white;border:1px solid #BE3E00;padding:1px;width:90%;color:#B13100;font-weight:bold}
table#bcalendar thead{}
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}
table#bcalendar{margin:0 0;width:100%}
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}
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}
table#bcalendar tbody tr td.firstCell{visibility:visible;background:#C54204;background:rgba(197,66,4,0.41);border:1px solid #C74E0A}
td.filledCell{background:white;background:rgba(255,255,255,0.53)}
td.filledCell:hover{background:#FFE5D8;background:rgba(255,229,216,0.75)}
td.emptyCell{visibility:hidden}
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#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}

Kiểu hiển thị 7 

#calendarDisplay{display:none}
#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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMrqkw0z-Aa4gAtzxzbrhpUvTMDjNyPjqSFPh-mW9cVL1osiKy3KdWxrN4wKQtBCeSwaClx3L3a6ASRDmSs3p0zNXD8RSYcO1VrXLdORFDoa_JVwprolM-db-wow1SI2hBQn0Y7kk40uI/w250/Melody.png) no-repeat 50% -3px}
#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}
#bcaption select{background:white;border:1px solid #BE002E;padding:1px;width:90%;color:#C70543;font-weight:bold}
table#bcalendar thead{}
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}
table#bcalendar{margin:0 0;width:100%}
table#bcalendar tbody tr td{cursor:pointer;text-align:center;border-radius:3px;padding:3px;color:#CE013A;font:bold 100% Tahoma,Arial,Sans-serif}
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}
table#bcalendar tbody tr td.firstCell{visibility:visible;background:#C50442;background:rgba(197,4,66,0.32)}
td.filledCell{background:white;background:rgba(255,255,255,0.53)}
td.filledCell:hover{background:#FFD8E0;background:rgba(255,216,224,0.67)}
td.emptyCell{visibility:hidden}
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#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}
- Lưu lại và Xem kết quả
- Chúc bạn thành công!
Nguồn: Internet
, , , ,

Post a Comment

Like
© 2014 Phan Nhật Chánh • Privacy Policy
Trở lên trên