ghaabycaptor-Telemanagement

Sunday, September 15, 2013

Tutorial: El Calendario

Adoro este calendario!!

Hola mis loqueros!!

Hoy hablaremos sobre

como colocar un calendario

no es un simple calendario! sino que te marca los días y los meses que has publicado

para mi es uno de los mejores calendarios muy útil y fácil de editar, se los recomiendo!

★ VIDEO TUTORIAL ★

En el tutorial les enseño como colocar el siguiente calendario

Es el mas simple!

pero quien dijo que el blanco y negro han pasado de moda?¿!

así que empecemos con este tutorial... para verlo clic en el botón

►Primero debes tener instalado el Gadget del Archivo y debe estar configurado de la siguiente forma:

Ahora nos dirijamos a:

Plantilla►Edición de HTML►Ctrl F (para buscar)

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

►Si no lo encuentras búscalo como BlogArchive1

►Una vez encontrado lo reemplazas por el siguiente código:

HTML
 

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

►Descarga el script Clic Aquí

►El código descargado lo copias arriba de </head>

Para terminar buscas ]]></b:skin> y encima pegas este otro código:

CSS
 

#calendarDisplay {
    display: none;
}
#blogger_calendar {
    margin: 0 auto 0 0;
    width: 100%;
}
#bcaption {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #C7C7C7;
    font: bold 100% Tahoma,Arial,Sans-serif;
    margin: 10px 0 0;
    padding: 2px;
}
#bcaption select {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 0 solid #C7C7C7;
    color: #000000;
    font-weight: bold;
    text-align: center;
}
table#bcalendar thead {
}
table#bcalendar thead tr th {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #C7C7C7;
    color: #000000;
    font: bold 100% Tahoma,Arial,Sans-serif;
    padding: 3px;
    text-align: center;
    width: 20px;
}
table#bcalendar {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background: none repeat scroll 0 0 #FFFFFF;
    border-color:  #C7C7C7;
    border-image: none;
    border-right: 1px solid #C7C7C7;
    border-style: none solid solid;
    border-width: 0 1px 1px;
    margin: 0;
    width: 100%;
}
table#bcalendar tbody tr td {
    border: 1px solid #C7C7C7;
    border-radius: 4px 4px 4px 4px;
    color: #666666;
    cursor: pointer;
    font: bold 100% Tahoma,Arial,Sans-serif;
    padding: 3px;
    text-align: center;
}
table#bcalendar tbody tr td a:link, table#bcalendar tbody tr td a:visited, table#bcalendar tbody tr td a:active {
    color: #FFFFFF;
    font-weight: bold;
    text-decoration: none;
}
table#bcalendar tbody tr td a:hover {
    color: #FFFFFF;
    text-decoration: none;
}
td.firstCell {
    visibility: visible;
}
td.filledCell {
    background: none repeat scroll 0 0 #FFFFFF;
}
td.filledCell:hover {
    background: none repeat scroll 0 0 #DDDDDD;
}
td.emptyCell {
    visibility: hidden;
}
td.highlightCell {
    background: none repeat scroll 0 0 #000000;
    border: 1px solid #C7C7C7;
}
td.highlightCell:hover {
    background: none repeat scroll 0 0 #72B9FF;
    border: 1px solid #C7C7C7;
}
table#bcNavigation {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background: none repeat scroll 0 0 #FFFFFF;
    border-color: #C7C7C7;
    border-image: none;
    border-right: 1px solid #C7C7C7;
    border-style: none solid solid;
    border-width: 0 1px 1px;
    color: #000000;
    font: bold 100% Tahoma,Arial,Sans-serif;
    width: 100%;
}
table#bcNavigation a:link {
    color: #000000;
    text-decoration: none;
}
table#bcNavigation a:hover {
    text-decoration: underline;
}
td#bcFootPrev {
    width: 10px;
}
td#bcFootAll {
    text-align: center;
    color: #000;
}
td#bcFootNext {
    width: 10px;
}
ul#calendarUl {
    margin: 5px auto 0 !important;
}
ul#calendarUl li a:link {
}

Aquí les dejo 3 diseños de calendarios hechos por mi si te gusta alguno lo puedes usar! pero debes darme CRÉDITO . . Solo reemplazas el CSS que muestra el calendario que te gusta

Calendario colorido

CSS
 

#calendarDisplay {
display: none;}

#blogger_calendar {
margin: 0 auto 0 0;
width: 100%;}

#bcaption {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ43Rt7dvHEVXvEUOEFoWZv0cBrX0Lg6vw6AbPqJm0gPQAwU_pHINsN3wXlTwsH2fqKMWNkuNI3yW7_K990sLP8eyXZ0_swv7r9M9tprRa5PViH8lCwaERzbt7l0ddpFiWP5_4hvHhsUs/s1600/umXmURM.gif") repeat scroll 0 0 #FFFFFF;
border: 1px solid #EEEEEE;
font: bold 100% Tahoma,Arial,Sans-serif;
margin: 10px 0 0;
padding: 2px;}

#bcaption select {
border: 0 solid #C7C7C7;
color: #0080FF;
font-weight: bold;
text-align: center;}

table#bcalendar thead {
}

table#bcalendar thead tr th {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ43Rt7dvHEVXvEUOEFoWZv0cBrX0Lg6vw6AbPqJm0gPQAwU_pHINsN3wXlTwsH2fqKMWNkuNI3yW7_K990sLP8eyXZ0_swv7r9M9tprRa5PViH8lCwaERzbt7l0ddpFiWP5_4hvHhsUs/s1600/umXmURM.gif") repeat scroll 0 0 #FFFFFF;
border: 1px solid #C7C7C7;
color: #7401DF;
font: bold 100% Tahoma,Arial,Sans-serif;
padding: 3px;
text-align: center;
width: 20px;
}

table#bcalendar {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgweWa16prEXoOEGAK3GpuStsFd0l5JiezWr8Wo_V53Dht2NnCYAhhhpZ7zQhNUhw40e_7qFEBx8LgKLmKS77APrD6zTVu_Z8M8fDA59aY9fl79MdSKIm-zy-M_MHjIovGHMij4tYEThqY/s1600/40EdC.png") repeat scroll 0 0 transparent;
border-color:#EEEEEE;
border-image: none;
border-style: none solid solid;
border-width: 0 1px 1px;
margin: 0;
width: 100%;
}

table#bcalendar tbody tr td {
border: 1px solid #F5A9BC;
border-radius: 4px 4px 4px 4px;
color: #777777;
cursor: pointer;
font: bold 100% Tahoma,Arial,Sans-serif;
padding: 3px;
text-align: center;
}

table#bcalendar tbody tr td a:link, table#bcalendar tbody tr td a:visited, table#bcalendar tbody tr td a:active {
color: #FFFFFF;
font-weight: bold;
text-decoration: none;
}

table#bcalendar tbody tr td a:hover {
color: #FFFFFF;
text-decoration: none;
}

td.firstCell {
visibility: visible;
}

td.filledCell {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV2XtnRSAjbxF6SwS2Nes9qLVtLqUldMjnnR5qMCcmb1zcaDcZFIZaLyjhYxi8vIcTdDmknTNnWjCMV52WxvTdtjk6fUAJMzkHz4v9vMixpuUlKov2nW_TxeC3poHQoB1Tob94tTmsoT4/s320/9uBtmBd.png") repeat scroll 0 0 transparent;
}

td.filledCell:hover {
background: none repeat scroll 0 0 #F6CEEC;
color: #FFFFFF;
}

td.emptyCell {
visibility: hidden;
}

td.highlightCell {
background: none repeat scroll 0 0 #BE81F7;
border: 1px solid #9A2EFE;
}

td.highlightCell:hover {
background: none repeat scroll 0 0 #D0A9F5;
border: 1px solid #9A2EFE;
}

table#bcNavigation {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ43Rt7dvHEVXvEUOEFoWZv0cBrX0Lg6vw6AbPqJm0gPQAwU_pHINsN3wXlTwsH2fqKMWNkuNI3yW7_K990sLP8eyXZ0_swv7r9M9tprRa5PViH8lCwaERzbt7l0ddpFiWP5_4hvHhsUs/s1600/umXmURM.gif") repeat scroll 0 0 #FFFFFF;
border-color:  #EEEEEE;
border-image: none;
border-style: none solid solid;
border-width: 0 1px 1px;
color: #7401DF;
font: bold 100% Tahoma,Arial,Sans-serif;
width: 100%;
}

table#bcNavigation a:link {
color: #0080FF;
text-decoration: none;
}

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 {
}

Calendario Dark

CSS
 

#calendarDisplay {
    display: none;
}
#blogger_calendar {
    margin: 0 auto 0 0;
    width: 100%;
}
#bcaption {
    background: none repeat scroll 0 0 #424242;
    border: 1px solid #000000;
    font: bold 100% Tahoma,Arial,Sans-serif;
    margin: 10px 0 0;
    padding: 2px;
}
#bcaption select {
    background: none repeat scroll 0 0 #EEEEEE;
    border: 0 solid #C7C7C7;
    color: #000000;
    font-weight: bold;
    text-align: center;
}
table#bcalendar thead {
}
table#bcalendar thead tr th {
    background: none repeat scroll 0 0 #CEECF5;
    border: 1px solid #00CCFF;
    color: #013ADF;
    font: bold 100% Tahoma,Arial,Sans-serif;
    padding: 3px;
    text-align: center;
    width: 20px;
}
table#bcalendar {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background: none repeat scroll 0 0 #212121;
    border-color: -moz-use-text-color #000000 #000000;
    border-image: none;
    border-style: none solid solid;
    border-width: 0 1px 1px;
    margin: 0;
    width: 100%;
}
table#bcalendar tbody tr td {
    border: 1px solid #000000;
    border-radius: 4px 4px 4px 4px;
    color: #00CCFF;
    cursor: pointer;
    font: bold 100% Tahoma,Arial,Sans-serif;
    padding: 3px;
    text-align: center;
}
table#bcalendar tbody tr td a:link, table#bcalendar tbody tr td a:visited, table#bcalendar tbody tr td a:active {
    color: #000000;
    font-weight: bold;
    text-decoration: none;
}
table#bcalendar tbody tr td a:hover {
    color: #FFFFFF;
    text-decoration: none;
}
td.firstCell {
    visibility: visible;
}
td.filledCell {
    background: none repeat scroll 0 0 #000000;
}
td.filledCell:hover {
    background: #2E2E2E;
    color: #FFFFFF;
}
td.emptyCell {
    visibility: hidden;
}
td.highlightCell {
    background: none repeat scroll 0 0 #00CCFF;
    border: 1px solid #9A2EFE;
    color: #000000;
}
td.highlightCell:hover {
    background: none repeat scroll 0 0 #000000;
    border: 1px solid #9A2EFE;
    color: #FFFFFF;
}
table#bcNavigation {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background: none repeat scroll 0 0 #424242;
    border-color: -moz-use-text-color #000000 #000000;
    border-image: none;
    border-style: none solid solid;
    border-width: 0 1px 1px;
    color: #7401DF;
    font: bold 100% Tahoma,Arial,Sans-serif;
    width: 100%;
}
table#bcNavigation a:link {
    color: #FFFFFF;
    text-decoration: none;
}
table#bcNavigation a:hover {
    color: #FFFFFF;
    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 {
}

Calendario Galaxy

CSS
 

#calendarDisplay {
    display: none;
}
#blogger_calendar {
    margin: 0 auto 0 0;
    width: 100%;
}
#bcaption {
    background: none repeat scroll 0 0 #501A53;
    border: 1px solid #000000;
    font: bold 100% Tahoma,Arial,Sans-serif;
    margin: 10px 0 0;
    padding: 2px;
}
#bcaption select {
    background: none repeat scroll 0 0 #501A53;
    border: 0 solid #C7C7C7;
    color: #FFFFFF;
    font-weight: bold;
    text-align: center;
}
table#bcalendar thead {
}
table#bcalendar thead tr th {
    background: none repeat scroll 0 0 #5D0B5D;
    border: 1px solid #7A1A7A;
    color: #E666FF;
    font: bold 100% Tahoma,Arial,Sans-serif;
    padding: 3px;
    text-align: center;
    width: 20px;
}
table#bcalendar {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6S9mb1HIsrq3eLsrtZe4YIbLqzdYKbFJEjjV-7RBwW-waQvEUU5cM-6YG6DadugynFCSOnYttcCFUtMBgk3lswWEXBouP1xqv7t3cqvOcRtmWj3NGx6yrDOvc5Y2v7Fb00gz_u893GPE/s320/normal_galaxy-art-wallpaper-img105.jpg") repeat scroll 0 0 transparent;
    border-color: #000000;
    border-image: none;
    border-style: none solid solid;
    border-width: 0 1px 1px;
    margin: 0;
    width: 100%;
}
table#bcalendar tbody tr td {
    border-radius: 4px 4px 4px 4px;
    color: #FFFFFF;
    cursor: pointer;
    font: bold 100% Tahoma,Arial,Sans-serif;
    padding: 3px;
    text-align: center;
    text-shadow: 0 1px 0 #000000;
}
table#bcalendar tbody tr td a:link, table#bcalendar tbody tr td a:visited, table#bcalendar tbody tr td a:active {
    color: #F7CDFF;
    font-weight: bold;
    text-decoration: none;
}
table#bcalendar tbody tr td a:hover {
    color: #FFFFFF;
    text-decoration: none;
}
td.firstCell {
    visibility: visible;
}
td.filledCell {
}
td.filledCell:hover {
    color: #000000;
}
td.emptyCell {
    visibility: hidden;
}
td.highlightCell {
    background: none repeat scroll 0 0 #520361;
    border: 1px dashed #9A2EFE;
    color: #FFFFFF;
}
td.highlightCell:hover {
    background: none repeat scroll 0 0 #000000;
    color: #FFFFFF;
}
table#bcNavigation {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background: none repeat scroll 0 0 #501A53;
    border-color: #000000;
    border-image: none;
    border-style: none solid solid;
    border-width: 0 1px 1px;
    color: #7401DF;
    font: bold 100% Tahoma,Arial,Sans-serif;
    width: 100%;
}
table#bcNavigation a:link {
    color: #FFFFFF;
    text-decoration: none;
}
table#bcNavigation a:hover {
    color: #FFFFFF;
    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 {
}

Y listo esto es todo! GUARDAS y ya puedes ver los resultados =)

Gracias por tu visita!