Cara Membuat Widget Jam Digital Analog Blogger
Widget Jam Analog Blogger dengan gambar animasi yang lucu dan imut. Jam analog ini menggunakan tampilan unik dan memiliki fitur reminder yang menarik. Cocok sebagai penghias halaman utama blog anda. Fitur reminder ini tersemat di dalam tampilan jam sehingga tidak menggangu fungsi utama tampilan jam analog. Sebenarnya widget jam analog ini merupakan gabungan antara analog dan digital, jadi tidak murni menggunakan tampilan jam analog. Adapun fungsi tampilan digital adalah bertujuan untuk memaksimalkan pergerakan animasi gambar detik sehingga tampilan digital digunakan untuk memudahkan fungsi dari tampilan widget jam ini.
Pemasangan widget Jam Analog Super Unik ini cukup mudah dan ga pake ribet tinggal copy-paste kode pada kotak widget anda atau tekan tombol Add to Blogger untuk mempercepat pemasangan widget. Sebagai contoh dari widget jam analog ini seperti yang terlihat di bawah ini. Gimana guys? keren dan unik khan... Pada contoh, tampilan dari widget ini menggunakan warna tosca dan gambar pada jarum detik menggunakan gambar kartun mickey mouse. Widget ini menggunakan standar kode CSS3 dan Javascript JQuery sehingga kompatible dengan semua browser modern.
Tampilan dari widget ini untuk warna dan gambar bisa diubah sesuaikan dengan mudah sehingga tampilan widget jam analog ini bisa sesuai dengan selera anda, jadi hasil akhir dari widget ini bisa tampil maksimal di halaman blog anda.
Pemasangan widget Jam Analog Super Unik ini cukup mudah dan ga pake ribet tinggal copy-paste kode pada kotak widget anda atau tekan tombol Add to Blogger untuk mempercepat pemasangan widget. Sebagai contoh dari widget jam analog ini seperti yang terlihat di bawah ini. Gimana guys? keren dan unik khan... Pada contoh, tampilan dari widget ini menggunakan warna tosca dan gambar pada jarum detik menggunakan gambar kartun mickey mouse. Widget ini menggunakan standar kode CSS3 dan Javascript JQuery sehingga kompatible dengan semua browser modern.
Tampilan dari widget ini untuk warna dan gambar bisa diubah sesuaikan dengan mudah sehingga tampilan widget jam analog ini bisa sesuai dengan selera anda, jadi hasil akhir dari widget ini bisa tampil maksimal di halaman blog anda.
Selain mudah widget ini juga memiliki beberapa parameter penyesuaian untuk menyesuaikan tampilan widget dengan tema blog yang anda pasang. Buat yang tertarik dengan widget Jam Analog Super Unik ini silakan di baca tutorial pemasangan pada bab selanjutnya.
Informasi Singkat
Jam tangan atau arloji adalah penunjuk waktu yang dipakai di pergelangan tangan manusia. Jam tangan pertama kali diperkenalkan pada abad ke-16. Pada saat itu semua jam tangan dan alat penunjuk waktu lainnya menggunakan mesin penggerak mekanik manual (hand-winding). Jam tangan tertua yang diketahui adalah jam tangan milik Ratu Inggris Elizabeth I yang dibuat oleh Robert Dudley pada tahun 1571. Dari abad 16 hingga awal abad 20, jam tangan hanya digunakan oleh wanita, sedangkan pria menggunakan jam saku.
Dominasi jam tangan bermesin mekanik selama berabad-abad dengan segala keindahan, kerumitan, dan kemewahannya, akhirnya sedikit terganggu dengan hadirnya jam tangan bermesin elektrik yang pertama kali diperkenalkan pada tahun 1957 di Lancaster, Pennsylvania, Amerika Serikat oleh Hamilton Watch Company. Penelitian arloji elektrik tersebut sebenarnya telah dimulai sejak tahun 1946.
Eksistensi jam tangan elektrik ternyata tidak bertahan lama, hingga Seiko dari Jepang memperkenalkan jam tangan bermesin penggerak quartz (baterai) pertama di dunia, Seiko Astron 35SQ pada tahun 1969. Kelahiran jam tangan quartz ini diakui oleh IEEE (Institute of Electrical and Electronics Engineers) untuk masuk kedalam daftar tonggak sejarah perkembangan ilmu teknik elektro dunia. Jam tangan jenis ini jugalah yang kemudian benar-benar merusak hegemoni industri jam tangan mekanik Swiss. Jam tangan quartz mendominasi pasar, digunakan oleh merk-merk lain, dan menjadi awal perubahan industri jam secara global. Jam tangan yang awalnya diproduksi dengan jumlah yang terbatas dan eksklusif, berubah menjadi produksi massal dengan harga jual yang lebih terjangkau.
Sumber : Wikipedia
Jam tangan atau arloji adalah penunjuk waktu yang dipakai di pergelangan tangan manusia. Jam tangan pertama kali diperkenalkan pada abad ke-16. Pada saat itu semua jam tangan dan alat penunjuk waktu lainnya menggunakan mesin penggerak mekanik manual (hand-winding). Jam tangan tertua yang diketahui adalah jam tangan milik Ratu Inggris Elizabeth I yang dibuat oleh Robert Dudley pada tahun 1571. Dari abad 16 hingga awal abad 20, jam tangan hanya digunakan oleh wanita, sedangkan pria menggunakan jam saku.
Dominasi jam tangan bermesin mekanik selama berabad-abad dengan segala keindahan, kerumitan, dan kemewahannya, akhirnya sedikit terganggu dengan hadirnya jam tangan bermesin elektrik yang pertama kali diperkenalkan pada tahun 1957 di Lancaster, Pennsylvania, Amerika Serikat oleh Hamilton Watch Company. Penelitian arloji elektrik tersebut sebenarnya telah dimulai sejak tahun 1946.
Eksistensi jam tangan elektrik ternyata tidak bertahan lama, hingga Seiko dari Jepang memperkenalkan jam tangan bermesin penggerak quartz (baterai) pertama di dunia, Seiko Astron 35SQ pada tahun 1969. Kelahiran jam tangan quartz ini diakui oleh IEEE (Institute of Electrical and Electronics Engineers) untuk masuk kedalam daftar tonggak sejarah perkembangan ilmu teknik elektro dunia. Jam tangan jenis ini jugalah yang kemudian benar-benar merusak hegemoni industri jam tangan mekanik Swiss. Jam tangan quartz mendominasi pasar, digunakan oleh merk-merk lain, dan menjadi awal perubahan industri jam secara global. Jam tangan yang awalnya diproduksi dengan jumlah yang terbatas dan eksklusif, berubah menjadi produksi massal dengan harga jual yang lebih terjangkau.
Sumber : Wikipedia
DAFTAR ISI
- Cara Pemasangan Widget Pada Blogger
- Beberapa Pilihan Gambar Jarum Jam
- Modifikasi Tampilan Jam Analog
#1 Cara Pemasangan Widget Pada Blogger
PERINGATAN
Perhatian ! sebelum melakukan perubahan pada kode HTML template blog, sebaiknya Anda melakukan backup kode HTML template blog terlebih dahulu, dikarenakan untuk menghindari hal-hal yang tidak diinginkan. Apabila terjadi kesalahan prosedur dalam melakukan perubahan kode HTML template blog, maka Anda dapat melakukan proses perbaikan dengan cepat dan mudah.
- Login ke blogspot untuk masuk ke dashboard blog.
- Pilih Tata Letak kemudian pilih Tambahkan Gadget.
- Pilih HTML/Javascript
- Taruh kode pada kotak widget, setelah selesai tekan tombol Save
<div id="analogbox"></div>
<script type="text/javascript">
/* Default Setting */
var cfAnalogBoxDim="250";
var cfVisibleHour=false;
var cfVisibleMin=false;
var cfVisibleSec=true;
/* Initial Image */
var cfImgAnalogBox="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkxdXlHCNtgf813DRp0PRB7klOxnHyrHcvNj94NOA77hd6F4PmmCyXMv_aHGE8mq_-JqGJPDeI-DgHD4u9svKTMuhAFl_jc-r3bjaLJJJ_x7y64Za2Meh1FGyROVg2kFllQ3spZrN_C8U/s1600/pixel-bg1.gif";
var cfImgAnalogClock="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaVv5OB2qdw75bb6zIJqMR8LLC3R7FoknVApyjaA3lVeE7aD7gN3v6WaYRegZ_PAAhAs-bi83QbyDPJ0O7Zyen4SkuYNAr3FXWeKwXa_KwsFkOOa_CdFRESbqF_2rAWuGsIpLOcQc1qDY/s1600/clock.png";
var cfDImgAnalogHour="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHeTLS1DnOKFZQxgc2V83FgZJeANEy-6Lv-e5pwZ6vxZzpWxunEneugSsQRAyyPou_5mJXGy-pNG6S9ThnWOx2BpjbS6jeaMkz37k9HMBX_zUafm6I-jH9SB8FCjhBu4aa6eaUyrUZeHM/s1600/hour.png";
var cfDImgAnalogMin="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiz8ht_t27siWgaBD5VpDz4fT35DnWtgs2goiGkOzjbfPtGfPixHP9MBQvrR4OjzU9FTziNlcGujMfWLARanXzgdoiwl_ZH2E8My3aDyZyF5OdX8C1V9AY6yJaZq5WzIfxmn3kK6kZGAoI/s1600/min.png";
var cfDImgAnalogSec="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1ZN3pdVyp2lULem5Us0TRR37NW6acj2ooEWTSiqz3mvLpi5mZOZs87OKtxLdwvM1x8wXGAldzrB_QBFoK-wzMvtrA-ivtoplE45WK5T-ma8q6FuBnhpsLIrNE3tgNJAOh_5jow5TySxg/s1600/mickeymouse.png";
</script>
<link href="https://fonts.googleapis.com/css?family=Orbitron:400,700&display=swap" rel="stylesheet"/>
<link href="https://codeflareblogspot.github.io/code/jamAnalogStyle.css" rel="stylesheet"/>
<script src="https://codeflareblogspot.github.io/code/jamAnalogScript.js"></script>
KETERANGAN
# Pada kode :
var cfAnalogBoxDim="250";
Merupakan variabel untuk ukuran dimensi widget jam analog dalam pixel, angka 250 berarti memiliki dimensi lebar sebesar 250px. Selain menggunakan angka untuk menentukan lebar dimensi, anda juga bisa menggunakan pengatur dimensi otomatis dengan mengganti angka 250 dengan nilai "auto". Lebar dimensi minimum sebesar 200px dan dimensi maksimum sebesar 350px.
# Pada kode :
var cfVisibleHour=false;
Merupakan variabel untuk penunjuk jam apakah ditampilkan atau tidak, jika bernilai false berarti penunjuk jarum jam tidak ditampilkan namun jika bernilai true maka juram penunjuk jam akan ditampilkan.
# Pada kode :
var cfVisibleMin=false;
Merupakan variabel untuk penunjuk menit apakah ditampilkan atau tidak, jika bernilai false berarti penunjuk jarum menit tidak ditampilkan namun jika bernilai true maka juram penunjuk menit akan ditampilkan.
# Pada kode :
var cfVisibleSec=true;
Merupakan variabel untuk penunjuk detik apakah ditampilkan atau tidak, jika bernilai false berarti penunjuk jarum detik tidak ditampilkan namun jika bernilai true maka juram penunjuk detik akan ditampilkan.
# Pada kode :
var cfImgAnalogBox="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkxdXlHCNtgf813DRp0PRB7klOxnHyrHcvNj94NOA77hd6F4PmmCyXMv_aHGE8mq_-JqGJPDeI-DgHD4u9svKTMuhAFl_jc-r3bjaLJJJ_x7y64Za2Meh1FGyROVg2kFllQ3spZrN_C8U/s1600/pixel-bg1.gif";
Merupakan variabel yang digunakan untuk lokasi URL gambar latar belakang widget jam analog.
# Pada kode :
var cfImgAnalogClock="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaVv5OB2qdw75bb6zIJqMR8LLC3R7FoknVApyjaA3lVeE7aD7gN3v6WaYRegZ_PAAhAs-bi83QbyDPJ0O7Zyen4SkuYNAr3FXWeKwXa_KwsFkOOa_CdFRESbqF_2rAWuGsIpLOcQc1qDY/s1600/clock.png";
Merupakan variabel yang digunakan untuk lokasi URL gambar lingkaran jam dari widget jam analog.
# Pada kode :
var cfDImgAnalogHour="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHeTLS1DnOKFZQxgc2V83FgZJeANEy-6Lv-e5pwZ6vxZzpWxunEneugSsQRAyyPou_5mJXGy-pNG6S9ThnWOx2BpjbS6jeaMkz37k9HMBX_zUafm6I-jH9SB8FCjhBu4aa6eaUyrUZeHM/s1600/hour.png";
Merupakan variabel yang digunakan untuk lokasi URL gambar jarum penunjuk jam dari widget jam analog.
# Pada kode :
var cfDImgAnalogMin="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiz8ht_t27siWgaBD5VpDz4fT35DnWtgs2goiGkOzjbfPtGfPixHP9MBQvrR4OjzU9FTziNlcGujMfWLARanXzgdoiwl_ZH2E8My3aDyZyF5OdX8C1V9AY6yJaZq5WzIfxmn3kK6kZGAoI/s1600/min.png";
Merupakan variabel yang digunakan untuk lokasi URL gambar jarum penunjuk menit dari widget jam analog.
# Pada kode :
var cfDImgAnalogSec="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1ZN3pdVyp2lULem5Us0TRR37NW6acj2ooEWTSiqz3mvLpi5mZOZs87OKtxLdwvM1x8wXGAldzrB_QBFoK-wzMvtrA-ivtoplE45WK5T-ma8q6FuBnhpsLIrNE3tgNJAOh_5jow5TySxg/s1600/mickeymouse.png";
Merupakan variabel yang digunakan untuk lokasi URL gambar jarum penunjuk detik dari widget jam analog.
#2 Beberapa Pilihan Gambar Jarum Jam
Selain tampilan gambar default yang digunakan pada contoh di atas, berikut tersedia beberapa contoh pilihan gambar yang bisa anda gunakan untuk mengganti tampilan default dari widget jam analog ini.
Gambar Latar Belakang Jam Analog
Gambar Latar Belakang Jam Analog
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikUMfKwkmjAqVNNJzuT7gco60w8TfGfAod6j513nw47vThyzZ9l6tFfYxgC6DvtWuBXnT5vpyVOmlfjk3g8wRKXxy8YtLneFhfpeR-042f3OcGWUOUwTL_3Ik0vENrvp-IYj9d30g03XU/s1600/pixel-bg2.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifGYKoyjTnKctLaYaFuW5RcgWphesOAhkBtvMnSj4HZc5d6oebpqt5Ut_ka6cKVhnYQQx8hwv0DWuCyz9MGbtD9VLcVUMHKFIARLA3lpsKcLrbRb2p2FGY8XVOCHZueUedsTq7iohyCtY/s1600/castle.jpg
Gambar Penunjuk Detik Jam Analog
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizkyjfYSoLSIOWJ0Jbms-ekTJPzYD-fGMpfENc0byo6m4G46fDOObqlJ5ZXV76Q9nA4-Cmkkrjc0Pw3ytAfRDvclO_zpIT0tBI16ad3Np-3R6jpzuc28fetJR7nuUEISDqGT836TrbVss/s1600/zeldasword.png
Selain gambar di atas anda juga bisa menggunakan gambar sendiri, silakan anda rubah variabel URL gambar dengan URL gambar anda dan pastikan menggunakan protokol https supaya gambar tidak diblokir oleh browser.
#3 Modifikasi Tampilan Jam Analog
Tampilan default widget jam analog ini menggunakan warna hijau tosca jika anda ingin mengganti warna tersebut silakan anda rubah kode CSS dari widget jam analog ini. Berikut cara merubah kode CSS dari widget jam analog ini.
#notifyAnalogClock{
width:300px;
position:fixed;
top:10px;left:calc(50% - 150px);
border:5px ridge #53d4da;
border-radius:20px;
padding:5px;
text-align:center;
background-color:#ebebeb;
z-index:+9999999999999999999999999999999999999999999999999999999999999999999999999999999999999999;
}
#notifyTextAnalogClock{font-size:30px;}
#setTimerClock{
text-align:left;
width:100%;
box-sizing:border-box;
padding:0 5px;
}
#setTimerClock fieldset{border-radius:4px;border:1px solid #fff;width:100%;box-sizing:border-box;padding:5px;}
#setTimerClock legend{margin-left:10px;padding:0 5px;}
#setTimerClock input[type=date]{width:calc(100% - 5px);font-size:16px;padding:0;height:28px;}
#setTimerClock input[type=time]{font-size:16px;padding:0;height:28px;}
#setTimerClock input[type=text]{width:calc(100% - 5px);font-size:16px;height:28px;}
#setTimerClock button{font-size:14px;padding:5px 10px;border-radius:4px;}
#notifyAnalogClockImg{max-height:200px;}
#addtimer{
float:left;
padding-left:20px;
font-size:16px;
cursor:pointer;
transition:color .5s ease;
}
#addtimer:hover{color:blue;}
#digitalclock{
position:relative;
bottom:0;
margin:0;
font-family: 'Orbitron', sans-serif;
font-size:30px;
font-weight:700;
border-radius:0 0 15px 15px;
padding-bottom:5px;
}
#analogbox{
background-color:#53d4da;
border:5px ridge #a9e9eb;
position:relative;
border-radius:20px;
padding-top:5px;
top:0;
display:inline-block;
background-position:top center;
background-repeat:no-repeat;
}
#analogclock{
border-bottom:5px ridge #a9e9eb;
width:200px;
height:200px;
display:inline-block;
list-style:none;
background-color:transparent;
background-repeat:no-repeat;
background-position:center center;
background-size:100% 100%;
}
#analoghour,#analogmin,#analogsec{
position:absolute;
display:inline-block;
background-repeat:no-repeat;
}
#analogsec{z-index:1;}
#analogmin{z-index:2;}
#analoghour{z-index:3;}
#ACAttribute{padding-top:5px;text-align:center;font-size:12px;}
.ACBtnElement{text-align:center;border-top:1px solid #fff;padding-top:5px;margin-top:5px;}
.ACBtnElement button{margin-right:5px;padding:2px 20px;font-size:14px;}
width:300px;
position:fixed;
top:10px;left:calc(50% - 150px);
border:5px ridge #53d4da;
border-radius:20px;
padding:5px;
text-align:center;
background-color:#ebebeb;
z-index:+9999999999999999999999999999999999999999999999999999999999999999999999999999999999999999;
}
#notifyTextAnalogClock{font-size:30px;}
#setTimerClock{
text-align:left;
width:100%;
box-sizing:border-box;
padding:0 5px;
}
#setTimerClock fieldset{border-radius:4px;border:1px solid #fff;width:100%;box-sizing:border-box;padding:5px;}
#setTimerClock legend{margin-left:10px;padding:0 5px;}
#setTimerClock input[type=date]{width:calc(100% - 5px);font-size:16px;padding:0;height:28px;}
#setTimerClock input[type=time]{font-size:16px;padding:0;height:28px;}
#setTimerClock input[type=text]{width:calc(100% - 5px);font-size:16px;height:28px;}
#setTimerClock button{font-size:14px;padding:5px 10px;border-radius:4px;}
#notifyAnalogClockImg{max-height:200px;}
#addtimer{
float:left;
padding-left:20px;
font-size:16px;
cursor:pointer;
transition:color .5s ease;
}
#addtimer:hover{color:blue;}
#digitalclock{
position:relative;
bottom:0;
margin:0;
font-family: 'Orbitron', sans-serif;
font-size:30px;
font-weight:700;
border-radius:0 0 15px 15px;
padding-bottom:5px;
}
#analogbox{
background-color:#53d4da;
border:5px ridge #a9e9eb;
position:relative;
border-radius:20px;
padding-top:5px;
top:0;
display:inline-block;
background-position:top center;
background-repeat:no-repeat;
}
#analogclock{
border-bottom:5px ridge #a9e9eb;
width:200px;
height:200px;
display:inline-block;
list-style:none;
background-color:transparent;
background-repeat:no-repeat;
background-position:center center;
background-size:100% 100%;
}
#analoghour,#analogmin,#analogsec{
position:absolute;
display:inline-block;
background-repeat:no-repeat;
}
#analogsec{z-index:1;}
#analogmin{z-index:2;}
#analoghour{z-index:3;}
#ACAttribute{padding-top:5px;text-align:center;font-size:12px;}
.ACBtnElement{text-align:center;border-top:1px solid #fff;padding-top:5px;margin-top:5px;}
.ACBtnElement button{margin-right:5px;padding:2px 20px;font-size:14px;}
KETERANGAN
Pada penggalan kode :
...
#analogbox{
background-color:#53d4da;
border:5px ridge #a9e9eb;
...
Merupakan kode untuk warna latar belakang dan kode border yang digunakan, jika anda ingin merubah warna latar dan tipe border silakan anda modifikasi kode CSS tersebut.
Setelah selesai memodifikasi kode CSS tersebut silakan anda gunakan kode pemasangan widget di bawah ini. Jangan lupa untuk mengganti kode widget jam analog ini jika anda sudah memasangnya seperti yang ada pada bab pertama.
Pada penggalan kode :
...
#analogbox{
background-color:#53d4da;
border:5px ridge #a9e9eb;
...
Merupakan kode untuk warna latar belakang dan kode border yang digunakan, jika anda ingin merubah warna latar dan tipe border silakan anda modifikasi kode CSS tersebut.
Setelah selesai memodifikasi kode CSS tersebut silakan anda gunakan kode pemasangan widget di bawah ini. Jangan lupa untuk mengganti kode widget jam analog ini jika anda sudah memasangnya seperti yang ada pada bab pertama.
<div id="analogbox"></div>
<style type="text/css">
#notifyAnalogClock{
width:300px;
position:fixed;
top:10px;left:calc(50% - 150px);
border:5px ridge #53d4da;
border-radius:20px;
padding:5px;
text-align:center;
background-color:#ebebeb;
z-index:+9999999999999999999999999999999999999999999999999999999999999999999999999999999999999999;
}
#notifyTextAnalogClock{font-size:30px;}
#setTimerClock{
text-align:left;
width:100%;
box-sizing:border-box;
padding:0 5px;
}
#setTimerClock fieldset{border-radius:4px;border:1px solid #fff;width:100%;box-sizing:border-box;padding:5px;}
#setTimerClock legend{margin-left:10px;padding:0 5px;}
#setTimerClock input[type=date]{width:calc(100% - 5px);font-size:16px;padding:0;height:28px;}
#setTimerClock input[type=time]{font-size:16px;padding:0;height:28px;}
#setTimerClock input[type=text]{width:calc(100% - 5px);font-size:16px;height:28px;}
#setTimerClock button{font-size:14px;padding:5px 10px;border-radius:4px;}
#notifyAnalogClockImg{max-height:200px;}
#addtimer{
float:left;
padding-left:20px;
font-size:16px;
cursor:pointer;
transition:color .5s ease;
}
#addtimer:hover{color:blue;}
#digitalclock{
position:relative;
bottom:0;
margin:0;
font-family: 'Orbitron', sans-serif;
font-size:30px;
font-weight:700;
border-radius:0 0 15px 15px;
padding-bottom:5px;
}
#analogbox{
background-color:#53d4da;
border:5px ridge #a9e9eb;
position:relative;
border-radius:20px;
padding-top:5px;
top:0;
display:inline-block;
background-position:top center;
background-repeat:no-repeat;
}
#analogclock{
border-bottom:5px ridge #a9e9eb;
width:200px;
height:200px;
display:inline-block;
list-style:none;
background-color:transparent;
background-repeat:no-repeat;
background-position:center center;
background-size:100% 100%;
}
#analoghour,#analogmin,#analogsec{
position:absolute;
display:inline-block;
background-repeat:no-repeat;
}
#analogsec{z-index:1;}
#analogmin{z-index:2;}
#analoghour{z-index:3;}
#ACAttribute{padding-top:5px;text-align:center;font-size:12px;}
.ACBtnElement{text-align:center;border-top:1px solid #fff;padding-top:5px;margin-top:5px;}
.ACBtnElement button{margin-right:5px;padding:2px 20px;font-size:14px;}
</style>
<script type="text/javascript">
/* Default Setting */
var cfAnalogBoxDim="250";
var cfVisibleHour=false;
var cfVisibleMin=false;
var cfVisibleSec=true;
/* Initial Image */
var cfImgAnalogBox="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkxdXlHCNtgf813DRp0PRB7klOxnHyrHcvNj94NOA77hd6F4PmmCyXMv_aHGE8mq_-JqGJPDeI-DgHD4u9svKTMuhAFl_jc-r3bjaLJJJ_x7y64Za2Meh1FGyROVg2kFllQ3spZrN_C8U/s1600/pixel-bg1.gif";
var cfImgAnalogClock="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaVv5OB2qdw75bb6zIJqMR8LLC3R7FoknVApyjaA3lVeE7aD7gN3v6WaYRegZ_PAAhAs-bi83QbyDPJ0O7Zyen4SkuYNAr3FXWeKwXa_KwsFkOOa_CdFRESbqF_2rAWuGsIpLOcQc1qDY/s1600/clock.png";
var cfDImgAnalogHour="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHeTLS1DnOKFZQxgc2V83FgZJeANEy-6Lv-e5pwZ6vxZzpWxunEneugSsQRAyyPou_5mJXGy-pNG6S9ThnWOx2BpjbS6jeaMkz37k9HMBX_zUafm6I-jH9SB8FCjhBu4aa6eaUyrUZeHM/s1600/hour.png";
var cfDImgAnalogMin="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiz8ht_t27siWgaBD5VpDz4fT35DnWtgs2goiGkOzjbfPtGfPixHP9MBQvrR4OjzU9FTziNlcGujMfWLARanXzgdoiwl_ZH2E8My3aDyZyF5OdX8C1V9AY6yJaZq5WzIfxmn3kK6kZGAoI/s1600/min.png";
var cfDImgAnalogSec="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1ZN3pdVyp2lULem5Us0TRR37NW6acj2ooEWTSiqz3mvLpi5mZOZs87OKtxLdwvM1x8wXGAldzrB_QBFoK-wzMvtrA-ivtoplE45WK5T-ma8q6FuBnhpsLIrNE3tgNJAOh_5jow5TySxg/s1600/mickeymouse.png";
</script>
<link href="https://fonts.googleapis.com/css?family=Orbitron:400,700&display=swap" rel="stylesheet"/>
<script src="https://codeflareblogspot.github.io/code/jamAnalogScript.js"></script>
<style type="text/css">
#notifyAnalogClock{
width:300px;
position:fixed;
top:10px;left:calc(50% - 150px);
border:5px ridge #53d4da;
border-radius:20px;
padding:5px;
text-align:center;
background-color:#ebebeb;
z-index:+9999999999999999999999999999999999999999999999999999999999999999999999999999999999999999;
}
#notifyTextAnalogClock{font-size:30px;}
#setTimerClock{
text-align:left;
width:100%;
box-sizing:border-box;
padding:0 5px;
}
#setTimerClock fieldset{border-radius:4px;border:1px solid #fff;width:100%;box-sizing:border-box;padding:5px;}
#setTimerClock legend{margin-left:10px;padding:0 5px;}
#setTimerClock input[type=date]{width:calc(100% - 5px);font-size:16px;padding:0;height:28px;}
#setTimerClock input[type=time]{font-size:16px;padding:0;height:28px;}
#setTimerClock input[type=text]{width:calc(100% - 5px);font-size:16px;height:28px;}
#setTimerClock button{font-size:14px;padding:5px 10px;border-radius:4px;}
#notifyAnalogClockImg{max-height:200px;}
#addtimer{
float:left;
padding-left:20px;
font-size:16px;
cursor:pointer;
transition:color .5s ease;
}
#addtimer:hover{color:blue;}
#digitalclock{
position:relative;
bottom:0;
margin:0;
font-family: 'Orbitron', sans-serif;
font-size:30px;
font-weight:700;
border-radius:0 0 15px 15px;
padding-bottom:5px;
}
#analogbox{
background-color:#53d4da;
border:5px ridge #a9e9eb;
position:relative;
border-radius:20px;
padding-top:5px;
top:0;
display:inline-block;
background-position:top center;
background-repeat:no-repeat;
}
#analogclock{
border-bottom:5px ridge #a9e9eb;
width:200px;
height:200px;
display:inline-block;
list-style:none;
background-color:transparent;
background-repeat:no-repeat;
background-position:center center;
background-size:100% 100%;
}
#analoghour,#analogmin,#analogsec{
position:absolute;
display:inline-block;
background-repeat:no-repeat;
}
#analogsec{z-index:1;}
#analogmin{z-index:2;}
#analoghour{z-index:3;}
#ACAttribute{padding-top:5px;text-align:center;font-size:12px;}
.ACBtnElement{text-align:center;border-top:1px solid #fff;padding-top:5px;margin-top:5px;}
.ACBtnElement button{margin-right:5px;padding:2px 20px;font-size:14px;}
</style>
<script type="text/javascript">
/* Default Setting */
var cfAnalogBoxDim="250";
var cfVisibleHour=false;
var cfVisibleMin=false;
var cfVisibleSec=true;
/* Initial Image */
var cfImgAnalogBox="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkxdXlHCNtgf813DRp0PRB7klOxnHyrHcvNj94NOA77hd6F4PmmCyXMv_aHGE8mq_-JqGJPDeI-DgHD4u9svKTMuhAFl_jc-r3bjaLJJJ_x7y64Za2Meh1FGyROVg2kFllQ3spZrN_C8U/s1600/pixel-bg1.gif";
var cfImgAnalogClock="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaVv5OB2qdw75bb6zIJqMR8LLC3R7FoknVApyjaA3lVeE7aD7gN3v6WaYRegZ_PAAhAs-bi83QbyDPJ0O7Zyen4SkuYNAr3FXWeKwXa_KwsFkOOa_CdFRESbqF_2rAWuGsIpLOcQc1qDY/s1600/clock.png";
var cfDImgAnalogHour="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHeTLS1DnOKFZQxgc2V83FgZJeANEy-6Lv-e5pwZ6vxZzpWxunEneugSsQRAyyPou_5mJXGy-pNG6S9ThnWOx2BpjbS6jeaMkz37k9HMBX_zUafm6I-jH9SB8FCjhBu4aa6eaUyrUZeHM/s1600/hour.png";
var cfDImgAnalogMin="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiz8ht_t27siWgaBD5VpDz4fT35DnWtgs2goiGkOzjbfPtGfPixHP9MBQvrR4OjzU9FTziNlcGujMfWLARanXzgdoiwl_ZH2E8My3aDyZyF5OdX8C1V9AY6yJaZq5WzIfxmn3kK6kZGAoI/s1600/min.png";
var cfDImgAnalogSec="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1ZN3pdVyp2lULem5Us0TRR37NW6acj2ooEWTSiqz3mvLpi5mZOZs87OKtxLdwvM1x8wXGAldzrB_QBFoK-wzMvtrA-ivtoplE45WK5T-ma8q6FuBnhpsLIrNE3tgNJAOh_5jow5TySxg/s1600/mickeymouse.png";
</script>
<link href="https://fonts.googleapis.com/css?family=Orbitron:400,700&display=swap" rel="stylesheet"/>
<script src="https://codeflareblogspot.github.io/code/jamAnalogScript.js"></script>
Demikian artikel blog tentang Cara Membuat Widget Jam Digital Analog Blogger terima kasih sudah berkunjung, jangan lupa Like, Share dan Subscribe, untuk pertanyaan, kritik ataupun saran silakan ditulis pada kotak komentar di bawah. Apabila ada kata-kata yang kurang berkenan atau informasi yang kurang akurat, harap dimaklumi. Akhir kata Semoga Bermanfaat.
Incoming Search Term
widget jam untuk blog, widget jam digital untuk blogger, widget jam analog untuk dipasang di blog, widget jam digital untuk blogspot, cara mudah pasang script jam digital di blog, cara membuat jam digital unik yang keren, cara memasang jam digital analog dengan fungsi simpan pesan, kumpulan jam widget jam digital untuk blog, widget jam digital transparan, kode html pasang jam digital, css jam analog dan digital
About CodeFlare
![[+] Codeflare Backlink Editor To Create Anchor Text With Keyword](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXC9KPkhkaNh3A4Wy-XX1I2kSj2rB2qXjmLIQktDvCxyPdUINtltp2Ih9iLVpEyb-0tYBaLGQb52bIszHmT9_etJT-awZy9IcxsBPfvQHJs7K7BI6bxz0rgcILCFxAhuL0CNbqYaS9DvELwWieNdZscUv-_8lhmqeMjcWmIRH3X38nOkbgkYK6dfySxg/s72-c/backlink%20editor.jpg)
No comments