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://2.bp.blogspot.com/-bvB7aPS6GFQ/XqX3xPcg-GI/AAAAAAAABXs/SNSPWzgF7DI06_Kgp_jl9mAwR6yKq3veQCLcBGAsYHQ/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://4.bp.blogspot.com/-jNmgywogh08/XqX3xJZDnKI/AAAAAAAABXo/QY-efOROUHgVZcTdls-jHZLv1IGEJ8n3wCLcBGAsYHQ/s500/sun.png"/>');
var qafternoon = 'Jangan patah semangat mari bangkit dan buktikan kepada dunia';
var cafternoon = '#ffc107';
var evening = ('Selamat malam <img src="https://4.bp.blogspot.com/-yoeePi7vAGE/XqX3w89n9tI/AAAAAAAABXk/uqmg3Jk4O4A6Cj4sKflJgptZ40L03ZkCwCLcBGAsYHQ/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.
Jika ada yang ingin anda tanyakan cukup tanya saya di fb saya Klik disini.
* Kode di Update Pada Senin 27 April pukul 09.07 WIB
* Silahkan Ulangi Tutorial agar dapat merasakan perbedaannya