जब हम कोई ब्लॉगर पोस्ट या आर्टिकल लिखते हैं तो उसके लिखने के तरीके का एक बढ़ा महत्व होता है । क्यूंकी आप अपने आर्टिकल को जीतने अच्छे तरीके से और Attractive लिखेंगे उतना ही आपको Users के Impressions ज्यादा मिलते हैं । तो इस Article में मैं आपको बताने वाला हूँ की आप अपने Article में Pros और Cons को किस प्रकार Add कर सकते हैं , वो भी Stylish Pro and Cons Script
जब हम किसी ऐसे Topic पर आर्टिकल लिखते हैं जिसमे Advantage और Disadvantage की तुलना करने की आवश्यकता पड़ती है , तो Pros and cons table सबसे सही तरीका। जिसके जरिए हम Users को सरल तरीके से किसी चीज के Advantage और Disadvantage के बारे में बता सकते हैं ।
अगर आप नहीं जानते की Pros and Cons kya hota hai ? तो कोई बात नहीं मैं इस लेख में आपको बात देता हूँ की Pros and Cons क्या होता है ?
<br> (adsbygoogle = window.adsbygoogle || []).push({});<br>
What is Pro and Cons Meaning ?
दोस्तों Pros and Cons का मतलब होता है , किसी चीज के फायदे और नुकसान । pros का मतलब होता है के लिए और Cons का मतलब होता है के विरुद्ध । जैसे अगर हम किसी Phone Charger के बारे में जानना चाहते हैं तो उसके फायदे के साथ साथ उसके नुकसान का भी हमे पता चलता है ।<br> (adsbygoogle = window.adsbygoogle || []).push({});<br>
How to add Pros and Cons table in Blogger Post ?
आप यह तो जान गए होंगे की Pros and cons kya hai ? अब मैं आपको बताता हूँ की आप अपने Article में सुंदर तरीके से Pros and Cons किस प्रकार बना सकते है । जिसे User भी पड़ने में अच्छा महसूस करे और आपको Users का Impressions बेहतरीन मिले । तो छलिये हम Step by Step जानते हैं की Blogger post mein pros and cons kaise lagayein ?Step 1: सबसे पहले आपको नीचे दिए गए Code को कॉपी करना है , और इस Code को आपको अपने Blogger Theme में जाकर b:skin के ऊपर paste करना है ।
.pros-cons-container {
font-family: "Roboto", sans-serif;
display: flex;
max-width: 700px;
margin: 32px auto;
box-shadow: 0 4px 16px -4px rgba(0, 0, 0, 0.4);
}
.pros-cons-container .heading {
font-size: 20px;
text-align: center;
color: #fff;
margin: 0;
padding: 16px 24px;
}
.pros-cons-container .pros-container .heading {
background: #02c39a;
}
.pros-cons-container .cons-container .heading {
background: #e63946;
}
.pros-cons-container .pros-container ul li::before {
content: "\f00c";
font-family: "Font Awesome 5 Free";
font-weight: bold;
padding-right: 16px;
color: #02c39a;
display: block;
}
.pros-cons-container .cons-container ul li::before {
content: "\f00d";
font-family: "Font Awesome 5 Free";
font-weight: bold;
padding-right: 16px;
color: #e63946;
display: block;
}
.pros-cons-container .pros-container,
.pros-cons-container .cons-container {
flex: 1;
}
.pros-cons-container .pros {
border-right: 1px solid #eee;
}
.pros-cons-container ul {
padding: 8px 0;
list-style: none;
margin: 0;
}
.pros-cons-container ul li {
padding: 16px 32px;
font-size: 16px;
line-height: 2;
display: flex;
}
@media (max-width: 530px) {
.pros-cons-container {
flex-direction: column;
}
.pros-cons-container ul li:nth-of-type(2n) {
background: #eee;
}
}
- Visit on Blogger.com
- Dashboard > Theme > Edit Html
- Find </b:skin> Paste Code
<br>
(adsbygoogle = window.adsbygoogle || []).push({});<br>
Step 2: अब आपको इस नीचे दिए गए Code को Copy करके <head> के नीचे Paste करना है ।
- Copy Given 2nd Code
- Find <head>
- Paste Code below <head>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
crossorigin="anonymous"
/>
<link rel="stylesheet" href="style.css" />
<br>
(adsbygoogle = window.adsbygoogle || []).push({});<br>
Step 3: अब आपको यह आखरी Code को Copy करना है, और आप जिस भी Page या Article में Pros and cons add करना चाहते हैं उस Article में Paste कर दीजिए ।
- Copy Given 3rd Code
- Dashboard > New Post
- Paste code that place there you want
<div class="pros-cons-container">
<div class="pros-container">
<h2 class="heading">Pros</h2><ul class="pros"> <li>Amazing Performance</li> <li>Free For 1 Month</li> <li>Unlimited Storage Space</li> <li>Email Support</li> <li>Additional Add-ons</li> </ul> </div> <div class="cons-container"> <h2 class="heading">Cons</h2> <ul class="cons"> <li>No Phone Support</li> <li>Complicated UI</li> <li>No SSDs</li> </ul> </div> </div></pre>
अगर आप list में किसी प्रकार का बदलाव करना चाहते हैं तो आप कर सकते हैं , यदि आप Pros में लिस्ट जोड़ना चाहते हैं तो <li> Your new line </li> कोड को Pros Div में add करके जोड़ सकते हैं ।
यदि आप Cons में List जोड़ना चाहते हैं तो ठीक उसी प्रकार Cons Div में कोड द्वारा Add कर सकते हैं ।
<br>
(adsbygoogle = window.adsbygoogle || []).push({});<br>
Read Also:
- How to Display Website Stats in Blogger
- Add Blinking Text Notification Bar in Blogger
- How to add Codebox in Blogger
- Blogging में पाँच सबसे बड़ी गलतियाँ ।
<!--[ Lazy youtube ]-->
Top comments (0)