Pasang Widget JQuery Countdown Timer di Blog
Pasang Widget JQuery Countdown Timer di Blog, Anaktimor17 Blog - Sobat bloggers, kembali saya share tips blogging untuk Anda. Nah pada tips kali ini saya akan membagikan kepada
sobat widget hitungan mundur (Countdown Timer)....hehehe...Nah bagi sobat bloggers yang berminat untuk memasang widget ini, silahkan ikuti langkah-langkahnya di bawah ini:
1. Cari kode </head> , copy script di bawah ini dan taruh tepat di atas kode </head>
2. Berikutnya tambahkan gadget baru, simpan di sidebar blog atau juga bisa di mana saja.
copy script ini:
NB :
Ingat: Jangan lupa untuk menyesuaikan tanggal dan waktu widget counter karena ini akan menjadi hal utama yang akan mengoperasikannya. Dari kode di atas, mencari 2014/11/12 18:01:30 dan menggantinya dengan tanggal dan waktu untuk widget waktu pribadi Anda.
Selamat mencoba :)
sobat widget hitungan mundur (Countdown Timer)....hehehe...Nah bagi sobat bloggers yang berminat untuk memasang widget ini, silahkan ikuti langkah-langkahnya di bawah ini:
1. Cari kode </head> , copy script di bawah ini dan taruh tepat di atas kode </head>
<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/AVvXsEgHMroKgsA4D7q194yrL8JekEzEwdHmfwdWqxBFLptEfVu0lPBPx1yNYKjppAvh2eh5ZVJuBLCXV8nuXiGMF47YtFF0bO-eLbVrzQQ6PPBPb_IRCDqqeHXqMNstBLrWYC2vXjYectSl8DVx/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>
2. Berikutnya tambahkan gadget baru, simpan di sidebar blog atau juga bisa di mana saja.
copy script ini:
<div id='countdown_def' class='timerArea' ></div> <script> $(document).ready(function() { $("#countdown_def").countdown( { dateEnd:'11/12/2014 18:01:30', format:true, callback:function(){alert('Def Ready')} }, { timezone:false, offset:0 } ); }); </script>
NB :
Ingat: Jangan lupa untuk menyesuaikan tanggal dan waktu widget counter karena ini akan menjadi hal utama yang akan mengoperasikannya. Dari kode di atas, mencari 2014/11/12 18:01:30 dan menggantinya dengan tanggal dan waktu untuk widget waktu pribadi Anda.
Selamat mencoba :)
2 comments
- Top comments
- Newest first