Skip to main content

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

Labels:

Comments

Post a Comment

Popular posts from this blog

PM Modi Announces Financial Package: पीएम मोदी ने 20 लाख करोड़ रुपये के आर्थिक पैकेज और लॉकडाउन 4 की घोषणा की

PM Modi Announces Financial Package:  पीएम मोदी ने 20 लाख करोड़ रुपये के आर्थिक पैकेज और लॉकडाउन 4 की घोषणा की Financial Package: The package will focus on land, labour, liquidity, and law, PM Modi said पीएम मोदी का भाषण : "18 मई से पहले राज्यों से सुझाव के बाद लॉकडाउन 4 का विवरण साझा किया जाएगा ," पीएम मोदी ने तीसरी बार राष्ट्र को संबोधित करते हुए कहा , क्योंकि उन्होंने मार्च के अंत में कुल लॉकडाउन की घोषणा की थी। प्रधान मंत्री नरेंद्र मोदी ने आज कोरोनोवायरस संकट और अर्थव्यवस्था पर इसके पतन के लिए 20 लाख करोड़ रुपये के पैकेज की घोषणा की। भारत को वायरस द्वारा नियंत्रित नहीं किया जाएगा , उन्होंने कहा , 17 मई के बाद " लॉकडाउन 4" की घोषणा " नए नियमों के साथ " पूरी तरह से अलग रूप में। भारत के सकल घरेलू उत्पाद के लगभग 10 प्रतिशत के बराबर विशेष आर्थिक पैकेज , " भारत निर्भय भारत " या आत्मनिर्भर भारत का मुख्य घटक होगा , प्रधा...
Post a Comment
Read more

Android 10 OS will change your phone experience: | Android 10 OS से आपके फोन को मिलेंगे नए फीचर बदलेगा एक्सपीरियंस

Android 10 Android 10 OS will change your phone experience Google has officially announced the name of its next operating system. The OS, whose name is now considered to be Android Q, has been renamed from Android 10, this time the new OS has been named Android 10. Till now Android was running according to English alphabets. The new Android operating system has been given to some developers for testing and its public beta version has also been released. The beta version has seen many great features, which will completely change the experience of users. These features have been added to the new OS, Dark mode The system wide dark mode feature was long awaited by the users and has finally been confirmed at the IO Developers Conference. Dark themes can be turned on from the battery tab by going to settings. Google has already introduced dark mode in many of its apps. Location access permission In Android 10, Google has improved the privacy of users and for this, users will g...
Post a Comment
Read more

What is hyperlink? How many types of links are there?

What is hyperlink What is hyperlink? How many types of links are there? What is hyperlink? How many types of links are there? Do you know what a link or hyperlink is and what are the types of it? Do you know what is Hyperlink? How many types of links? Hello friends! In today's post, I am going to tell about Hyperlink which has a short-form link. Also, in this post, I will also tell about internal, external and Out bounds links. You must have run the internet many times, but do you know about these small things, who is called a link and how many types are there? Friends, we see a lot of things in life, but we ignore many small things, but do you know that anywhere in the interview we have to be embarrassed due to these small things. This post is also for blogger and a simple man who wants to keep information related to the computer, if you do not know about it, then read this post so that if anyone questions you, you can answer it immediately. What is hyperli...
Post a Comment
Read more