Cara Memasang Dan Menciptakan Jam Keren Sendiri Di Blog

Sebelumnya saya melihat-lihat dahulu wacana 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 pribadi dampaknya akan terasa terhadap page speed loading blog itu sendiri alasannya ialah akan menambah undangan http dari luar.

Sementara itu timbul inspirasi untuk menciptakan widget jam hasil karya sendiri tanpa plug in dari situs pihak ketiga, dan hasil bermain selama beberapa menit karenanya widget ini telah jadi saya buat dan tampilannya tidak mengecewakan bergaya, lebih kreatif, cepat, higienis 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 ialah kebanyakan masyarakat di indonesia memakai 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 isyarat 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 daerah tinggal anda.
Keterangan Saya dengan Keterangan dari diri anda.
URL Avatar Anda dengan URL foto anda (lihat selector avatar sempurna pada value dari property background)

Jika sudah selesai salin kembali semua isyarat yang ada didalam notepad tersebut.

---

Langkah-langkah :

---

1) Masuk ke akun blogger anda kemudian klik Tata Letak

2) Klik Add Gadget kemudian pilih HTML/JavaScript

3) Pastekan semua isyarat 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!