Cara Menciptakan Jam Digital Di Blog Dengan Css3

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 aku ulas sebelumnya cara membuat dan memasang Widget jam Digita di Blog.

Demo   CODE

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

Silahkan Sobat buka Editor Template, kemudian cari instruksi berikut ]]></b:skin> dan salin instruksi 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 instruksi </body atau juga instruksi </head> kemudian salin instruksi 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 instruksi diatas, maka Sobat lewati langkah tersebut

Selanjuynya Anda cari instruksi </body> kemudian copy instruksi 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 dapat memasangnya pada entri baruHTML atau juga dapat 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!


Sumber http://www.websiteedukasi.com/