.jpg)
Jika pada beberapa saat yang lalu telah dibahas "Cara buat dan pasang jam digital di header blog" pada "Template Tata Letak", namun karena pada saat ini hampir semua blogger menggunakan "Blogger Template Designer (Perancang Template Blogger)", oleh karena itu agar lebih mudah dan cepat dipahami serta dapat segera terpasang di blog sampeyan, kita membahasnya sekali lagi. D E M O
Buka link demo di bawah ini agar anda dapat melihat bagaimana jam digital ini mampu memberikan sensasi yang cukup menarik untuk sebuah blog.
Cara Pasang Jam
Posting » Seloso PAHING, February, 28, 2012
Javascript:
<script type="text/javascript">
/* Jam Digital - by: gubhugreyot */
//<![CDATA[
var pewaktuID = null;
var pewaktuJalan = false;
function jammati() {
if (pewaktuJalan) {
clearTimeout(pewaktuID)
}
pewaktuJalan = false
}
function tunjukkanwaktu() {
var b = new Date();
var a = b.getHours();
var c = b.getMinutes();
var e = b.getSeconds();
var d = a;
d += ((c < 10) ? ":0": ":") + c;
d += ((e < 10) ? ":0": ":") + e;
document.clock.GRjamdigital.value = d;
pewaktuID = setTimeout("tunjukkanwaktu()", 1000);
pewaktuJalan = true
}
function jamhidup(){
jammati();
tunjukkanwaktu()
}; //]]>
</script>
Kode CSS:
.header-inner{position:relative;}
.header-inner .GRdigit{
position:absolute;
top:20px;
right:10px;
padding:5px;
border:4px solid #666;
background:#333;
z-index:99;
}
.GRdigi{
font-family:MS Sans serif;
font-size:28px;
color:#00FFFF;
font-weight:bolder;
border:2px dotted red;
padding:5px 0;
display:block;
float:right;
text-align:center;
width:125px;
background: #003fa6;
background:-moz-linear-gradient(top,#003fa6 0%,#0454c5 6%,#08327c 32%,#021035 53%,#021035 76%,#043b72 96%);
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#003fa6),color-stop(6%,#0454c5),color-stop(32%,#08327c),color-stop(53%,#021035),color-stop(76%,#021035),color-stop(96%,#043b72));
background:-webkit-linear-gradient(top,#003fa6 0%,#0454c5 6%,#08327c 32%,#021035 53%,#021035 76%,#043b72 96%);
background:-o-linear-gradient(top,#003fa6 0%,#0454c5 6%,#08327c 32%,#021035 53%,#021035 76%,#043b72 96%);
background:-ms-linear-gradient(top,#003fa6 0%,#0454c5 6%,#08327c 32%,#021035 53%,#021035 76%,#043b72 96%);
background:linear-gradient(top,#003fa6 0%,#0454c5 6%,#08327c 32%,#021035 53%,#021035 76%,#043b72 96%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#003fa6',endColorstr='#043b72',GradientType=0);
text-shadow:2px 2px 2px #000;
box-shadow:0 0 5px #000;
}xHTML Digital Clock:
<form class='GRdigit' name='clock'><input class='GRdigi' name='GRjamdigital'/></form>
- Login ke Blogger.
- beberapa saat setelah login halaman baru akan terbuka (Dasbor/Dasboard).
Klik Rancangan/Design. - Klik Edit HTML.
- Lakukan Backup Template. Buka Panduan Backup Template di sini.
- Klik Expand Widget Template.
- Cari kode:
<div class='region-inner header-inner'>
Gunakan Ctrl+F untuk mempermudah dan mempercepat pencarian kode. Panduan mencari kode dapat di buka di sini. - Copy dan paste-kan xHTML digital clock di bawah kode tersebut. Bentuk kode akan menjadi seperti ini:
<div class='region-inner header-inner'> <form class='GRdigit' name='clock'><input class='GRdigi' name='GRjamdigital'/></form> - Cari kode ]]></b:skin>, kemudian copy dan pastekan kode CSS di atasnya.
- Cari kode </head>, kemudian copy dan pastekan Javascript di atasnya.
- Cari kode <body>, atau
<body expr:class='"loading" + data:blog.mobileClass'>
Tambahkan kode onLoad='jamhidup()' pada tag pembuka body tersebut hingga kodenya menjadi seperti ini:
<body expr:class='"loading" + data:blog.mobileClass' onLoad='jamhidup()'>Jika kode tak sama persis yang terpenting lakukan penambahan kode sesuai petunjuk! - Klik Simpan Template (Save Template) dan lanjutkan membuka blog untuk lihat hasilnya.
- Untuk mengatur posisi Digital Clock anda dapat melakukan pengaturan pada nilai top dan right. Anda bisa juga mengganti dengan bottom dan left. Sesuaikan dengan rencana penempatan Digital Clock (sisi kanan atau kiri header blog):
.header-inner .GRdigit{ position:absolute; top:20px; right:10px; padding:5px; border:4px solid #666; background:#333; z-index:99; } - Tutorial tentang menggabungkan jam digital ini dengan efek CSS3 dapat anda ikuti melalui link di bawah ini:
Digital Clock Animatif dg Efek CSS3!
Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :
Posting » Seloso PAHING, February, 28, 2012
» Happy Blogging - gubhugreyot «
keren banget yah blognya
BalasHapuswah mohon bimbingannya ya mbah blogmu acung jempol :)
BalasHapuskrennn
BalasHapusmas saya punya kok ngk bisa,,!?
BalasHapusada cara yang mudah lebih simpel ngk..??
sblmnya trima kasih..
thanks ilmu nya gan
BalasHapus