ScriptUntuk Menggunakan / Memanggil Component dari Class Lain. BLOG MASIH DALM TAHAN PEMBANGUNAN. Popular Posts. Cara membuat kode otomatis dengan java netbeans. Cara mudah membuat animasi jam digital sederhana dengan Flash. teman - teman pasti sering kali melihat animasi jam analog maupun digital, t Artikelini merupakan request dari salah satu member bernama Fajar Israwan. Mas Fajar ini menanyakan bagaimana ide cara membuat script PHP untuk menampilkan arsip artikel berdasarkan bulan dan tahun. Sebagai contoh gambarannya, seperti halnya yang muncul di Wordpress. Pada blog saya ini juga ada, yaitu pada bagian Archives yang terletak di sidebar sebelah MembuatTampilan jqClock (Jam Digital) a. Membuat Cool Clock (Jam Analog) Plugin pertama yang akan kita bahas adalah CoolClock, dari namanya saja sudah bisa ditebak, bahwa plugin ini digunakan untuk menampilkan jam, yang berkonsentrasi membuat jam analog. Adapun plugin coolclock bisa didownload secara gratis di Http:// Dịch Vụ Hỗ Trợ Vay Tiền Nhanh 1s. Berbicara mengenai JavaScript memang tidak ada habisnya. Bahasa pemrograman berbasis client scripting ini sering digunakan untuk membangun sebuah website yang indah bersama dengan pasangannya yaitu HTML dan CSS. Javascript inilah yang membuat tampilan website menjadi dinamis dan seri javascript kali ini kita akan membuat script jam digital realtime. Maksudnya realtime adalah detiknya terus berjalan mengikuti jam normal tanpa refresh halaman. Script ini bisa kamu gunakan untuk memperindah tampilan blog atau website kamu supaya lebih hidup. Langsung saja kita ikuti Download font digitalUntuk mempercantik tampilan jam seperti digital, pertama kita download dulu font digital disini . Setelah download kemudian ekstrak, kita hanya perlu satu font saja. Misalnya saya pilih font . Letakan font tersebut sejajar dengan file HTML yang akan kita Buat file HTMLYang kedua buatlah file html untuk menampilkan jam digital. Isi dengan kode berikut Jam Digital font-face { font-family digital; src url } = date_time'date_time'; function date_timeid { date = new Date; year = month = months = new Array'Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'; d = day = days = new Array'Minggu', 'Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat', 'Sabtu'; h = ifh Berikut adalah contoh jam digital yang sudah saya pasangkan di website. Menambahkan gadget jam di blog merupakan salah satu cara untuk mempercantik tampilan blog kamu. Selain itu, kamu juga bisa mengubah warna dan tampilan jam yang kamu sukai. Jam Dinding Gadget jam dinding memiliki tampilan yang mirip dengan jam dinding pada umumnya. Fitur yang tersedia pada gadget jam dinding ini adalah menampilkan waktu, mengubah warna jam, mengubah zona waktu, serta mengubah lebar dan panjang jam. obj=new Object; Hasilnya akan menjadi seperti di bawah ini. Untuk zona waktunya, kamu bisa menggantinya dengan zona waktu yang kamu inginkan. Caranya adalah dengan mengganti tulisan "Surabaya" dengan nama kota yang kamu inginkan, misalnya Indonesia_Ambon, Indonesia_Banjarmasin, Indonesia_Denpasar, Indonesia_Jakarta, Indonesia_Jayapura, Indonesia_Kupang, Indonesia_Makassar, Indonesia_Medan, atau Surabaya. Untuk warna, kamu bisa menggantinya dengan warna yang kamu inginkan. Caranya adalah dengan mengganti tulisan "red" dengan kode warna berikut. orange untuk mengubah warna menjadi Jingga, ltblue untuk mengubah warna menjadi Biru Muda, yellow untuk mengubah warna menjadi Kuning, Black untuk mengubah warna menjadi Hitam, red untuk mengubah warna menjadi Merah, green untuk mengubah warna menjadi Hijau, purple untuk mengubah warna menjadi Ungu, dkblue untuk mengubah warna menjadi Biru Tua, magenta untuk mengubah warna menjadi Ungu Muda, silver untuk mengubah warna menjadi Perak. Jam Digital Gadget jam digital berbeda dengan gadget jam dinding. Gadget ini memiliki tampilan jam angka. Fitur yang tersedia pada jam digital ini tidak lengkap, karena hanya dapat menampilkan waktu saja. Hasilnya akan menjadi seperti di bawah ini. Untuk cara pemasangannya, kamu bisa melihat tutorialnya pada postingan saya yang sebelumnya Cara Menambahkan Gadget HTML di Blog. Jangan lupa klik tombol sosial media di bawah untuk membagikan artikel ini. Selamat mencoba. Cara Membuat Widget Jam Digital di Blog - Pernah berfikir bagaimana menampilkan waktu pada blog? Di artikel kali ini kita akan membahas cara membuat widget jam di blog baik blogger atau wordpress. Menampilkan jam pada sebuah blog merupakan langkah yang bisa digunakan untuk mempercantik blog, untuk menggunakannya ada banyak situs penyedia widget jam yang bisa kamu gunakan secara gratis. Meski begitu terkadang widget dari pihak ketiga susah untuk di custom sesuai dengan tampilan yang kita inginkan, karena itu kali ini kita akan membuat jam digital menggunakan kode sumber tebuka Bagaimana caranya? Table of Contents Membuat Widget Jam Digital di Blog Menggunakan Sebelum ke tutorial kamu bisa melihat tampilan demo jam digital untuk blog di bawah ini {{ date }} {{ time }} DIGITAL CLOCK with Widget Jam Digital Blogger Menggunakan Buka Dashboard Blogger Pilih Menu Tata Letak/Layout Klik TAMBAH GADGET Pilih HTML/Javascript Salin kode dibawah ini kemudian paste di bagian konten Klik SIMPAN clock {background fffdfc;height 100%;width 100%;color 3c4043;text-align center;margin 0;padding 25px;border-radius 22px;line-height 1px solid rgba155,155,155, clock .time {letter-spacing 55px;padding 0px;background rgba255,255,255,.9;border-radius 10px;border 1px solid rgba0,0,0, 1;positionrelative;} clock .date {letter-spacing 20px;padding 10px;} clock .text {letter-spacing 12px;padding 25px;z-index 1;positionrelative;} HTML98 {positionrelative;overflowhidden} HTML98after {content'';displayblock;positionabsolute;bottom0;right0;width120px;height120px;background-imagelinear-gradient50deg,ff4169,8b41f6;background-repeatno-repeat;border-radius120px 0 22px;transitionopacity .3s;opacity1} HTML98before {content'';displayblock;positionabsolute;bottom0;right0;width120px;height120px;background-imagelinear-gradient230deg,ff4169,8b41f6;background-repeatno-repeat;border-radius120px 0 22px;transitionopacity .3s;opacity1} HTML98hoverafter {opacity0}HTML98hoverbefore{opacity1} {{ date }} {{ time }} DIGITAL CLOCK with var clock = new Vue{ el 'clock', data { time '', date '' } }; var week = ['MINGGU', 'SENIN', 'SELASA', 'RABU', 'KAMIS', 'JUMAAT', 'SABTU']; var timerID = setIntervalupdateTime, 1000; updateTime; function updateTime { var cd = new Date; = zeroPadding 2 + '' + zeroPadding 2 + '' + zeroPadding 2; = week[ + ',' + zeroPadding 2 + '-' + zeroPadding + 1, 2 + '-' + zeroPadding 4; }; function zeroPaddingnum, digit { var zero = ''; for var i = 0; i Edit kode CSS sesuai dengan tampilan Blog kamu agar lebih menarik dan Sesuaikan Text yang di beri tanda biru sesuai keinginan Widget Jam Digital Wordpress Menggunakan Buka Dashboard Wordpress Pilih Appearance > Widgets Drag widget Custom HTML yang dipilih ke sidebar/ footer bagian kanan Salin kode dibawah ini kemudian paste di bagian konten Klik SIMPAN clock {background fffdfc;height 100%;width 100%;color 3c4043;text-align center;margin 0;padding 25px;border-radius 22px;line-height 1px solid rgba155,155,155, clock .time {letter-spacing 55px;padding 0px;background rgba255,255,255,.9;border-radius 10px;border 1px solid rgba0,0,0, 1;positionrelative;} clock .date {letter-spacing 20px;padding 10px;} clock .text {letter-spacing 12px;padding 25px;z-index 1;positionrelative;} HTML98 {positionrelative;overflowhidden} HTML98after {content'';displayblock;positionabsolute;bottom0;right0;width120px;height120px;background-imagelinear-gradient50deg,ff4169,8b41f6;background-repeatno-repeat;border-radius120px 0 22px;transitionopacity .3s;opacity1} HTML98before {content'';displayblock;positionabsolute;bottom0;right0;width120px;height120px;background-imagelinear-gradient230deg,ff4169,8b41f6;background-repeatno-repeat;border-radius120px 0 22px;transitionopacity .3s;opacity1} HTML98hoverafter {opacity0}HTML98hoverbefore{opacity1} {{ date }} {{ time }} DIGITAL CLOCK with var clock = new Vue{ el 'clock', data { time '', date '' } }; var week = ['MINGGU', 'SENIN', 'SELASA', 'RABU', 'KAMIS', 'JUMAAT', 'SABTU']; var timerID = setIntervalupdateTime, 1000; updateTime; function updateTime { var cd = new Date; = zeroPadding 2 + '' + zeroPadding 2 + '' + zeroPadding 2; = week[ + ',' + zeroPadding 2 + '-' + zeroPadding + 1, 2 + '-' + zeroPadding 4; }; function zeroPaddingnum, digit { var zero = ''; for var i = 0; i Edit kode CSS sesuai dengan tampilan Blog kamu agar lebih menarik dan Sesuaikan Text yang di beri tanda biru sesuai keinginan Penutup Nah itu tadi Cara Membuat Widget Jam Digital di Blogger dan Wordpress. Jika artikel ini bermanfaat bisa kamu share dan rekomendasikan ke teman-teman yang membutuhkan, jika ada kendala kamu bisa bertanya melalui kolom komentar.

script jam digital untuk blog