How to add a Weather Gadget on your Website | আপনার সাইটে যুক্ত করে নিন Weather Gadget

স্বাগতম আপনাকে উইকিবিএন এর আরেকটি নতুন টিটোরিয়ালে। আর আজকের এই টিটোরিয়াল আমি আপনাদের সাথে শেয়ার করব অসাধারন একটি Weather Gadget কোড। যেটির মাধ্যমে আপনি আপনার সাইটিকে আরো আকর্ষণীয় করে তুলতে পারবেন এছাড়াও কোডটিকে ইচ্ছা মতোন কাস্টমাইজ করে আপনার পছন্দের এলাকা সিলেক্ট করে দিতে পারবেন।

Also Read: Footer Sticky Ads code of WikiBN

যেহেতু এটি HTML কোড তাই এটি আপনি যেকোন সাইটে ব্যবহার করতে পারবেন। যেটা ব্লগার হোক বা ওয়ার্ডপ্রেস হোক কিংবা ওয়াপকিজই হোক না কেন। শুধু মাত্র নিচের দেওয়া কোডটি কপি করে পেস্ট করে দিতে হবে যেখানে আপনি এটা শো করাতে চান। আর কোডটির লাইভ ডেমো দেখতে এখানে ক্লিক করুন।

Weather Gadget Code

<div class="wcov">
<div class="wikibnweather">
<!--Don't edit it-->
<a href="https://www.wikibn.com" rel="dofollow" style="display:none">WWW.WIKIBN.COM</a>

<!-- Main Script -->
<a class="weatherwidget-io" href="https://forecast7.com/en/23d8190d41/dhaka/" data-label_1="DHAKA" data-label_2="WEATHER" data-theme="original" >DHAKA WEATHER</a>
<script>
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src='https://weatherwidget.io/js/widget.min.js';fjs.parentNode.insertBefore(js,fjs);}}(document,'script','weatherwidget-io-js');
</script>
<!-- Main Script End -->

</div>

<!-- You Can edit it -->
<div class="wcre">Weight by: <a href="https://www.wikibn.com" rel="dofollow" target="_blank">WWW.WIKIBN.COM</a></div>
</div>

<!-- Don't try to edit it -->
<style>
.wcov {background:#fff;border:1px solid #ddd}
.wikibnweather {pointer-events: none!important;}
.wcre {font-size:10px;text-align:right;padding:4px;background:#fff;}
</style>

এই কোডটি দিয়ে শুধু মাত্র ঢাকার Weather শো করবে। আপনি যদি শুধু ঢাকার Weather শো করাতে চান সেক্ষেত্রে আপনাকে কোন এডিট করতে হবে না যদি অন্য কোন এলাকার শো করতে চান তাহলে নিচের স্টেপ গুলোন ফলো করুন -

1. প্রথমে এই লিংকে গিয়ে আপনি আপনার পছন্দের এলাকা দিয়ে GET CODE এ ক্লিক করে কোডটি কপি করে নিন।
2. তারপর উপরের কোডটির যে জায়গা গুলো লাল রঙের আছে সেগুলো মুছে আপনার কপি করা কোডটি বসিয়ে দিন।
3. ব্যাস কাজ শেষ।

Also Read: [CSS3 FUN] এখন থেকে আপনার সাইটের Background Color আপনা-আপনি পরিবর্তন হবে

নোটঃ কোডের সবুজ রঙ করা অংশটি ক্রেডিট অংশ। আপনি চাইলে সেটি এডিত করতে পারবেন। অন্য, কোন কিছু এডিট করবেন না।

Donate us by clicking this ads !!

এই ছিল আজকের টিউন আশা করছি ভালো লেগেছে। কোথাও কোন সমস্যা হলে এবং পোস্টটি সম্পর্কে মতামত জানাতে কমেন্ট করুন।