1. Cài đặt lưu trữ cho blog
2. Vào Blogger > Bố cục (Layout) > Thêm Tiện Ích > Thêm vào tiện ích Lưu Trữ Blog
3. Sau đó thiết lập tiện ích trên như sau và Lưu lại
5. Tìm đoạn code sau:
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
Nếu không thấy bạn chỉ cần tìm BlogArchive sau đó tìm mã tương tự như trên6.Thay thế code vừa tìm được bằng
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'><b:includable id='main'><b:if cond='data:title'><h2><data:title/></h2></b:if><div class='widget-content'><div id='ArchiveList'><div expr:id='data:widget.instanceId + "_ArchiveList"'><b:if cond='data:style == "HIERARCHY"'><b:include data='data' name='interval'/></b:if><b:if cond='data:style == "FLAT"'><b:include data='data' name='flat'/></b:if><b:if cond='data:style == "MENU"'><b:include data='data' name='menu'/></b:if></div></div><b:include name='quickedit'/></div></b:includable><b:includable id='toggle' var='interval'><!-- Toggle not needed for Calendar --></b:includable><b:includable id='flat' var='data'><div id='bloggerCalendarList'><ul><b:loop values='data:data' var='i'><li class='archivedate'><a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>)</li></b:loop></ul></div><div id='blogger_calendar' style='display:none'><table id='bcalendar'><caption id='bcaption'></caption><!-- Table Header --><thead id='bcHead'></thead><!-- Table Footer --><!-- Table Body --><tbody><tr><td id='cell1'> </td><td id='cell2'> </td><td id='cell3'> </td><td id='cell4'> </td><td id='cell5'> </td><td id='cell6'> </td><td id='cell7'> </td></tr><tr><td id='cell8'> </td><td id='cell9'> </td><td id='cell10'> </td><td id='cell11'> </td><td id='cell12'> </td><td id='cell13'> </td><td id='cell14'> </td></tr><tr><td id='cell15'> </td><td id='cell16'> </td><td id='cell17'> </td><td id='cell18'> </td><td id='cell19'> </td><td id='cell20'> </td><td id='cell21'> </td></tr><tr><td id='cell22'> </td><td id='cell23'> </td><td id='cell24'> </td><td id='cell25'> </td><td id='cell26'> </td><td id='cell27'> </td><td id='cell28'> </td></tr><tr><td id='cell29'> </td><td id='cell30'> </td><td id='cell31'> </td><td id='cell32'> </td><td id='cell33'> </td><td id='cell34'> </td><td id='cell35'> </td></tr><tr id='lastRow'><td id='cell36'> </td><td id='cell37'> </td></tr></tbody></table><table id='bcNavigation'><tr><td id='bcFootPrev'></td><td id='bcFootAll'></td><td id='bcFootNext'></td></tr></table>
<div id='calLoadingStatus' style='display:none; text-align:center;'><script type='text/javascript'>bcLoadStatus();</script></div><div id='calendarDisplay'/></div><script type='text/javascript'> initCal();</script></b:includable><b:includable id='posts' var='posts'><!-- posts not needed for Calendar --></b:includable><b:includable id='menu' var='data'>Configure your calendar archive widget - Edit archive widget - Flat List - Newest first - Choose any Month/Year Format</b:includable><b:includable id='interval' var='intervalData'>Configure your calendar archive widget - Edit archive widget - Flat List - Newest first - Choose any Month/Year Format</b:includable></b:widget>
7. Trước thẻ </head> bạn chèn đoạn code sau
<script type='text/javascript'>//<![CDATA[var bcArchiveNavText = "View Archive";var bcArchiveNavPrev = '◄';var bcArchiveNavNext = '►';var headDays = ["Chủ Nhật","Thứ Hai","Thứ Ba","Thứ Tư","Thứ Năm","Thứ Sáu","Thứ Bẩy"];var headInitial = ["CN","Hai","Ba","Tư","Năm","Sáu","Bẩy"];// 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 Arrayvar 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 Yearsif (((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 Yearsif (((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ạn có thể tùy chỉnh lại phần được tô màu xanh ở code trên
8. Lưu lại là đã hoàn thành nhưng cần phải thêm style để nhìn đẹp hơn
9. Trước thẻ ]]></b:skin> bạn thêm 1 trong 2 đoạn code phía dưới sao cho phù hợp với blog của mình
#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 {}
#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 {}
10. Lưu lại và xem kết quả
Bài viết trên mình phát triển từ mybloggertricks.com
Chúc blog của các bạn ngày một đẹp hơn. Nếu thành công hãy comments và share cho mọi người cùng biết nha!
Cảm ơn bạn đã ghé thăm Troll VL !
Insert Emoticons» Tạm thời ngăn không cho comment với chế độ ẩn danh vì có một số bạn không có thành ý cố tình spam. Mong các bạn thông cảm!
» Bạn nên viết bằng Tiếng Việt có dấu để mọi người dễ đọc, dễ bình luận
» Để liên hệ,góp ý và đóng góp bài viết bạn click vào đây
Sử dụng các thẻ sau cho comments
» Chèn nội dung vào blockquote <b rel="quote">Nội dung blockquote</b>
» Chèn nội dung vào note <em rel="note">Nội dung note</em>
» Chèn code vào khung pre <i rel="pre">Nội dung code</i>
» Chèn hình ảnh <i rel="image">Link hình ảnh</i>
» Chèn video từ youtube [youtube]link video[/youtube]
» Chèn link <i rel="anchor">Link</i>
Mã Hóa Code Tạo và xem trước comments Cancel Reply
&Convert
'Convert
"Convert
<Convert
>