Cara Memasang Waktu / Jam dan Tanggal di Blogger Blogspot dengan Javascript

Cara Memasang Waktu / Jam dan Tanggal di Blogger Blogspot dengan Javascript -

Adakah tampilan baru di blog sederhana ini? Betul sob,tanggal dan jam yang terdapat pada header blog seperti pada blog ini.

Script ini sengaja saya padukan dari berbagai script yang sebenarnya sudah bertebaran di serp paman Google.
Namun sebagai referensi semata tutorial ini sangat efektif dan tidak mempengaruhi dalam proses loading.

Adalah 'sebel' yang akan kita alamai saat memasang sebuah 'widget' dari pihak ketiga dan dalam waktu beberapa bulan saja widget yang kita pasang sduah tak bisa tampil karena 'pihak ketiga' yang bersangkutan sudah tak menyediakannya lagi.
Tapi,yaah,itulah resiko gan.

Tapi ada solusi jitu,kita dapat memasang script sendiri untuk menciptakan widget berupa jam dan tanggal,yup! dengan javascript sob.
Dan caranya pun sangat mudah,sobat tinggal pergi ke AC Hardware dan beli jam juga kalender disana,EH SALAH!!! maksudnya pergilah ke Dashboard lalu pilih Tata Letak / Design,pilih tab Edit Html dan contreng tulisan Expand Widget Templates:

Kemudian cari kode berikut (gunakan Ctrl+F untuk mempermudah pencarian):

]]></b:skin>

Setelah kode tadi sobat ketemukan,kini tepat diATASnya letakkan barisan kode css berikut:

.pelajaranblogareakeren {border: 1px solid #EFF0F1;
padding: 5px;
background: #ffffff;-moz-border-radius:5px;}

.pelajaranblogareakeren a {background:none;}
img.float-right {margin: 5px 0px 0 10px;}
img.float-left {margin: 5px 10px 0 0px;}

Setelah itu simpan template ya sob.

Selanjutnya,kembali pergilah ke Dashboard lalu pilih Tata Letak / Design,pilih Add a Gadget dan pilih Html/Javascript seperti gambar berikut:





Lalu sobat letakkan script tanggal dan jam untuk blogger berikut:

<script type="text/javascript"> window.setTimeout("jam()",1000); function jam() { var tanggal = new Date(); setTimeout("jam()",1000); document.getElementById("mrpujiajadehclock").innerHTML=tanggal.getHours()+":"+tanggal.getMinutes()+":"+tanggal.getSeconds(); } </script> <strong><div id="mrpujiajadehclock"></div></strong></div></div></td><td><div class='pelajaranblogareakeren'><div style='font-family:arial; color:#999999;font-size:12px;text-transform:none;'> <script type="text/javascript"> var mydate=new Date() var year=mydate.getYear() if (year < 1000) year+=1900 var day=mydate.getDay() var month=mydate.getMonth() var daym=mydate.getDate() if (daym<10) daym="0"+daym var dayarray=new Array("Minggu","Senin","Tuesday","Rabu","Kamis","Jumat","Sabtu") var montharray=new Array("January","Februari","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","November","Desember") document.write("<b>"+dayarray[day]+", "+daym+" "+montharray[month]+", "+year+"</b>") </script></div></div></td><td></td></tr></table>

Simpan dan lihat hasilnya :D
Untuk kode yang berwarna hijau sobat sesuaikan sendiri sesuai selera dan keinginan,moga berhasil ya sob :D

Tweet