Hosting en inglés

Registro de dominios

Hosting SSD Wordpress

¿Como añadir el widget de calendario de archivos en Blogger?

 

Este interesante tutorial que nos puede ayudar a darle una nueva imagen a nuestro blog de Blogger. El calendario de archivos es un widget de tipo WordPress que cuenta con estilos personalizados y es compartido por Mustafa Ahmedzai. A continuación se muestran los pasos sencillos para su implementación en nuestro sitio:

  • Ingresar a Blogger Dashboard > Layout.
  • Selecionar el widget Blog Archive del directorio de widgets predeterminados.
  • Seleccionar estas opciones en Blog Archive:
    • En Style, escoger Flat List.
    • Desmarcar "Show Older Post First".
    • En Archive Frecuency seleccionar Monthly.
    • En Date Format, podemos dejarlo tal como está.
  • Ahora ingresamos a Dashboard > Settings > Template > Edit HTML > Proceed.
  • Buscar el siguiente código:
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>

Sino podemos encontrar este código buscamos BlogArchive y lo buscamos ahí

  • Al encontrar el código anterior, se sustituye por el siguiente:
<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>
  • Buscar </head> y pegar el siguiente código arriba:
<!-- Blogger Archive Calendar by  www.MyBloggerTricks.com --> 
<script type='text/javascript'> 
//<![CDATA[ 
var bcLoadingImage = "http://mybloggertricks.googlecode.com/files/loading-trans.gif.png"; 
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> 
<!-- End Blogger Archive Calendar by www.MyBloggerTricks.com  -->

 

  • El último paso es salvar.

Por supuesto que antes de hacer cualquier cambio en la plantilla debemos hacer un respaldo por si cometemos algún error. Este calendario puede ser personalizado añadiendo más colores y estilos.

 

SUSCRÍBETE SIN COSTO ALGUNO A NUESTRO BOLETÍN

Escribe tú correo electrónico:

Recibe contenido de este sitio sin costo alguno en tu e-mail. Solamente enviaremos los últimos artículos de Internetrcc, sin ningún tipo de spam

Web hosting recomendado

alojamiento wordpress

Deja un comentario