Membuat Jam Digital Dengan JQuery

Diposkan oleh Hery Prasetyo Monday, April 19, 2010
بسم الله الرحمن الرحيم

Kembali HAPIA Mesir masih ingin berbagi tentang tutorial blog. dan sekarang HAPIA Mesir membuat widget Jam Digital dengan menggunakan JQuery untuk lebih mempercantik tampilan jam digital.

Membuat Jam Digital Dengan JQuery
Banyak yang beranggapan dengan menanamkan JQuery diblog akan memperlambat loading blog tersebut. sebenarnya JQuery adalah script seperti script-script yang lain, jika blog anda menggunakan script terlalu banyak maka akan membuat loading blog lebih lama. tapi dengan menggunakan secukupnya maka itu tidak mengapa untuk mendukung tampilan agar lebih baik.

Berikut adalah contoh Jam Digital menggunakan JQuery :

Membuat Jam Digital

Berikut adalah cara membuat jam digital dengan JQuery :

- Login keBlogger dengan account anda.
- Pergi ke "Tata Letak" kemudian "Edit HTML".
- Sebelumnya pastikan blog anda telah tertanam didalamnya JQuery versi 1.3.2, jika belum silahkan copy JQuery versi 1.3.2 dibawah ini dan letakkan dibawah <head> :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

- Selanjutnya cari code <head> dan letakkan script berikut dibawahnya :

<script src='http://hapiajavascript.googlecode.com/files/jquery.tzineClock.js' type='text/javascript'/>
<script src='http://hapiajavascript.googlecode.com/files/timescript.js' type='text/javascript'/>


- Selanjutnya untuk bagian CSS, silahkan cari code ]]></b:skin> dan letakkan code CSS berikut diatasnya :

#fancyClock{
margin:30px auto;
height:100px;
border:1px solid #111111;
width:300px;
}

.clock{
/* The .clock div. Created dynamically by jQuery */
background-color:#252525;
height:100px;
width:100px;
position:relative;
overflow:hidden;
float:left;
}

.clock .rotate{
/* There are two .rotate divs - one for each half of the background */
position:absolute;
width:100px;
height:100px;
top:0;
left:0;
}

.rotate.right{
display:none;
z-index:11;
}

.clock .bg, .clock .front{
width:50px;
height:100px;
background-color:#252525;
position:absolute;
top:0;
}

.clock .display{
/* Holds the number of seconds, minutes or hours respectfully */
position:absolute;
width:100px;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
z-index:20;
color:#F5F5F5;
font-size:30px;
text-align:center;
top:40px;
left:0;

/* CSS3 text shadow: */
text-shadow:4px 4px 5px #333333;
}

/* The left part of the background: */

.clock .bg.left{ left:0; }

/* Individual styles for each color: */
.orange .bg.left{ background:url(http://3.bp.blogspot.com/_QeR8kbaWhLU/S8vVppsTEFI/AAAAAAAAAoA/0eDlW9TVGQE/s320/bg_orange.png) no-repeat left top; }
.green .bg.left{ background:url(http://3.bp.blogspot.com/_QeR8kbaWhLU/S8vVpXMkVQI/AAAAAAAAAn4/EFTEh0cVU0c/s320/bg_green.png) no-repeat left top; }
.blue .bg.left{ background:url(http://2.bp.blogspot.com/_QeR8kbaWhLU/S8vVpGtkvxI/AAAAAAAAAnw/YLFmOqT42X4/s320/bg_blue.png) no-repeat left top; }

/* The right part of the background: */
.clock .bg.right{ left:50px; }

.orange .bg.right{ background:url(http://3.bp.blogspot.com/_QeR8kbaWhLU/S8vVppsTEFI/AAAAAAAAAoA/0eDlW9TVGQE/s320/bg_orange.png) no-repeat right top; }
.green .bg.right{ background:url(http://3.bp.blogspot.com/_QeR8kbaWhLU/S8vVpXMkVQI/AAAAAAAAAn4/EFTEh0cVU0c/s320/bg_green.png) no-repeat right top; }
.blue .bg.right{ background:url(http://2.bp.blogspot.com/_QeR8kbaWhLU/S8vVpGtkvxI/AAAAAAAAAnw/YLFmOqT42X4/s320/bg_blue.png) no-repeat right top; }


.clock .front.left{
left:0;
z-index:10;
}

- Simpan Template.

Langkah selanjutnya adalah menambah Gadget pada sidebar.

- Pergi ke "Elemen Laman".
- Klik "Tambah Gadget" pada sidebar, pilih "HTML/JavaScript".
- Letakkan code berikut didalamnya :

<div id="fancyClock"></div>

- Simpan.

# Widget Jam Digital ini telah HAPIA Mesir atur untuk dipasang di sidebar dengan ukuran lebar 300 pixel. untuk ukuran yang lain, silahkan atur pada bagian code CSS widget ini. jika anda ingin melihat tutorial aslinya silahkan cek di A Colorful Clock With CSS & jQuery.

Selamat mencoba dan happy blogging.


Jika postingan ini dirasa berguna bagi yang lain. silahkan share untuk berbagi.

Dapatkan Update Terbaru Dari HAPIA Mesir, Masukan Email Anda :

HAPIA Mesir Readers

Bookmark and Share

Direkomendasikan Untuk Dibaca :

27 Responses to Membuat Jam Digital Dengan JQuery

  1. ijinkan mengamankan pertamax. semakin mantap aja tutorialnya sobat

     
  2. Ternyata masih banyak sekali ilmu yg aku tak tahu nih ttg otak-atik blog.
    Makasih bgt infonya..

     
  3. Kemarin aku barusan bersih2 blog, dan beberapa widget barusan aku hilangkan.
    Soalnya blogku loadingnya agak berat gitu sih.

     
  4. heryanto Says:
  5. tambah lagi nih acecoris blog

     
  6. Rock Says:
  7. Wahhh... keren ya sob...
    Aku simpan dulu ya... kapan2 aku coba...

     
  8. selalu ada yang baru disini ...

     
  9. wah..kelihatannya keren nih..saya simpan dulu ya sob..

     
  10. aisyah muna Says:
  11. sip.. ijin di save tutornya ya...

     
  12. aryadevi Says:
  13. ok kawan, memang begitu ya, seperlunya aja.

     
  14. riz Says:
  15. ok sobat keren dan unik widgetnya....

     
  16. Beben Says:
  17. hehehe...nih jam bikin berat nih...hauhauhauha
    keren euy...sip sip sip

     
  18. HAPIA Mesir Says:
  19. Beben@ wkwkwkwkwk...asalkan masangnya jangan disemua tempat...atau seblog penuh dengan jam2....

     
  20. waah yang dicari cari tuh ternyata ada disini oke sob ijin copas dulu nanti saya praktekan

     
  21. bagus jam nya sob..
    sekedar balasan dari komentar mu di blogku...
    kan sudah di jelaskan di akhir postingan bahwa apabila sobat memakai script membuat readmore baik itu secara otomatis maupun tidak maka fitur insert jump break ini tidak akan berfungsi.. jadi terlebih dahulu harus di hapus script readmore tersebut.
    Terima Kasih Atas Kunjugnannya.

     
  22. nice sharing.... gud information~ i like

     
  23. akhatam Says:
  24. Wih kerennn... Memang Bagus bner kalo pake Jquery...

     
  25. jquery oh jquery..
    nice share.. q bookmark dulu y..
    happy blogging..

     
  26. Ega-Priatma Says:
  27. wih mantab.... lagi seneng dengan jquery ya?

     
  28. Yupz emang benar2 ringan nih widget.Thax sob utk infonya

     
  29. Gratis link ke 2 bh PR 4 , Mau ?

     
  30. salam kenal

     
  31. hebat sobat, ijin copy kodenya nanti kapan2 dipraktekin ya mas

    oya silahkan ambil penghargaannya di blog saya buat mas, trimakasih mas..

     
  32. wah jQuery ndak hanya support di blogger aja kan mas.. namun support juga di plafont lain juga kan..

     
  33. Syam Oby Says:
  34. LHOOO,,,,,,,,,,,
    bisa thooo

    hihi blogpot makin mantap aja.... gak mau kalah dengan wordpret dengan plug pluginnya

    sipz kak hapiaa
    makasih yah

     
  35. Rizky2009 Says:
  36. wow keren, tak coba dulu, masih bingun mau aq tempatkan di sebelah mana gt, terima kasih master, ada post baru d blog aq

     
  37. vrman Says:
  38. Kereeen ... , Kepingin Si Nyoba tapi takut Makan Beban loading'a .. :D

    Nice Info aja deh :D

     
  39. denie Says:
  40. alooo soooob?

     

Post a Comment