How to add a Weather Gadget on your Website

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

Also Read: How to add Contact form Page in Blogger

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

Weather Gadget Code

<div class="wcov">
<div class="tunebnweather">
<!-- Don't edit this -->
<a href="https://www.tunebn.co" rel="dofollow" style="display:none">WWW.TuneBN.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 this -->
<div class="wcre">Weight by: <a href="https://www.tunebn.co" rel="dofollow" target="_blank">WWW.TuneBN.COM</a></div>
</div>

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

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

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

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

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