क्या आप अपनी वर्डप्रेस साइट पर ध्यान आकर्षित करने वाले तत्व जोड़ना चाहते हैं? एक प्रभावी तरीका है एनिमेटेड बॉर्डर और रंगीन टेक्स्ट का उपयोग करना। यह न केवल आपके संदेश को प्रमुख बनाता है, बल्कि आपके विजिटर्स को भी आकर्षित करता है। इस पोस्ट में, हम आपको दिखाएंगे कि कैसे आप अपने वर्डप्रेस पोस्ट में एनिमेटेड बॉर्डर और रंगीन टेक्स्ट जोड़ सकते हैं।
सरकारी योजनाओं की ताज़ा जानकारी के लिए अभी व्हाट्सएप, टेलीग्राम और यूट्यूब चैनल को ज्वाइन करें और सबसे पहले अपडेट्स पाएं!
चरण 1: HTML कोड जोड़ें
सबसे पहले, आपको अपने वर्डप्रेस पोस्ट में Custom HTML कोड जोड़ना होगा। यह कोड टेक्स्ट और बॉर्डर को परिभाषित करेगा।
<div class="text-container">
<p class="animated-border">
सरकारी योजनाओं की ताज़ा जानकारी के लिए अभी
<span class="whatsapp">व्हाट्सएप</span>,
<span class="telegram">टेलीग्राम</span> और
<span class="youtube">यूट्यूब</span> चैनल को ज्वाइन करें और सबसे पहले अपडेट्स पाएं!
</p>
</div>
चरण 2: कस्टम CSS जोड़ें
अब, आपको इस HTML को एनिमेटेड बनाने के लिए CSS कोड जोड़ना होगा। वर्डप्रेस में कस्टम CSS जोड़ने के लिए, निम्नलिखित कदमों का पालन करें:
- अपने वर्डप्रेस डैशबोर्ड में लॉगिन करें।
- “अपीयरेंस” (Appearance) > “कस्टमाइज़” (Customize) पर जाएं।
- “एडिशनल CSS” पर क्लिक करें और नीचे दिया गया CSS कोड वहां पेस्ट करें।
- “पब्लिश” पर क्लिक करें।
.text-container {
display: flex;
justify-content: center; /* सेंटर में करने के लिए */
align-items: center;
margin: 0;
}
.animated-border {
display: inline-block;
padding: 10px;
font-weight: bold;
color: black; /* सामान्य टेक्स्ट का रंग */
border: 4px solid transparent;
border-radius: 10px;
animation: blinker 1.5s linear infinite, borderAnimation 2s linear infinite;
text-align: center; /* टेक्स्ट को सेंटर में लाने के लिए */
}
.whatsapp {
color: green; /* व्हाट्सएप का रंग */
}
.telegram {
color: blue; /* टेलीग्राम का रंग */
}
.youtube {
color: red; /* यूट्यूब का रंग */
}
@keyframes blinker {
50% { opacity: 0; }
}
@keyframes borderAnimation {
0% {
border-color: red;
box-shadow: 0 0 5px red;
}
25% {
border-color: orange;
box-shadow: 0 0 5px orange;
}
50% {
border-color: yellow;
box-shadow: 0 0 5px yellow;
}
75% {
border-color: green;
box-shadow: 0 0 5px green;
}
100% {
border-color: blue;
box-shadow: 0 0 5px blue;
}
}
अगर आप text को एनीमेशन ब्लिंक नहीं कराना चाहते है तो यह css कोड यूज़ करे, यह और आकर्षक लगेगा
.text-container {
display: flex;
justify-content: center; /* सेंटर में करने के लिए */
align-items: center;
margin: 0;
}
.animated-border {
display: inline-block;
padding: 10px;
font-weight: bold;
color: black; /* सामान्य टेक्स्ट का रंग */
border: 4px solid transparent;
border-radius: 10px;
animation: borderAnimation 2s linear infinite;
text-align: center; /* टेक्स्ट को सेंटर में लाने के लिए */
}
.whatsapp {
color: green; /* व्हाट्सएप का रंग */
}
.telegram {
color: blue; /* टेलीग्राम का रंग */
}
.youtube {
color: red; /* यूट्यूब का रंग */
}
@keyframes borderAnimation {
0% {
border-color: red;
box-shadow: 0 0 5px red;
}
25% {
border-color: orange;
box-shadow: 0 0 5px orange;
}
50% {
border-color: yellow;
box-shadow: 0 0 5px yellow;
}
75% {
border-color: green;
box-shadow: 0 0 5px green;
}
100% {
border-color: blue;
box-shadow: 0 0 5px blue;
}
}
कोड का विवरण
- HTML कोड: यह कोड एक डिव और पैराग्राफ तत्वों का उपयोग करता है। स्पैन टैग्स का उपयोग करके व्हाट्सएप, टेलीग्राम और यूट्यूब के नाम अलग-अलग रंगों में सेट किए जाते हैं।
- .text-container: यह कंटेनर डिव को सेंटर में लाने के लिए है।
- .animated-border: यह क्लास टेक्स्ट को एनिमेटेड बॉर्डर और ब्लिंकिंग इफ़ेक्ट देती है।
- .whatsapp, .telegram, .youtube: ये क्लासेस विभिन्न प्लेटफार्मों के नाम के रंग निर्धारित करती हैं।
- @keyframes blinker: यह एनिमेशन टेक्स्ट को ब्लिंक करता है।
- @keyframes borderAnimation: यह एनिमेशन बॉर्डर का रंग बदलता है।
निष्कर्ष
इस तरह से, आप अपनी वर्डप्रेस साइट पर एक प्रभावशाली और आकर्षक एनिमेटेड बॉर्डर और रंगीन टेक्स्ट जोड़ सकते हैं। यह तरीका आपके कंटेंट को अधिक दिलचस्प और ध्यान आकर्षित करने वाला बना देगा। अपने दर्शकों को प्रभावित करने के लिए इसे आज़माएं और देखें कि कैसे यह आपकी वेबसाइट को एक नई ऊँचाई पर ले जाता है।
अगर आपको यह पोस्ट पसंद आई हो या कोई प्रश्न हो, तो कृपया टिप्पणी करें। खुश कोडिंग!