Info Penting

Mapel TIK Kembali Hadir di Kurikulum 2013 dalam Konsep Baru

M ata pelajaran TIK (Teknologi Informasi dan Komunikasi) yang sempat dihilangkan dalam Kurikulum 2013 dan diganti namanya menjadi Bimbing...

Artikel Terbaru

Cara memasang Jam Animasi di Blog

9 Apr 2010 - - 11

Bagi anda semua yang menginginkan memasang jam animasi di blog, anda bisa kunjungi www.clocklink.com , disana anda bisa memilih model-model jam, mulai dari jam digital, animasi, gambar hewan, dsb.

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.

11 komentar

  1. Blog yang bagus juga artikelnya sangat berbobot,makasih mas,salam kenal dri saya

    BalasHapus
  2. keren mas mirip facebook, mau ngajari g?
    http://achmadnurfatoni.blogspot.com
    http://achmadnurfatoni.co.cc
    thanks

    BalasHapus
  3. @deras: salam kenal juga,
    @toni: tinggal kemauan belajar, di internet gudangnya informasi.

    BalasHapus
  4. mas postingnya boleh di copas g

    BalasHapus
  5. @andrian: boleh silahkan, yg penting jangan lupa beri sumber copasnya dari mana. thx.

    BalasHapus
  6. yg penting jangan lupa beri sumber copasnya

    BalasHapus
  7. postnya manteb gan... salut...

    BalasHapus
  8. thanks buat infonya gan,, sangat bermanfaat... http://goo.gl/YEIIla

    BalasHapus

Follow Me


Iklan

Koleksi Tutorial Blog

Arsip Blog