Calendario en Archivos Blogger
¡Que tal mundo!!Este tutorial será super corto y facilísimo. Como pueden Notar yo lo tengo instalado en mi plantilla Blogger y me encanta. Esta seria una manera de cambiar o Personalizar la forma determinada en la que Blogger nos da para colocar el widget de archivos. El contenido lo vi en el blog de TecnoBlog y me siento encantada con el resultado y quiero compartirlo con ustedes.
1.Selecciona la entrada Diseño del panel principal de Blogger.
2.Pulsa sobre el link Añadir un gadget y se abrirá una ventana con diferentes alternativas
3.Desplazamos el scroll de la nueva ventana hacia abajo hasta llegar a la opción:
HTML/Javascript
Añade una característica de un tercero u otro código a tu blog.
4. Introduce el Título del widgets (por ejemplo Calendario)
5. En la caja Contenido pega el siguiente código:
<div id='calendar'><strong>Loading...</strong></div>
<script>
var conf = {
bgcolor: '#5692ce',
newtab: 1, // 0:abre link en la misma ventana | 1:abre link en ventana nueva
start: 1, // 0:Domingo | 1:Lunes
days: "Lunes|Martes|Miercoles|Jueves|Viernes|Sabado|Domingo",
months: "Enero|Febrero|Marzo|Abril|Mayo|Junio|Julio|Agosto|Septiembre|Octubre|Noviembre|Diciembre",
date: "Ir al mes actual"
}
</script>
<script src='https://cdn.jsdelivr.net/gh/jmacuna/calendar-widget@master/create-calendar.js' type='text/javascript'></script>
<script src='https://URL de tu blog/feeds/posts/summary?max-results=1000&alt=json-in-script&orderby=published&callback=createCalendar' type='text/javascript'></script>6. Por último hacemos click sobre el botón GuardarPD: Tenemos que escribir la url de nuestro blog en el último script, dónde aparece resaltado en verde.Puedes ver el ejemplo funcionando a continuación.
Pero si lo que quieres es el diseño que yo utilizo en mi blog, te dejo el codigo abajo. Usa el mismo pasos que te indico arriba:
<div id='calendar'><strong>Loading...</strong></div>
<script>
var conf = {
bgcolor: '#5692ce',
newtab: 0, // 0:abre link en la misma ventana | 1:abre link en ventana nueva
tooltip: false, // false:title por defecto | true:tooltip con css3
start: 1, // 0:Domingo | 1:Lunes
days: "Lunes|Martes|Miercoles|Jueves|Viernes|Sabado|Domingo",
months: "Enero|Febrero|Marzo|Abril|Mayo|Junio|Julio|Agosto|Septiembre|Octubre|Noviembre|Diciembre",
date: "Ir al mes actual"
}
</script>
<script src='https://cdn.jsdelivr.net/gh/jmacuna/calendar-widget@master/create-calendar.js' type='text/javascript'></script>
<script src='https://URLdetublog/feeds/posts/summary?max-results=1000&alt=json-in-script&orderby=published&callback=createCalendar' type='text/javascript'></script>
<style type="text/css">
@font-face {
font-family: 'Catamaran';
src: local('Catamaran Regular'), local('Catamaran-Regular'), url(https://fonts.gstatic.com/s/catamaran/v4/o-0IIpQoyXQa2RxT7-5r5TRA.woff2) format('woff2');
}
#contentDate *{font-family:'Catamaran'!important}
#spanLeft, #spanRight, #spanMonth, #spanYear{border:0;cursor:pointer;line-height:20px!important;background-color:#5692ce;padding:0!important}
#spanMonth,#spanYear{background-color:#fff!important;font-size:16px!important;color:#000!important;border:0!important;cursor:text!important;pointer-events:none}
#spanLeft:before{content:'<';font-size:15px;color:#fff;display:inline-block;padding:0 10px!important}
#spanRight:after{content:'>';font-size:15px;color:#fff;display:inline-block;padding:0 10px!important}
#spanLeft:hover, #spanRight:hover{background-color:#515151!important}
#spanLeft img, #spanRight img, #spanMonth img, #spanYear img{display:none}
#contentDate table{margin-bottom:0!important}
#contentDate table tr td{padding:0}
#contentDate table tr td a{width: 28px;display:inline-block}
#contentDate table tr td a[style='text-decoration:none;color:#000;cursor:default;border-radius:100%;border:2px solid #5692ce;cursor:pointer;'], #contentDate table tr td a[style='text-decoration:none;color:#000;cursor:default;border-radius:100%;border:2px solid #5692ce;cursor:pointer;border-radius:100%;border:2px solid #5692ce;cursor:pointer;'] {border:0!important;border-radius:0!important;background-color:#4080cc;color:#fff!important}
#contentDate table tr td a[style='text-decoration:none;color:#000;cursor:default;border-radius:100%;border:2px solid #5692ce;cursor:pointer;'] span {color:#fff!important}
#contentDate table tr td a[style='text-decoration:none;color:#000;cursor:default;border-radius:100%;border:2px solid #5692ce;cursor:pointer;']:hover {background:#515151}
#contentDate table{box-shadow:none!important;font-size:13px!important;width:100%!important}
#contentDate table tr{background:#fff!important}
#contentDate table tr td{text-align:center!important}
#contentDate{width:240px!important; display:inline-block}
#lblToday{background:#fff}
#lblToday a{color:#bd3434!important; font-size:medium; width:auto!important}
</style>Lo que me gusta de este calendario es que: No tengo que estar modificando cada vez que subo una entrada pues he visto otros calendarios que hay que estar haciendo cambios constantemente. y esto con el tiempo se vuelve una molestia pues si tienes mucho contenido, estoy segura que no tendrás tiempo para estar modificando siempre pero si esto no te importa. Estaré subiendo un segundo calendario.
Puzzle Bobble
Karate Blazers
Puzzle De Bloques
Magical Cat Adventure