Widget Ucapan Selamat Pagi,Siang dan Malam Otomatis di Blog

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://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. untuk demo tampilannya Klik disini

* Kode di Update Pada Senin 27 April pukul 09.07 WIB
* Silahkan Ulangi Tutorial agar dapat merasakan perbedaannya
April 26, 2020 • 9 komentar
Disclaimer: gambar, artikel ataupun video yang ada di web ini terkadang berasal dari berbagai sumber media lain. Hak Cipta sepenuhnya dipegang oleh sumber tersebut. Jika ada masalah terkait hal ini, Anda dapat menghubungi kami di halaman ini.
Isi dari komentar adalah tanggung jawab dari pengirim. FYI Indonesia mempunyai hak untuk tidak memperlihatkan komentar yang tidak etis atau kasar. Jika ada komentar yang melanggar aturan ini, tolong dilaporkan.
  1. Wow, keren gan. Izin nyoba...

    BalasHapus
    Balasan
    1. sip. nanti ane update lagi kodenya biar caption bawahnya otomatis

      Hapus
  2. Mantap bangg, makasi tutornya 👍😁

    BalasHapus
    Balasan
    1. sip. nanti ane update lagi kodenya biar caption bawahnya otomatis

      Hapus
  3. Thanksss gan, worked di blog ane. sukses selalu!

    BalasHapus
  4. saya pasang diblog saya kok jadi kolom komentar pada versi seluler jadi ngga muncul.

    BalasHapus
    Balasan
    1. masa sih? perasaan ga ada kode lain, mungkin agan salah pasang

      Hapus