Blogger Post Me Code Box Kaise Add Kare (Copy Code Button Ke Saath)
Agar aap Blogger post me code box add karna chahte hain jisme ek stylish design ho aur sath hi copy code button bhi ho, toh aap sahi jagah par hain. Code sharing blogs, tech tutorials, aur programming-related content ke liye ek proper code box bahut zaruri hota hai. Ye na sirf readability badhata hai balki user experience bhi improve karta hai. Is post me hum step-by-step dekhenge ki kaise aap Blogger me HTML, CSS aur JavaScript ka use karke code box easily create kar sakte hain.
Sabse pehle aapko ek basic HTML structure banana hoga jisme aapka code wrap ho. Uske baad hum CSS ke through us box ko style denge jaise background color, border radius, font, aur scrollbar styling. Aakhri step me JavaScript ka use karke ek copy to clipboard button add karenge jo ek click par code ko copy kar dega. Ye technique SEO aur UX dono ke liye beneficial hoti hai. Aise features se aapke blog ki professionalism bhi dikhti hai jo visitors ko attract karti hai.
Aap chahe Blogger ke default theme use kar rahe ho ya koi custom template, ye copy code box Blogger me har jagah kaam karta hai. Aap isse reusable widget ki tarah bhi use kar sakte hain jisse har naye blog post me easily paste kiya ja sake. Yadi aap ek tech blogger hain ya coding tutorials likhte hain, toh ye feature zarur implement karna chahiye. Niche hum aapko complete HTML, CSS aur JavaScript ka code bhi denge jisse aap bina kisi dikkat ke apne Blogger blog me code box add kar sakte hain.
Jab aap Blogger me code box add karte hain, toh usse aapke blog ki credibility bhi badhti hai. Kai beginners sirf plain text me code likhte hain, jisse readers confuse ho jaate hain. Lekin jab aap ek stylish aur functional code box with copy button use karte hain, toh aapka blog professional lagta hai. Ye chhoti si cheez user engagement aur SEO dono ko boost karti hai. Google aise content ko zyada pasand karta hai jisme better UX diya gaya ho, aur ek copyable code box Blogger me add karna usi ka ek part hai.
Blogger Post Me Code Box Kaise Add Kare (Copy Code Button Ke Saath)
Agar aap apne Blogger blog me code share karna chahte hain, toh code box aur copy button dena bahut important hai. Isse readers asaani se code ko samajh paate hain aur ek click me copy bhi kar sakte hain. Yahan main aapko pura HTML code de raha hoon jise aap apne Blogger post ke HTML mode me paste kar sakte hain.
Step 1: CSS Aur JavaScript Add Karein
Sabse pehle niche diye gaye CSS aur JavaScript code ko apne post ke start me paste karein. Ye styling aur copy functionality ke liye zaroori hai.
<style>
.code-box-wrapper {
position: relative;
margin: 20px 0;
}
.code-box {
background: #1e1e1e;
color: #fff;
padding: 15px;
border-radius: 8px;
font-family: 'Courier New', monospace;
overflow-x: auto;
border: 1px solid #444;
white-space: pre-wrap;
}
.copy-btn {
position: absolute;
top: 10px;
right: 10px;
background: #00c853;
color: white;
border: none;
padding: 6px 12px;
border-radius: 5px;
cursor: pointer;
font-size: 13px;
transition: background 0.3s;
z-index: 1;
}
.copy-btn:hover {
background: #009624;
}
</style>
<script>
function copyCode(btn) {
const code = btn.previousElementSibling;
navigator.clipboard.writeText(code.innerText).then(() => {
btn.innerText = 'Copied!';
setTimeout(() => {
btn.innerText = 'Copy Code';
}, 2000);
});
}
</script>
Step 2: Code Box HTML Likhein
Ab apne blog post me jahan code dikhana hai, wahan niche wala HTML code paste karein. Aur <!-- Yahan apna code paste karein --> ke jagah apna actual code likhein.
<div class="code-box-wrapper">
<pre class="code-box"><code>
<!-- Yahan apna code paste karein -->
function helloWorld() {
alert('Hello, Blogger!');
}
</code></pre>
<button class="copy-btn" onclick="copyCode(this)">Copy Code</button>
</div>
Step 3: Post Publish Karein
Ab aap apne blog post ko publish kar sakte hain. Aapke readers ko ek neat code box dikhega jisme “Copy Code” button bhi hoga. Wo us button par click karke code easily copy kar sakte hain.
Important Tips:
- Post editor me HTML mode use karna mat bhooliye.
- Code ke andar special characters jaise
<aur>ko HTML entities me convert karna zaroori hai. Jaise<ko<aur>ko>likhna. - Agar aap multiple code blocks use kar rahe hain, toh har block ke liye ye structure repeat karein.
Agar aap chahein toh main aapke liye ready-made CSS + JS Blogger theme me add karne wala version bhi bana sakta hoon, jisse aap sirf HTML content add karenge aur button automatically kaam karega.
Is tutorial me diye gaye steps ko follow karne ke baad, aap apne Blogger post me aise stylish code box paayenge, jisme ek “Copy Code” button bhi hoga. Is button par click karke aap apna code asaani se copy kar sakte hain, bina manually select kiye. Yeh feature coding blogs ke liye bahut hi useful aur user-friendly hai.
Example: Stylish Code Box with Copy Button
function helloWorld() {
alert('Hello, Blogger!');
}
helloWorld();
Is tarah se aap apne Blogger blog me easily code box aur copy code button add kar sakte hain. Yeh feature aapke readers ke liye code samajhna aur copy karna bahut asaan bana deta hai. Aap bhi apne blog posts me is technique ka istemal karke apne content ko aur professional bana sakte hain.
No comments:
Post a Comment