Archivo Del Blog Personalizado

Creación de un sitio web personal (Weblog II)
Universidad Permanente
Convertir el archivo del blog en un calendario
Seguir los siguientes pasos:
[1] Añadimos un nuevo elemento de página desde "Diseño  Añadir un

gadget  Archivo del Blog" en nuestra barra lateral, que ha de tener este
formato:
[2] Localizamos ahora en la parte de "Diseño  Edición HTML", sin

expandir artilugios, la línea de código correspondiente al gadget de
"Archivos":
<b:widget id='BlogArchive1' locked='false' title='Archivo del blog'

type='BlogArchive'/>
Tendremos que cambiar esa línea por este código:
<b:widget id='BlogArchive1' locked='false' title='Blog Archive'

type='BlogArchive'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
- Página 1 -
</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'>

</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>

<thead id='bcHead'></thead>



<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
- Página 2 -
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
<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'>

</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>
- Página 3 -
</b:widget>
[3] Colocamos ahora el script para el calendario justo antes del </head>
de nuestra plantilla:


<script type='text/javascript'>
//<![CDATA[
var bcLoadingImage =
"http://img182.imageshack.us/img182/7880/rotatingarrowuq0.gif";
var bcLoadingMessage = " Cargando....";
var bcArchiveNavText = "Ver archivo";
var bcArchiveNavPrev = '◄';
var bcArchiveNavNext = '►';
var headDays =
["Domingo","Lunes","Martes","Miercoles","Jueves","Viernes","Sabado"];
var headInitial = ["Do","Lu","Ma","Mi","Ju","Vi","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');
- Página 4 -
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.innerHTML = bcArchiveNavPrev;
bcp = parseInt(nav,10) + 1;
a.href = bcNav[bcp];
a.title = 'Archivo anterior';
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);
- Página 5 -
}
if(nav > 0){
a.innerHTML = bcArchiveNavNext;
bcn = parseInt(nav,10) - 1;
a.href = bcNav[bcn];
a.title = 'Archivo siguiente';
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'+timeO
ffset+'&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';
- Página 6 -
for (var i = 0; i < feed.entry.length; ++i) {
var entry = feed.entry[i];
var link = entry.link[0].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]){
- Página 7 -
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];
- Página 8 -
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(cSe
nd[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'/>

- Página 9 -
[4]Guardamos los cambios y ya podremos ver la versión básica del

calendario en nuestra barra lateral.
[5] Para poder controlar el aspecto del calendario en "Fuentes y

colores" hemos de añadir en la plantilla unas cuantas variables exclusivas
del calendario.
(El sitio ideal para colocarlas es justo debajo o encima de las que ya vienen
en nuestra plantilla y que están casi al comienzo de ésta, buscar el código
“<Variable name=” en Diseño  Edición de HTML y colocar el código
siguiente encima:
/* Calendario de Archivos Variables

=========================================
<Variable name="bcCalenderFonts" description="Calendar Font Sizes"
type="font" default="normal normal 100% Tahoma, Arial, Sans-serif" /
value="normal normal 100% Tahoma, Arial, Sans-serif">
<Variable name="bcTableBackgroundColor" description="Calendar
Background Color"
type="color" default="#ffffff" value="#ffffff">
<Variable name="bcTableBorderColor" description="Calendar Border
Color"
type="color" default="#000000" value="#000000">
<Variable name="bcTableTextColor" description="Calendar Text Color"
<Variable name="bcMenuBackgroundColor" description="Calendar Menu
Select Background Color"
- Página 10 -
<Variable name="bcMenuTextColor" description="Calendar Menu Select
Text Color"
<Variable name="bcTableHeaderBackgroundColor" description="Calendar
Header Background Color"
<Variable name="bcTableHeaderTextColor" description="Calendar Header
Text Color"
<Variable name="bcTableHighLightColor" description="Calendar
Highlight Color"
type="color" default="#cccccc" value="#cccccc">
<Variable name="bcCalenderLinksColor" description="Calendar Links
Color"
type="color" default="#0000ff" value="#0000ff">
<Variable name="bcCalenderLinksHoverColor" description="Calendar
Links Hover Color"
<Variable name="bcTableFooterBackground" description="Calendar
Footer Background Color"
<Variable name="bcFooterLinksColor" description="Calendar Footer
LinksColor"
===========================================
Fin de Archivo Calendario Variables */
[6] Para terminar, añadimos unas líneas de CSS en la plantilla (Diseño 

Edición de HTML), por ejemplo, justo antes de ]]></b:skin>
/* Archive Calendar CSS

----------------------------------------------- */
/* div that holds calendar */

#blogger_calendar { margin:5px 0 0 0;width:98%;}
/* Table Caption - Holds the Archive Select Menu */

#bcaption {border:1px solid
$bcTableBorderColor;padding:2px;margin:10px 0
0;background:$bcMenuBackgroundColor;font:$bcCalenderFonts}
/* The Archive Select Menu */
- Página 11 -
#bcaption select {background:$bcMenuBackgroundColor;border:0 solid
$bcMenuBackgroundColor;color:$bcMenuTextColor;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 $bcTableBorderColor;
font:$bcCalenderFonts;background:$bcTableHeaderBackgroundColor;colo
r:$bcTableHeaderTextColor}
/* The calendar Table */

table#bcalendar {border:1px solid $bcTableBorderColor;border-top:0;
margin:0px 0 0px;width:95%;background:$bcTableBackgroundColor}
/* The Cells in the Calendar */

table#bcalendar tbody tr td {text-align:center;padding:2px;border:1px
outset $bcTableBorderColor;
color:$bcTableTextColor;font:$bcCalenderFonts;}
/* 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:$bcCalenderLinksColor;}
table#bcalendar tbody tr td a:hover {color:$bcCalenderLinksHoverColor;}
/* 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:$bcTableHighLightColor;border:1px solid
$bcTableBorderColor}
/* Table Footer Navigation */
- Página 12 -
table#bcNavigation
{width:95%;background:$bcTableFooterBackground;border:1px solid
$bcTableBorderColor;border-
top:0;color:$bcTableTextColor;font:$bcCalenderFonts;}
table#bcNavigation a:link {text-
decoration:none;color:$bcFooterLinksColor}
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 {}
ul#calendarUl li {
background:transparent
url(http://img504.imageshack.us/img504/3452/stocknextpagesr5.png) no-
repeat !important;
padding: 0 0 0 35px !important;
}
Guardamos los cambios y vemos como ha quedado el calendario:
[7] Si vamos ahora a "Fuentes y colores" en nuestro panel, veremos allí

las nuevas opciones para cambiar el aspecto al calendario.
Tendremos en cuenta que en la vista desde "Fuentes y colores" no se verá
el calendario completo, así que tendremos que ir guardando y
comprobando algunos cambios desde la vista normal del blog.
- Página 13 -
Opcional
Ocultar las entradas que se despliegan debajo del calendario
En el código CSS que añadimos en el paso [6], localizamos esta línea:

ul#calendarUl {margin:5px auto 0!important;} y la reemplazamos por el
siguiente código
ul#calendarUl { display:none;margin:5px auto 0!important;}
Como es lógico, una vez ocultas las entradas ya no necesitaremos mostrar

la imagen de carga ni el "Cargando...", así que en el paso [3] localizamos
(casi al principio) estas líneas y las eliminamos:
var bcLoadingImage =
"http://img182.imageshack.us/img182/7880/rotatingarrowuq0.gif";
var bcLoadingMessage = " Cargando....";
- Página 14 -

Archivo Del Blog Personalizado

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Archivo Del Blog Personalizado

Uploaded by

Copyright:

Available Formats

Creación de un sitio web personal (Weblog II)

Convertir el archivo del blog en un calendario

Seguir los siguientes pasos:

[1] Añadimos un nuevo elemento de página desde "Diseño  Añadir un

[2] Localizamos ahora en la parte de "Diseño  Edición HTML", sin

<b:widget id='BlogArchive1' locked='false' title='Archivo del blog'

Tendremos que cambiar esa línea por este código:

<b:widget id='BlogArchive1' locked='false' title='Blog Archive'

<div id='blogger_calendar' style='display:none'>

<div id='calLoadingStatus' style='display:none; text-align:center;'>

<script type='text/javascript'> initCal();</script>

// Nothing to configure past this point ----------------------------------

//Initialize Fill Array

[4]Guardamos los cambios y ya podremos ver la versión básica del

[5] Para poder controlar el aspecto del calendario en "Fuentes y

/* Calendario de Archivos Variables

[6] Para terminar, añadimos unas líneas de CSS en la plantilla (Diseño 

/* Archive Calendar CSS

/* div that holds calendar */

/* Table Caption - Holds the Archive Select Menu */

/* The Archive Select Menu */

/* The Heading Section */

/* The calendar Table */

/* The Cells in the Calendar */

/* First Row Empty Cells */

/* Cells that have a day in them */

/* Cells that are empty, after the first row */

/* Cells with a Link Entry in them */

/* Table Footer Navigation */

Guardamos los cambios y vemos como ha quedado el calendario:

[7] Si vamos ahora a "Fuentes y colores" en nuestro panel, veremos allí

En el código CSS que añadimos en el paso [6], localizamos esta línea:

ul#calendarUl { display:none;margin:5px auto 0!important;}

Como es lógico, una vez ocultas las entradas ya no necesitaremos mostrar

You might also like