Blogger: Easy Way to Add Pricing Table in Blogger

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

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 कर सकते है।

TechnoEasy | Technical Help In Hindi !

Search This Blog