Cara Membuat Widget Timer Hitung Mundur Natal Di Blogspot

Cara Membuat Widget Timer Hitung Mundur Natal Di Blogspot - Menambahkan widget penghitung waktu mundur Natal ke blog blogger untuk menyambut pengunjung blog sobat dan mengucapkan selamat Natal kepada mereka.

Widget penghitung waktu mundur ini mundur hingga pada waktu natal tiba dan dalam format waktu militer dengan menghitung hari, jam, menit, dan detik tersisa untuk acara Natal mendatang.

Itu juga mengingatkan dan berharap Natal dengan membuat pop-up setelah penghitungan mundur berakhir. JavaScript disediakan oleh drive dinamis dan disesuaikan dan ditingkatkan oleh MBT.

Widget ini akan dibagikan dengan sangat mudah untuk menginstal dan menyesuaikannya. Hal terbaik tentang itu adalah tidak mengandung iklan karena kami menggunakan skrip gratis yang disediakan oleh drive dinamis dan menyimpannya di blogger.

Nah, tertarik ingin memasang widget Timer Penghitung Waktu Mundur Hari Natal? Silahkan ikuti tutorialnya dengan baik ya!!

Cara Membuat Widget Timer Hitung Mundur Natal Di Blogspot

1. Pertama sobat Login Ke Blogger
2. Kemudian pilih Template/Tema > Edit HTML
3. Cari kode </head> dan letakkan kode dibawah ini diatas kode </head>

<style style="text/css">.lcdstyle{ /*Example CSS to create LCD countdown look*/ background-color:fff; color:#FF3333; font: bold 20px arial; padding: 15px;border:5px solid #0080ff;border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; box-shadow: 5px 5px 5px #CCCCCC;}.lcdstyle sup{ /*Example CSS to create LCD countdown look*/ font-size: 120% }</style><script type="text/javascript">/*********************************************** * Dynamic Countdown script- © Dynamic Drive (http://www.dynamicdrive.com) * This notice MUST stay intact for legal use * Visit http://www.dynamicdrive.com/ for this script and 100s more. ***********************************************/function cdtime(container, targetdate){ if (!document.getElementById || !document.getElementById(container)) return this.container=document.getElementById(container) this.currentTime=new Date() this.targetdate=new Date(targetdate) this.timesup=false this.updateTime() }cdtime.prototype.updateTime=function(){ var thisobj=this this.currentTime.setSeconds(this.currentTime.getSeconds()+1) setTimeout(function(){thisobj.updateTime()}, 1000) //update time every second }cdtime.prototype.displaycountdown=function(baseunit, functionref){ this.baseunit=baseunit this.formatresults=functionref this.showresults() }cdtime.prototype.showresults=function(){ var thisobj=thisvar timediff=(this.targetdate-this.currentTime)/1000 //difference btw target date and current date, in seconds if (timediff<0){ //if time is up this.timesup=true this.container.innerHTML=this.formatresults() return } var oneMinute=60 //minute unit in seconds var oneHour=60*60 //hour unit in seconds var oneDay=60*60*24 //day unit in seconds var dayfield=Math.floor(timediff/oneDay) var hourfield=Math.floor((timediff-dayfield*oneDay)/oneHour) var minutefield=Math.floor((timediff-dayfield*oneDay-hourfield*oneHour)/oneMinute) var secondfield=Math.floor((timediff-dayfield*oneDay-hourfield*oneHour-minutefield*oneMinute)) if (this.baseunit=="hours"){ //if base unit is hours, set "hourfield" to be topmost level hourfield=dayfield*24+hourfield dayfield="n/a" } else if (this.baseunit=="minutes"){ //if base unit is minutes, set "minutefield" to be topmost level minutefield=dayfield*24*60+hourfield*60+minutefield dayfield=hourfield="n/a" } else if (this.baseunit=="seconds"){ //if base unit is seconds, set "secondfield" to be topmost level var secondfield=timediff dayfield=hourfield=minutefield="n/a" } this.container.innerHTML=this.formatresults(dayfield, hourfield, minutefield, secondfield) setTimeout(function(){thisobj.showresults()}, 1000) //update results every second }/////CUSTOM FORMAT OUTPUT FUNCTIONS BELOW////////////////////////////////Create your own custom format function to pass into cdtime.displaycountdown() //Use arguments[0] to access "Days" left //Use arguments[1] to access "Hours" left //Use arguments[2] to access "Minutes" left //Use arguments[3] to access "Seconds" left//The values of these arguments may change depending on the "baseunit" parameter of cdtime.displaycountdown() //For example, if "baseunit" is set to "hours", arguments[0] becomes meaningless and contains "n/a" //For example, if "baseunit" is set to "minutes", arguments[0] and arguments[1] become meaningless etcfunction formatresults(){ if (this.timesup==false){//if target date/time not yet met var displaystring=arguments[0]+" days "+arguments[1]+" hours "+arguments[2]+" minutes "+arguments[3]+" seconds left until December 25, 2017 18:25:00" } else{ //else if target date/time met var displaystring="" } return displaystring }function formatresults2(){ if (this.timesup==false){ //if target date/time not yet met var displaystring="<span class='lcdstyle'>"+arguments[0]+" <sup>days</sup> "+arguments[1]+" <sup>hours</sup> "+arguments[2]+" <sup>minutes</sup> "+arguments[3]+" <sup>seconds</sup></span> " } else{ //else if target date/time met var displaystring="" //Don't display any text alert("Christmas is here!") //Instead, perform a custom alert } return displaystring }</script><h1 style="color:#0080ff; margin:0;">Happy Holidays!</h1> <div id="countdowncontainer"></div> <br /> <div id="countdowncontainer2"></div><script type="text/javascript">var futuredate=new cdtime("countdowncontainer", "March 23, 2009 18:25:00") futuredate.displaycountdown("days", formatresults)var currentyear=new Date().getFullYear() //dynamically get this Christmas' year value. If Christmas already passed, then year=current year+1 var thischristmasyear=(new Date().getMonth()>=11 && new Date().getDate()>25)? currentyear+1 : currentyear var christmas=new cdtime("countdowncontainer2", "December 25, "+thischristmasyear+" 0:0:00") christmas.displaycountdown("days", formatresults2)</script>

Catatan:

Sobat bisa mengubah warna #0080ff dengan warna sesuka sobat
Sobat dapat mengedit ukuran Border 5px solid #0080ff Sesuai keinginan sobat
Untuk Mengubah warna teks hitungnya #FF3333 ubah sesuai keinginan sobat
Sobat bisa mengubah tulisan "Christmas is Here!" Sesuai keinginan
Sobat bisa mengubah December 25 seusai dengan tanggal hari natal

Selain menerapkan di Edit HMTML sobat bisa langsung ke Tata Letak/Layout dan Add Widget/JavaScript dan letakkan sesuai keinginan sobat. Jika sobat sedikit paham dengan CSS mungkin ini tidaklah sulit. Untuk DEMO Hasil sobat bisa ke sini.

<DEMO>

Nah, itulah Cara Membuat Widget Timer Hitung Mundur Hari Natal Di Blogspot. Jika ada kesulitan, sobat bisa komentar dibawah ya!!

Happy Blogging!!