ব্লগারে পোস্টের ভিতরে কিভাবে কোড দেখাবেন

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

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

ব্লাগরে পোস্টের ভেতরে কিভাবে কোড দেখাবেন

ব্লগারে পোস্টের ভেতরে কিভাবে কোড দেখাবেন

ব্লগারে কোড বক্স এড করার জন্য আজকে আমি দুটি পদ্ধতি দেখাবো। একটি টেম্পলেট এডিট করে আরকটি External CSS এড করে।

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

পদ্ধতি ১ঃ

  • প্রথমে আপনার ব্লগার ড্যাশবোর্ডে লগিন করুন।
  • এরপর Theme > Edit HTML এ যান।
  • এরপর কিবোর্ডে CTRL + F ক্লিক করে করুন। একটা সার্চ বক্স ওপেন হবে। এখানে ]]<b/:skin> এই লেখাটি সার্চ করুন।
  • এবার ]]<b/:skin> এই ট্যাগটির আগে নিচের কোডটি কপি করে নিয়ে বসিয়ে দিন।
 .code { background:#f5f8fa; background-repeat:no-repeat; border: solid #5C7B90; border-width: 1px 1px 1px 20px; color: #000000; font: 13px ‘Courier New’, Courier, monospace; line-height: 16px; margin: 10px 0 10px 10px; max-height: 200px; min-height: 16px; overflow: auto; padding: 28px 10px 10px; width: 90%; } .code:hover { background-repeat:no-repeat; }
  • কোড বসানের পর টেম্পলেট Save করুন।

পদ্ধতি ২ঃ

  • প্রথমে ব্লগার ড্যাশবোর্ডে লগিন করুন।
  • এরপর Theme > Customize অপশনে যান।
  • এরপর Advance এ ক্লিক করুন।
  • এবার Add CSS এ ক্লিক করুন।
  • এরপর নিচের কোডটি কপি করে নিয়ে বসিয়ে দিয়ে Apply to Theme ক্লিক করুন।
 .code { background:#f5f8fa; background-repeat:no-repeat; border: solid #5C7B90; border-width: 1px 1px 1px 20px; color: #000000; font: 13px ‘Courier New’, Courier, monospace; line-height: 16px; margin: 10px 0 10px 10px; max-height: 200px; min-height: 16px; overflow: auto; padding: 28px 10px 10px; width: 90%; } .code:hover { background-repeat:no-repeat; }

ব্যস আমাদের কোড বক্সের ডিজাইন এড করা শেষ। এবার দেখবো কিভাবে এটি পোস্টে ব্যবহার করবেন।

ব্লগার পোস্টে কিভাবে কোড বক্স এড করবেন

  • পোস্টে কোড বক্স এড করার জন্য আপনাকে HTML Mode এ গিয়ে পোস্ট লিখতে হবে।
  • প্রথমে HTML Mode এ যান। এবার নিচের কোডটি কপি করে নিয়ে পেস্ট করে দিন।
<div class="code">
এখানে আপনার কোড
</div>
  • এবার “এখানে আপনার কোড” এর জায়গায়, আপনি যে কোডটি শেয়ার করতে চান সেটি দিন। বুঝতে না পারলে নিচের ছবিটি দেখুন। ব্লগার কোড বক্স
  • এবার পোস্ট পাবলিশ করে দেখুন আপনার পোস্টে কোড এবং কোড বক্স শো করছে।

নোটঃ আপনি যদি HTML Code শেয়ার করতে চান তাহলে আপনাকে আগে কোড এনকোড করে নিতে হবে। HTML এনকোড করার জন্য এই টুলটি ব্যবহার করতে পারেন।

আরো পড়ুনঃ

Leave a Reply

Back to top button