Tutoriales sobre Blogger

En esta entrada veremos como agregar un gadget con un hermoso calendario tipo WordPress. Este gadget es compatible con todas las plantillas y facil de Implementar

Ante de Comenzar veremos la demo

Demostracion

Vamos a comenzar:

Paso 1: Vamos a Blogger>>Diseño>>Añadir un Gadget
Paso 2: Seleccionamos el gadget "Archivo de Blogger"

Paso 3: Damos clic editar y hacemos estos cambios

Estilo: Lista

Opciones: Mostrar titulos de las Entradas

Frecuencias: Mensualmente

Paso 4: Guardamos el Gadget
Paso 5: Vamos a Blogger>>Plantillas>>Edicion HTML
Paso 6: Buscamos el siguiente codigo (Ctrol +F)

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

Paso 7: Sustituimos el código buscamos 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'>



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



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

Paso 7: Busque con Ctrol + F el siguiente codigo

</head>

Paso 8: Justo por encima de </head> pegue el siguiente codigo

<script type='text/javascript'>

//<![CDATA[

var bcLoadingImage = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDq5-GEBgnfraqeQtBLeudJdwE8pFAhk8FaunPjWAxM_m6SGbtsBvap4iM7BzoUF7d5fzwUC6gxnE6vQVQfDH5A_7RDNQkKykNhwxlFB-womJF_OVSddN2MBdZTYOSuoX-rl3zdMwrX7c/s400/loading-trans.gif.png";

var bcLoadingMessage = " Cargando....";

var bcArchiveNavText = "Ver Archivos;

var bcArchiveNavPrev = '◄';

var bcArchiveNavNext = '►';

var headDays = ["Domingo","Lunes","Martes","Miércoles","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');

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&alt=json-in-script&callback=timezoneSet'></script>

Paso 9: Guardamos la Plantilla

Nota:-

Lo Destacado en colores rojo Puede Ser Editado A Tu Gusto

Ahora le agregaremos el Codigo CSS para su propio estilo

Paso 10: Vamos a Boggler>>Plantilla>>Edicion HTML>>
Paso 11: Buscamos el siguiente codigo

]]></b:skin>

Paso 12: Justo por encima de ]]></b:skin> Pegamos el siguiente codigo CSS

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

Guardamos la Plantilla

Quedaría de la siguiente manera con un colo Fondo Blanco

Nota:- Si queremos le podemos cambiar los siguientes atributos

#0080ff: Cambia el color de nuestro texto

#53A9FF: Cambia el color de fondo

#72B9FF: Cambia el color de las celdas una ves que se apoya el ratón

También podemos Agregarle un color negro a nuestro calendario

Agregando el siguiente condigo antes de ]]></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) ------ */

Quedaría de la siguiente manera con un color Negro de fondo

Guardamos la plantilla y observa como te a quedado tu Calendario de Almacenamiento

Comentarios (0)

Emoticon Cargar Imagenn Reglas Editar Comentarios

:))

:((

:-)

;)

=))

=.=

^_^

/=he

/=r

/=l

/=ok

/=clap

(y)

(yy)

/=hi

/=j

/=hup

/=hd

/=hl

/=hr

/=s

Instrucciones Para omentar

Incertar Enlace

Utilice el codigo <a href='LINK'> EJEMPLO </a>

Cargar Imagen

[img] LINK_ANH [/img] -Use el codigo para cargar una imagen.

Formato Word

<b> negrita </b>
<i> cursiva </i>
<u> texto subrayado </u>
<strike> ~~texto tachado~~ </strike>

Insertar un Fragmento de codigo

Primero use esta herramienta para codificar el codigo que quiera agregar.
Luego utilice el codigo [code] CODIGO HTML [/code]

Cerrar

Crear un Calendario de Almacenamiento de Entradas para Blogger

Vamos a comenzar:

Ahora le agregaremos el Codigo CSS para su propio estilo

Quedaría de la siguiente manera con un colo Fondo Blanco

También podemos Agregarle un color negro a nuestro calendario

Quedaría de la siguiente manera con un color Negro de fondo

Comentarios (0)

Instrucciones Para omentar

Incertar Enlace

Cargar Imagen

Formato Word

Insertar un Fragmento de codigo

Tutoriales Blogger

Donaciones

Contacto

Sobre mi

C?p nh?t m?i trên Star Cu?ng IT

Crear un Calendario de Almacenamiento de Entradas para Blogger

Vamos a comenzar:

Ahora le agregaremos el Codigo CSS para su propio estilo

Quedaría de la siguiente manera con un colo Fondo Blanco

También podemos Agregarle un color negro a nuestro calendario

Quedaría de la siguiente manera con un color Negro de fondo

ENTRADAS RELACIONADAS

Comentarios (0)

Instrucciones Para omentar

Incertar Enlace

Cargar Imagen

Formato Word

Insertar un Fragmento de codigo

Tutoriales Blogger

Donaciones

Contacto

Sobre mi