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 เคเคฐें .
<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 เคฆ्เคตाเคฐा เคธुเคฐเค्เคทिเคค เคนैं । เคเคธเคฒिเค เคนเคฎाเคฐे เคชोเคธ्เค เคो เคॉเคชी เคเคฐเคจे เคी เคोเคถिเคถ เคจ เคเคฐें เคเคฐ เคिเคธी เคญी เคคเคฐเคน เคธे เคชुเคจเคฐुเคค्เคชाเคฆเคจ เคธเค्เคค เคตเคฐ्เคिเคค เคนै! เค เคจ्เคฏเคฅा เคाเคจूเคจी เคाเคฐ्เคฐเคตाเค เคी เคाเคเคी।