Bonjour Victorius!
Tudo bem com Vocês?
Há alguns dias, o Túlio me pediu um tutorial (obrigada!!) De como colocar o Arquivo do Blog no formato de calendário,esse tutorial eu aprendi no Blog Elaine gaspareto, então todas as imagens são dela e creditos totais a ela.
Preview:
Há alguns dias, o Túlio me pediu um tutorial (obrigada!!) De como colocar o Arquivo do Blog no formato de calendário,esse tutorial eu aprendi no Blog Elaine gaspareto, então todas as imagens são dela e creditos totais a ela.
Preview:
Agora vá em Modelo>> Editar HTML >> Crtl+F
e Pesquise por:
E acima dele cole isto:]]></b:skin>
/*---Arquivo em formato calendário---*/
#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 #f8f8f8;/*--cor da borda--*/
padding: 2px;
margin: 10px 0 0;
background: #f8f8f8;
font: normal normal 13px Cambria font-weight: normal;
}
/* The Archive Select Menu */
#bcaption select {
background: #f8f8f8;
border: 0 solid #f8f8f8;
color: #000000;
font-family: 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; /*#f8f8f8; _NO__DOTCOMMA__AFTER___NO__DOTCOMMA__AFTER__*/
font: normal normal 13px Arial;
font-weight: normal;
background: #ff458b;
color: #ffffff;
}
/* The calendar Table */
table#bcalendar {
border: 1px solid #f8f8f8;
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 #f8f8f8;
color: #7f7f7f;
font: normal normal 13px Arial;
font-weight: normal;
/*font: normal normal 13px Arial;*/;;
}
/* 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 }
Agora, clique em: ''Ir para um widget'' e clique em ''BlogArchive1''
Esse código é assim:
<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:include cond='data:style == "HIERARCHY"' data='data' name='interval'/>
<b:include cond='data:style == "FLAT"' data='data' name='flat'/>
<b:include cond='data:style == "MENU"' data='data' name='menu'/>
</div>
</div>
<b:include name='quickedit'/>
</div>
</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='interval'>
<ul class='hierarchy'>
<li expr:class='"archivedate " + data:interval.expclass'>
<b:include cond='data:interval.toggleId' data='interval' name='toggle'/>
<a class='post-count-link' expr:href='data:interval.url'>
<data:interval.name/>
</a>
<span class='post-count' dir='ltr'>(<data:interval.post-count/>)</span>
<b:include cond='data:interval.data' data='interval.data' name='interval'/>
<b:include cond='data:interval.posts' data='interval.posts' name='posts'/>
</li>
</ul>
</b:loop>
</b:includable>
<b:includable id='menu' var='data'>
<select expr:id='data:widget.instanceId + "_ArchiveMenu"'>
<option value=''><data:title/></option>
<b:loop values='data:data' var='i'>
<option expr:value='data:i.url'><data:i.name/> (<data:i.post-count/>)</option>
</b:loop>
</select>
</b:includable>
<b:includable id='posts' var='posts'>
<ul class='posts'>
<b:loop values='data:posts' var='post'>
<li><a expr:href='data:post.url'><data:post.title/></a></li>
</b:loop>
</ul>
</b:includable>
<b:includable id='toggle' var='interval'>
<a class='toggle' href='javascript:void(0)'>
<span expr:class='"zippy" + (data:interval.expclass == "expanded" ? " toggle-open" : "")'>
<b:if cond='data:interval.expclass == "expanded"'>
▼ 
<b:elseif cond='data:blog.languageDirection == "rtl"'/>
◄ 
<b:else/>
► 
</b:if>
</span>
</a>
</b:includable>
</b:widget>
Começa com <b:widget id='BlogArchive1' temina com </b:widget>
Apague isso e coloque:
<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 procure por:
</ head>
e cole acima:
<!--Script Archive Calendar-->
<script type='text/javascript'>
//<![CDATA[
// <!--- Blogger Archive Widget --->
var bcLoadingImage = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBsPt9grTW8HNb0BxoZRuYsi6Ci2nTiidPYunad_Ino-c3GxjH-AwdARafrn1LEQNRIK_Zg4iiCOuQ7G-7A3Rj_-6KavjQCkTQpRLS8_pcew0UJueOIyyZmKbXspo3Sd3HFlzGKxokXww/";
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-->
Fácil,não?
E altere cor,fonte e tamanho no 1ºcódigo.
E Vocês? Gostaram?
Beijos Vii
Nossa, quanto códigos O.o! Mesmo assim, parece fácil! Em meu próximo layout eu tentarei por ele ♥. Ei Vii, te enchendo o saco (mais uma vez), poderia trazer um tutorial de como colocar esse modelo de rodapé, com imagens e tudo mais?
ResponderExcluirAh, e mais uma perguntinha, o seu primeiro nome (que é com A) é Andressa, certo? Porque eu vi em algum lugar com o seu nome Andressa junto...
Beijos!
São bastante códigos mesmo! É fácil!
ExcluirEncher o saco?Que nada! Adoro quando me pesem tutos! Claro, quarta-feira saí o tutorial!
Sim!
Beijos
AHHHHHHHHH! Obrigada por trazer este tuto e explicar bem certinho eu acho este modelo de arquivo super lindo e procurei bastante e finalmente funcionou, obrigado as duas Elaine e Vii.
ResponderExcluirDe nada flor^^
ExcluirEu também adoro este modelo!
Beijos❤
Bah prima Vii, acho que vou usar! Obrigada!
ResponderExcluirKisses ><
Oii prima Yuni!
ExcluirDe nada^^
Beijos❤
Que massaa, eu tava mesmo querendo fazer isso no meu, nunca sei mexer direito nesses HTML, e uma luta pra eu mexer neles fazendo algo que preste kkkk!
ResponderExcluirBeijos
http://onlypoison1.blogspot.com.br/
Obrigada! Fico feliz que gostou!
ExcluirProcure um vídeo tutorial para ver se consegue mexer no HTML!
Beijos
Oe :3
ResponderExcluirTudo bem ? ^-^
Nossa eu estava mesmo precisando de um tutorial como esse, acho esse calendário mega fofinho, o único problema é que parece tão complicado, os códigos são enormes Ò.Ò
Vou testar e ver se funciona xD
Beijos!
Com carinho Breh do blog Crazy Cake
Oie Breh! Tudo e você?
ExcluirQue bom! Não é tão complicado, os códigos são grandes masa não difíceis!
Beijos❤
Nossa, primeira vez que vejo esse tutorial, eu sempre estou me livrando daquela praga de gadget de arquivos, ai esse tuto vai deixar ele fofinho.
ResponderExcluirHihihi to tão feliz que finalmente encontrei uma blogueira da minha idade, 13 anos >.<
Bjinhos
www.blognekokawaii.blogspot.com
O gadget de arquivo é mesmo feio! Vai mesmo!
ExcluirEbaa! 1.3
Beijos❤
Oii Vi!! Ameii o post e o blog! Fiz questão de seguir!!
ResponderExcluirBeijos!
Se puder visita e segueo meu blog?? Comecei á pouco tempo :/
http://jusantanablog.blogspot.com.br
Oii Ou! Obrigada flor! Obaa!
ExcluirClaro!
Beijos❤
Oi Vii muito fofo o tuto!
ResponderExcluirEu tive uma ideia bem legal,não sei se você irá gostar,poderia entrar em contato comigo brevemente ´para eu te contar?
E-Mail: isynhaasweet@gmail.com
Beijos <3
Oi Isy! Obrigada!
ExcluirHuu, me manda uma mensagem no Hangouts!
Beijos❤
Oi tudo bem?
ResponderExcluirAdorei o tutorial, esses arquivos em forma de calendario são fofinhos.
xoxo
Candy Bomb
Oi S.! Tudo e você?
ExcluirObrigada! Fico feliz que gostou!
Beijos
Oiii
ResponderExcluirAmei o layout,tá super,mega,de outro mundo..... divo rsrsrs
Muito meigo esse tutorial❤ eu adorei e acho que vou usa-lo ^^
Beijos。◕‿◕。
Oiii S.! Quanto tempo minina!
ExcluirObrigada mig's <3
Eba! Fico feliz que gostou
Beijos
Olá, queria agradecer por comentar novamente no meu blog, e pode trocar a foto sim, sem problemas ;)
ResponderExcluirBjinhos
www.blognekokawaii.blogspot.com
De nada flor^^Você comentou aqui e eu comento lá
ExcluirObrigada!
Beijos
Olá <3 Como vai?
ResponderExcluirEu ao esse tutorial, acho que fica tão bonito no layout *UU* Pena que não meu acaba ocupando um pouco de espaço, então passei a usar o em modelo suspenso mesmo. Mas mesmo pretendo usa-lo nem que seja em um layout free haha <3
Um beijos flor ♥
www.algunsr4biscos.blogspot.com
Oii! E vou bem e você?
ExcluirFica mesmo! É ocupa bastante, obrigada <3
Beijos❤