04/04/2014

Tutorial: arquivo do blogger em forma de calendário mensal com as postagens do dia

Tumblr

Já viram a novidade de gadget daqui do PH? Não? Pois acesse alguma postagem e confira. Achei o resultado maravilhoso! Amei♥

Enfim, este tutorial aprendi no site Template pra você. Ótimo site de tutoriais para blogs♥ vamos lá?

1. Layout>Adiconar gadget> selecione Arquivo do blog



PS: 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 == &quot;item&quot;'>
  <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 + &quot;_ArchiveList&quot;'>
    <b:if cond='data:style == &quot;HIERARCHY&quot;'>
     <b:include data='data' name='interval'/>
    </b:if>
    <b:if cond='data:style == &quot;FLAT&quot;'>
      <b:include data='data' name='flat'/>
    </b:if>
    <b:if cond='data:style == &quot;MENU&quot;'>
      <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='&quot;archivedate &quot; + 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 + &quot;_ArchiveMenu&quot;' 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 == &quot;expanded&quot;'>
    <a class='toggle' href='javascript:void(0)'>
      <span class='zippy toggle-open'>&#9660;&#160;</span>
    </a>
  <b:else/>
    <a class='toggle' href='javascript:void(0)'>
      <span class='zippy'>
        <b:if cond='data:blog.languageDirection == &quot;rtl&quot;'>
          &#9668;&#160;
        <b:else/>
          &#9658;&#160;
        </b:if>
      </span>
    </a>
  </b:if>
 </b:if>
</b:includable>
  </b:widget>

PS:. 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> 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 = "http://lh3.ggpht.com/_UCfxgWHzU98/S57-pjOiY1I/AAAAAAAACSQ/7IQnYLIn2hU/loading.gif"; 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&amp;alt=json-in-script&amp;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♥



Nenhum comentário:

Postar um comentário

Olá! Obrigada pela sua visita e comentário. Só peço que não venha com palavras de baixo calão!

Agradeço, desde já!♥