Widget Ucapan Selamat Pagi,Siang dan Malam Otomatis di Blog
Widget Ucapan Selamat Pagi,Siang,Malam Otomatis di Blog

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
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.
9 komentar
Wow, keren gan. Izin nyoba...
BalasHapussip. nanti ane update lagi kodenya biar caption bawahnya otomatis
HapusMantap bangg, makasi tutornya 👍😁
BalasHapussip. nanti ane update lagi kodenya biar caption bawahnya otomatis
HapusGa work bgsd
BalasHapusSalah step, or ga pasang jQuery
HapusThanksss gan, worked di blog ane. sukses selalu!
BalasHapussaya pasang diblog saya kok jadi kolom komentar pada versi seluler jadi ngga muncul.
BalasHapusmasa sih? perasaan ga ada kode lain, mungkin agan salah pasang
Hapus