How to Add Code Box In Blogger Post
Tags: javascript, css, blogger, tutorial
Published: 2022-11-26 08:26:54

<span style="font-family: Noto Sans Devanagari;">जब हम कोई ब्लॉगर पोस्ट या आर्टिकल लिखते हैं तो उसके लिखने के तरीके का एक बढ़ा महत्व होता है । क्यूंकी आप अपने आर्टिकल को जीतने अच्छे तरीके से और Attractive लिखेंगे उतना ही आपको Users के Impressions ज्यादा मिलते हैं । तो इस Article में मैं आपको बताने वाला हूँ की आप अपने Article में Pros और Cons को किस प्रकार Add कर सकते हैं , वो भी <b><a href="https://www.hindibuddy.co.in/2022/10/how-to-make-pros-and-cons-list-in-blogger.html">Stylish Pro and Cons Script&nbsp;</a></b></span><div><span style="font-family: Noto Sans Devanagari;"><b><br /></b></span></div><div><span style="font-family: Noto Sans Devanagari;">जब हम किसी ऐसे Topic पर आर्टिकल लिखते हैं जिसमे Advantage और Disadvantage की तुलना करने की आवश्यकता पड़ती है , तो Pros and cons table सबसे सही तरीका।&nbsp; जिसके जरिए हम Users को सरल तरीके से किसी चीज के Advantage और Disadvantage के बारे में बता सकते हैं ।&nbsp;</span></div><div><span style="font-family: Noto Sans Devanagari;"><br /></span></div><div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCXQ7znappMOxMz8BD3_Gq8BDadRO-yX2wh1qgtV4ZtEsHD7BlILxvTTIXju6iBV-syxjZ4TbUsFywjoSYJnrZktHpga9OLZ24w9BexkmevdtMvc-2oJbzB_vrzjy6hHV5Ehfq2R0VsvLVhx5h-BzEps-Pvb0dwE24w2d0EE5Klph9RPclfPEPEzWjJA/s1024/How%20to%20add%20Pros%20and%20Cons%20in%20Blogger.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="How to Add Pros and Cons Table in Blogger Post" border="0" data-original-height="576" data-original-width="1024" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCXQ7znappMOxMz8BD3_Gq8BDadRO-yX2wh1qgtV4ZtEsHD7BlILxvTTIXju6iBV-syxjZ4TbUsFywjoSYJnrZktHpga9OLZ24w9BexkmevdtMvc-2oJbzB_vrzjy6hHV5Ehfq2R0VsvLVhx5h-BzEps-Pvb0dwE24w2d0EE5Klph9RPclfPEPEzWjJA/s16000/How%20to%20add%20Pros%20and%20Cons%20in%20Blogger.jpg" title="How to Add Pros and Cons Script For Blogger" /></a></div><span style="font-family: Noto Sans Devanagari;"><br /></span></div><div><span style="font-family: Noto Sans Devanagari;"><br /></span></div><div><span style="font-family: Noto Sans Devanagari;">अगर आप नहीं जानते की Pros and Cons kya hota hai ? तो कोई बात नहीं मैं इस लेख में आपको बात देता हूँ की <b>Pros and Cons क्या होता है ?</b></span></div><div><span style="font-family: Noto Sans Devanagari;"><b><br /></b></span></div><div><span style="font-family: Noto Sans Devanagari;"><b></b></span></div><div><span style="font-family: Noto Sans Devanagari;"><b>
<ins class="adsbygoogle" data-ad-client="ca-pub-2117408483493581" data-ad-format="fluid" data-ad-layout="in-article" data-ad-slot="5096285837" style="display: block; text-align: center;"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script></b></span></div><h2 style="text-align: left;"><span style="font-family: Noto Sans Devanagari;">What is Pro and Cons Meaning ?</span></h2><div><span style="font-family: Noto Sans Devanagari;">दोस्तों <i>Pros and Cons का मतलब</i> होता है , किसी चीज के फायदे और नुकसान । pros का मतलब होता है के लिए और Cons का मतलब होता है के विरुद्ध । जैसे अगर हम किसी Phone Charger के बारे में जानना चाहते हैं तो उसके फायदे के साथ साथ उसके नुकसान का भी हमे पता चलता है ।&nbsp;</span></div><div><span style="font-family: Noto Sans Devanagari;"><ins class="adsbygoogle" data-ad-client="ca-pub-2117408483493581" data-ad-format="fluid" data-ad-layout="in-article" data-ad-slot="5242810512" style="display: block; text-align: center;"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script></span></div><h2 style="text-align: left;"><span style="font-family: Noto Sans Devanagari;">How to add Pros and Cons table in Blogger Post ?</span></h2><div><span style="font-family: Noto Sans Devanagari;">आप यह तो जान गए होंगे की Pros and cons kya hai ? अब मैं आपको बताता हूँ की आप अपने Article में सुंदर तरीके से Pros and Cons किस प्रकार बना सकते है । जिसे User भी पड़ने में अच्छा महसूस करे और आपको Users का Impressions बेहतरीन मिले । तो छलिये हम Step by Step जानते हैं की <b>Blogger post mein pros and cons kaise lagayein</b> ?</span></div><div><span style="font-family: Noto Sans Devanagari;"><br /></span></div><div><span style="font-family: Noto Sans Devanagari;"><b>Step 1:</b> सबसे पहले आपको नीचे दिए गए Code को कॉपी करना है , और इस Code को आपको अपने Blogger Theme में जाकर b:skin के ऊपर paste करना है ।&nbsp;&nbsp;</span></div><div><span style="font-family: Noto Sans Devanagari;"><br /></span></div><div><span style="font-family: Noto Sans Devanagari;"><div class="pre html">
  <pre style="max-height: none; white-space: pre-wrap;">.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;
  }
}</pre>
</div>&nbsp;</span></div><div><ul style="text-align: left;"><li><span style="font-family: Noto Sans Devanagari;">Visit on Blogger.com</span></li><li><span style="font-family: Noto Sans Devanagari;">Dashboard &gt; Theme &gt; Edit Html&nbsp;</span></li><li><span style="font-family: Noto Sans Devanagari;">Find &lt;/b:skin&gt; Paste Code&nbsp;&nbsp;</span></li></ul><div><span style="font-family: Noto Sans Devanagari;"><ins class="adsbygoogle" data-ad-client="ca-pub-2117408483493581" data-ad-format="fluid" data-ad-layout="in-article" data-ad-slot="2328076405" style="display: block; text-align: center;"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script></span></div></div><div><span style="font-family: Noto Sans Devanagari;"><b>Step 2:</b> अब आपको इस नीचे दिए गए Code को Copy करके &lt;head&gt; के नीचे Paste करना है ।&nbsp;</span></div><div><ul style="text-align: left;"><li><span style="font-family: Noto Sans Devanagari;">Copy Given 2nd Code&nbsp;</span></li><li><span style="font-family: Noto Sans Devanagari;">Find &lt;head&gt;&nbsp;</span></li><li><span style="font-family: Noto Sans Devanagari;">Paste Code below &lt;head&gt;&nbsp;</span></li></ul><div><span style="font-family: Noto Sans Devanagari;"><div class="pre html">
  <pre style="max-height: none; white-space: pre-wrap;"> &lt;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"
    /&gt;
    &lt;link rel="stylesheet" href="style.css" /&gt; </pre>
</div>&nbsp;</span></div><div><span style="font-family: Noto Sans Devanagari;"><br /></span></div><div><span style="font-family: Noto Sans Devanagari;"><b><ins class="adsbygoogle" data-ad-client="ca-pub-2117408483493581" data-ad-format="fluid" data-ad-layout="in-article" data-ad-slot="6600939196" style="display: block; text-align: center;"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script></b></span></div><div><span style="font-family: Noto Sans Devanagari;"><b>Step 3:</b> अब आपको यह आखरी Code को Copy करना है, और आप जिस भी Page या Article में Pros and cons add करना चाहते हैं उस Article में Paste कर दीजिए ।&nbsp;</span></div><div><ul style="text-align: left;"><li><span style="font-family: Noto Sans Devanagari;">Copy Given 3rd Code&nbsp;</span></li><li><span style="font-family: Noto Sans Devanagari;">Dashboard &gt; New Post&nbsp;</span></li><li><span style="font-family: Noto Sans Devanagari;">Paste code that place there you want&nbsp;&nbsp;</span></li></ul><div><span style="font-family: Noto Sans Devanagari;"><div class="pre html">
  <pre style="max-height: none; white-space: pre-wrap;">&lt;div class="pros-cons-container"&gt;
      &lt;div class="pros-container"&gt;
        &lt;h2 class="heading"&gt;Pros&lt;/h2&gt;

        &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>
</div></span></div><div><span style="font-family: Noto Sans Devanagari;"><br /></span></div></div></div>
<p class="note"><span style="font-family: Noto Sans Devanagari;">अगर आप list में किसी प्रकार का बदलाव करना चाहते हैं तो आप कर सकते हैं , यदि आप Pros में लिस्ट जोड़ना चाहते हैं तो &lt;li&gt; Your new line &lt;/li&gt; कोड को Pros Div में add करके जोड़ सकते हैं ।&nbsp;</span></p><p class="note"><span style="font-family: Noto Sans Devanagari;">यदि आप Cons में List जोड़ना चाहते हैं तो ठीक उसी प्रकार Cons Div में कोड द्वारा Add कर सकते हैं ।&nbsp;</span></p><p class="note"><span style="font-family: Noto Sans Devanagari;"><ins class="adsbygoogle" data-ad-client="ca-pub-2117408483493581" data-ad-format="fluid" data-ad-layout="in-article" data-ad-slot="4093380371" style="display: block; text-align: center;"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script></span></p><b><span style="font-family: Noto Sans Devanagari;">
Read Also:</span></b><div><ul style="text-align: left;"><li><a href="https://www.hindibuddy.co.in/2022/08/how-to-display-website-stats-in-blogger.html"><span style="font-family: Noto Sans Devanagari;">How to Display Website Stats in Blogger&nbsp;</span></a></li><li><a href="https://www.hindibuddy.co.in/2022/04/add-blinking-text-notification-bar-in.html"><span style="font-family: Noto Sans Devanagari;">Add Blinking Text Notification Bar in Blogger&nbsp;</span></a></li><li><a href="https://www.hindibuddy.co.in/2022/04/how-to-add-code-box-in-blogger-post.html"><span style="font-family: Noto Sans Devanagari;">How to add Codebox in Blogger&nbsp;</span></a></li><li><a href="https://www.hindibuddy.co.in/2022/09/5-five-big-mistakes-in-blogging.html"><span style="font-family: Noto Sans Devanagari;">Blogging में पाँच सबसे बड़ी गलतियाँ ।&nbsp;</span></a></li></ul><div>Video:</div></div><div><br /></div> <!--[ Lazy youtube ]-->
<div class='lazyYt' data-embed='498H7e04DGo'>
  <div class='play'>
    <svg viewbox='0 0 213.7 213.7'><polygon class='t' points='73.5,62.5 148.5,105.8 73.5,149.1'></polygon><circle class='c' cx='106.8' cy='106.8' r='103.3'></circle></svg>
  </div>
</div>