Hidden Calendar-Clock adalah sebuah gabungan kerja antara kode CSS3 yang membentuk fungsi hide & show serta sebuah javascript sederhana pembangun Calendar-Clock. Posisi/letak Hidden Calendar-Clock dapat diatur di kanan-atas, kanan-bawah, kiri-atas atau di kiri-bawah blog. Calendar-Clock menampilkan secara lengkap hari, tanggal, bulan, tahun serta am/pm serta digital clock di ujung paling kanan. Pada demo akan diperlihatkan dimana calendar clock hanya akan terlihat ketika cursor berada di halaman blog. Hidden Calendar-Clock akan menghilang lagi saat anda berpindah ke halaman web/blog yang lain. Muncul dan menghilangnya Calendar-clock mempunyai jeda waktu 1 (satu) detik setelah cursor anda aktif ataupun meninggalkan halaman blog. Hmmm... seperti halnya kata pepatah, tong kosong nyaring bunyinya yang artinya banyak berkata-kata banyak pula muncrat air ludahnya, jadinya aku rasa lebih baik segera lihat saja demonya.
NB: Harap diperhatikan, karena keternatasan dhuwit dan tak mampu bayar hosting atau beli domain sndiri maka jika demo-1 tak bekerja sampeyan dipersilahkan buka demo yang ke-2! Oye?!
D E M O - 1
D E M O - 2
Posting » January, 09, 2012
NB: Harap diperhatikan, karena keternatasan dhuwit dan tak mampu bayar hosting atau beli domain sndiri maka jika demo-1 tak bekerja sampeyan dipersilahkan buka demo yang ke-2! Oye?!
D E M O - 1
D E M O - 2
Javascript Hidden Calendar-Clock
<script src="http://gubhugreyot-hidden-calendar-clock.googlecode.com/files/gubhugreyot_calendar-clock2.js" type="text/javascript" ></script>
Kode CSS Hidden Calendar-Clock
body span#GR_calendarclock{
font-size:16px;
font-weight:normal;
text-shadow:1px 1px 1px #000;
color:red;
opacity:0.2;
filter:alpha(opacity=20);
position:fixed;
right:10px;
top:-20px;
transition:1s 1s;
-o-transition:1s 1s;
-moz-transition:1s 1s;
-webkit-transition:1s 1s;
}
body:hover span#GR_calendarclock{
opacity:1.0;
filter:alpha(opacity=100);
top:5px;
z-index:999999;
}xHTML Hidden Calendar-Clock
<span id="GR_calendarclock"></span>
Cara membuat Hidden Calendar-Clock
- Login ke blogger
- Halaman Dasbor (Dasboard).
- Klik Rancangan (Design).
- Klik Edit HTML.
- Lakukan Backup Template.
- Cari kode </head> kemudian letakkan javascript di atasnya.
- Cari kode ]]></b:skin>. Letakkan kode CSS di atasnya.
- Cari kode <body>. Letakkan xHTML di bawahnya
- Tetap di kode <body> dan ganti kode tersebut menjadi seperti ini:
<body onLoad='calendarclock()'> - Klik Simpan Template (Save Template).
- Buka blog dan lihat hasilnya!
Catatan/Keterangan:
- Untuk mengamankan template (Backup Template) dan care cepat Cari Kode HTML dg Ctrl + F buka Special Tutorials yang terletak di menu vertikal sbelah kiri!
- Letak Hidden Calender-Clock dapat dirubah di kanan-atas, kanan-bawah, kiri-atas, atau kiri-bawah dengan merubah kode css pada right dan top.
- Untuk yang menggunakan New Blogger Templates gunakan tag pembuka body dalam bentuk sepertu di bawah ini.
<body expr:class='"loading" + data:blog.mobileClass' onLoad='calendarclock()'>
Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :
Posting » January, 09, 2012� Happy Blogging - gubhugreyot �
{ 0 komentar... Views All / Send Comment! }
Posting Komentar