2012-12-01

Архив блога blogspot в виде календаря

архив blogspot
Виджет-календарь, с помощью которого мы будем выводить архив blogspot, установим сегодня в блог.

Следуйте инструкциям ниже:
  1. Административная панель blogspot –> вкладка Дизайн,
  2. Добавьте виджет Архив блога. Если он у вас уже был ранее добавлен, то редактируйте его следующим образом:
  3. Сохраните изменения
  4. Blogger –> Шаблон –> изменит HTML. Ищем отрезок кода:
    <b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
    Если вы не можете найти точный отрезок кода, то можете найти лишь его составляющую BlogArchive, а затем уже подобрать подходящий код по смыслу.
  5. Замените найденный отрезок кода на следующее
    ..
    <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>
  6. Теперь найдите </head> и вставьте до него код:
    <script type='text/javascript'>
    //<![CDATA[
    var bcLoadingImage = "http://2.bp.blogspot.com/-yUGWz7Vrm0c/UKtPDwJpdSI/AAAAAAAAICU/9ZAvxQUZJLg/s400/loading-trans.gif.png";
    var bcLoadingMessage = " Loading....";
    var bcArchiveNavText = "Просмотр архива";
    var bcArchiveNavPrev = '◄';
    var bcArchiveNavNext = '►';
    var headDays = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
    var headInitial = ["Вс","Пн","Вт","Ср","Чт","Пт","Сб"];
    // 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>
  7. Добавим стиль, дя того, чтобы получить календарь архива блога, как в примере. Найдите код ]]></b:skin> и вставьте чуть выше:
    /* 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 {}
    /* End of Post Navigator by MBT (LIGHT Theme) ------ */
         Если вы хотите такой календарь
архив блога
                , то до тега ]]></b:skin> вместо предыдущего кода вставьте этот:
/* 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 {}
/* End of Post Navigator by MBT (DARK Theme) ------ */

Вы можете сами настроить архив в виде календаря по своему вкусу, воспользовавшись шпаргалкой ниже:
/* Стили архива календаря*/
#calendarDisplay {display:none;}
/* общие сведения виджета*/
#blogger_calendar { margin:5px 0 5px 10px;width:98%;}
/* Таблица, которая содержит выбор месяца календаря – шапка календаря*/
#bcaption {border:1px solid #666666;padding:2px;margin:10px 0 0;background:#цвет шапки календаря;font:bold 100% Tahoma, Arial, Sans-serif}
/* Архив выбор месяца*/
#bcaption select {background:#цвет под названием месяца;border:0 solid #333333;color:#цвет месяца;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:#цвет под днями недели;color:#цвет дня недели}
/* Таблица календаря – общее поле */
table#bcalendar {border:1px solid #666666;border-top:0; margin:0px 0 0px;width:95%;background:#цвет под основным полем календаря, кроме ячеек с датами}
/* Ячейки календаря - даты*/
table#bcalendar tbody tr td {text-align:center;padding:2px;border:1px outset #666666; color:#цвет дат;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:#цвет дат с постами; text-decoration:underline;}
table#bcalendar tbody tr td a:hover {color:#ffffff; text-decoration:none;}
/* Первая строка – пустые ячейки*/
td.firstCell {visibility:visible;}
/* Ячейки с датами*/
td.filledCell { background:#цвет ссылок под датами;}
/* Клетки, которые являются пустыми, после первой строки*/
td.emptyCell {visibility:hidden;}
/* Клетки с датами, написанными постами*/
td.highlightCell {background:#цвет дней, с написанными статьями;border:1px solid #666666}
/* Таблица навигация в футере*/
table#bcNavigation  {width:95%;background:#цвет футера календаря;border:1px solid #666666;border-top:0;color:#цвет текста  “просмотр архива”;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 MBT (DARK Theme) ------ */
Перевод статьи сайта www.mybloggertricks.com

5 комментариев :

Анонимный комментирует...

Как сделать, чтобы календарь в начинался с понедельника???

Ирина Удовиченко комментирует...

Подскажите, а как сделать чтоб название месяца и числа были зеленого цвета??

Ирина Удовиченко комментирует...

Подскажите пожалуйста, как изменить цвет в календаре с синего на зеленый

Mycrib комментирует...

Ирина, я дополнила запись пояснениями, которые помогут настроить вам календарь по своему вкусу. Для этого нужно внести изменения в код, который вы вставили до фрагмента ]]></b:skin>

Но проще в вашем случае можно сделать так: измените в вашем коде цвет #0080ff на цвет #688E58, а также цвет #53A9FF на цвет #688E58 (изменять второй код, который вставляли до ]]></b:skin>).

Посмотреть измегнения в календаре можете на странице Демо блога, а скачать готовый код календаря в зеленом стиле можете здесь http://yadi.sk/d/vPWd9CS52Cnc4.

Ирина Удовиченко комментирует...

Спасибо большое!!!

Отправить комментарий

Комментарии, содержащие ненормативную лексику, спам, оскорбления, публиковаться не будут. Ели вы хотите опубликовать код в комментарии, то воспользуйтесь encoder HTML