Blogger / Web Sitesi İçin Basit Dijital Saat - bu öğreticide paylaşacağım, blogcu blogunda basit bir dijital saati nasıl paylaşacağım. Bu blogcu basit bir parçasıdır.
Bu bölüm blogunuz için önemli değil. Bu sadece bir blogun güzelliği. Bu numarayı wordpress gibi her web sitesinde kullanıyorsunuz.
İlk başta hangi widget'ı gördünüz? Evet, bu yazı ile ilgili eğiticimiz. Şimdi ana kısma gelin. Çalışmaya başlamadan önce, lütfen şablonunuzun bir yedek dosyasını saklayın ve çalışmaya başlayın.
Öncelikle Şablon-Html Düzenle'ye tıklayalım. Daha sonra Ctrl+F yardımıyla </style> veya ]]></b:skin> kodlarını bulalım ve bulduğumuz kodun üzerine gelecek şekilde aşağıda ki CSS kodlarını ekleyelim.
#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 şablonunuzu kaydedin kayıt ettikten sonra Temamızın Düzen bölümünden Gadget Ekle tıklayarak "HTML/JavaScipt" tıklayarak aşağıda ki JavaScript kodlarını ekleyerek temamızı kaydedelim.
... <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> ...See the Pen Digital Saat Eklentisi by Serkan Gündoğdu (@serkangundogdu13) on CodePen.
Bütün işlemler bu kadar herkese kolay gelsin.