How To Add HTML Button In Blog I ब्लॉग में बटन कैसे ऐड करें

Blog post mein HTML Code button kaise add Karen-

HTML Code के द्वारा हम किसी भी ब्लॉग पोस्ट में आसानी से बटन ऐड कर सकते हैं ,

बटन का उपयोग-
फाइल डाउनलोड करने के लिए नेक्स्ट पेज में जाने के लिए या फिर अन्य किसी पेज की लिंक देने के लिए इस बटन का उपयोग कर सकते हैं यह बटन बहुत ही अच्छा दिखाई देता है ।

बटन के प्रकार-
बटन भी दो प्रकार के होते हैं एक तो सिंपल दिखने वाला और दूसरा स्टाइलिश दिखने वाला
सिंपल दिखने वाले बटन को हम HTML कोड के द्वारा डायरेक्ट ब्लॉक पोस्ट में लगा सकते हैं लेकिन स्टाइलिश बटन को लगाने के लिए हमें CSS कोड की आवश्यकता होती है ।

बटन लगाने का तरीका-

कुछ सामान्य स्टेप को फॉलो करके आप बहुत ही आसानी से अपने ब्लॉग में एक अच्छा सा बटन ऐड कर सकते हैं

सबसे पहले आप अपने ब्लॉग में लॉगिन कीजिए
वह पोस्ट ओपन कीजिए जिसमें आपको बटन लगाना है
पोस्ट में जिस जगह आपको बटन ऐड करना है वहां पर कुछ भी लिख दीजिए जैसे माना कि हमने abcd लिख दिया है -
HTML व्यू पर क्लिक कीजिए जैसा की फोटो में दिखाया गया है
HTML फॉरमैट पर क्लिक कीजिए जैसा की फोटो में दिखाया गया है -
अब कंट्रोल प्लस F प्रेस कीजिए Ctrl+F
आपको एक सर्च डायलॉग बॉक्स दिखाई देगा अब उसमें जो भी हमने लिखा था वह टाइप कीजिए जैसे कि हमने abcd लिखा था तो हम एबीसीडी टाइप करते हैं जिससे की पोस्ट में हमें abcd कहां लिखा है यह दिखाई देने लगता है -
अब abcd को सिलेक्ट करके उसकी जगह बटन का कोड पेस्ट कर देना है
बटन के कोड को अपने जरूरत के अनुसार एडिट कर सकते हैं , बटन का नाम तथा बटन की लिंक हम अपने इच्छा अनुसार बदल सकते हैं

बटन के लिए कोड
इस पोस्ट में हम अलग-अलग तरह के बटन के HTML कोड बता रहे हैं जिसके द्वारा आप अपने ब्लॉग पोस्ट के लिए आसानी से बटन बना सकते हैं सकते हैं

BUTTON 1 . इस तरह के बटन लगाने के लिए हमें सीएसएस कोड की आवश्यकता नहीं होती -

HTML CODE 1 -

BUTTON 2 -

HTML CODE 2 -

<!DOCTYPE html>
<html>
<body>

<a href="https://www.mynimach.com" >
<button type="button" >Button Name</button>
 
</body>
</html>

BUTTON 3 -

HTML CODE 3 -

BUTTON 4 -

HTML CODE 4 -

<!DOCTYPE html>
<html>
<head>
<style>
.button{
 border: 2px solid bleck;
 outline: none;
 text-align: center;
 font-size: 15px;
 padding: 10px 22px;
 background-color: white;
 color: blue;
 cursor: pointer;
 width: auto;
 height: auto;
 border-radius: 30px;
 }
 .center{
 display: flex;
 align-items: center;
 justify-content: center;
 }
</style>
</head>
<body>

<div class="center">
 <a href="https://WWW.MYNIMACH.COM" >
<button class="button">button name</button>
</a>
</div>
</body>
</html> .

BUTTON 5 -

HTML CODE 5 -

<!DOCTYPE html>
<html>
<head>
<style>
.button{
 border: 2px solid blue;
 outline: none;
 text-align: center;
 font-size: 15px;
 padding: 10px 22px;
 background-color: pink;
 color: blue;
 cursor: pointer;
 width: auto;
 height: auto;
 border-radius: 30px;
 }
 .center{
 display: flex;
 align-items: center;
 justify-content: center;
 }
</style>
</head>
<body>

<div class="center">
 <a href="https://www.mynimach.com" >
<button class="button">button name</button>
</a>
</div>
</body>
</html>
.

इन सभी बटन में से आपको जो भी पसंद आए आप उसका उपयोग अपने ब्लॉग में कर सकते हैं , बटन का नाम तथा लिंक आप अपनी इच्छा अनुसार कुछ भी रख सकते हैं , बटन का नाम बदलने के लिए आप उसके HTML कोड में Button name की जगह कुछ भी लिख सकते हैं जो भी आपको बटन का नाम रखना है , बटन की लिंक बदलने के लिए आप htmlकोड के अंदर www.mynimach.com कॉम को हटाकर उसकी जगह कुछ भी लिख सकते हैं जो भी लिंक आपको देना है, इसी तरह अन्य html एवं CSS कोड सीखने के लिए हमें फॉलो जरूर करें

How To Add HTML Button In Blog I ब्लॉग में बटन कैसे ऐड करें

Post a Comment

Contact form