ব্লগস্পট ও ওয়ার্ডপ্রেসের ব্লগপোস্টে HTML ও জাভাস্ক্রিপ্ট অরিজিনাল কোড যেভাবে ডিসপ্লে করবেন

আসসালামুয়ালাইকুম।আপনারা যারা ব্লগস্পট ব্যবহার করেন তারা অনেকই দেখেছেন HTML ও জাভাস্ক্রিপ্ট এর কোড সমুহ ব্লগ পোস্টে ডিসপ্লে করে না।ওয়ার্ডপ্রেস ব্যবহারকারীরাও এ সমস্যা থেকে মুক্ত নয় ।ব্লগস্পটে সাধারনত কোডসমূহের আউটপুট ডিসপ্লে করে কিন্তু কোডসমুহ সরাসরি ডিসপ্লে করা যার না। যেমন ট্যাগ( > এবং < ) দিয়ে শুরু করা কোনো লেখা যদি ব্লগপোস্টে লেখেন তাহলে এর প্রিভিউতে কিছুই দেখতে পাবেন না।এই ধরনের সমস্যা থেকে মুক্তি পাওয়ার জন্য আপনি কাস্টম ডিসপ্লে বক্স ব্যাবহার করতে পারেন। ওয়ার্ডপ্রেসে একইভাবে করা যায় তবে ওয়ার্ডপ্রেসে একাউন্ট না থাকায় আমি সঠিক সিস্টেমটা বলতে পারছিনা। কাস্টম প্রিভিউ বক্সে কোড অপরিবর্তিত অবস্থায় সরাসরি ডিসপ্লে করে। ডেমো দেখতে চাইলে এখানে ক্লিক করুন। ব্লগস্পটে কাস্টম ডিসপ্লে বক্স তৈরি করতে প্রথমে আপনার একাউন্টে লগিন করে ড্যাসবোর্ড থেকে ডিজাইনে যান।এর পর Expand Widget Templates এ ক্লিক করুন। (এখানে স্মরন করিয়ে দেয়া ভাল যে,আপনার টেম্পলেটের যে কোনো পরিবর্তন করার আগে তা হার্ডডিস্কে সেভ করে রাখুন যাতে পরবর্তীতে কোনো সমস্যা হলে পুনরায় আগের অবস্থায় ফিরে যাওয়া যায়)

এরপর নিম্নোত্ত কোডটি খুজে বের করুন।কোড না পেলে Ctrl + F চেপে যে বক্স আসবে তাতে কোডটি লিখে সার্চ করুন।

]]21/b:skin2

কোডটি খুজে পেলে নিচের কোডটি তার ঠিক আগে কপি করে পেস্ট করুন নিচে দেয়া চিত্র অনুসারে ,

html & Javascript

pre{background:#efefef;border:1px solid #A6B0BF;font-size:120%;line-height:100%;overflow:auto;padding:10px;color:#000000 }pre:hover {border:1px solid #efefef;}code {font-size:120%;text-align:left;margin:0;padding:0;color: #000000;}.clear { clear:both;overflow:hidden;}

এবার টেম্পপ্লেট সেভ করে বের হয়ে আসুন। কাজ ৯০% শেষ।

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

1pre2 এবং পরে 1/pre2

দিলেই কোডসমুহ পোস্টে ডিসপ্লে হবে।অর্থাৎ ট্যাগটি নিম্নোক্ত রকমে হবে,

1pre2 এইচটিএমএল ও জাভাস্ক্রিপ্ট কোডসমুহ 1/pre2

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

Level 0

আমি নিশাচর নাইম। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 14 বছর যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 47 টি টিউন ও 1182 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 0 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।

তেমন কিছু জানি না, কিছু জানলে তা অন্যদের শিখানোর চেষ্টা করি যতটুকু সম্ভব।জ্ঞান নিজের মাঝে সীমাবদ্ধ না রেখে সবার মাঝে ছড়িয়ে দেয়াই প্রকৃত সার্থকতা।


টিউনস


আরও টিউনস


টিউনারের আরও টিউনস


টিউমেন্টস

কারো আরো সহজ নিয়ম জানা থাকলে বললে খুশি হব। 😀

    naim vai ami boli।
    যদি কনো কোড দিতে চান আপনার ব্লগে তাহকে কডের শুরুতে লিখে দিবেন ও শেষে দিবেন। এখানে আমি স্পেস দিয়েছি আপনে স্পেস দিবেন না, স্পেস না দিলে দেখতে পারতেন না তাই দিলাম। ক্লিয়ার?

    hay hay কোড তবুও আসে নাই। লিংক দেখুন
    http://www.w3schools.com/tags/tag_pre.asp

    ভাই আমি ৫ ঘন্টা বসে HTML এর সব ট্যাগ ব্যবহার করে দেখেছি কিন্তু কোনো ট্যাগ দিয়েই প্রিভিউ আসে না। ;(

ওয়ার্ডপ্রেসে সিট্যাক্স হাইলাইটার নামে একটা প্লাগইন আছে। ঐটা দিয়ে প্রায় সব ধরণের কোডই দেখানো যায়। এটার সবচেয়ে বড় সুবিধা হল এটা কোডকে খুব সুন্দরভাবে হাইলাইট করে।

————————————————–
Movie, Music, Ebooks, Software all is here.

    যাক ওয়ার্ডপ্রেস ব্যবহারকারীরা তো বেচে গেলো। আমরা ব্লগারবাসীরা কি করব? 🙁

ধন্যবাদ ভাই।
আমার ব্লগঃ http://www.it-world.tk