Arquivo do blog estilo calendário | Quero Dicas | Tutoriais para seu blogs


Arquivo do blog estilo calendário


Arquivo do blog estilo calendário
Já ensinei muitas formas de personalizar seu blog (veja os posts) e existe outras milhares que ainda não publiquei.

Por isso, dando continuidade a esta tag, hoje acabei tendo a ideia de personalizar o arquivo do blog no estilo calendário, afinal, o modo padrão do blogger é muito sem graça. (risos)







Veja o modelo na imagem baixo
Arquivo do blog estilo calendário

Claro, você poderá mudar as cores no CSS, deixando-o com a cara do seu blog. Vamos lá? =D
Como sempre recomendo, faça um backup do seu template, ao instalar qualquer tipo de implementação de códigos dentro do HTML do seu blog e claro, dê preferências ao blog de teste! Caso não saiba fazer Backup? Não tem problema, clique em: Como fazer um Backup ou restauração do seu blog.

  PASSO 1

1 - Acesse o painel do seu blog e vá em "Layout" e "Adicionar um Gadget"

2 - Selecione o gadget de "Arquivo do blog"

3 - Configure-o da seguinte maneira: 

• Estilo → Lista simples
• Freqüência de arquivamento → Mensal
• Formato da data – Mês → Janeiro (Nome inteiro do mês)
Configure dessa maneira

3.1 - Clique em "Salvar"

  PASSO 2

1 - Agora vá em "Modelo" e "Editar HTML"

2 - Tecle Ctrl + F e na caixa de busca procure por:

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


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

Caso tenha alguma dificuldade na hora da busca, selecione no código acima somente "BlogArchive1". 
 procure por: "BlogArchive1"

3 - Selecione todo o código encontrado e substitua por este código:


4 - Agora procure a tag </head> e acima dela cole o código javascript abaixo:


5 - Salve o seu template.
No código javascript, há um trecho em vermelho "Veja Todos os Posts do Mês". Você poderá mudar essa frase pela sua preferência. Por exemplo: "Todos os Posts do Mês" ou ""Todas as postagens do Mês". Altere da forma que desejar.

  PASSO 3 

1 - Ainda dentro do HTML do seu blog, procure por: ]]></b:skin>


 ]]></b:skin>  


Acima dele cole o código CSS abaixo:


 

/*---Archive Calendar - www.querodicasde.com.br---*/
#calendarDisplay { display: none }
/* div that holds calendar */
#blogger_calendar {
    margin: 1px 0 0 0;
    width: 100%;
}
/* Table Caption - Holds the Archive Select Menu */
#bcaption {
    border: 1px solid #F2BBD6;
    padding: 2px;
    margin: 10px 0 0;
    background: #FFF;
    /*font: normal normal 14px Calibri*/;
    font-family: 'Century Gothic', Arial, Georgia;
    font-size: 14px;
    font-weight: normal;
}
/* The Archive Select Menu */
#bcaption select {
    background: #FFF;
    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: #FFF;  
}
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: #DB428C;
    border: 1px solid #FFF;
}
/* Table Footer Navigation */
table#bcNavigation {
    width: 100%;
    background: #eaeaea;
    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 }


2 - Configure as cores que desejar. Salve e pronto!

Deixe seu comentário, caso tenha gostado. Lembre-se: você é a fonte da minha inspiração =D Beijinhos

Abaixo alguns modelos, caso queira.

Estilo 1
calendário estilo 1

 
/*---Archive Calendar - www.querodicasde.com.br---*/
#calendarDisplay { display: none }
/* div that holds calendar */
#blogger_calendar {
    margin: 1px 0 0 0;
    width: 100%;
}
/* Table Caption - Holds the Archive Select Menu */
#bcaption {
    border: 1px solid #F2BBD6;
    padding: 2px;
    margin: 10px 0 0;
    background: #FFF;
    /*font: normal normal 14px Calibri*/;
    font-family: 'Century Gothic', Arial, Georgia;
    font-size: 14px;
    font-weight: normal;
}
/* The Archive Select Menu */
#bcaption select {
    background: #FFF;
    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: #FFF;  
}
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: #DB428C;
    border: 1px solid #FFF;
}
/* Table Footer Navigation */
table#bcNavigation {
    width: 100%;
    background: #eaeaea;
    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 }
  

_________________________________________________________
Estilo 2
calendário estilo 2

 

/*---Archive Calendar - www.querodicasde.com.br---*/
#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 } 

_________________________________________________________
Estilo 3
calendário estilo 3

 

/*---Archive Calendar - www.querodicasde.com.br---*/
#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 } 

_________________________________________________________
Estilo 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 }  



Não funcionou?
Verifique se o seu blog está público e com o feed ativo em "completa"
Para a alteração vá em  CONFIGURAÇÕES.


Me Contrate!

2 comentários

Clique e deixe seu comentários
sexta-feira, 15 abril, 2016 ×

voce erroou mais uma vez colocou o mesmo codigos

Resposta
avatar
admin


Que bom você reservou um tempinho para vir comentar. Você me deixa super feliz e desde já agradeço por sua colaboração.

Comente. Mais peço que leia antes:

1 - Devido a falta de tempo, não prometo responder a todos os comentários. Mais farei o possível.

2 - Educação sempre! Comentários com xingamentos entre outros, não serão publicados ou respondidos.

3 - Comentários não relacionados ao titulo, não serão publicados.

4 - Comentários somente URLs de terceiros, não serão publicados.

♥ - Caso queira divulgar seu blog gratuitamente, Acesse, Galeria de Blogs
♥ - Eu terei o maior prazer em colocar o link ou seu banner nesta galeria.

Muito obrigada por seu comentário e por sua vista.
Beijinhos ♥
Abrir Conversa em CódigoFechar Conversa em Código Abrir EmoticonFechar Emoticon

Obrigada por seu comentário! Ele é muito importante para mim.