Membuat pesan berubah-ubah berdasarkan waktu

Pernahkah anda terinspirasi untuk Membuat pesan yang berubah-ubah berdasarkan waktu?Mungkin ya mungkin juga tidak. ok kali ini saya akan membuat tutorial tentang Membuat pesan berubah-ubah berdasarkan waktu. Keuntungan dari toturial ini adalah saat kita ingin membuat event atau mengingatkan waktu saat ini tanpa harus online hanya sekedar membuat pesan yang singkat di blog.

Contoh : "Pagi sobat blogger sudahkah anda mandi sebelum membaca artikel saya" atau 

"Sekarang waktunya untuk tidur, jadi janganlah anda begadang".

Jika anda tertarik silahkan ikuti langkah2 berikut ini:

Ikuti Langkah2 Berikut :

1. Pastinya anda harus login dulu ke blog sobat

2. Copy kode berikut ini dan letakkan di tempat yang anda inginkan asal tidak error

<script type="text/javascript">
//<![CDATA[
 var now = new Date();
 var hours = now.getHours();
    // Jam 4 Sore - 6 Sore
 if (hours >= 16 && hours <= 18){
document.write("Selamat sore sobat blogger");
   // Jam 7 Malam - 9 Malam
 } else if (hours >= 19 && hours <= 21){
document.write("Selamat makan malam");
    // Jam 10 Malam - 4 Dini Hari
 } else if (hours >= 22 || hours <= 4){
document.write("Sekarang waktunya untuk tidur, jadi janganlah anda begadang");
    // Jam 5 Pagi - 8 Pagi
 } else if (hours >= 5 && hours <= 8){
document.write("Selamat pagi, sobat blogger");
    // Jam 9 Pagi - 3 Sore
 } else if (hours >= 9 && hours <= 15){
document.write("Jangan lupa untuk berkomentar");
 }
//]]>
</script>

Note:

Teks yang saya kasih warna Biru itu adalah pesannya, silahkan anda ganti dengan kata-kata yang anda inginkan.

Penambahan Efek:
- Jika anda ingin menambahkan efek teks berjalan biasa tambahkan kode:
<marquee>Tambahkan script diatas</marquee>
- Jika anda ingin menambahkan efek teks yang memantul tambahkan kode:

<marquee behavior="alternate" direction="up" width="300" height="100">
<marquee direction="right" behavior="alternate">Tambahkan script diatas</marquee>

- Jika anda ingin menambahkan efek teks berhenti saat di sentuh:

<marquee onMouseOver=this.stop() onMouseOut=this.start()>Tambahkan script diatas</marquee>

Dan masih banyak lagi efek yang bisa anda tambahkan, kalau anda masih bingung silahkan anda bertanya.

jangan lupa kritik dan sarannya...

keyword:

- cara membuat pesan berubah-ubah berdasarkan jam

- cara menampilkan pesan pada waktu tertentu

- cara menampilkan pesan pada jam tertentu

- cara membuat Time Message

Merubah background blog berdasarkan waktu

kali ini saya akan berbagi tutor tentang cara Mengganti warna Background blog berdasarkan waktu secara otomotis yang akan menyesuaikan diri dengan jam dari para pengunjung blog. Saya mengambil format waktu 24 jam dengan membaginya menjadi 4 kondisi waktu yakni Pagi, Siang, Sore dan Malam, dari 4 waktu tersebut blog anda akan berubah warna.
Keuntungan dari tutorial ini yaitu akan membuat blog anda menjadi terlihat lebih kreatif dan cocok untuk di implementasikan pada blog pribadi.

ikuti langkah2 dibawah ini:

1. Login ke akun blogger sobat

2. Klik Template » Edit HTML

3. Kemudian tekan Ctrl+F dan cari kode ]]></b:skin> atau </style>

4. Lalu tambahkan script CSS berikut ini tepat diatas kode ]]></b:skin> atau </style>

.siang { background:#78d9d9;}
.sore { background:#d97979;}
.malam { background:#3c3c3c;}
.pagi { background:#f6fbac;}

Note: 
- ubah kode warna merah dengan warna yang kalian inginkan
- Anda juga dapat merubah kode warna merah dengan Url gambar 

5. Kemudian tekan Ctrl+F dan cari kode </head> 

6. Tambahkan script JQuery berikut ini tepat diatas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>

7. Salin kode dibawah ini lalu cari kode </body> dan pastekan tepat diatasnya.

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
 var d = new Date();
 var n = d.getHours();
 if (n > 18 || n < 6)
 document.body.className = "malam";
 else if (n > 6 && n < 11)
    document.body.className = "pagi";
 else if (n > 15 && n < 18)
 document.body.className = "sore";
 else
 document.body.className = "siang";
});
//]]>
</script>

8. Simpan template anda
Sekarang background blog anda akan berubah warna secara otomatis.
Sekian post dari saya semoga tutorial ini dapat bermanfaat

keyword:
- cara merubah background blog berdasarkan jam
- cara merubah warna background blog berdasarkan waktu
- cara merubah warna background blog berdasarkan jam
- cara merubah gambar background blog berdasarkan waktu
- cara merubah gambar background blog berdasarkan jam
- cara membuat warna background secara otomatis
- cara membuat gambar background secara otomatis

Cara Membuat Countdown Timer dengan JavaScript

Cara Membuat Countdown Timer dengan JavaScript - Sebelumnya saya ucapkan selamat menunaikan ibadah puasa 1435H,semoga kita selalu diberkahi di bulan yang penuh mahrifah ini...amin

Ada juga cara lain dengan menggunakan cara yang lebih mudah | klik untuk Baca

Untuk pemasangannya silahkan simpan kode ini pada widget HTML/JavaScript :

 <style type="text/css" scoped> #tahunbaru {background:#739bc8;color:yellow;font-size:150%;text-transform:uppercase;text-align:center;padding:20px 0;font-weight:normal; border-radius:5px;line-height:1.8em;} .putih {color:white}</style><div id='tahunbaru'><span id='countdown'></span></div><script type='text/javascript'>//<![CDATA[var target_date = new Date("Jul 28, 2014").getTime(); var days, hours, minutes, seconds; var countdown = document.getElementById("countdown"); setInterval(function () {    var current_date = new Date().getTime();    var seconds_left = (target_date - current_date) / 1000;    days = parseInt(seconds_left / 86400);    seconds_left = seconds_left % 86400;         hours = parseInt(seconds_left / 3600);    seconds_left = seconds_left % 3600;         minutes = parseInt(seconds_left / 60);    seconds = parseInt(seconds_left % 60);  countdown.innerHTML = days + " <span class=\'putih\'>hari</span> " + hours + " <span class=\'putih\'>jam</span> "  + minutes + " <span class=\'putih\'>menit</span> " + seconds + " <span class=\'putih\'>Idul Fitri</span> 1435H";   }, 1000);//]]></script>

 Keterangan :
- Ganti text yang berwarna Hijau dengan Waktu acara/Event yang akan di laksanakan
- Ganti text yang berwarna Merah dengan kata-kata yang anda inginkan

Demikian post tentang Cara Membuat Countdown Timer dengan JavaScript.
Jika artikel diatas bermanfaat jangan lupa untuk meninggalkan komentar dan klik tombol G+ dibawah.

Keyword:
- cara membuat penghitung waktu mundur dengan javascript di blog
- cara membuat timer countdown di blog

Cara Mudah Membuat Timer Countdown/Hitung Mundur

Cara Mudah Membuat Timer Countdown/Hitung Mundur - Suatu peristiwa penting pasti ditunggu-tunggu oleh semua orang. Selagi menunggu hari itu tiba, tidak ada salahnya membuat timer hitung mundur atau dalam bahasa inggris biasa disebut Countdown Timer.

Ada juga cara lain dengan menggunakan javascript | klik untuk Baca

Timer hitung mundur ini juga bisa kita upload ke website/blog pribadi. Dengan begitu pasti akan banyak orang yang mengunjungi website/blog anda..
Seperti di bawah ini:

                                     

Langkah-langkah pembuatan Countdown/hitung mundur :

• Buka situs Create Countdown Timer.
• Pada menu bagian kiri silahkan atur sesuai peristiwa yang kalian inginkan.
  
  
  

Keterangan : 

- 1.) Event Name : Nama peristiwa yang akan terjadi

- 2.) Event Date : Tanggal peristiwa akan terjadi

- 3.) Event Time : Waktu peristiwa akan terjadi

- 4.) Timezone : Zona waktu yang digunakan sesuai daerah masing-masing

- 5.) Language : Bahasa yang digunakan dalam timer countdown

- 6.) Repeat : Saya kurang tau fungsinya, pilih saja None

- 7.) Link : Masukkan link website/blog kalian, bisa dikosongkan

• Jika telah selesai mengatur bagian menu, silahkan anda memilih untuk meletakkan timer countdown tersebut pada website pribadi atau meletakkannya di situs tempat kita membuatnya(http://countingdownto.com)
  
  
  
• Jika ingin menambahkannya ke blog/website pribadi silahkan klik Add to your website. Kemudian ambil atau copy kode yang telah didediakan dan menguploadnya. Untuk cara mengupload atau menaruhnya di blog silahkan buat Entri Baru atau Laman Baru kemudian beralih kebagian HTML lalu paste kodenya. Kalian juga bisa menaruhnya di widget HTML/Javascript.
• Jika tidak mempunyai blog/website, kalian bisa mempublikasikan timer hitung mundur tersebut di website tempat kita membuatnya dengan cara mengklik tombol Publish on our website.

Sekianlah tutorial tentang "Cara Mudah Membuat Jam Hitung Mundur/Countdown Clock". Kalian bisa membuat timer hitung mundur untuk segala peristiwa apapun tanpa harus pusing-pusing mengotak-atik.

Keyword :
- Cara membuat penghitung waktu mundur di blog
- cara membuat timer countdown di blog