Personalizar el widget de Archivo del blog

17.2.15

Hola, hola! Bonita semana, un gusto estar por acá de nuevo con todos ustedes :D, muchas gracias por visitar el blog, comentarlo y suscribirse ¡Que emoción ya casi somo 300! Gracias a todos ♥

Y para celebrarlo les traigo un pedazo de tutorial muy bonito, eso sii es un poco largo ! No tanto en pasos si no que en código pero van a ver que esta fácil y el resultado esta divino.

Se trata de cambiar el widget de archivo del blog a un calendario, este nos muestra los meses y nos marca los dias que hemos publicado. Si ven mi calendario se pueden dar cuenta que casi no tengo día fijo para publicar (que verguenza jaja)

* Un plus de este calendario es que si le dan clic a cualquier dia que aparece en rojo este nos lleva al post publicado en esa fecha ♥

Aquí les dejo un ejemplo pero también pueden verlo funcionando en mi blog ahora mismo :D

P A S O # 1

Iniciamos por agregar el widget → Archivos del blog

* En estilo: lista simple

* En opciones: mostrar los títulos de las entradas

* En frecuencia: mensualmente

Clic en Guardar

P A S O # 2
Vamos a → Plantilla → Editar HTML
* Damos clic donde dice ir al widget
* Clic en → BlogArchive1

P A S O # 3
. Localizamos esta parte:

<b:widget id='BlogArchive1' locked='false' title='Archivo del blog' type='BlogArchive'> ...</b:widget>

O esta otra

<b:widget id='BlogArchive1' locked='false' title='Archivo del blog' type='BlogArchive'/>

En mi plantilla me aparece como la segunda opción, ya localizado el código lo borramos todo.

P A S O # 4

Luego de borrarlo la parte del paso 3 de seguro una cuantas lineas abajo se les va a poner una linea de color rojo <b:widget > | eso también debemos de borrarlo ...

P A S O # 5

Pegar este código donde habíamos borrado lo del paso 3

<b:widget id='BlogArchive1' locked='false' title='Arquivo do Blog' type='BlogArchive'>

<b:includable id='main'>

<b:if cond='data:title'>

</b:if>

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

<b:include name='quickedit'/>

</div>

</b:includable>

<b:includable id='toggle' var='interval'>

</b:includable>

<b:includable id='flat' var='data'>

<ul>

<b:loop values='data:data' var='i'>

<a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>)

</li>

</b:loop>

</ul>

</div>

</caption>

</tbody>

</table>

</tr></table>

</div>

</div>

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

</b:widget>

P A S O # 6

Presionamos al mismo tiempo Ctrl + f y buscamos </ head>

P A S O # 7

Antes de </ head> pegamos el siguiente código:

//<![CDATA[

//

var bcLoadingImage = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFHdPBmHlHETyuq9O7M75fAN9FqgRBCQ41L4sHYi_du-mvZAG3PL4r_mMl5c0uQFnOnNj_YwJ4K9vY5oc0QNv9jC1pe0Pi_-hwHY866pYp2szd6Ara0K5xc3Jw7qy3XRcrYxVq8xHeaL0/";

var bcLoadingMessage = " Carregando....";

var bcArchiveNavText = "Ver todos los post del mes ♥";

var bcArchiveNavPrev = '◄';

var bcArchiveNavNext = '►';

var headDays = ["Domingo","Lunes","Martes","Miercoles","Jueves","Viernes","Sábado"];

var headInitial = ["Dom","Lu","Ma","Mi","Ju","Vi","Sab"];

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

P A S O # 8

Buscamos ]]> </ b:skin> y antes de el copiar el siguiente código:

/*---Archive Calendar CSS 2 MDA---*/
#calendarDisplay { display: none }
/* div that holds calendar */
#blogger_calendar {
margin: 5px 0 0 0;
width: 100%;
}
/* Table Caption - Holds the Archive Select Menu */
#bcaption {
padding: 2px;
margen: 10px 0 0;
}
/* The Archive Select Menu */
#bcaption select {
background: #E6E6E6;/ * color de Fondo del menú * /
color: #000000 ;/ * color de la letra del menú * /
font-family: "Cambria", "Century Gothic", Arial, Georgia;
font-size: 14px ;/ * Tamano de la letra del menú * /
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 solid #A4A4A4 ;/ * Borde de los dias de la semana * /
font-size: 12px ;/ * Tamano del Texto * /
font-weight: normal;
background: #E6E6E6;/ * Fondo de Lun, Mar, Mir, Jueves , Vier, Sab, Dom * /color: # ffffff ;/ * Fondo de Lun, Mar, Mir, Jueves, Vier, Sab, Dom * /
text-shadow: 1px 1px 0px # 7DC5A3 ;/ * color de sombra del Texto de Lun, Mar, Mir, Jueves, Vier, Sab, Dom * /
}
/* The calendar Table */
table#bcalendar {
border: 1px solid #000000 ;/* color de Borde de Todo el calendario */
border-top: 1 px;
margin: 0px 0 0px;
width: 100%;
background: #ffffff ;/* color de Fondo del Todo el calendario */
}
/* The Cells in the Calendar* /
table#bcalendar tbody tr td {
text-align: center;
padding: 2px;
border: 1px solid #000000;/*color de Borde de los dias del mes */
color: #7f7f7f ;/*color de la letra de los dias del mes */
font: normal normal 13px Cambria;
font-weight: normal;
/*font: normal normal 13px Cambria;*/;;
}
/* 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;
}
table#bcalendar tbody tr td a:hover { color: #C40D29 }
/* 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: #F6CECE;
border: 1px solid #ebebeb;
}
/* Table Footer Navigation */
table#bcNavigation {
width: 100%;
background: #ebebeb;
border: 1px solid #ebebeb;
border-top: 0;
color: #7f7f7f;
font: normal normal 13px;
}
table#bcNavigation a:link {
text-decoration: none;
color: #7f7f7f;
}
td#bcFootPrev { width: 10px }
td#bcFootAll { text-align: center }
td#bcFootNext { width: 10px }
ul#calendarUl {
margin: 5px auto 0!important;
border-bottom: 1px dotted #FDD7D1;
}
ul#calendarUl li a:link { border-bottom: 1px dotted #FDD7D1 }

P A S O # 9
Ahora solo nos queda personalizarlo y ponerlo al mismo estilo de nuestro blog. Todo esto lo vamos a realizar con el código que ya pegamos en nuestra plantilla y es el del paso #8 , ese código es Css el que le da el estilo a nuestro calendario.

ejemplo: border: 1px solid #A4A4A4 ;/ * Borde de los dias de la semana * /

Las letras en negrita nos indica que es lo que hace ese código, entonces podemos cambiar:
- Border: Que es el borde de las casillas
- 1 px : Que es el ancho del borde
- solid: Que es el estilo del borde. Aqu les dejo varias opciones

- #A4A4A4: Este pequeño código de números son los que indican el color, pueden ver varios códigos en esta página: Colores HTML códigos

Y listo! les aseguro que la parte difícil es personalizar nuestro calendario jejeje, me pase mas de media hora en elegir los colores :/ y al final quedo algo soso jejeje..

Que tal les pareció el tutorial? Me encantaria leer sus comentariios ♥ Se animan a ponerlo en su blog?

Wendy Raydé

...

24 comentarios

Gema Vallejomartes, febrero 17, 2015
Me ha gustado mucho el calendario! La verdad es que me parece bastante estético y más bonito que el archivo que nos da blogger. Tal vez lo intente implementar cuando tenga tiempo
¡Muchas gracias por el tutuo!
ResponderBorrar
Respuestas
Unknownmartes, febrero 17, 2015
Que pasada de tuto! *O* Gracias gracias!
ResponderBorrar
Respuestas
Sonia Essermartes, febrero 17, 2015
¡Qué idea más original, Wendy! Gracias por compartirla...

¡Un muackiles!
ResponderBorrar
Respuestas
Eneahmartes, febrero 17, 2015
Muy bonito Wendy, de momento creo que no lo pondremos pero me alegra saber que has realizado el tutorial. En cuanto nos lo planteemos, aquí estamos. ; )

Besos
ResponderBorrar
Respuestas
susilovesewmiércoles, febrero 18, 2015
Me parece muy bonito el calendario, posiblemente lo ponga en mi blog...aunque aún le estoy dando forma...vamos, que me tiene medio loca...
Gracias por compartir.
ResponderBorrar
Respuestas
Pikapicjueves, febrero 19, 2015
Yo me apunto a hacerlo, Wendy!!
Me encantó en cuanto lo vi, pero como veo que me va a llevar un rato, lo voy a dejar para cuando esté más tranquila, que no quiero darle al botón de autodestrucción sin darme cuenta!! jajajaja
Un beso y mil gracias por éste tuto tan chulo!!

Manuela.
ResponderBorrar
Respuestas
Alvaro Torres Muñozviernes, febrero 20, 2015
Hermoso blog y todo lo que publicas
ResponderBorrar
Respuestas
carmenbarajassábado, febrero 21, 2015
Muchas gracias, me encanta el calendario, buscaba esto hace tiempo, los colores me van perfectos.
ResponderBorrar
Respuestas
Anónimodomingo, marzo 15, 2015
¡Buena idea!
Me gusta mucho tu blog, me quedo por aquí como seguidora.
ResponderBorrar
Respuestas
Eleonor McBridemiércoles, agosto 26, 2015
queda muy bien! gracias
ResponderBorrar
Respuestas
Unknownviernes, diciembre 04, 2015
Me encantó, muchísimas gracias, claro que el ver tanto HTML ya me pone nerviosa. Je je je pero lo voy a intentar.
ResponderBorrar
Respuestas
Lilithlunes, enero 11, 2016
Hola!
Me gustó mucho tu blog, es hermoso.
Gracias por comptartir con nosotros tus ideas, esta en especial me gustó mucho. Quise usarla en mi blog y el calendario me aparece pero no las fechas, lo único diferente que hice de lo que pusiste aquí, es que yo no puedo seleccionar la opción de "mostrar título de las entradas" depués de que doy clic en lista, esa opción me aparece únicamente en jerarquía. ¿Qué puedo hacer?

Saludos
ResponderBorrar
Respuestas
Aricuentistaviernes, febrero 26, 2016
Muchas gracias, me ha servido un montón y ahora mi blog está precioso :)
ResponderBorrar
Respuestas
Raydejueves, septiembre 29, 2016
¡hola! Este código no le he realizado yo, ya que no soy programadora web.. últimamente este tutorial esta causando problemas supongo que es porque en un principio fue creado para aplicarlo en la plantilla simple de blogger y al aplicarlo a plantillas ya modificadas los códigos no dan los mismo resultados. Siento mucho no poder ayudarte.
ResponderBorrar
Respuestas
Unknownviernes, diciembre 02, 2016
Muchas gracias por tus tutoriales! Me han servido de gran ayuda :D
ResponderBorrar
Respuestas
Arual Gallardodomingo, abril 23, 2017
¡Hola!
lo coloque y todo me fue bien pero hace unos días dejo de funcionar de la noche a la mañana y no sé porque, ¿podrías ver si a ti te funciona todavía? y en caso de que sea negativo, ¿hay alguna manera de arreglarlo?
Gracias.
ResponderBorrar
Respuestas

Agregar un comentario

Gracias por tus comentarios

17.2.15