How To Add Pricing Table In Blogger Blog

How To Add Pricing Table In Blogger Blog

 

Hello dosto aaj ke iss Post main apko  How To Add Pricing Table In Blogger Blog Ke Bare main batane wala Hu toh post ko last tak read kare Aur adhik jankari ke liye hamare youtube Video ko Watch kare.

Pricing Table In Blogger :

 

Dosto pricing table ko Blogger Par add karne ke liye apko ek blog creat karna hoga uske baad apko blogger ke Theme section par jake ]]<>/b:skin> Iss Code Find karna hoga.

Aur Niche apko Do HTML Code  Milega jo 1st Code Ko Copy karke  ]]<>/b:skin> Iss Tage ke Upar paste kar dena hoga. 

 

Uske Baad apko post section par New Post Ko select Karna Hoga aur Then woh post ko HTML Mode Par jana hoga aur Niche jo 2nd Code milega Usko Paste Kar dena hoga Full Tutorial ke liye Please Youtube video Ko Watch Kare.

 

1st HTML Code :

 

 

.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;}  

2nd HTML Code:

<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×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×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 MySQL Database</li> <li>24×7 Online Support</li> <li>100% Money Back Guarantee</li> </ul> <a class="button" href="#"><span data-hover="Buy">Buy</span></a> </div>

Toh Post  Hamare How To Add Pricing Table In Blogger Blog Post ko acha Laga toh share kare.