How to Add Double Click to Copy Code in Blogger
BlogrTool এ স্বাগতম।
আপনি যদি কোডিং রিলেটেড পোস্ট করে থাকেন আপনার ব্লগে তবে নিশ্চয়ই Syntax Highlighter ব্যবহার করেছেন আপনার ব্লগের ভিজিটর দের কোড প্রোভাইড করার জন্য।আপনার ব্লগে প্রোভাইড করা কোড গুলো ভিজিটর দের সিলেক্ট করে কপি করতে হয়।যদি এই কপি করার ব্যাপার টা আরেকটু ফাস্ট করতে চান,তবে আজকের এই পোস্ট How to add Double Click to Copy Code in Blogger আপনার জন্য।
 |
| How to Add Double Click to Copy Code in Blogger |
এই পোস্টে দেখবো কিভাবে আমরা আমাদের ব্লগার ব্লগে Double click to Copy Pre Content অ্যাড করতে পারি।এতে করে আমাদের ব্লগে শেয়ার করা সোর্স কোড ভিজিটররা Double Click করে কপি করতে পারবে।তাদের আর কষ্ট করে সবগুলো কোড সিলেক্ট করে কপি করতে হবে।সিলেক্ট করে কপি করার সময় অনেক সমস্যা দেখা যায়।যেমন : অর্ধেক কিংবা তার বেশি সিলেক্ট করার পর আর সিলেক্ট করা যায় না।ফলে আবারও প্রথম থেকে সিলেক্ট করে কপি করতে হয়।
How to add Double Click to Copy Code in Blogger?
ব্লগারে Double Click to Copy Pre Content অ্যাড করার জন্য আপনাদের তত বেশি HTML, CSS, JS সম্পর্কে ধারণা থাকতে হবে না।কারণ এটি আগে থেকেই ডিজাইন করা রয়েছে।আপনাদের শুধু কোডগুলো আপনাদের Blogger Theme XML এ সঠিক জায়গায় পেস্ট করতে হবে।
Important
Blogger Theme XML এ কোডগুলো অ্যাড করার পূর্বে আপনার ব্লগের থিমটি ব্যাকআপ করে নিবেন।কারণ,কোড অ্যাড করার সময় যদি কোনো সমস্যা হয় তবে আপনি সহজেই আপনার ব্লগের থিমটি রিস্টোর করে নিতে পারবেন।
Step 1: প্রথমে আপনার Blogger Dashboard এ লগিন করে নিন।
Step 2: এবার Blogger Dashboard থেকে Themes এ যান।
Step 4: Edit HTML এ ক্লিক করুন।আপনাকে Blogger Theme XML এ নিয়ে যাবে।
Step 5: এখন এই কোডটি ]]></b:skin> সার্চ করুন এবং নিচের দেয়া CSS কোডগুলো ]]></b:skin> এর উপরে পেস্ট করে দিন।
/* Toast Notification by Fineshop */
.tNtf span{position:fixed;left:24px;bottom:-70px;display:inline-flex;align-items:center;text-align:center;justify-content:center;margin-bottom:20px;z-index:99981;background:#323232;color:rgba(255,255,255,.8);font-size:14px;font-family:inherit;border-radius:3px;padding:13px 24px; box-shadow:0 5px 35px rgba(149,157,165,.3);opacity:0;transition:all .1s ease;animation:slideinwards 2s ease forwards;-webkit-animation:slideinwards 2s ease forwards}
@media screen and (max-width:500px){.tNtf span{margin-bottom:20px;left:20px;right:20px;font-size:13px}}
@keyframes slideinwards{0%{opacity:0}20%{opacity:1;bottom:0}50%{opacity:1;bottom:0}80%{opacity:1;bottom:0}100%{opacity:0;bottom:-70px;visibility:hidden}}
@-webkit-keyframes slideinwards{0%{opacity:0}20%{opacity:1;bottom:0}50%{opacity:1;bottom:0}80%{opacity:1;bottom:0}100%{opacity:0;bottom:-70px;visibility:hidden}}
.darkMode .tNtf span{box-shadow:0 10px 40px rgba(0,0,0,.2)}
আপনি যদি Median Ui , Fletro Pro , Imagz Template গুলোর লেটেস্ট ভার্সন ইউজ করে থাকেন,তবে নিচে দেয়া CSS কোডগুলো অ্যাড করতে পারেন উপরের স্টেপে দেয়া CSS কোডগুলোর নিচে।
.pre:not(.tb):hover::before{content:'Double click to copy | </>'}
.pre:not(.tb).html:hover::before{content:'Double click to copy | .html'}
.pre:not(.tb).css:hover::before{content:'Double click to copy | .css'}
.pre:not(.tb).js:hover::before{content:'Double click to copy | .js'}
Step 6: নিচে দেয়া HTML কোডগুলো <body> ট্যাগ এর নিচে পেস্ট করে দিন।যদি খুঁজে না পান তবে হয়তো এটি অলরেডি parse করে দেয়া আছে।তাই </body> এই ট্যাগটি খুঁজুন এবং এর পরে নিচের HTML কোডগুলো পেস্ট করে দিন।
<b:if cond='data:view.isSingleItem'>
<script>/*<![CDATA[*/ /* Pre Content Copy Script by Fineshop */ for(var preClick=document.getElementsByTagName("pre"),i=0;i<preClick.length;i++)preClick[i].addEventListener("dblclick",function(){var e=getSelection(),o=document.createRange();o.selectNodeContents(this),e.removeAllRanges(),e.addRange(o),document.execCommand("copy"),e.removeAllRanges(),document.querySelector("#toastNotif").innerHTML="<span>Copied to clipboard!</span>"},!1); /*]]>*/</script>
</b:if>
Writing Format of Syntax:
<pre><code>Your_Code_Here</code></pre>
<div class='pre html notranslate'> <pre>Your_Code_Here</pre> </div>
The Marked Class Name can be replaced with html, css or js as per your codes.
আপনার Double Click to Copy Pre Content রেডী।এখন আপনার সাইটের ভিজিটররা ডাবল ক্লিক করে pre ট্যাগ এর ভিতর দেয়া সোর্স কোড কপি করতে পারবে।
Conclusion
তো এই ছিলো আজকের পোস্ট How to Add Double Click to Copy Code in Blogger । আশা করি সব কিছু ঠিক ভাবে করতে পেরেছেন।যদি কোনো সমস্যার সম্মুখীন হন কোডগুলো অ্যাড করতে গিয়ে,তবে কমেন্ট করে জানতে ভুলবেন না।আজকের মত এতটুকু।দেখা হবে পরবর্তী পোস্টে।আল্লাহ্ হাফেজ।Source:
www.fineshopdesign.com
