Blogger: Easy Way to Add Pricing Table in Blogger

नमस्कार दोस्तो ! स्वागत है आपका TechnoEasy ब्लॉग में।तो आज के इस Article में हम बात करने वाले है How to Add Pricing Table in Blogger के बारे में। and ये क्या है & इन्हें हम कैसे Use कर सकते है। तो इन सभी बातों को हम इस Article में जानेंगे। तो बने रहिये इस Article में और जानिए पूरे Details में।

Blogger: Easy Way to Add Pricing Table in Blogger

Pricing Table क्या है?

So अगर आपको नही पता की Pricing ➤ Table क्या है? तो मैं आपको बता दूँ की Pricing Table एक तरीका होता है| जिसकी मदद से हम किसी भी प्रकार के Price को Table में सजा के लिख सकते है|

अगर आपने किसी भी Website जहा कुछ भी समान को बेचा जाता है| वह आपने देखा होगा की उस सामान की सूचि के साथ आप उसका Price भी देखने को मिलता है|
आजकल ये Pricing Table काफी चर्चित है| और इन्हें लगभग सभी लोग अपने Website में Use करते है|

Pricing Table in Blogger

अब मैं बता दूँ की मैंने यह Pricing Table in Blogger क्यों बताया है| मैंने इसीलिए बाते है की ये Pricing Table का Feature सिर्फ और सिर्फ WordPress में ही उपलब्ध है| WordPress में आपको बहुत से ऐसे Plugins भी मिल जाते है| जिसकी मदद से आप आसानी से Pricing Table बना सकते है|

लेकिन अगर आपका ब्लॉग या वेबसाइट ➤ Blogger पर है| तो आपको ब्लॉगर में किसी प्रकार की Plugins इस्तेमाल करने को नही मिलता है| लेकिन मैं आपको बता दूँ की आज मैं कुछ Coding के जरिये आसानी से अपने Blogger ब्लॉग में इस Pricing Table को add कर सकते है|

How to Add Pricing Table in Blogger Step By Step

तो अभी मैंने निचे सभी Steps पुरे विस्तार से बताया है| आपको इन सभी स्टेप्स को बिलुल जैसा बताया गया हैथिक वैसे ही फॉलो करना है|

Step 1 – सबसे पहले आपको Blogger के Dashboard में लॉग इन करना है|

Step 2 – अब आपको निचे Theme में जाकर Edit HTML पर क्लिक करना है|

Step 3 – अब आपको ctrl+f प्रेस करके ]]></b:skin> Search करना है|

Step 4 – निचे आपको कुछ CSS Code मिलेंगे आपको इसे Copy करके ]]></b:skin> के उपर Paste कर दे
और Save पर क्लिक करे|

Click Here To Download The Link 1

.table {width:30%;margin:0 10px;background:#fff;text-align:center;float:left;}.table.standard {background:rgba(0,245,255,0.1);}.table h2 {color:#fff;margin:0;padding:5px 0;text-align:center;font:Bold 25px armata;cursor:pointer;z-index:999;position:relative;}.table.economic h2 {background:#4593e3;}.table.standard h2 {background:#16a085;}.table.premium h2 {background:#cd4436;}.table .price {font:15px Armata;color:#fff;padding:10px 25px;display:inline-block;border-radius:0px 0px 100% 100%;cursor:pointer;}.table.economic .price {background:#4593e3;}.table.standard .price {background:#16a085;}.table.premium .price {background:#cd4436;}.table:hover .price {border-radius:0;}.table ul {margin:9px 0;padding:0px;}.table ul li {list-style:none;font:15px Armata;padding:10px 5px;border:1px solid rgba(238,238,238,0.29);margin:2px 10px;}.table.economic ul li:hover {border-color:#4593e3;}.table.premium ul li:hover {border-color:#cd4436;}.table.standard ul li:hover {border-color:#16a085;}.table a {text-decoration:none;display:inline-block;overflow:hidden;color:#000;margin:1px 0 10px;text-transform:uppercase;}.table a:hover {color:#fff;}.table .button span {position:relative;display:inline-block;-webkit-transition:-webkit-transform 0.3s;-moz-transition:-moz-transform 0.3s;transition:transform 0.3s;padding:5px 35px;font:Bold 20px Armata;}.table .button span::before {position:absolute;top:100%;content:attr(data-hover);font-weight:700;-webkit-transform:translate3d(0,5px,10px);-moz-transform:translate3d(0,5px,10px):transform:translate3d(0,5px,10px):}.table .button:hover span,.table .button:focus span {-webkit-transform:translateY(-100%);-moz-transform:translateY(-100%);transform:translateY(-100%);}.table.economic a {border: 2px solid #4593e3;}.table.economic a:hover {background: #4593e3;}.table.standard a {border:2px solid #16a085;}.table.standard a:hover {background:#16a085;}.table.premium a {border:2px solid #cd4436;}.table.premium a:hover {background:#cd4436;}

Step 5 – अब निचे आपको Pricing Table का HTML कोड मिलेगा| इसे कॉपी करे|

Click Here To Download The Link 2

<div class="table economic">
<h2>Economic</h2>
<span class="price">$10/year</span>
<ul>
  <li>20 GB space</li>
  <li>Unlimited Bandwidth</li>
  <li>15 Email Accounts</li>
  <li>10 MySQL Database</li>
  <li>24&#215;7 Online Support</li>
  <li>100% Money Back Guarantee</li>
</ul>
<a class="button" href="#"><span data-hover="Buy">Buy</span></a>
</div>
<div class="table standard">
<h2>Standard</h2>
<span class="price">$45/year</span>
<ul>
  <li>100 GB space</li>
  <li>Unlimited Bandwidth</li>
  <li>50 Email Accounts</li>
  <li>35 MySQL Database</li>
  <li>24&#215;7 Online Support</li>
  <li>100% Money Back Guarantee</li>
</ul>
<a class="button" href="#"><span data-hover="Buy">Buy</span></a>
</div>
<div class="table premium">
<h2>Premium</h2>
<span class="price">$99/year</span>
<ul>
  <li>Unlimited space</li>
  <li>Unlimited Bandwidth</li>
  <li>Unlimited Email Accounts</li>
  <li>Unlimited&nbsp;MySQL Database</li>
  <li>24&#215;7 Online Support</li>
  <li>100% Money Back Guarantee</li>
</ul>
<a class="button" href="#"><span data-hover="Buy">Buy</span></a>
</div>

Step 6 – अब इस कोड को आपको वह Paste करना है| जहाँ Post में आप इस Pricing Table को दिखाना 
चाहते है|

Step 7 – अब आपको Save कर दे आपका पूरा काम Complete हो चूका है|

तो आप इस प्रकार से आसानी से अपने ब्लॉगर ब्लॉग में Pricing Table को Add कर सकते है|

निष्कर्ष– आपको यह Add Pricing Table in Blogger का Article कैसा लगा। So आप नीचे कमेंट बॉक्स में कमेंट करके जरूर बताएं। And किसी प्रकार का सुझाव देना भी चाहते है| So आप नीचे Comment Box में अपनी राय हमारे साथ Share कर सकते है।