Awesome! টিউনস
সকল Awesome! টিউনস

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

2,056 দেখা 8 টিউমেন্টস জোসস
টিউন বিভাগ ওয়েব ডিজাইন
প্রকাশিত
Level 0

10 টিউনস 146 টিউমেন্টস 0 ফলোয়ার

আমরা বিভিন্ন সময় আমাদের ব্লগ পোস্টে বা টেকটিউনসের বিভিন্ন টিউনে দর্শকদের জন্য বিভিন্ন 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 করতে পারবেন, যাতে কেউ আপনার ব্লগ থেকে কোন তথ্য চুরি করতে না পারে কপি/পেস্টের মাধ্যমে। বিস্তারিত জানতে চাইলে এইখানে ক্লিক করুন।

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

Level 0

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

টিউনস

আরও টিউনস

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

টিউমেন্টস

Level 0

আপনার টিউনটির জন্য অসংখ্য ধন্যবাদ। তবে, আমার জানা মতে কোনো পদ্ধতিই কপি-পেস্ট ঠেকাতে পারে না। বাবারও বাবা আছে বলে একটা কথা আছে।

    Level 0

    @Mamun Abdullah: আমার টিউনটি কিন্তু কপি/পেস্ট বিষয়ক কোন টিউন নয়। তাই, আপনার কমেন্টের শেষ অংশটি এখানে না বললে ও পারতেন। শুধুমাত্র উদাহরণের জন্যই মূলত কোডটি এখানে পেস্ট করা এবং সাথে এর কাজটি ও জানিয়ে দেয়া। যাকে বলা হয়, “এক ঢিলে দুই পাখি মারা।”
    আর হ্যাঁ, ব্লগের ভিজিটররা তো সবাই বাবা না। সুতরাং, ছেলেদের হাত থেকে ব্লগের তথ্য বাচানোর জন্যই ঐ পদক্ষেপ। আর বাবারা কেনই বা শুধু শুধু কোন ব্লগের তথ্য কপি করে তাদের ব্লগে পেস্ট করবেন? তারা তো বাবা!!

    অশেষ ধন্যবাদ মন্তব্যের জন্য……

Level 0

onek dhonnobad

    Level 0

    @.com: আপনাকেও অশেষ ধন্যবাদ।

Level 0

ধন্যবাদ কাজের পোস্ট