Cara Membuat Countdown Timer Tahun Baru 2015 Keren Di Blog

Cara Membuat Countdown Timer Tahun Baru 2015 Keren Di Blog

15:34:00
Countdown Timer 2015
Cara Membuat Countdown Timer Tahun Baru 2015 Keren Di Blog
View
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/

Share this

Renaldy Rizki Ramadani

I'm CEO & Founder in https://ilmumalas.blogspot.com & https://renaldyways.blogspot.com/


Artikel Menarik Lainnya

Artikel Selanjutnya
Artikel Selanjutnya
Artikel Sebelumnya
Artikel Sebelumnya
Cara style text di komentar Disqus dan Blogger:
  • Untuk menulis huruf bold silahkan gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic silahkan gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline silahkan gunakan <u></u>.
  • Untuk menulis huruf strikethrought silahkan gunakan <strike></strike>.
  • Untuk menulis kode HTML silahkan gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silahkan parse dulu kodenya pada kotak parser di bawah ini.
  • Untuk menggunakan emoji di bawah ini cukup copy kode tersebut dan beri jarak 1 spasi untuk menampilkan emoji pada kolom komentar Blogger.
Parser Kode
FAQ
Emotikon
Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger
Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

8 Comments

Anonymous
Balas Hapus
Anonymous 25 December 2014 at 20:00

:nyengir:

Renaldy Rizki Ramadani
Balas Hapus
Renaldy Rizki Ramadani 25 December 2014 at 20:58

:v kenape nyengir mastah :v

Satriyo76
Balas Hapus
Satriyo76 26 December 2014 at 21:04

mantap nih widget coundown timernya..jarnag yang share widget ginian..ijin nyoba gan rey..

salam satriyoku.blog

Renaldy Rizki Ramadani
Balas Hapus
Renaldy Rizki Ramadani 26 December 2014 at 21:23

iya gan :D makasih :v

Suhanri Simanullang
Balas Hapus
Suhanri Simanullang 29 January 2015 at 22:02

scriptnya lumayan panjang ya..makasih infonya mas..

Kunjungan balik http://klikenjoyblog.blogspot.com
Klik Enjoy Blog

Suhanri Simanullang
Balas Hapus
Suhanri Simanullang 29 January 2015 at 22:03

scriptnya lumayan panjang ya..makasih infonya mas..

Kunjungan balik http://klikenjoyblog.blogspot.com
Klik Enjoy Blog

Muhammad Rauuf
Balas Hapus
Muhammad Rauuf 31 January 2015 at 06:48

tutorialnya keren mas, :thumbup btw itu beratin loading blog apa ngga?

Renaldy Rizki Ramadani
Balas Hapus
Renaldy Rizki Ramadani 31 January 2015 at 12:18

:2thumbup nggak bikin beratin loading kok gan :3

Subscribe to: Post Comments (Atom)