Cara memasang Jam Animasi di Blog
9 Apr 2010 - - 10
Untuk Cara memasangnya sangat mudah, setelah anda berkunjung ke website www.clocklink.com anda tinggal pilih di gallery yang tersedia, kemudian klik tombol view code pada tampilan jam yang anda pilih, selanjutnya akan ada pertanyaan persetujuan, tingagl klik saja tombol accept, dan copy code yang ditampilkan, jangan lupa untuk mengatur lokasi anda tinggal supaya jam bisa tampil sesuai lokasi anda.
Untuk memasang code jam animasi yang sudah anda dapatkan tadi, anda tinggal login ke halaman admin blog anda, klik tata letak, tambah gadget, pilih html/ javascript Paste code yang sudah didapatkan.
Untuk membuat jam animasi dengan perpaduan kode javascript, CSS, seperti contoh di bawah:
0
0
:
0
0
:
0
0
Anda hanya cukup mengcopy seluruh kode yang ada di bawah ini, dan paste/ tempelkan di widget HTML/ JavaScript blog anda:
<div class="clock">
<div class="hours">
<div class="first">
<div class="number">0</div>
</div>
<div class="second">
<div class="number">0</div>
</div>
</div>
<div class="tick">:</div>
<div class="minutes">
<div class="first">
<div class="number">0</div>
</div>
<div class="second">
<div class="number">0</div>
</div>
</div>
<div class="tick">:</div>
<div class="seconds">
<div class="first">
<div class="number">0</div>
</div>
<div class="second infinite">
<div class="number">0</div>
</div>
</div>
</div>
<script type="text/javascript">
//<![CDATA[
var hoursContainer = document.querySelector('.hours')
var minutesContainer = document.querySelector('.minutes')
var secondsContainer = document.querySelector('.seconds')
var tickElements = Array.from(document.querySelectorAll('.tick'))
var last = new Date(0)
last.setUTCHours(-1)
var tickState = true
function updateTime () {
var now = new Date
var lastHours = last.getHours().toString()
var nowHours = now.getHours().toString()
if (lastHours !== nowHours) {
updateContainer(hoursContainer, nowHours)
}
var lastMinutes = last.getMinutes().toString()
var nowMinutes = now.getMinutes().toString()
if (lastMinutes !== nowMinutes) {
updateContainer(minutesContainer, nowMinutes)
}
var lastSeconds = last.getSeconds().toString()
var nowSeconds = now.getSeconds().toString()
if (lastSeconds !== nowSeconds) {
//tick()
updateContainer(secondsContainer, nowSeconds)
}
last = now
}
function tick () {
tickElements.forEach(t => t.classList.toggle('tick-hidden'))
}
function updateContainer (container, newTime) {
var time = newTime.split('')
if (time.length === 1) {
time.unshift('0')
}
var first = container.firstElementChild
if (first.lastElementChild.textContent !== time[0]) {
updateNumber(first, time[0])
}
var last = container.lastElementChild
if (last.lastElementChild.textContent !== time[1]) {
updateNumber(last, time[1])
}
}
function updateNumber (element, number) {
//element.lastElementChild.textContent = number
var second = element.lastElementChild.cloneNode(true)
second.textContent = number
element.appendChild(second)
element.classList.add('move')
setTimeout(function () {
element.classList.remove('move')
}, 990)
setTimeout(function () {
element.removeChild(element.firstElementChild)
}, 990)
}
setInterval(updateTime, 100)
//]]>
</script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.clock {
height: 20vh;
color: #333;
font-size: 12vh;
font-family: sans-serif;
line-height: 20.4vh;
display: flex;
position: relative;
overflow: hidden;
}
.clock::before, .clock::after {
content: '';
width: 7ch;
height: 2vh;
background: linear-gradient(to top, transparent, black);
position: absolute;
z-index: 2;\
}
.clock::after {
bottom: 0;
background: linear-gradient(to bottom, transparent, black);
}
.clock > div {
display: flex;
}
.tick {
line-height: 17vh;
}
.tick-hidden {
opacity: 0;
}
.move {
animation: move linear 1s infinite;
}
@keyframes move {
from {
transform: translateY(0vh);
}
to {
transform: translateY(-20vh);
}
}
</style>
Semoga bermanfaat.
Terimakasih, anda telah membaca postingan dengan judul "Cara memasang Jam Animasi di Blog", semoga postingan ini bermanfaat untuk anda, budayakan berkomentar setelah membaca ya. 😊
Blog yang bagus juga artikelnya sangat berbobot,makasih mas,salam kenal dri saya
BalasHapuskeren mas mirip facebook, mau ngajari g?
BalasHapushttp://achmadnurfatoni.blogspot.com
http://achmadnurfatoni.co.cc
thanks
@deras: salam kenal juga,
BalasHapus@toni: tinggal kemauan belajar, di internet gudangnya informasi.
mas postingnya boleh di copas g
BalasHapus@andrian: boleh silahkan, yg penting jangan lupa beri sumber copasnya dari mana. thx.
BalasHapusterima kasih banyak?>
BalasHapusyg penting jangan lupa beri sumber copasnya
BalasHapuspostnya manteb gan... salut...
BalasHapusMantab Gan....
BalasHapusthanks buat infonya gan,, sangat bermanfaat... http://goo.gl/YEIIla
BalasHapus