Blogger / Web Sitesi İçin Basit Dijital Saat Eklentisi

Blogger / Web Sitesi İçin Basit Dijital Saat  bu eğiticide blogger blogunda basit bir dijital saati nasıl paylaşacağımı paylaşacağım. Blogger’ın basit bir parçası bu.

Bu bölüm blogunuz için önemli değil. Bu bir blogun güzelliğidir. Bu numarayı wordpress gibi her web sitesinde kullanıyorsunuz.

İlk başta hangi widget'ı gördünüz? Doğru, Bu bizim bu yazının öğreticimiz. Şimdi ana bölüme gel. Çalışmaya başlamadan önce lütfen şablonunuzun bir yedekleme dosyasını saklayın, ardından çalışmaya başlayın.

Öncelikle Şablon> HTML Düzenle üzerine tıklayın ve   sonra " Ctrl + F " tuşlarına basın ve ]]></b:skin> veya </style> kodunu bulualım ve bulduğumuz kodun üzerine gelecek şekilde aşağıda ki CSS kodlarını ekleyelim.

CSS#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;
    };
}

Şimdi Şablonu Kaydet ve Düzen'i tıklayın  , ardından yeni HTML / Javascript Widget'ı ekleyin  ve aşağıdaki kodu kopyalayın.

HTML<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>

Bütün işlemler bu kadar herkese kolay gelsin.

Demo Buraya Tıkla