Cara Membuat Countdown Timer Tahun Baru 2015 Keren Di Blog
Countdown Timer 2015
Selamat datang agan atau aganwati kali ini Saya akan berbagi cara membuat countdown timer tahun baru 2015 keren di blog, untuk membuatnya silakan ikuti beberapa langkah berikut;
Langkah
1. Login pada blog Anda masing-masing,
2. Pada menu dashboard pilih menu tata letak,
3. Lalu tambahkan gadget, pilih html / javascript,
4. Setelah itu copy script di bawah ini,
<div id="flash-region">
<div id="preview-container"><!-- This is only used by editor replaces content dynamically -->
<script type="text/javascript">
// Not needed for remote
</script>
<script type="text/javascript">
window.oc = window.oc || {};
window.oc.spritePath = "https://countingdownto.com/oc-sprite";
window.oc.spriteParams = {"title":"Menuju 2015","date_label":"1 Januari 2015","txt_color":"FFFFFFFF","bg_color":"333333FF","width":350,"height":180,"scale":1.0,"style":"TemplateCdt3","quality":0.95,"use_overlay":0,"shadow":1,"unit_labels":"hari,jam,menit,detik","renderer":"v1","encoding":"png","font_push_down":0.34,"font":"Helvetica Neue LT Com 77 Bold Condensed","shadow_color":"0000008b","shadow_y":1,"shadow_blur":1,"overlay":"reflection-09.png","overlay_size":"350,180","hlines":"YYYY","text_effect":3,"text_effect_strength":1.0};
window.oc.startTime = new Date().getTime() / 1000;
window.oc.scale = 1.0;
window.oc.repeatMode = 0;
if(window.oc.remainingTimeAtStartTime === undefined) {
// Not needed in remote version
window.oc.remainingTimeAtStartTime = 729922;
}
</script>
<script type="text/javascript">if(!window.console)console = {log: function(){}};</script>
<style>#demo{z-index: 999;}</style>
<div id="countdown_widget_style_holder"><style type="text/css">html,body{margin:0px;padding:0px}a img{border:0}#demo{position:absolute;right:0;top:0}#ie-fix{display:none}.digit{background-image:url(https://countingdownto.com/oc-sprite?bg_color=333333FF&date_label=1+Januari+2015&encoding=png&font=Helvetica+Neue+LT+Com+77+Bold+Condensed&font_push_down=0.34&height=180&hlines=YYYY&overlay=reflection-09.png&overlay_size=350%2C180&quality=0.95&renderer=v1&scale=1.0&shadow=1&shadow_blur=1&shadow_color=0000008b&shadow_y=1&style=TemplateCdt3&text_effect=3&text_effect_strength=1.0&title=Menuju+2015&txt_color=FFFFFFFF&unit_labels=hari%2Cjam%2Cmenit%2Cdetik&use_overlay=0&width=350);background-repeat:no-repeat;width:28px}.digit-0{background-position:-350px -75px}.digit-1{background-position:-378px -75px}.digit-2{background-position:-406px -75px}.digit-3{background-position:-434px -75px}.digit-4{background-position:-462px -75px}.digit-5{background-position:-490px -75px}.digit-6{background-position:-518px -75px}.digit-7{background-position:-546px -75px}.digit-8{background-position:-574px -75px}.digit-9{background-position:-602px -75px}.digit-x{width:24px;background-position:-670px -75px}.digit-p{width:10px;background-position:-640px -75px}.spr.digit-b{width:10px;background-image:none;visibility:hidden}.widget-wrapper{width:350px;height:180px;background-color:#333333;position:relative;margin:auto;-webkit-box-shadow:0 1px 6px 1px rgba(0,0,0,0.4),0 1px 2px 0 rgba(0,0,0,0.4);-moz-box-shadow:0 1px 6px 1px rgba(0,0,0,0.4),0 1px 2px 0 rgba(0,0,0,0.4);box-shadow:0 1px 6px 1px rgba(0,0,0,0.4),0 1px 2px 0 rgba(0,0,0,0.4)}.content-wrapper{width:100%;height:100%}.spr{background-image:url(https://countingdownto.com/oc-sprite?bg_color=333333FF&date_label=1+Januari+2015&encoding=png&font=Helvetica+Neue+LT+Com+77+Bold+Condensed&font_push_down=0.34&height=180&hlines=YYYY&overlay=reflection-09.png&overlay_size=350%2C180&quality=0.95&renderer=v1&scale=1.0&shadow=1&shadow_blur=1&shadow_color=0000008b&shadow_y=1&style=TemplateCdt3&text_effect=3&text_effect_strength=1.0&title=Menuju+2015&txt_color=FFFFFFFF&unit_labels=hari%2Cjam%2Cmenit%2Cdetik&use_overlay=0&width=350)}@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5){.spr{background-image:url(https://countingdownto.com/oc-sprite?bg_color=333333FF&date_label=1+Januari+2015&encoding=png&font=Helvetica+Neue+LT+Com+77+Bold+Condensed&font_push_down=0.34&height=180&hlines=YYYY&overlay=reflection-09.png&overlay_size=350%2C180&quality=0.95&renderer=v1&scale=1.0&shadow=1&shadow_blur=1&shadow_color=0000008b&shadow_y=1&style=TemplateCdt3&text_effect=3&text_effect_strength=1.0&title=Menuju+2015&txt_color=FFFFFFFF&unit_labels=hari%2Cjam%2Cmenit%2Cdetik&use_overlay=0&width=350&retina=1);background-size:800px 180px}}.counter-wrapper{width:336px;height:90.0px;margin-left:14px}.counter-wrapper .counter-item{height:40px;float:left}.counter-wrapper .counter-group{height:53px;float:left;position:relative;overflow:hidden}.counter-group .unit-label{position:absolute;height:15px;width:60px;left:0;top:38px}.days .unit-label{background-position:-350px -114px}.hours .unit-label{background-position:-410px -114px}.minutes .unit-label{background-position:-470px -114px}.seconds .unit-label{background-position:-530px -114px}.header{height:75px;width:100%}
</style>
</div>
<div class="widget-wrapper">
<div id="ie-fix"> </div>
<div class="content-wrapper spr">
<div class="header">
</div>
<div class="counter-wrapper">
<div class="days counter-group">
<div class="counter-item"></div>
<div class="counter-item"></div>
<div class="counter-item spr digit item-0 digit-8"></div>
<div class="unit-label spr" style="left: -16px;">
</div>
</div>
<div class="counter-item spr digit item-0 digit-x" style="margin: 0px 9px;"></div>
<div class="hours counter-group">
<div class="counter-item spr digit item-0 digit-1"></div>
<div class="counter-item spr digit item-0 digit-0"></div>
<div class="unit-label spr">
</div>
</div>
<div class="counter-item spr digit item-0 digit-x" style="margin: 0px 9px;"></div>
<div class="minutes counter-group">
<div class="counter-item spr digit item-0 digit-3"></div>
<div class="counter-item spr digit item-0 digit-3"></div>
<div class="unit-label spr">
</div>
</div>
<div class="counter-item spr digit item-0 digit-x" style="margin: 0px 9px;"></div>
<div class="seconds counter-group">
<div class="counter-item spr digit item-0 digit-2"></div>
<div class="counter-item spr digit item-0 digit-5"></div>
<div class="unit-label spr">
</div>
</div>
<div class="counter-item spr digit item-0 digit-b"></div>
<div class="counter-item spr digit item-0 digit-b"></div>
</div>
</div>
</div>
<script type="text/javascript">
if(window.oc == undefined)
{
window.oc = {};
}
//var oc = window.oc;
if(window.oc.remainingTimeAtStartTime === undefined)
{
window.oc.remainingTimeAtStartTime=729922;
}
</script>
<script type="text/javascript">
!function(){
window.oc.startTime=new Date().getTime() / 1000;
window.oc.countDirection=1;
window.oc.scale=1.0;
window.oc.repeatMode = 0;
window.oc.showMilliseconds = false;
window.oc.countdownExpired = function()
{
if(window.oc.repeatMode > 0)
{
if(window.oc.editor)
{
window.oc.editor.countdownExpired();
}
else
{
if(window.self !== window.top)location.reload();
}
}
}
var pad,periods,update;periods={d:86400,h:3600,m:60},pad=function(e){for(;e.toString().length<2;)e="0"+e;return e},update=function(){var e,t,o,i,r,a,d,n,s,c,p,m,l,u,h;for(p=(new Date).getTime()/1e3,t=p-oc.startTime,t*=oc.countDirection,u=Math.max(0,Math.floor(oc.remainingTimeAtStartTime-t)),r=Math.floor(10*(oc.remainingTimeAtStartTime-t-u)),0===u&&(oc.countdownExpired(),r=0),e=u-u%periods.d,a=u-e-u%periods.h,c=u-e-a-u%periods.m,h=u-e-a-c,s=[e/periods.d,pad(a/periods.h),pad(c/periods.m),pad(h)].join("x"),window.oc.showMilliseconds?s=s+"p"+r:s+="bb",n=$(".counter-item"),d=n.length,m=d-s.length;d--;)o=n[d],$(o).removeClass(),$(o).addClass("counter-item"),d-m>=0&&$(o).addClass("spr digit item-0 digit-"+s.charAt(d-m));return l=Math.round(($(".days").innerWidth()-60*oc.scale)/2),$(".days .unit-label").css("left",l+"px"),i=26*m*oc.scale,$(".digit-x").css("margin","0 "+Math.round(i/6)+"px")},update(),oc.timerRef&&clearInterval(oc.timerRef),oc.timerRef=setInterval(update,100),oc.updateCountdownClock=update;
}.call(this);
</script></div>
<div id="progress-indicator" class="" style="width:350px;height:5px;margin:auto;margin-top:3px">
<div class="progress progress-striped active hide" style="width: 100%; height: 100%; display: none;">
<div class="bar" style="width: 100%;">
</div>
</div>
</div>
</div>
5. Setelah itu paste pada kolom html / javascript tadi,
6. Lalu simpan dan lihat hasilnya.
Nah itu saja dari Saya semoga bermanfaat, jangan lupa bagikan serta tinggalkan komentar, terima kasih.
Referensi script http://mrhb404.blogspot.com/
