আপনার ব্লগ পোস্ট বা টেকটিউনসের টিউনে কিভাবে খুব সহজে HTML বা অন্য যে কোন কোডকে একটি Scroll Box এর মধ্যে প্রদর্শন করবেন

আমরা বিভিন্ন সময় আমাদের ব্লগ পোস্টে বা টেকটিউনসের বিভিন্ন টিউনে দর্শকদের জন্য বিভিন্ন HTM/JavScript বা CSS কোড প্রদর্শন করে থাকি। আপনি হয়তো বিভিন্ন ওয়েবসাইট বা ব্লগে লক্ষ্য করেছেন যে তারা তাদের বিভিন্ন HTM/JavScript বা CSS কোড গুলো একটি স্ক্রল বক্সের মধ্যে প্রদর্শন করে থাকে। কী ! বুঝতে পারেন নি ? তাহলে এই ডেমোটিতে আপনি দেখতে পাবেন, কিভাবে আমি আমার ব্লগের একটি পোস্টে HTML কোডকে একটি স্ক্রল বারের মধ্যে প্রদর্শন করেছি । কাজটি কিন্তু একদমই সহজ। আপনাকে শুধু আপনার HTM/JavScript বা CSS কোড এর দুই পাশে অতিরিক্ত দুইটি কোড বসাতে হবে। ব্যস তারপর কেল্লা ফতেহ !!

আপনাকে যা করতে হবে :

• প্রথমে আপনি যে কোডগুলো স্ক্রলবারের মধ্যে রাখতে চান সেই কোডগুলো আপনার ব্লগের পোস্ট এডিটরে ( পোস্টের যে জায়গায় আপনি কোডগুলো দেখাতে চান সেই জায়গায় ) কপি/পেস্ট করুন।
• কপি/পেস্ট করার পর পোস্ট এডিটরের HTML ট্যাবে যান। তারপর খুঁজে দেখুন আপনার কোডগুলো ঠিক কোথায় আছে।
• এবার কোডগুলোর ঠিক আগে নিচের এই HTML কোডটি বসিয়ে দিন।

<div style="width: 580px; height: 300px; font:10pt/12pt Lucida Console; overflow: auto">

• উপরের HTML কোডটি তো আপনি আপনার কাঙ্খিত কোডের শুরুতে বসিয়েছেন। এখন আপনার কাঙ্খিত কোডের শেষে </div> লিখে HTML ট্যাব থেকে ফিরে আসুন। HTML ট্যাব থেকে ফিরে আসার পর যদি আপনি স্ক্রল বক্সের নিচে যেতে না পারেন , তাহলে আবার HTML ট্যাবে গিয়ে </div> এর সাথে লিখে আসুন <br/><br/> ।
• আর হ্যাঁ, আপনি আপনার ইচ্ছেমত স্কলবক্সটির Width এবং Height নির্ধারণ করতে পারবেন উপরের কোডের "width: 580px; height: 300px; পরিবর্তন করার মাধ্যমে।

এখন আমিও কিছু কোড উদাহরণ স্বরুপ এখানে কপি/পেস্ট করছি এবং পরবর্তী কাজ গুলোও সম্পন্ন করছি। ফলস্বরুপ, আপনি আমার কোডটি একটি স্ক্রল বক্সের মধ্যে দেখছেন।

<?php
}
// no selection header - now your content is protected from copy and paste guys
function copyprotect_no_select()
{
?>
<script type="text/javascript">function disableSelection(target){
if (typeof target.onselectstart!="undefined") //For IE
target.onselectstart=function(){return false}
else if (typeof target.style.MozUserSelect!="undefined") //For Firefox
target.style.MozUserSelect="none"
else //All other route (For Opera)
target.onmousedown=function(){return false}
target.style.cursor = "default"
}
</script>
<?php
}
// no selection footer
function copyprotect_no_select_footer()
{
?>
<script type="text/javascript">
disableSelection(document.body)
</script>
<small>Copy Protected by <a href="http://for-tech-lovers.blogspot.com/" target="_blank">Shakil Wahid.</a><a href="http://for-tech-lovers.blogspot.com/2011/10/keep-your-blog-copy-protected.html" target="_blank">Protect Yours !</a></small>
<?php
}
// tuning your wp-copyprotect
function copyprotect_options_page()
{
?></?php
}
></?php
}
></?php
}
>

উপরের স্ক্রল বারের মধ্যে যে কোডটি আমি আপনাদের উদাহরণ স্বরুপ দেখিয়েছি তার মাধ্যমে আপনি আপনার ব্লগকে Copy Protected করতে পারবেন, যাতে কেউ আপনার ব্লগ থেকে কোন তথ্য চুরি করতে না পারে কপি/পেস্টের মাধ্যমে। বিস্তারিত জানতে চাইলে এইখানে ক্লিক করুন।

টিউনটি বুঝতে সমস্যা হলে নিশ্চয়ই জানাবেন।