بِسْــــــــــــــــمِ اﷲِالرَّØْÙ…َÙ†ِ الرَّØِيم
TIK TOK jam analog berdenting nyaring dengan CSS? Apakah bisa? Jawabannya adalah bisa. Dengan kode pemrograman yang memang sudah menjadi standar web ini kita akan mencari cara bagaimana sebuah jam analog berdenting di blog kita. Dengan rangkaian dentingan jam yang bergoyang dari kiri ke kanan membuat jam ini semakin atraktif dan animatif. Sungguh sebuah terobosan baru dalam dunia desain web ya khan? Denting jam Tik Tok dengan Teknik CSS bisa dipasang di blog. Saatnya mulai ya
Sebelumnya saya juga pernah membuat tutorial tentang Cara Membuat Jam Analog Estetik dengan CSS beberapa waktu silam. Sekarang saatnya saya memberikan tutorial lain yang hampir sama, yaitu soal jam. Hanya bedanya yang dulu jamnya terlihat bulat, dan sekarang jamnya ada tulisan Tick Tock dan pendulumnya dapat bergoyang. Unik sih kalau saya bilang. Jadi silakan simak ya, nanti dipraktekkan juga tidak apa-apa. Eh siapa tahu bisa jadi bagus kalau tampil di blog kalian.
Baca Juga :
Yang pasti dalam pembuatan ini kita akan berkutat pada property Kata1 yaitu Tick, Kata2 yaitu Tock dan Pendulum. Background menggunakan gradient warna cerah keunguan dipadukan dengan warna katanya dan pendulumnya cerah berwarna krem. Posisi yang pas bisa mendapatkan angel yang bagus, soalnya kalau tidak goyangan pendulum tidak akan pas mengenai huruf i dan huruf o. Sehingga harus pas, sehingga akan membentuk huruf i pada tick dan huruf o pada tock.
Untuk permainan animasi gerakannya digunakan dengan keyframe swing rotasi atau goyangan berputar. Unik ya terjemahannya. Tidak apa-apa ya, yang penting nanti hasilnya. Ketika semua elemen sudah disatukan maka akan tercipta denting jam yang sangat unik sama dengan model jam lama yang sudah kita anggap jadul. Jam jadul khan memang seperti itu kebanyakan, berdenting dan biasanya juga disimpan dalam lemari modifikasi khusus untuk tempat jam analog ini. Orang jaman dulu banyak menggunakan model jam seperti ini.
Sekarang langsung saja ke tutorial.
Cara Membuat Tik Tok Jam Analog Berdenting di Blog
1. Masuk ke Dashboard Blogger2. Klik Tema
3. Pilih lagi Sesuaikan : Edit HTML
4. Cari kode ]]></b:skin> di template dan kemudian tempel kode dibawah ini tepat di atasnya
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
height: 100vh;
background: linear-gradient(36deg, rgba(129,26,80,1) 0%, rgba(232,102,210,1) 50%, rgba(223,123,238,1) 100%);
}
.container {
font-size: 14px;
width: 35em;
height: 31.25em;
position: relative;
margin: auto;
}
.word {
color: #fff000;
font-weight: 800;
font-size: 6em;
letter-spacing: 0.3em;
position: absolute;
}
.word-1 {
left: 0.52em;
top: 1em;
}
.word-2 {
top: 3.12em;
right: 0;
}
.word-2 span:last-child {
margin-left: 0.3em;
}
.pendulum {
background-color: #f5de59;
height: 25em;
width: 1.3em;
position: absolute;
left: 11.9em;
top: -2.5em;
box-shadow: 0 0 1.8em rgba(0, 8, 57, 0.2);
transform: rotate(15deg);
transform-origin: top;
animation: swing 2.5s infinite ease-in-out;
}
@keyframes swing {
50% {
transform: rotate(-15deg);
}
}
.pendulum:after {
position: absolute;
content: "";
height: 2.5em;
width: 2.5em;
border: 1.3em solid #f5de59;
border-radius: 50%;
bottom: -4.37em;
left: -2.1em;
}
@media screen and (min-width: 700px) {
.container {
font-size: 20px;
}
}5. Selanjutnya tampilkan jam di halaman depan blog dengan menempelkan kode ini di Tata Letak ya.
<div class="container">
<div class="word word-1">
<span>T</span>
<span>CK</span>
</div>
<div class="pendulum"></div>
<div class="word word-2">
<span>T</span>
<span>CK</span>
</div>
</div>Setelah semua dilakukan saatnya save pekerjaan kalian dan publish. Sudah terlihat jam berdenting itu. Sama seperti yang sudah saya praktekkan di blog demo saya yang akan saya sajikan berikut ini. Tampilannya satu halaman penuh. Sehingga header, footer dan sidebar tidak kelihatan sama sekali. Tapi tidak papalah yang penting bagus. Oke, sekarang silakan kalian praktekkan. Tidak ada yang miskin karena bersedekah, karena rejeki itu akan diganti dengan rejeki lain yang berlipat ganda. Jadi, muliakanlah orang yang membutuhkan pertolongan kita dengan bersedekah. Niscaya hidupmu akan terjamin selamanya. Terima kasih ya yang sudah mampir kemari. Salam Blogger.
