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

Hidden Calendar-Clock Using CSS3-Javascript

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

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

  1. Login ke blogger
  2. Halaman Dasbor (Dasboard).
  3. Klik Rancangan (Design).
  4. Klik Edit HTML.
  5. Lakukan Backup Template.
  6. Cari kode </head> kemudian letakkan javascript di atasnya.
  7. Cari kode ]]></b:skin>. Letakkan kode CSS di atasnya.
  8. Cari kode <body>. Letakkan xHTML di bawahnya
  9. Tetap di kode <body> dan ganti kode tersebut menjadi seperti ini:
    <body onLoad='calendarclock()'>
  10. Klik Simpan Template (Save Template).
  11. 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='&quot;loading&quot; + 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 «

1 komentar:

 
GR | Edited by | gubhug reyot