Joecalih
  • Blogging
    • WordPress
    • Blogger
      • Blogger Widgets
    • Marketing
      • Content Marketing
      • Social Media Marketing
      • Email Marketing
      • Affiliate Marketing
    • Tips & Tricks
  • SEO
    • What is SEO
      • White Hat SEO
      • Black Hat SEO
    • SEO Tutorials
      • Local SEO
      • Video SEO
      • Image SEO
    • Beginners SEO
    • On-Page-SEO
    • SEO ToolsFree
    • Link Building
    • PPC
  • Graphics
    • Photoshop
      • Photoshop Actions
      • Photoshop Brushes
      • Photoshop Overlays
      • Photoshop Textures
      • Photoshop Tutorials
    • Lightroom
      • Lightroom Presets
      • Lightroom Mobile Presets
      • Lightroom Tutorials
    • Premuire Pro
    • Design
      • Posters
      • Mockups
      • Vectors
  • Photography
  • Shop$69
  • Offers
  • Support
  • Licenses
  • Advertise
Subscribe
Joecalih
Joecalih
  • Blogging
    • WordPress
    • Blogger
      • Blogger Widgets
    • Marketing
      • Content Marketing
      • Social Media Marketing
      • Email Marketing
      • Affiliate Marketing
    • Tips & Tricks
  • SEO
    • What is SEO
      • White Hat SEO
      • Black Hat SEO
    • SEO Tutorials
      • Local SEO
      • Video SEO
      • Image SEO
    • Beginners SEO
    • On-Page-SEO
    • SEO ToolsFree
    • Link Building
    • PPC
  • Graphics
    • Photoshop
      • Photoshop Actions
      • Photoshop Brushes
      • Photoshop Overlays
      • Photoshop Textures
      • Photoshop Tutorials
    • Lightroom
      • Lightroom Presets
      • Lightroom Mobile Presets
      • Lightroom Tutorials
    • Premuire Pro
    • Design
      • Posters
      • Mockups
      • Vectors
  • Photography
  • Shop$69
  • Offers
Joecalih Freebies
  • Landscape Lightroom Presets Landscape Lightroom Presets
    Rated 5.00 out of 5
    $30.00 $0.00
  • Premium Lightroom Presets Pack Lightroom Presets Pack Pro $50.00 $0.00
  • Food Lightrrom Presets Food Photography Lightroom Presets $50.00 $0.00
  • Architecture Lightroom Presets Architecture Lightroom Presets $80.00 $0.00
0
  • Blogger Widgets

Responsive Digital Clock Widget For Blogger Website

  • Joecalih
  • November 29, 2020
  • No comments
  • 83 views
  • 1 minute read

It’s cool to engage your website visitors with things that are going to keep them on your website, such things include the Responsive Digital Clock Widget For Blogger Website. The widget has a responsive look that will leave your website looking simple and minimalistic. The widget uses the user’s GPRS and you can be assured that the time will always show according to their location area.

How To Add The Digital Clock Widget to Blogger.

1. Go to blogger.com
2. Select Your blogger website
3. Click on Layout on the far left option.
4. In the sidebar section click on add gadget
5. In the dialogue box option, click on HTML/Javascript
6. Add the below code in the code box

 <style>
#realtime {
    font-family: Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
    font-weight: 700;
    display: block;
    text-align: center;
    font-size: 30px;
    padding: 4rem 0;
}

#realtime span {
    display: inline-block;
    font-family: Avenir Next, Nunito, sans-serif;
    font-weight: 100;
    font-size: 8vw;
    position: relative;
    top: -2vw;
}

@media all and (max-width: 600px) {
    #realtime {
        font-size: 4rem;
        padding: 2rem 0;
    };
}

@media all and (max-width: 350px) {

    #realtime {
        font-size: 3rem;
        padding: 2rem 0;
</style>
<time id="realtime"></time>
<script type='text/javascript'>
var currentTime = document.getElementById("realtime");
function zeropadder(n) {
  return (parseInt(n,10) < 10 ? '0' : '')+n;
}
function updateTime(){
  var timeNow= new Date(),
  hh = timeNow.getHours(),
  mm = timeNow.getMinutes(),
  ss = timeNow.getSeconds(),
  formatAMPM = (hh >= 12?'PM':'AM');
  hh = hh % 12 || 12;
  currentTime.innerHTML = hh + ":" + zeropadder(mm) + ":" + zeropadder(ss) + " " + formatAMPM;
  setTimeout(updateTime,1000);
}
updateTime();
</script>

7. Save your layout and Refresh your website.

Total
0
Shares
Share
Tweet
Pin it

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Lattest
  • Joecalih photography 2021 Breakdown
  • Google Translate Widget For Blogger Website
  • Responsive Digital Clock Widget For Blogger Website
  • Page Views Stats Widget For Blogger
  • Facebook Like Box Popup Blogger Widget

Subscribe now to our newsletter

  • Blogger Themes
  • After Effects Templates
  • MockupsNew
  • Blogger Widgets
  • Photoshop Tutorials
  • Blogger TutorialsFree
  • Search Engine Optimization
  • WordPress Tutorials
  • Lightroom Presets$5
  • Camera Raw Presets
  • Premuire Pro Presets
  • Graphic designFree
Joecalih
  • About Us
  • Contact Us
  • Support
  • Cookies
  • © 2020 Joecalih Media inc.

Input your search keywords and press Enter.