Search here

Type a word related to the post, then click the search button !

Memuat...
English
Bru masuk angin!

Flag Counters

Flag Counter

Pengikut

Recent Comments plus Kode CSS Box Gelap

Recent Comments

blog-indonesia.com

Vertical Menu

CLICK any categories for open!
Gubhug Reyot

Sobat Ngeblogh

Sobat Ngeblogh

Buat sobat blogger yang mau ikutan jadi follower silahkan KLIK link Follower (Follow) di ujung kanan-bawah. Dari hasil monitoring, ternyata yang link-nya telah dimasukkan ke "Sobat Ngeblogh" mengalami pertambahan pengunjung secara signifikan!
Terima kasih .: Salam :.
gubhug reyot

Trick Pasang Jam Digital di Header Blogger Template Designer

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.



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>
Cara Pasang Jam
  1. Login ke Blogger.
  2. beberapa saat setelah login halaman baru akan terbuka (Dasbor/Dasboard).
    Klik Rancangan/Design.
  3. Klik Edit HTML.
  4. Lakukan Backup Template. Buka Panduan Backup Template di sini.
  5. Klik Expand Widget Template.
  6. 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.
  7. 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>
  8. Cari kode ]]></b:skin>, kemudian copy dan pastekan kode CSS di atasnya.
  9. Cari kode </head>, kemudian copy dan pastekan Javascript di atasnya.
  10. 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!
  11. Klik Simpan Template (Save Template) dan lanjutkan membuka blog untuk lihat hasilnya.
Catatan/Keterangan:
  1. 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;
    }
  2. 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 «

6 komentar:

 
GR | Edited by | gubhug reyot