যারা ফ্রন্ট এন্ড ডেভেলপিং কিংবা ওয়েব ডিজাইন করার জন্য আমরা বিভিন্ন কোড এডিটর ব্যবহার করে থাকি।কম্পিউটার হলে লাইভ কোড এডিটর ব্যবহার করা যায়।এর মাধ্যমে আমরা আমাদের টাইপ করা সকল Html,css,js কোডের আউটপুট লাইভ দেখতে পারি।কিন্তু আমি যদি বলি যে কোনো অ্যাপ ছাড়াই মোবাইল কিংবা পিসিতে লাইভ কোড এডিটর ব্যবহার করা যাবে তবে কেমন হবে?

আপনি হয়তো ভাবছেন আমি কোনো ওয়েবসাইটের লাইভ কোড এডিটর সম্পর্কে বলছি। অনলাইনে এমন অনেক ওয়েবসাইট পাওয়া যাবে যেখানে লাইভ কোড এডিটর রয়েছে।সেগুলো ব্যবহার করে আমাদের কোডের লাইভ আউটপুট দেখতে পারবো।কিন্তু আমি আজকে আপনাদের দেখাবো,কিভাবে ব্লগারে লাইভ কোড এডিটর বানাবেন।

হ্যাঁ,ঠিক পড়েছেন।ব্লগারে লাইভ কোড এডিটর।আমরা এখন চাইলেই সামান্য কয়েক লাইন html,css এবং js দিয়ে আমাদের ব্লগার ব্লগে লাইভ কোড এডিটর বানাতে পারি।যেটা দিয়ে আমরা আমাদের ওয়েব ডিজাইন করার জন্য html,css,js এর লাইভ আউটপুট দেখতে পারবো।এখন আলাদা করে আমাদের কোনো অ্যাপ্লিকেশন ডাউনলোড দিতে হবে না কিংবা কোনো ওয়েবসাইটের উপর নির্ভর করতে হবে না। নিজের ওয়েবসাইটে অনেক সহজেই লাইভ কোড এডিটর বানিয়ে সেটা ব্যবহার করতে পারবো।

এই লাইভ কোড এডিটরটি w3school এর Try it Editor এর মত।যেখানে আমরা html,css,js টাইপ করলে লাইভ আউটপুট দেখতে পারি।

ব্লগারের জন্য লাইভ কোড এডিটর

নিচে দেখানো পদ্ধতি অনুসরণ করলে আপনি সহজেই ব্লগারে একটি লাইভ কোড এডিটর বানাতে পারবেন।এই Live Code Editor এ পাবেন ৪টি বক্স।যেখানে একটিতে HTML, আরেকটিতে CSS, অন্যটিতে Javascript টাইপ করবেন এবং অবশিষ্ট বক্সটিতে আপনি আপনার টাইপ করা কোডের লাইভ আউটপুট দেখতে পারবেন।

ডেমো দেখতে : এখানে ক্লিক করুন

চলুন শুরু করা যাক, আজকের পোস্ট Live code editor for Blogger বানানোর প্রক্রিয়া।

Step 1 : প্রথমে যাবেন Blogger এ।তারপর যাবেন Pages এ।

Step 2 :তারপর +(plus) আইকনে ক্লিক করবেন।

Step 3 :এখন এখানে ক্লিক করুন।

Step 4 :তারপর HTML VIEW অন করে দিন।

Step 5 :এখন ইচ্ছে মত একটি টাইটেল দিন।

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

<style type="text/css">
.pixlP{padding:16px 20px;background-color:#fefefe;box-shadow:0 5px 35px rgb(0 0 0/7%);border:0;border-radius:10px;font-size:14px} 
.drK .pixlP{background-color:#000;color:#fff;box-shadow:0 0 0;}.iframe {bottom: 0;position: relative;width: 100%;height: 35em;}
.sidebar {display:none;}
</style>
  
<div class=pixlP><input class="hidden tbIn"id=fTabs-1 name=postTabs type=radio checked> <input class="hidden tbIn"id=fTabs-2 name=postTabs type=radio> <input class="hidden tbIn"id=fTabs-3 name=postTabs type=radio><div class="scrlH tbHd"><label data-text=HTML for=fTabs-1></label> <label data-text=CSS for=fTabs-2></label> <label data-text=JAVASCRIPT for=fTabs-3></label></div><div class=tbCn><div class=tbText-1><a name=more></a> <textarea id=html placeholder="Type Your HTML"rows=10></textarea></div><div class=tbText-2><textarea id=css placeholder="Type Your CSS"rows=10></textarea></div><div class=tbText-3><textarea id=js placeholder="Type Your JAVASCRIPT"rows=10></textarea></div></div></div><br><div class=pixlP><h2 class=title>OutPut</h2><iframe id=code></iframe></div>
  
<script type="text/javascript">
function compile(){var e=document.getElementById("html"),t=document.getElementById("css"),n=document.getElementById("js"),o=document.getElementById("code").contentWindow.document;document.body.onkeyup=function(){o.open(),o.writeln(e.value+"<style>"+t.value+"</style><script>"+n.value+"<\/script>"),o.close()}}compile();
</script>

আপনার পাবলিশ করা পেজ/পোস্টটি ভিজিট করে দেখুন আপনার ব্র্যান্ড নিউ Live Code Editor রেডি।

উপসংহার

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

ব্যাকলিংক কি? কীভাবে ব্যাকলিংক বানাবেন?

প্রিমিয়াম ব্লগার টেমপ্লেট , ব্লগিং টিপস , ব্লগার উইজেট স্ক্রিপ্ট , এসইও টিপস পেতে ভিজিট করুন আমার Blogen ব্লগ।আল্লাহ হাফেজ।

27 thoughts on "ব্লগারে লাইভ কোড এডিটর বানান সহজেই | HTML, CSS, JS Live Code Editor"

    1. Levi Author Post Creator says:
      দুঃখিত! ডেমো দিতে ভুলে গেছিলাম।এখন চেক করুন।
  1. Nayan Contributor says:
    Etodin dore etai khojchilam Thanks
    1. Levi Author Post Creator says:
      স্বাগত।
  2. Tushar Ahmed Author says:
    Not worked in my template!
    1. Levi Author Post Creator says:
      কি সমস্যা হয়েছে যদি বলতেন,তাহলে হয়তো সমাধান দিতে পারতাম।
    2. Tushar Ahmed Author says:
      HTML code likhle shetaar output dekhay naa!
    3. Levi Author Post Creator says:
      সবগুলো কোড আবারও কপি করে রিপ্লেস করে দেখেন তো।
  3. Nayan Contributor says:
    Vai ami notun blogging shoro korbo babchi kintu banglai korbo naki english a kicu bojthey parci nah oneke bole banglai income kom kintu competition kom kintu english a income besi competition besi. Kicui bhojthey parci nah ki korbo
    1. Nirob Sagor Author says:
      ইউনিক বিষয় নিয়ে কাজ করতে পারলে ইংরেজি বেস্ট হবে।
    2. Levi Author Post Creator says:
      ইংলিশ লিখতে পারলে ইংলিশে ব্লগিং শুরু করা উচিত।নয়তো বাংলা ভালো হবে।আর ভিজিটর থাকলে অনেক উপায়ে ব্লগিং করে ইন#কাম করা সম্ভব।
  4. এইটা হলো পোষ্ট।অসাধারণ।
    1. Levi Author Post Creator says:
      ধন্যবাদ সুন্দর মন্তব্য করার জন্য।
    2. ওয়েলকাম।
    3. Levi Author Post Creator says:
      You’re too.
  5. Ashraful Author says:
    Valoi laglo. Carry on
    1. Levi Author Post Creator says:
      Thanks.
    2. Ashraful Author says:
      Welcome 😁
    3. Levi Author Post Creator says:
      Okay.
    1. Levi Author Post Creator says:
      Obviously working. Check the demo link.
    1. Levi Author Post Creator says:
      কি সমস্যা হচ্ছে বললে ভালো হয়।
  6. MD Shakib Hasan Author says:
    Google Adsense কিভাবে পাওয়া যাবে সেটা নিয়ে পোস্ট করেন।
    1. Levi Author Post Creator says:
      ঠিক আছে ভাই।
  7. m4hin Contributor says:
    ওয়ার্কিং।ভালো লেগেছে এইটা।
    1. Levi Author Post Creator says:
      আরো এমন স্ক্রিপ্ট পাবেন।

Leave a Reply