Já viram a novidade de gadget daqui do PH? Não? Pois acesse alguma postagem e confira. Achei o resultado maravilhoso! Amei♥ Este tutorial aprendi no site Template pra você. Ótimo site de tutoriais para blogs. Vamos lá?
1. Layout>Adiconar gadget> selecione Arquivo do blog
CASO NÃO FUNCIONE EM MENU SUSPENSO (1) COLOQUE EM LISTA SIMPLES.
2. Depois vá em Modelo>Editar Html
Ctrl+F ou F3 e pesquise por:
<b:widget id='BlogArchive1' locked='false' title='' type='BlogArchive'>
ou se preferir só o nome 'BlogArchive'
a partir dai, selecione até o final do código que termina em: </b:widget>
Exemplo:
<b:widget id='BlogArchive1' locked='false' title='' type='BlogArchive'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div expr:class='data:blog.languageDirection' 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:if>
</b:includable>
<b:includable id='flat' var='data'>
<ul class='flat'>
<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>
</b:includable>
<b:includable id='interval' var='intervalData'>
<b:loop values='data:intervalData' var='i'>
<ul class='hierarchy'>
<li expr:class='"archivedate " + data:i.expclass'>
<b:include data='i' name='toggle'/>
<a class='post-count-link' expr:href='data:i.url'><data:i.name/></a>
<span class='post-count' dir='ltr'>(<data:i.post-count/>)</span>
<b:if cond='data:i.data'>
<b:include data='i.data' name='interval'/>
</b:if>
<b:if cond='data:i.posts'>
<b:include data='i.posts' name='posts'/>
</b:if>
</li>
</ul>
</b:loop>
</b:includable>
<b:includable id='menu' var='data'>
<select expr:id='data:widget.instanceId + "_ArchiveMenu"' style='width: TAMANHOpx;font-size:TAMANHO DA FONTEpt'>
<option value=''>+Posts</option>
<b:loop values='data:data' var='i'>
<option expr:value='data:i.url'><data:i.name/></option>
</b:loop>
</select>
</b:includable>
<b:includable id='posts' var='posts'>
<ul class='posts'>
<b:loop values='data:posts' var='i'>
<li><a expr:href='data:i.url'><data:i.title/></a></li>
</b:loop>
</ul>
</b:includable>
<b:includable id='toggle' var='interval'>
<b:if cond='data:interval.toggleId'>
<b:if cond='data:interval.expclass == "expanded"'>
<a class='toggle' href='javascript:void(0)'>
<span class='zippy toggle-open'>▼ </span>
</a>
<b:else/>
<a class='toggle' href='javascript:void(0)'>
<span class='zippy'>
<b:if cond='data:blog.languageDirection == "rtl"'>
◄ 
<b:else/>
► 
</b:if>
</span>
</a>
</b:if>
</b:if>
</b:includable>
</b:widget>
Obs.: geralmente você irá encontrar uma setinha preta em seu Html que mostra o início e o fim do código para outro. Visualize ele. Ficará mais fácil.
E substitua todo esse código do <b:widget id='BlogArchive1' locked='false' title='' type='BlogArchive'>... até o </b:widget>
E substitua todo esse código do <b:widget id='BlogArchive1' locked='false' title='' type='BlogArchive'>... até o </b:widget>
como foi dito acima, por:
<b:widget id='BlogArchive1' locked='false' title='Arquivo do Blog' 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>
agora pesquise </head> e cole acima o seguinte código:
<!--Script Archive Calendar--> <script type='text/javascript'> //<![CDATA[ // <!--- Blogger Archive Widget - Calendar Style - by phydeaux3 http://phydeaux3.blogspot.com/ ---> var bcLoadingImage = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8QE4aixmZVh9dakrkwtXBAvCEMFbGoitWiJBLcfUHyYS-VrJPm_sfl3P-vWaXxwGcukoZ1VyIrtvxaGLRw49wfsHabYpsohz6fVFaYax5Od8lIFQFFBruO4fk3-h4wFlgAyL3l98ifv8/"; var bcLoadingMessage = " Carregando...."; var bcArchiveNavText = "Veja Todos os Posts do Mês"; var bcArchiveNavPrev = '◄'; var bcArchiveNavNext = '►'; var headDays = ["Domingo","Segunda","Terça","Quarta","Quinta","Sexta","Sábado"]; var headInitial = ["Dom","Seg","Ter","Qua","Qui","Sex","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> <script src='/feeds/posts/summary?max-results=0&alt=json-in-script&callback=timezoneSet'/> <!--end Archive Calendar-->PS:. Na linha var bcArchiveNavText = "Veja Todos os Posts do Mês"; você pode alterar o que esta marcado de vermelho pelo que quiser.
Vamos colorir?♥
Pesquise com Ctrl+F ou F3 ]]></b:skin> e acima dele, cole o código do modelo que você gostou.
Confira:
/*---Archive Calendar CSS 1---*/
#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;
border-bottom: 1px dotted #53A9FF;
}
ul#calendarUl li a:link { border-bottom: 1px dotted #FDD7D1 }
/*---Archive Calendar CSS 2---*/
#calendarDisplay { display: none }
/* div that holds calendar */
#blogger_calendar {
margin: 5px 0 0 0;
width: 100%;
}
/* Table Caption - Holds the Archive Select Menu */
#bcaption {
border: 1px solid #ebebeb;
padding: 2px;
margin: 10px 0 0;
background: #ebebeb;
font: normal normal 13px Cambria font-weight: normal;
}
/* The Archive Select Menu */
#bcaption select {
background: #ebebeb;
border: 0 solid #ebebeb;
color: #666666;
font-family: 'Cambria','Century Gothic', Arial, Georgia;
font-size: 14px;
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: 0px solid #F48A88; /*#ebebeb; _NO__DOTCOMMA__AFTER___NO__DOTCOMMA__AFTER__*/
font: normal normal 13px Cambria;
font-weight: normal;
background: #C40D29;
color: #ffffff;
}
/* The calendar Table */
table#bcalendar {
border: 1px solid #ebebeb;
border-top: 0;
margin: 0px 0 0px;
width: 100%;
background: #ffffff;
}
/* The Cells in the Calendar */
table#bcalendar tbody tr td {
text-align: center;
padding: 2px;
border: 1px solid #ebebeb;
color: #7f7f7f;
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: #7CD1A0;
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 }
/*---Archive Calendar CSS 3---*/
#calendarDisplay { display: none }
/* div that holds calendar */
#blogger_calendar {
margin: 5px 0 0 0;
width: 100%;
}
/* Table Caption - Holds the Archive Select Menu */
#bcaption {
border: 1px solid #F2BBD6;
padding: 2px;
margin: 10px 0 0;
background: #F2BBD6;
/*font: normal normal 13px Calibri*/;
font-family: 'Century Gothic', Arial, Georgia;
font-size: 12px;
font-weight: normal;
}
/* The Archive Select Menu */
#bcaption select {
background: #F2BBD6;
border: 0 solid #F2BBD6;
color: #725c67;
font-family: 'Century Gothic', Arial, Georgia;
font-size: 13px;
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 #F2BBD6;
/*font: normal normal 13px Calibri;*/
font-family: 'Century Gothic', Arial, Georgia;
font-size: 13px;
font-weight: normal;
background: #DB428C;
color: #ffffff;
}
/* The calendar Table */
table#bcalendar {
border: 1px solid #F2BBD6;
border-top: 0;
margin: 0px 0 0px;
width: 100%;
background: #ffffff;
}
/* The Cells in the Calendar */
table#bcalendar tbody tr td {
text-align: center;
padding: 2px;
border: 1px solid #F2BBD6;
color: #725c67;
font-family: 'Century Gothic', Arial, Georgia;
font-size: 12px;
font-weight: normal;
/*font: normal normal 13px Calibri;*/;
}
/* 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: #725c67;
}
table#bcalendar tbody tr td a:hover {
color: #DB428C;
background: #eaeaea;
display: block;
}
/* 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: #FFCF6A;
border: 1px solid #F2BBD6;
}
/* Table Footer Navigation */
table#bcNavigation {
width: 100%;
background: #F2BBD6;
border: 1px solid #F2BBD6;
border-top: 0;
color: #725c67;
font: normal normal 13px Calibri;
}
table#bcNavigation a:link {
text-decoration: none;
color: #725c67;
}
td#bcFootPrev { width: 10px }
td#bcFootAll { text-align: center }
td#bcFootNext { width: 10px }
ul#calendarUl {
margin: 5px auto 0!important;
border-bottom: 1px dotted #F2BBD6;
}
ul#calendarUl li a:link { border-bottom: 1px dotted #F2BBD6 }
/*---Archive Calendar CSS 4---*/
#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: #222;
font: bold 100% Tahoma, Arial, Sans-serif;
}
/* The Archive Select Menu */
#bcaption select {
background: #222;
border: 0 solid #C7C7C7;
color: #fff;
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: #222;
color: #fff;
}
/* The calendar Table */
table#bcalendar {
border: 1px solid #C7C7C7;
border-top: 0;
margin: 0px 0 0px;
width: 100%;
background: #222;
}
/* 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: #fff;
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: #222;
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: #222 }
td.filledCell:hover { background: #ccc }
/* Cells that are empty, after the first row */
td.emptyCell { visibility: hidden }
/* Cells with a Link Entry in them */
td.highlightCell {
background: #ddd;
border: 1px solid #C7C7C7;
}
td.highlightCell:hover {
background: #919191;
border: 1px solid #C7C7C7;
}
/* Table Footer Navigation */
table#bcNavigation {
width: 100%;
background: #222;
border: 1px solid #C7C7C7;
border-top: 0;
color: #fff;
font: bold 100% Tahoma, Arial, Sans-serif;
}
table#bcNavigation a:link {
text-decoration: none;
color: #fff;
}
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;
border-bottom: 1px dotted #c7c7c7;
}
ul#calendarUl li a:link { border-bottom: 1px dotted #FDD7D1 }
/*---Archive Calendar CSS---*/
#calendarDisplay { display: none }
/* div that holds calendar */
#blogger_calendar {
margin: 5px 0 0 0;
width: 100%;
}
/* Table Caption - Holds the Archive Select Menu */
#bcaption {
border: 1px solid #C4C4C4;
padding: 2px;
margin: 10px 0 0;
background: #ffffff;
/*font: normal bold 13px Calibri*/;
font-family: 'Didact Gothic', Arial, Georgia;
font-size: 12px;
font-weight: normal;
}
/* The Archive Select Menu */
#bcaption select {
background: #ffffff;
border: 1px solid #ffffff;
color: #333;
font-family: 'Didact Gothic', Arial, Georgia;
font-size: 13px;
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: 0px solid #F48A88; /*#C4C4C4; _NO__DOTCOMMA__AFTER__*/
/*font: normal bold 13px Calibri;*/
font-family: 'Didact Gothic', Arial, Georgia;
font-size: 13px;
font-weight: normal;
background: #95A052;
color: #ffffff;
}
/* The calendar Table */
table#bcalendar {
border: 1px solid #C4C4C4;
border-top: 0;
margin: 0px 0 0px;
width: 100%;
background: #ffffff;
}
/* The Cells in the Calendar */
table#bcalendar tbody tr td {
text-align: center;
padding: 2px;
border: 1px solid #C4C4C4;
color: #333;
font-family: 'Didact Gothic', Arial, Georgia;
font-size: 12px;
font-weight: normal;
/*font: normal bold 13px Calibri;*/;
}
/* 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: #95A052 }
/* First Row Empty Cells */
td.firstCell { visibility: visible }
/* Cells that have a day in them */
td.filledCell { }
td.filledCell:hover { background: #eaeaea; color:333; }
/* Cells that are empty, after the first row */
td.emptyCell { visibility: hidden }
/* Cells with a Link Entry in them */
td.highlightCell {
background: #2097AC;
border: 1px solid #C4C4C4;
}
td.highlightCell:hover { background:#eaeaea;
}
/* Table Footer Navigation */
table#bcNavigation {
width: 100%;
background: #eaeaea;
border: 1px solid #C4C4C4;
border-top: 0;
color: #333;
font-size:13px ; font-weight:bold;
}
table#bcNavigation a:link {
text-decoration: none;
color: #7C8644;
}
table#bcNavigation a:hover {
text-decoration: none;
color: #2097AC;
}
td#bcFootPrev { width: 10px }
td#bcFootAll { text-align: center }
td#bcFootNext { width: 10px }
ul#calendarUl {
margin: 5px auto 0!important;
border-bottom: 1px dotted #C4C4C4;
}
ul#calendarUl li a:link { border-bottom: 1px dotted #FDD7D1 }
Caso entende de Html, localize as cores do modelo desejado e modifique-as (:
Observações da autora do código:
•Se você retirar a 2ª linha do código CSS: #calendarDisplay { display: none } Irá aparecer abaixo do calendário a lista de posts criados naquele mês em questão.
•Se você escreve com uma frequência grande a lista ficará muito grande e pode ficar feio, mas se você escreve com pouca frequência pode ativar este recurso apagando esta linha e, dessa forma estará destacando os posts do mês.
Créditos total ao blog: Templates pra você
Bye bye♥
Créditos total ao blog: Templates pra você
Bye bye♥
Nenhum comentário:
Postar um comentário
Olá! Obrigada pela sua visita e comentário♥