How to make a Digital Clock Widget in Blogger Website.
|
| How to make a Digital Clock Widget in Blogger Website. |
नमस्ते सबको! Kamal Bhai Ji Website में आपका पुनः स्वागत है। आप सब कैसे हैं? मुझे आशा है कि आप सभी अच्छे होंगे। आज का हमारा Article हैं,How to make a Digital Clock Widget in Blogger Website. के बारे में है। आप इसे अपने Blogger Website पर कहीं भी जोड़ सकते हैं। तो चलिए शुरू करते हैं आज का Article.
HOW TO MAKE A DIGITAL CLOCK WIDGET ON A BLOG?
क्या आपने कभी सोचा है कि blogger पर समय कैसे प्रदर्शित किया जाए? इस article में हम चर्चा करेंगे कि किसी blog, blogger, पर घड़ी widgets कैसे बनाया जाए।
Blog पर घड़ी प्रदर्शित करना एक ऐसा कदम है जिसका उपयोग आपके Blog को सुंदर बनाने के लिए किया जा सकता है। इसका उपयोग करने के लिए कई website हैं जो घड़ी widget प्रदान करती हैं जिन्हें आप मुफ्त में उपयोग कर सकते हैं।
हालाँकि, कभी-कभी Third Party के widget को हमारे desired format के अनुसार Cutomized करना मुश्किल होता है, इसीलिए इस बार हम Open Source Code Vue.Js का उपयोग करके एक Digital घड़ी बनाएंगे। कैसे करें?
Creating a Digital Clock Widget on a Blog Using Vue.Js
Article शुरू करने से पहले, आप नीचे blog के लिए एक Digital घड़ी का Demo Display देख सकते हैं
DIGITAL CLOCK WIDGET USING VUE.JS
- Blogger Dashboard खोलें .
- Layout menu का चयन करें.
- ADD GADGET पर Click करें .
- HTML/Javascript चुनें .
- नीचे दिए गए code को copy करें और content section में Pest करें।
- SAVE पर Click करें .
More Articles on this topic
<div id="wrapperdigital">
<div id="clock">
<div class="date">{{ date }}</div>
<div class="time">{{ time }}</div>
<div class="text">DIGITAL CLOCK BY KAMAL BHAI JI</div>
</div>
</div>
<style>
#clock {background:#fffdfc;height:100%;width:100%;color:#3c4043;text-align:center;margin:0;padding:25px;border-radius:22px;line-height:1.6;border:1px solid rgbaundefined155,155,155,0.15)}
#clock .time {letter-spacing:0.05em;font-size:55px;padding:0px;background:rgbaundefined255,255,255,.9);border-radius:10px;border:1px solid rgbaundefined0,0,0,0.05);z-index:1;position:relative;}
#clock .date {letter-spacing:0.1em;font-size:20px;padding:10px;}
#clock .text {letter-spacing:0.1em;font-size:12px;padding:10px;z-index:1;position:relative;}
#wrapperdigital {position:relative;overflow:hidden}
#wrapperdigital:before {content:'';display:block;position:absolute;bottom:0;right:0;width:120px;height:120px;background-image:linear-gradientundefinedto right,#25aae1,#40e495,#30dd8a,#2bb673);background-repeat:no-repeat;border-radius:120px 0 22px;transition:opacity .3s;opacity:1}
/* FreemiumTech.blogspot.com */
</style>
<!--[ Vue.Js Clock by KAMAL BHAI JI ]-->
<script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js'></script>
<script type='text/javascript'>
var clock=new Vueundefined{el:"#clock",data:{time:"",date:""}}),week=["SUNDAY","MONDAY","TUESDAY","WEDNESDAY","THURSDAY","FRIDAY","SATURDAY"],timerID=setIntervalundefinedupdateTime,1e3);function updateTimeundefined){var e=new Date;clock.time=zeroPaddingundefinede.getHoursundefined),2)+":"+zeroPaddingundefinede.getMinutesundefined),2)+":"+zeroPaddingundefinede.getSecondsundefined),2),clock.date=week[e.getDayundefined)]+", "+zeroPaddingundefinede.getDateundefined),2)+"-"+zeroPaddingundefinede.getMonthundefined)+1,2)+"-"+zeroPaddingundefinede.getFullYearundefined),4)}function zeroPaddingundefinede,t){forundefinedvar a="",d=0;d<t;d++)a+="0";returnundefineda+e).sliceundefined-t)}updateTimeundefined);
</script>
Edit the code CSS according to the appearance of your blog to make it more attractive and adjust the text as desired.
CONCLUSION
इस पोस्ट में मैंने Blogger Website में Digital Clock Widget कैसे बनाएं के बारे में एक Tutorial Article बनाया है। जो आपकी website को खूबसूरत Look देता है। मुझे आशा है कि आपको यह पसंद आया होगा और कृपया इसे अपने दोस्तों के साथ shere करें और अधिक जानकारी के लिए हमारे Blog का Follow करें।
हमारे सभी पोस्ट DMCA द्वारा सुरक्षित हैं । इसलिए हमारे पोस्ट को कॉपी करने की कोशिश न करें और किसी भी तरह से पुनरुत्पादन सख्त वर्जित है! अन्यथा कानूनी कार्रवाई की जाएगी।
