Cara Memasang Dan Membuat Jam Keren Sendiri Di Blog

Sebelumnya saya melihat-lihat dahulu perihal cara memasang widget jam yang bisa dipasang di sidebar dari blogger dan memang sudah sangat banyak blog yang berkategori tutorial yang membahasnya. Tetapi meskipun begitu kebanyakan dari tutorial tersebut menyarankan orang yang ingin memasang widget ini di suruh untuk membuatnya di situs pihak ketiga, dan secara langsung dampaknya akan terasa terhadap page speed loading blog itu sendiri alasannya yakni akan menambah usul http dari luar.

Sementara itu timbul pandangan gres untuk membuat widget jam hasil karya sendiri tanpa plug in dari situs pihak ketiga, dan hasil bermain selama beberapa menit hasilnya widget ini telah jadi saya buat dan tampilannya lumayan bergaya, lebih kreatif, cepat, bersih dan tentunya dengan sentuhan cinta CSS3.

Saya menamakan widget ini dengan nama "Me & My Clock", karna dari tampilan yang memang bisa anda tambahkan Foto, Nama, Lokasi, Hobi dan tentunya menampilkan waktu dari jenis jam digital. Saya mengambil format waktu 24 jam alasannya yakni kebanyakan masyarakat di indonesia menggunakan jenis format waktu tersebut sementara itu waktu yang akan ditampilkan didalam widget ini sendiri akan sesuai dengan waktu dari jam yang telah diatur di komputer pembaca blog. untuk selengkapnya silahkan lihat demo di bawah ini.

---

Demo

Riad Supriadin

Bandung, Indonesia

Belajar keras menyulap web graphic dengan CSS3.

---

Persiapan :

---

1) Salin Semua instruksi dibawah ini kedalam notepad

Klik ganda untuk menyalin

 <center> <div id="kotak"> <div id="jam"></div> <div class="avatar"></div> <div class="nama">Nama Saya</div> <div class="lokasi">Lokasi Saya</div> <div class="kemampuan">Keterangan Saya</div></center> <style type="text/css" > /* Me and the Clock Widget */ #kotak {   width: 300px;   height: 230px;   background: rgb(8,156,149);   display: block;   font-family: &amp;#39;Arial&amp;#39;;   background-size: 120px 120px;   box-shadow: 0 5px rgb(140,227,223);   -moz-border-radius: 20px;   -webkit-border-radius: 23px;   border-radius: 20px; } #jam {   display: inline-block;   font-size: 2em;   color: #b7e5e3;   padding: 10px;   float: right;   margin-right: 10px; } .avatar {   float: left;   position: relative;   margin-top: 15px;   margin-left: 12px;   margin-bottom: 8px;   margin-right: 5px;   height: 100px;   width: 100px;   border-radius: 50%;   background: #999 url(URL AVATAR ANDA) 80% 0%;   background-size: 120px 120px;   box-shadow: 0 0 0 5px rgba(44, 244, 234, 0.3); } .avatar:hover {   top: -2px; } .nama {   font-weight: bold;   margin-left: 5px;   margin-top: 5px;   font-size: 23px;   float: left;   color: #fdfdfd;   display: inline-block; } .lokasi {   font-weight: bold;   margin-left: 1px;   font-size: .8em;   margin-top: 1px;   float: left;   margin-left: 5px;   color: rgb(222,237,92);   display: inline-block;   padding-top: 2px;   position: relative; } .kemampuan {   font-family: &amp;#39;Arial&amp;#39;;   font-weight: normal;   display: inline-block;   font-size: 12px;   float: left;   padding: 3px;   color: white; } </style> <script type="text/javascript" /> (function(b){var a=function(c){if(!c){throw new Error("")}if(!c.kotak||!c.kotak instanceof HTMLElement){throw new Error("")}if(!c.jam||!c.jam instanceof HTMLElement){throw new Error("")}this.kotak=c.kotak;this.jam=c.jam};a.prototype={constructor:a,init:function(){window.setInterval(this.update.bind(this),1000);this.update()},update:function(){var k,f,d,e,j,i,c;Date.prototype.setTime(Date.now());k=Date.prototype;f=k.getHours().toString();d=k.getMinutes().toString();e=k.getSeconds().toString();if(f.length==1){f="0"+f}if(d.length==1){d="0"+d}if(e.length==1){e="0"+e}this.jam.textContent=f+" : "+d+" : "+e;j=Math.floor(f*256/24).toString();i=Math.floor(d*256/60).toString();c=Math.floor(e*256/60).toString();this.bg.style.background="rgb("+j+","+i+","+c+")"}};a.options={kotak:null,jam:null};b.jam=a}(this));var $kotak,$jam,jam;$kotak=document.getElementById("kotak");$jam=document.getElementById("jam");jam=new jam({kotak:$kotak,jam:$jam});jam.init(); </script> 

2) Gantilah :
Nama Saya dengan nama anda.
Lokasi Saya dengan tempat tinggal anda.
Keterangan Saya dengan Keterangan dari diri anda.
URL Avatar Anda dengan URL foto anda (lihat selector avatar tepat pada value dari property background)

Jika sudah akibat salin kembali semua instruksi yang ada didalam notepad tersebut.

---

Langkah-langkah :

---

1) Masuk ke akun blogger anda lalu klik Tata Letak

2) Klik Add Gadget lalu pilih HTML/JavaScript

3) Pastekan semua instruksi yang telah anda salin tadi kedalam widget tersebut

4) Klik Simpan

Sekarang coba anda lihat salah satu halaman blog maka jam digital pun telah terpasang yang ditambah avatar yang membuatnya terlihat lebih kreatif. Semoga anda menyukainya. Enjoy & Happy Coding!

Sumber https://8tutorialandroid.blogspot.com/