DEV Community 👩‍💻👨‍💻

Akash Kumar
Akash Kumar

Posted on

How to Add Code Box In Blogger Post

जब हम कोई ब्लॉगर पोस्ट या आर्टिकल लिखते हैं तो उसके लिखने के तरीके का एक बढ़ा महत्व होता है । क्यूंकी आप अपने आर्टिकल को जीतने अच्छे तरीके से और Attractive लिखेंगे उतना ही आपको Users के Impressions ज्यादा मिलते हैं । तो इस Article में मैं आपको बताने वाला हूँ की आप अपने Article में Pros और Cons को किस प्रकार Add कर सकते हैं , वो भी Stylish Pro and Cons Script 


जब हम किसी ऐसे Topic पर आर्टिकल लिखते हैं जिसमे Advantage और Disadvantage की तुलना करने की आवश्यकता पड़ती है , तो Pros and cons table सबसे सही तरीका।  जिसके जरिए हम Users को सरल तरीके से किसी चीज के Advantage और Disadvantage के बारे में बता सकते हैं । 
How to Add Pros and Cons Table in Blogger Post

अगर आप नहीं जानते की 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>
    &lt;ul class="pros"&gt;
      &lt;li&gt;Amazing Performance&lt;/li&gt;
      &lt;li&gt;Free For 1 Month&lt;/li&gt;
      &lt;li&gt;Unlimited Storage Space&lt;/li&gt;
      &lt;li&gt;Email Support&lt;/li&gt;
      &lt;li&gt;Additional Add-ons&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;

  &lt;div class="cons-container"&gt;
    &lt;h2 class="heading"&gt;Cons&lt;/h2&gt;

    &lt;ul class="cons"&gt;
      &lt;li&gt;No Phone Support&lt;/li&gt;
      &lt;li&gt;Complicated UI&lt;/li&gt;
      &lt;li&gt;No SSDs&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
&lt;/div&gt;</pre>



अगर आप list में किसी प्रकार का बदलाव करना चाहते हैं तो आप कर सकते हैं , यदि आप Pros में लिस्ट जोड़ना चाहते हैं तो <li> Your new line </li> कोड को Pros Div में add करके जोड़ सकते हैं । 

यदि आप Cons में List जोड़ना चाहते हैं तो ठीक उसी प्रकार Cons Div में कोड द्वारा Add कर सकते हैं । 



<br>
(adsbygoogle = window.adsbygoogle || []).push({});<br>



Read Also:
Video:
<!--[ Lazy youtube ]-->

Top comments (0)

Your PRs make a difference 😍

We've got a great set of issues to modernize our JS management on the platform. Can you pitch in?