Share Posts "Widget Ucapan Selamat Pagi,Siang dan Malam Otomatis di Blog"
Salin link
Bagikan ke Facebook
Bagikan ke Twitter
Bagikan ke Pinterest
Bagikan ke Telegram
Bagikan ke Whatsapp
Bagikan ke Linkedin
Bagikan ke Tumblr
Bagikan ke Line
Bagikan ke Email

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

Pemrograman

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.