Você já pensou em adicionar um widget de timer Milestone Countdown ao seu Blogger Blog? De tempos em tempos trazemos mudanças para nossos blogs ou site, talvez seja o aniversário do seu blog, lançamento de um novo produto ou qualquer outra coisa. Um cronômetro de contagem regressiva sempre pode manter seus leitores atualizados sobre algo que vai acontecer. Isso pode ser muito útil para criar um interesse magnífico entre seus leitores, porque nem todos os dias você lança um novo produto. Bem, neste artigo, mostraremos como adicionar um widget de contagem regressiva em suas postagens, páginas, barra lateral e página inicial do Blogger.
Se você estiver usando o Blogger.com, sabe que não existem esses gadgets de contagem regressiva padrão. Portanto, temos que integrá-lo usando alguns plugins e codificação de terceiros. Por esse motivo, desenvolvemos um plug-in de contagem regressiva simples, mas essencial para o Blogger, que funciona exatamente como outros plug-ins do WordPress disponíveis na web. Este plugin é chamado de temporizador de contagem regressiva MBL.
A primeira coisa que você precisa para fazer login na sua conta do blogger e ir para Template >> Editar HTML. Agora, na codificação do modelo, procure por </head> e, logo acima, cole o seguinte trecho de codificação Javascript e CSS. (Não estamos adicionando o código CSS separadamente porque isso economizará seu tempo e daria resultados bastante produtivos).
<style>#countdown_def {height: 100px;width: 230px;margin: auto;margin-bottom: 30px;}ul.countdown_default {margin: 0px;float: left;padding: 0px;}ul.countdown_default li {display: block;background: #fff url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaff9zUiSZj1r5eloglngmhbumPOpvf7EdQ_mQAwC-f0tmhQkA-pzlv3Qe9pp6NySxVkU8ss04a9SWCTw2Af0KEKvsSZCfSwmVGGhj2Z84OmCQddP5qzasPpM9OQwjbhy_C5Om4a6k3HNi/s1600/js_bac.png') no-repeat left top!important;width: 50px;text-align: center;position: relative;float: left;height: 70px;margin-left: 5px;padding: 0px;}.timeRefDays, .timeRefMinutes, .timeRefHours, .timeRefSeconds {width: 50px;}ul.countdown_default li span {font-size: 22px;font-weight: bold;color: #fff;line-height: 72px;position: relative;}
ul.countdown_default li span::before {content: '';width: 100%;height: 1px;position: absolute;top: 31px}ul.countdown_default li p.timeRefDays,ul.countdown_default li p.timeRefHours,ul.countdown_default li p.timeRefMinutes,ul.countdown_default li p.timeRefSeconds {margin-top: 1em;color: #909091;text-transform: uppercase;font-size: 10px;}</style>
<script type="text/javascript">/*<![CDATA[*//*MBL jQuery Countdown Widget*/(function(b) {function n() {var b = document.createElement("canvas");return !(!b.getContext || !b.getContext("2d"))}b.fn.countdown = function(d, p) {function q() {currentDate = Math.floor(((new Date).getTime() - e.offset) / 1E3);f < currentDate ? (null != a.callback && a.callback.call(this), "undefined" != typeof r && clearInterval(r)) : (seconds = f - currentDate, days = Math.floor(seconds / 86400), seconds -= 86400 * days, hours = Math.floor(seconds / 3600), seconds -= 3600 * hours, minutes = Math.floor(seconds / 60), seconds -= 60 * minutes, "knob" != a.skin ? (0 != a.format && (days = 2 <= String(days).length ? days : "0" + days, hours = 2 <= String(hours).length ? hours : "0" + hours, minutes = 2 <= String(minutes).length ? minutes : "0" + minutes, seconds = 2 <= String(seconds).length ? seconds : "0" + seconds), g.text(days), h.text(hours), k.text(minutes), l.text(seconds), 1 == days ? g.parent().children(".timeRefDays").text("Day") : g.parent().children(".timeRefDays").text("Days"), 1 == hours ? h.parent().children(".timeRefHours").text("Hour") : h.parent().children(".timeRefHours").text("Hours"), 1 == minutes ? k.parent().children(".timeRefMinutes").text("Minute") : k.parent().children(".timeRefMinutes").text("Minutes"), 1 == seconds ? l.parent().children(".timeRefSeconds").text("Second") : l.parent().children(".timeRefSeconds").text("Seconds")) : (g.val(days).trigger("change"), h.val(hours).trigger("change"), k.val(minutes).trigger("change"), l.val(seconds).trigger("change")))}var a = {skin: "countdown_default",fallbackSkin: "countdown_default",option: {day: {max: null,eClass: "days"},hour: {max: 23,eClass: "hours"},minute: {max: 59,eClass: "minutes"},second: {max: 59,eClass: "seconds"}},dateStart: null,dateEnd: null,format: !0,callback: null}, e = {timezone: !1,offset: 0};d && b.extend(!0, a, d);p && b.extend(!0, e, p);var f = (new Date(a.dateEnd)).getTime() / 1E3,m = (new Date(a.dateStart)).getTime() / 1E3,c = (new Date).getTime();if (isNaN(f)) alert("Invalid or null dateEnd mm/dd/yyyy. Example: 12/25/2013 17:30:00"), b(this).append("Invalid or null date mm/dd/yyyy. Example: 12/25/2013 17:30:00");else if ("knob" != a.skin || null != m && !isNaN(m))if (m > c) alert("Starting date is greater than the current date"), b(this).append("Starting date is greater than the current date");else {!0 == e.timezone && (e.offset = 36E5 * parseInt(e.offset) + 6E4 * (new Date).getTimezoneOffset());c = b(this);"undefined" != typeof d.option && "undefined" == typeof d.option.global && (d.option.global = {});a.option.day = b.extend(!0, {}, a.option.global, a.option.day);a.option.hour = b.extend(!0, {}, a.option.global, a.option.hour);a.option.minute = b.extend(!0, {}, a.option.global, a.option.minute);a.option.second = b.extend(!0, {}, a.option.global, a.option.second);"knob" == a.skin.toLowerCase() && n ? (a.skin = a.skin.toLowerCase(), c.append('<input class="' + a.option.day.eClass + '" type="text" value="0" data-readonly="true" /><input class="' + a.option.hour.eClass + '" type="text" value="0" data-readonly="true" /><input class="' + a.option.minute.eClass + '" type="text" value="0" data-readonly="true" /><input class="' + a.option.second.eClass + '" type="text" value="0" data-readonly="true" />'), a.option.day.eClass = "." + a.option.day.eClass.split(" ").join("."), a.option.hour.eClass = "." + a.option.hour.eClass.split(" ").join("."), a.option.minute.eClass = "." + a.option.minute.eClass.split(" ").join("."), a.option.second.eClass = "." + a.option.second.eClass.split(" ").join("."), a.option.day.max = Math.floor((f - m) / 86400), c.find(a.option.day.eClass).knob(a.option.day), c.find(a.option.hour.eClass).knob(a.option.hour), c.find(a.option.minute.eClass).knob(a.option.minute), c.find(a.option.second.eClass).knob(a.option.second)) : ("knob" == a.skin.toLowerCase() || n ? c.append('<ul class="' + a.skin + '" ><li><span class="' + a.option.day.eClass + '">00</span><p class="timeRefDays">Days</p></li><li><span class="' + a.option.hour.eClass + '">00</span><p class="timeRefHours">Hours</p></li><li><span class="' + a.option.minute.eClass + '">00</span><p class="timeRefMinutes">Minutes</p></li><li><span class="' + a.option.second.eClass + '">00</span><p class="timeRefSeconds">Seconds</p></li></ul>') : (a.skin = a.fallbackSkin, c.html('<ul class="' + a.skin + '"><li><span class="' + a.option.day.eClass + '">00</span><p class="timeRefDays">Days</p></li><li><span class="' + a.option.hour.eClass + '">00</span><p class="timeRefHours">Hours</p></li><li><span class="' + a.option.minute.eClass + '">00</span><p class="timeRefMinutes">Minutes</p></li><li><span class="' + a.option.second.eClass + '">00</span><p class="timeRefSeconds">Seconds</p></li></ul>')), a.option.day.eClass = "." + a.option.day.eClass.split(" ").join("."), a.option.hour.eClass = "." + a.option.hour.eClass.split(" ").join("."), a.option.minute.eClass = "." + a.option.minute.eClass.split(" ").join("."), a.option.second.eClass = "." + a.option.second.eClass.split(" ").join("."));var g = c.find(a.option.day.eClass),h = c.find(a.option.hour.eClass),k = c.find(a.option.minute.eClass),l = c.find(a.option.second.eClass);q();if (f > (new Date).getTime() / 1E3) var r = setInterval(function() {q()}, 1E3)} else alert("Invalid or null dateStart mm/dd/yyyy. Example: 12/25/2013 17:30:00"), b(this).append("Invalid or null dateStart mm/dd/yyyy. Example: 12/25/2013 17:30:00")}})(jQuery);/*]]>*/</script>
Depois de instalar o JavaScript e CSS Cole este código em qualquer lugar que você gostaria de exibir o widget de contagem regressiva. Por exemplo, se você quiser exibi-lo em algum lugar na barra lateral, vá para Blogger >> Layout >> Add a Gadget > Add HTML/JavaScript >> E cole o seguinte código na área de texto. O mesmo acontece com Posts e páginas.
<div id='countdown_def' class='timerArea' ></div>
<script>$(document).ready(function() {$("#countdown_def").countdown( {dateEnd:' 12/11/2014 18:01:30 ',format:true,callback:function(){alert('Def Ready')}},{timezone:false,offset:0});});</script>
Lembre-se: Não se esqueça de personalizar a data e hora do seu widget de contador, pois esta seria a principal coisa que o operaria. A partir do código acima, procure por 11/12/2014 18:01:30 e substitua-o por sua data e hora personalizadas para o widget de timer.
Parabéns: Você aprendeu com sucesso como adicionar um widget de contagem regressiva no blogger. Agora vá e confira seu site para ver se ele funciona de acordo com o plano ou não.
AVISO: Este widget exigia 1.7+ arquivo jQuery.js. Caso você esteja usando um arquivo jQuery antigo, certifique-se de atualizá-lo para 1.7 ou mais. Por exemplo:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js' type='text/javascript'></script>
Esperamos que este tutorial ajude você a aprender como adicionar um widget de contagem regressiva na barra lateral, postagens, páginas e página inicial do blogger. Deixe-nos saber quais são seus pensamentos e opiniões sobre este plugin exclusivo que apresentamos hoje.
Tags:
INTERNET
