Add Professional Pricing Table in Blogger

Blogger platform is an best platform for newbies because their all can getting maximum benefits that need an newbie. If you are in blogger and interested to creating an service page to selling your work then don't worry i will help you to creating an beautiful service page with cool price tables. This price table comes with 3 columns but you can also increase the column numbers by using the codes. Greatly if you are top blog in blogger then i will recommended you to creating one service page to getting maximum benefits from your blog. This table is helping to getting maximum benefits in affiliate marketing and also professional marketing. If you are interested to placing the table in your post page then create one widget and the paste the HTML codes that given below. But you need give the full credit to MyBloggerClub.

Live Demo

How to create an Professional price Badge Table

First go to blogger > Dashboard > Templates > Edit HTML

Then search the below code using Ctrl + F

]]></b:skin>

Now paste the below css code above it.

.mbc1-price .col1 { background-color: #FFFFFF; color: #1E1E1E; }
.mbc1-price .col1 .text-area { background-color: #666666; color: #FFFFFF; }
.mbc1-price .col1 .text-area:after { border-top: 24px solid #666666; }
.mbc1-price .col1 li { border-color: #DDDDDD; }
.mbc1-price .col1 .pricing-badge { background-color: #1E1E1E; color: #FFFFFF; }
.mbc1-price .col2 { background-color: #FFFFFF; color: #1E1E1E; }
.mbc1-price .col2 .text-area { background-color: #32A4E6; color: #FFFFFF; }
.mbc1-price .col2 .text-area:after { border-top: 24px solid #32A4E6; }
.mbc1-price .col2 li { border-color: #DDDDDD; }
.mbc1-price .col2 .pricing-badge { background-color: #1E1E1E; color: #FFFFFF; }
.mbc1-price .col3 { background-color: #FFFFFF; color: #1E1E1E; }
.mbc1-price .col3 .text-area { background-color: #666666; color: #FFFFFF; }
.mbc1-price .col3 .text-area:after { border-top: 24px solid #666666; }
.mbc1-price .col3 li { border-color: #DDDDDD; }
.mbc1-price .col3 .pricing-badge { background-color: #1E1E1E; color: #FFFFFF; }
.mbc1-price { font-size: 15px; line-height: 22px; text-align: center; }
.mbc1-price h1, .mbc1-price h2, .mbc1-price h3 { font-size: 40px; line-height: 56px; }
.mbc1-price .col h4 { font-size: 27px; line-height: 37px; }
.mbc1-price { color: #1E1E1E; }
.mbc1-price p { margin-bottom: 22px; }
.mbc1-price .col { float: left; padding: 24px; position: relative; width: 360px; -moz-box-shadow: 0 0 6px rgba(0, 0, 0, .1); -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, .1); box-shadow: 0 0 6px rgba

(0, 0, 0, .1); }
.mbc1-price .col-spacer { margin-top: 24px; }
.mbc1-price .col .text-area { margin: -24px -24px 48px; padding: 48px 24px 24px; position: relative; }
.mbc1-price .col .text-area:after { border-left: 180px solid transparent; border-right: 180px solid transparent; bottom: -24px; content: ''; height: 0; margin-left: -180px; left: 50%; position: 

absolute; width: 0; }
.mbc1-price .col ul { list-style: none; margin: 0; }
.mbc1-price .col li { border-style: solid; border-width: 0 0 1px; margin-bottom: 12px; padding-bottom: 12px; }
.mbc1-price .col li:last-child { border-bottom: none; padding-bottom: 0; }
.mbc1-price .pricing-badge { font-style: italic; height: 50px; width: 50px; right: -10px; padding-top: 15px; position: absolute; top: -10px; z-index: 10; -moz-border-radius: 50%; -webkit-border-

radius: 50%; border-radius: 50%; }

Now create one page and then paste the below code in the box.

<div class="mbc-price mbc1-price">
	<div class="page">
	<div class="text-area">
		<h3>How to Create a Stunning Site With Blogger Platfrom</h3>
		<p>I will tell you how to create a amazing price table in blogger platfrom</p>
	</div>
	<div class="three-columns">
		<div class="col col1 first col-spacer">
	<div class="text-area">
		<h4>Design Service</h4>
		<p>You can build beautiful Templates, Logos, layouts, cool post designs and other cool designs.</p>
	</div>
		<p><a href="http://www.mybloggerclub.com/">Click to learn more →</a></p>
			<ul>
				<li>Create amzing Buttons</li>
				<li>Create photoshop logos</li>
				<li>Lay out using photoshop images</li>
				<li>Amzaing shring images with hover</li>
				<li>personal design with your choice</li>
			</ul>
			<span class="pricing-badge">$37</span>
		</div>
		<div class="col col2">
	<div class="text-area">
		<h4>Content writing</h4>
		<p>MyBloggerClub helps you to getting maximum benifits with writin Guestpost.</p>
	</div>
		<p><a href="http://www.mybloggerclub.com/">Click to learn more →</a></p>
			<ul>
				<li>Get Two dofollow Backlinks in one post</li>
				<li>You can also create Paid Guest Posting Account</li>
				<li>Also you can create one Regular Guest Posting Acc.</li>
				<li>Maximim Benifits to Regular Authors </li>
				<li>Get Paid templates in free</li>
				<li>Many Gifts</li>
			</ul>
			<span class="pricing-badge">$20</span>
		</div>
		<div class="col col3 col-spacer">
	<div class="text-area">
		<h4>Dofollow Service</h4>
		<p>Get Relax Give your wor to us and get 100+ higher page rank dofollow links in few days.</p>
	</div>
		<p><a href="http://www.mybloggerclub.com/">Click to learn more →</a></p>
			<ul>
				<li>Get  Pr-4 dofollow lin in cheap cost</li>
				<li>We work for you to get Pr-5 links</li>
				<li>Get 50 pr-3 links in 3 months</li>
				<li>All Prices are cheaper than others</li>
				<li>You tell we Consider</li>
			</ul>
			<span class="pricing-badge">$100</span>
		</div>
	</div>
	</div>
</div>

Now change all headlines and other words in your word.

Save your template.

Credits

This an cool pricing table is firstly created by MyBloggerClub.So if you are interested to sharing the table with your readers then don't forget to giving the credit to this site. If you don't follow our rules we will taking an serious action.