search-button
» » Cara Memasang dan Membuat Jam Keren Sendiri Di Blog

Dec 13, 2013

Cara Memasang dan Membuat Jam Keren Sendiri Di Blog

   
Advertisements
Advertisements
Sebelumnya saya melihat-lihat dahulu tentang 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 karena akan menambah permintaan http dari luar.

jam keren diblog

Sementara itu timbul ide untuk membuat widget jam hasil karya sendiri tanpa plug in dari situs pihak ketiga, dan hasil bermain selama beberapa menit akhirnya 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 karena 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 kode 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 selesai salin kembali semua kode 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 kode 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!
Share :

Komentar