Flat Pricing Table For Blogger Blog

You can add your own packages, display your own points, you can even manipulate the styling if you are really good @ CSS but by default only we will be be providing you awesome created table that will fit well with your already running website. Well I would like to thank softglad for this awesome widget and tutorial.

Creating Pricing Table Widget for Websites

So now this widget could be added to your blogger or wordpress blogs or even if you have any other awesome website you can add this to that too very easily. As this table is just comprised of HTML and CSS, so its loads fasts & looks awesome. So now lets just jump in on how to add this to your blog.

• Well the first you need to do is to add the HTML for this code, just copy the below code and paste it where ever you want this widget to appear.

<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>

• Now in Your template search for ]]></b:skin> and add the following code just above it

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

Save your template Done! 

Sharing is Caring! Share if you like:)