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&amp;date_label=1+Januari+2015&amp;encoding=png&amp;font=Helvetica+Neue+LT+Com+77+Bold+Condensed&amp;font_push_down=0.34&amp;height=180&amp;hlines=YYYY&amp;overlay=reflection-09.png&amp;overlay_size=350%2C180&amp;quality=0.95&amp;renderer=v1&amp;scale=1.0&amp;shadow=1&amp;shadow_blur=1&amp;shadow_color=0000008b&amp;shadow_y=1&amp;style=TemplateCdt3&amp;text_effect=3&amp;text_effect_strength=1.0&amp;title=Menuju+2015&amp;txt_color=FFFFFFFF&amp;unit_labels=hari%2Cjam%2Cmenit%2Cdetik&amp;use_overlay=0&amp;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&amp;date_label=1+Januari+2015&amp;encoding=png&amp;font=Helvetica+Neue+LT+Com+77+Bold+Condensed&amp;font_push_down=0.34&amp;height=180&amp;hlines=YYYY&amp;overlay=reflection-09.png&amp;overlay_size=350%2C180&amp;quality=0.95&amp;renderer=v1&amp;scale=1.0&amp;shadow=1&amp;shadow_blur=1&amp;shadow_color=0000008b&amp;shadow_y=1&amp;style=TemplateCdt3&amp;text_effect=3&amp;text_effect_strength=1.0&amp;title=Menuju+2015&amp;txt_color=FFFFFFFF&amp;unit_labels=hari%2Cjam%2Cmenit%2Cdetik&amp;use_overlay=0&amp;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&amp;date_label=1+Januari+2015&amp;encoding=png&amp;font=Helvetica+Neue+LT+Com+77+Bold+Condensed&amp;font_push_down=0.34&amp;height=180&amp;hlines=YYYY&amp;overlay=reflection-09.png&amp;overlay_size=350%2C180&amp;quality=0.95&amp;renderer=v1&amp;scale=1.0&amp;shadow=1&amp;shadow_blur=1&amp;shadow_color=0000008b&amp;shadow_y=1&amp;style=TemplateCdt3&amp;text_effect=3&amp;text_effect_strength=1.0&amp;title=Menuju+2015&amp;txt_color=FFFFFFFF&amp;unit_labels=hari%2Cjam%2Cmenit%2Cdetik&amp;use_overlay=0&amp;width=350&amp;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">&nbsp;</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/

Catatan pinggir

Obrolan pembaca 8

Punya pengalaman serupa, pertanyaan, atau koreksi? Tulis di pinggir halaman ini. Setiap catatan dibaca langsung oleh penulis.

Bingung mau mulai dari mana? Ketuk salah satu, lalu tempel di kolom komentar:

Comments

Anonymous25 December 2014 at 20:00
:nyengir:
Satriyo7626 December 2014 at 21:04
mantap nih widget coundown timernya..jarnag yang share widget ginian..ijin nyoba gan rey..

salam satriyoku.blog
suhandri29 January 2015 at 22:02
scriptnya lumayan panjang ya..makasih infonya mas..

Kunjungan balik http://klikenjoyblog.blogspot.com
Klik Enjoy Blog
suhandri29 January 2015 at 22:03
scriptnya lumayan panjang ya..makasih infonya mas..

Kunjungan balik http://klikenjoyblog.blogspot.com
Klik Enjoy Blog
Muhammad Rauuf31 January 2015 at 06:48
tutorialnya keren mas, :thumbup btw itu beratin loading blog apa ngga?

Cara Membuat Countdown Timer Tahun Baru 2015 Keren Di Blog

Langkah

Obrolan pembaca 8

Comments

Post a Comment

Kontak

Cari tulisan

Pantau tulisan baru

Paspor Pembacaku

Langkah

Baca juga

Comments

Post a Comment

Kontak