Cara Membuat Ucapan Selamat Pagi, Siang, Sore, Malam di Blog

Rizkysmg.com - Halo sahbatku yang saya sayangi dan cintai kali ini admin akan bagikan Cara Membuat Ucapan Selamat Pagi, Siang, Sore, Malam di Blog. 

cara ini untuk menyambut visitor pada website atau blog yang kita miliki, diantaranya ialah dengan membuat Ucapan Selamat Datang, atau Selamat Pagi, Siang, Sore, Malam secara (Realtime sesuai waktu kunjungan pada blog sahabat). Untuk itu contohnya bisa sahabat lihat di blog ini. 

nah, untuk itu cara membuatnya Ucapan selamat pastinya menggunakan JavaScript dan HTML, dan sedikit sentuhan pada CSS, Banyak juga tutorial pada internet membuat Ucapan ini dengan menggunakan "document.writee". tentu juga para pakar mengatakan hindari pengguna'an document.write dalam penulisan pada javascript diBlog sahabat. Silahkan sahabat cari dengan keyword : "Avoid using document.write".

Kali ini saya akan bagikan 2 model JavaScript, silahkan pilih mana sesuai selera Sahabat ya.

JavaScript Pertama

Simpan JavaScript ini di atas </body>

<script>  
/*<![CDATA[*/
var greetElem = document.querySelector("#greetings"); 
var curHr = new Date().getHours(); 
var greetMes = ["Wow! Masih Melek ya?", 
"Selamat Pagi sahabat!", 
"Selamat Siang sahabat!", 
"Selamat Sore sahabat!", 
"Selamat Malam sahabat!", 
"Kok Belum Tidur ya?"]; 
let greetText = ""; if (curHr < 4) greetText = greetMes[0]; 
else if (curHr < 10) greetText = greetMes[1]; 
else if (curHr < 16) greetText = greetMes[2]; 
else if (curHr < 18) greetText = greetMes[3]; 
else if (curHr < 22) greetText = greetMes[4]; 
else greetText = greetMes[5]; 
greetElem.setAttribute('data-content', greetText);
/*]]>*/
</script> 

Sedikit penjelasan scrip diatas, pukul 12 malam - 4 pagi akan memunculkan ucapan Wow! Masih Melek ya?

• pukul 4 pagi - 9 akan memunculkan ucapan Selamat Pagi sahbaat!
• pukul 10 - 15 akan memunculkan ucapan Selamat Siang sahabat!
• pukul 16 - 17 akan memunculkan ucapan Selamat Sore sahabat!
• pukul 18 - 21 akan memunculkan ucapan Selamat Malam sahabat!
• pukul 22 - 23 akan memunculkan ucapan kok Belum Tidur ya?

Selanjutnya jangan lupa simpan CSS ini (wajib)

#greetings::after {
  content: attr(data-content);
}

CSS bisa sahabat tambah background, margin dan lainnya, sesuai selera sahabat. Misalkan menjadi seperti ini ya. 

#greetings::after {
  content: attr(data-content);
  padding:10px 15px;
  background:#eee;
  border-radius:8px;
}

Selanjutnya Simpan kode ini ya, dimana Ucapan akan ditampilkan pada blog sahabat. Untuk percobaan bisa ditempatkan di atas <data:post.body/> (Ucapan ini akan muncul di atas postingan artikel).

<p data-content='Selamat datang!' id='greetings'/>

p bisa juga diganti div ataupun span, sesuai kebutuhan. Silahkan Simpan templatenya, dan lihat hasilnya di dalam Postingan pada blog sahabat.

Ujicoba Sendiri ya!

JavaScript yang ke-2 ini bisa digantikan dengan background otomatis sesuai waktu yang diinginkan

Sebagai alternatifnya pada JS di atas, sahabat bisa gunakan code ini. Kelebihannya adalah ditambahkannya Class untuk tiap waktunya. Bisa di custom juga kok sesuai keinginan sahabat. Lanjut, simpan di atas pada tempelate blog sahabat</body>

<script>
 /*<![CDATA[*/ 
var now = new Date();
var hours = now.getHours();

var greetings = [
   {"waktu": "melek",
    "greet": "Wow! Masih Melek ya?",
    "hr": hours >= 24 || hours <= 3
  }, 
  {"waktu":"subuh",
    "greet": "wow keren! Sudah bangun Subuh!",
    "hr": hours == 4
  },  
  {"waktu":"pagi",
    "greet": "selamat! Selamat Pagi!",
    "hr": hours >= 5 && hours <= 9
  },
    {"waktu":"siang",
    "greet": "Selamat Siang sahbat!",
    "hr": hours >= 10 && hours <= 15
  },
  {"waktu":"sore",
    "greet": "Selamat Sore sahbat!",
    "hr": hours >= 16 && hours <= 17
  },
  {"waktu":"malam",
    "greet": "Selamat Malam sahabat!",
    "hr": hours >= 18 && hours <= 20
  },
  {"waktu":"malam1",
    "greet": "Selamat Malam! Masih Kerja sahbat?",
    "hr": hours >= 21 && hours <= 23
  }
];

var message = document.getElementById("greeting");
message.innerHTML = greetings.find(el=>el.hr).greet;
message.className = greetings.find(el=>el.hr).waktu;
/*]]>*/
</script>

Tambahkan kode CSS, silahkan edit sesuai keinginan.

.subuh, .pagi, .siang, .sore, .malam, .malam1, .melek {padding:10px 15px;border-radius:8px;display:inline-block;margin-left:20px}
.melek{
  color: purple;
  background: #ccf;
}
.malam1 {
  color: #ffffdc;
  background: #555;
}
.malam{
  color: #f4f2f1;
  background: #e49c6c;
}
.sore {
  color: red;
  background: #ffdede;
}
.siang {
  color: #6b3696;
  background: #e6e0eb;
}
.pagi {
  color: white;
  background: #eda840;
}
.subuh {
  color: blue;
  background: #yellow;
}

Tempatkan code ini ya dimana ucapan akan dimunculkan pada blog sahabat. Seperti di atas, kalau sahabat masih bingung bisa dicoba di atas <data:post.body/> (Ucapan akan muncul di atas artikel).

<p data-content='selamat datang!' id='greeting'/>

p bisa juga diganti div ataupun span, sesuai kebutuhan sahbat. Silahkan Simpan template, dan lihat hasilnya di dalam Postingan pada blog sahbaat.

Demo di Blog Kelik Disini!

Silahkan sahabat ujicoba dengan waktu, desain dll. Kalau masih ada yang perlu ditanyakan, silahkan sahabat mengirimkan pada kolom komentar yang sudah kami sediakan. semoga bermanfaat ya.

Sumber