Posted by Aak
Aak-share.com Updated at: 11:56:00 PM

Cara Membuat Jam Digital di Blog Dengan CSS3

No comments:
Cara Membuat Jam Digital di Blog Dengan CSS3 ~ Hallo Sobat.., Mungkin Sobat pernah melihat Widget Jam Digital pada sebuat Blog dipasang pada Widget. Seperti yang sudah saya ulas sebelumnya cara membuat dan memasang Widget jam Digita di Blog.



Widget Jam Digital banyak sekali ragamnya dengan tampilan yang keren , untuk Jadm Digital ini tidak kalah keren kabar baiknya lainya membuatnya dengan menggunakan CSS. Pada prinsipnya untuk menciptakannya dengan menggunakan rotate berfungsi untuk memberikan effect rotasi pada jarum jam. Bagi Sobat yang tertarik dan ingin memasang memasangnya di Blog berikut ini caranya :

Silahkan Sobat buka Editor Template, lalu cari kode berikut ]]></b:skin> dan salin kode dibawah ini pasangkan diatasnya atau Sebelumnya.

#clock{
 position: absolute;
 top: 60%;
 left: 50%;
 margin: -150px 0 0 -150px;
 width: 260px;
 height: 260px;
 background-color: #fefefe;
 border: solid 20px #1f76a3;
 border-radius: 50%;
}
#clock::after{
 content: "";
 position: absolute;
 width: 300px;
 height: 500px;
 transform-origin: top center;
 transform: translateY(130px) translateX(-20px) rotate(-45deg);
 background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%,rgba(125,185,232,0) 100%);
}
#clock .hours{
 position: absolute;
 width: 2px;
 height: 60px;
 top: 63%;
 left: 50%;
 margin: -60px 0 0 -1px;
 background-color: #333;
 transform-origin: bottom center;
}
#clock .minutes{
 position: absolute;
 width: 4px;
 height: 80px;
 top: 68%;
 left: 50%;
 margin: -80px 0 0 -2px;
 background-color: #333;
 transform-origin: bottom center;
}
#clock .seconds{
 position: absolute;
 width: 2px;
 height: 90px;
 top: 71%;
 left: 50%;
 margin: -90px 0 0 -1px;
 background-color: #fe0505;
 transform-origin: bottom center;
}
#clock .point{
 position: absolute;
 top: 50%;
 left: 50%;
 width: 4px;
 height: 14px;
 margin: -7px 0 0 -2px;
 background-color: #b7b8ba;
}
#clock .point:nth-child(1){
 transform: translateY(-123px);
}
#clock .point:nth-child(2){
 transform: translateX(-123px) rotate(90deg);
}
#clock .point:nth-child(3){
 transform: translateY(123px);
}
#clock .point:nth-child(4){
 transform: translateX(123px) rotate(90deg);
}
#clock .center{
 position: absolute;
 width: 10px;
 height: 10px;
 top: 50%;
 left: 50%;
 margin: -5px 0 0 -5px;
 background-color: #333;
 border-radius: 50%;
}

Selanjutnya Sobat cari kode </body atau juga kode </head> lalu salin kode dibawah ini dan dan pasangkan diatasnya .

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" />

Catatan : Apabila pada Template Sobat sudah terinstall kode diatas, maka Sobat lewati langkah tersebut

Selanjuynya Anda cari kode </body> kemudian copy kode dibawah ini dan pastekan diatasnya atau sebelumnya.

<script type="text/css">
function setClock() {
    var time = new Date(), minutes = time.getMinutes() * 6, hours = time.getHours() % 12 / 12 * 360 + minutes / 12, seconds = time.getSeconds() * 6; /*pengaturan waktu telah diatur*/
    $('.hours').css('transform', 'rotate(' + hours + 'deg)');
    $('.seconds').css('transform', 'rotate(' + seconds + 'deg)');
    $('.minutes').css('transform', 'rotate(' + minutes + 'deg)');
}
function refresh() {
    setClock();
    setTimeout(refresh, 1000);
}
refresh();
</script>

langkah berikutnya pemasangan HTML, Sobat bisa memasangnya pada entri baruHTML atau juga bisa memasangnya di Widget .

<div id="clock">
  <div class="point">
</div>
<div class="point">
</div>
<div class="point">
</div>
<div class="point">
</div>
<div class="hours" style="-webkit-transform: rotate(105deg);">
</div>
<div class="minutes" style="-webkit-transform: rotate(180deg);">
</div>
<div class="seconds" style="-webkit-transform: rotate(60deg);">
</div>
<div class="center">
</div>
</div>

Semoga bermanfat!

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments