Widget Ucapan Selamat Pagi,Siang dan Malam Otomatis di Blog

Membuat widget ucapan selamat pagi, siang dan malam secara otomatis diblog, tanpa basa basi, berikut kode nya.

1.Taruh Kode Berikut di atas </body>

<script type='text/javascript'>
//<![CDATA[
var thehours = new Date().getHours();
var themessage;
var quote;
var color;
var morning = ('Selamat Pagi <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWxnDX2m1hCEmVvxNHQ4X-BaH-oDMq6eDhX15mOBZTun6WGhw-8cqe-pOJIwy1FtJ7Zi5WXad9MXDcwLXBoUXInbggy31C3kwLr37uUlcrasYdr3yJE0tEMBUw_iYu4R0ZBiUfBwWz4-ph/s1600/sunrise.png"/>');
var qmorning = 'Setiap hari ada sebuah inspirasi untuk di cermati, mari semangat pagi !';
var cmorning = '#7FC583';
var afternoon = ('Selamat siang <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPLkl-IVUyZAf5JK4UKadRuFS_THXSCPl9LeGbeUnXz11YJ19fewf_t5VnvwWE-pgjbP3JGIyUiw7Hll_sslXCxY5PD7AxPMnDKbqmwZ4XitKUztdhFnHvH1fmoDILfUfYUpPfvA695iL5/s500/sun.png"/>');
var qafternoon = 'Jangan patah semangat mari bangkit dan buktikan kepada dunia';
var cafternoon = '#ffc107';
var evening = ('Selamat malam <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaeA6OJWhIwwVfrZ0ciBNMMUBD23iJX96SafVruuXU-gRXZdcn1vPpBghjZhATgDmalCmEFE8Lo2gNlOtfPsPqxu8lKYqtAJCPtDfAkjxXUVT81c_EIp2Fqk8lwVg8jmFdQlCakS96mwa3/s1600/sunset.png""/>');
var qevening = 'Jaga kesehatan dengan beristirahat yang cukup !';
var cevening = '#FF4F70';
 if (thehours >= 0 && thehours < 12) {
   themessage = morning;
   quote = qmorning;  
   color = cmorning;
 } else if (thehours >= 12 && thehours < 18) {
   themessage = afternoon;
   quote = qafternoon;  
   color = cafternoon;
 } else if (thehours >= 18 && thehours < 24) {
   themessage = evening;
   quote = qevening;  
   color = cevening;
 }
$('.small-text').append(themessage);
$('.grettings p').append(quote);
$('.greeting').css('border-left', '2.5px solid ' + color );
//]]>
</script>

2. Setelah itu copy code CSS dibawah ini dan paste diatas ]]></b:skin> atau </style>.

.greeting {background-color: #ffffff;border: 0;border-bottom: 1.5px solid;border-radius: 5px;box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);}
.greeting {background: #fff;padding: 15px;position: relative;border: 0;}
.grettings .small-text {font-weight: 600;font-size: 15.5px;padding-right: 50px;display: block;}
.grettings .small-text img {width: 40px;height: 40px;object-fit: cover;position: absolute;right: 14px;top: 50%;transform: translateY(-50%);pointer-events: none;user-select: none;}
.grettings p {font-weight: normal;font-size: 13px;margin-bottom: 0;margin-top: 5px;line-height: 16px;padding-right: 50px;}

3. Taruh Kode berikut ditempat manapun yang anda suka.

<div class='greeting'><div class='grettings'><div class='small-text'></div><p></p></div></div>

4.selesai.