Lewati ke konten utama
Widget Ucapan Selamat Pagi,Siang dan Malam Otomatis di Blog

Widget Ucapan Selamat Pagi,Siang dan Malam Otomatis di Blog

Tutorial/How-to
3 menit baca 24 views

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/AVvXsEhB7H_05jA3hBWfFU4wN3c1TNtyBtasRxLtYFVHrwBEY1WmRFIibZHEU2AfRiaSa1COWrZ6IE2YK3Ec6CGPoE32jSBoCXq5W5_jCwkCTDoFRY63Uo6gtxP7zdOWtFp1RqqFPwPnVjZNb8dT/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/AVvXsEiE8KSjl1bAMYXT-pWSAoKPVdTPfRo-6hYI33IssYfBQAWRVklu2eJDQtsMGTOVINF_Z4V45JsFn1ujv06oi2JVjbGjZ_B42iAeeH6modx29QQhcXypzzvbBD8F4ZDPiFNMhe5OSOWztgtk/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/AVvXsEjJ1Y-4LheJJy1-jCeSL6iv6IErsaA52v4GqzM43P-3TKju7WVxFPHO1pRinewWUcUJgu9lss0eoFDPwgtuWKR5E6L4NiQTY7kufD6DzcW8ivUYrHixmhZaGD3fSFpR5oSvLrQei8jadAuK/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

Tinggalkan Komentar

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *