Cara Memasang Dan Bikin Jam Keren Sendiri Di Blog - info hape dan tips

Sebelumnya saya melihat-lihat dulu mengenai cara memasang widget jam yang dapat dipasang di sidebar dari blogger dan memang sudah sungguh banyak blog yang berkategori bimbingan yang membahasnya. Tetapi walaupun begitu pada biasanya dari bimbingan tersebut menyarankan orang yang ingin memasang widget ini di suruh untuk menjadikannya di situs pihak ketiga, dan secara langsung dampaknya akan terasa kepada page speed loading blog itu sendiri alasannya yakni akan memperbesar usul http dari luar.

Sementara itu muncul wangsit untuk bikin widget jam hasil karya sendiri tanpa plug in dari situs pihak ketiga, dan hasil bermain selama beberapa menit jadinya widget ini sudah jadi saya buat dan tampilannya lumayan bergaya, lebih kreatif, cepat, bersih dan pastinya dengan sentuhan cinta CSS3.

Saya menamakan widget ini dengan nama "Me & My Clock", karna dari performa yang memang bisa anda tambahkan Foto, Nama, Lokasi, Hobi dan pastinya memperlihatkan waktu dari jenis jam digital. Saya mengambil format waktu 24 jam alasannya yakni pada biasanya penduduk di indonesia memakai jenis format waktu tersebut sementara itu waktu yang mau ditampilkan didalam widget ini sendiri akan sesuai dengan waktu dari jam yang sudah dikontrol 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 tamat 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 sudah anda salin tadi kedalam widget tersebut

4) Klik Simpan

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