 |
| How To Create Membership Plans In Blogger? |
H
ello, everyone! Wellcome to SoiPro .Today on this occasion I will going to share a tutorial about What Are Membership Plans and How To Create Membership Plans In Blogger?
What are Membership Plans?
A membership plan is a subscription to your organization that entitles the purchaser to certain benefits.
Each member's plan makes them an active member for a specific period of time, with a start date and end date, and entitles them to specific benefits that you offer them.
How to Create Membership Plans?
To create Membership Plans on your blogger site, you need to add HTML and CSS codes. These codes have to be added in 2 steps. We will add HTML code in the 1st step and CSS in the 2nd step.
Step 1 - Adding HTML
You can change the highlighted Tier, Summary, and Pricing, etc. according to your requirement.
<section id="pricing">
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-6">
<div class="plan">
<div class="plan-cover">
<div class="plan-name">Bronze</div>
<div class="plan-summary">For up to five team members</div>
<div class="plan-price">
<h1> <small>FIT</small> 1 </h1>
</div>
</div>
<div class="plan-action"> <a href="#">$5 <small>/Month</small></a> </div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="plan plan-2 plan-featured">
<div class="plan-cover">
<div class="plan-name">Gold</div>
<div class="plan-summary">For up to five team members</div>
<div class="plan-price">
<h1> <small>FIT</small> 2 </h1>
</div>
</div>
<div class="plan-action"> <a href="#">$10 <small>/Month</small></a> </div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="plan plan-3">
<div class="plan-cover">
<div class="plan-name">Silver</div>
<div class="plan-summary">For up to five team members</div>
<div class="plan-price">
<h1> <small>FIT</small> 3 </h1>
</div>
</div>
<div class="plan-action"> <a href="#">$15 <small>/Month</small></a> </div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="plan plan-4">
<div class="plan-cover">
<div class="plan-name">Platinum</div>
<div class="plan-summary">For up to five team members</div>
<div class="plan-price">
<h1> <small>FIT</small> 4 </h1>
</div>
</div>
<div class="plan-action"> <a href="#">$20 <small>/Month</small></a> </div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="plan plan-5">
<div class="plan-cover">
<div class="plan-name">Diamond</div>
<div class="plan-summary">For up to five team members</div>
<div class="plan-price">
<h1> <small>FIT</small> 5 </h1>
</div>
</div>
<div class="plan-action"> <a href="#">$25 <small>/Month</small></a> </div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="plan plan-6">
<div class="plan-cover">
<div class="plan-name">Crown</div>
<div class="plan-summary">For up to five team members</div>
<div class="plan-price">
<h1> <small>FIT</small> 6 </h1>
</div>
</div>
<div class="plan-action"> <a href="#">$30 <small>/Month</small></a> </div>
</div>
</div>
</div>
</div>
</section>Step 2 - Adding CSS
These CSS Codes are in Compressed format if you want to beautify you can use our tool by Following this Link - CSS Beautifier Tool
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.3/css/bootstrap.css'><style type="text/css">#pricing .plan {
position: relative;
display: block;
background: white;
background-image: linear-gradient(to top, #a2607f 0%, #fdcbe2 100%);
color: #333F52;
padding: 25px;
padding-bottom: 60px;
text-align: center;
text-transform: uppercase;
margin: 15px 0;
overflow: hidden;
cursor: default;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1), 0 0 10px 0 rgba(0, 0, 0, 0.1), 0 0 20px 0 rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1), 0 0 10px 0 rgba(0, 0, 0, 0.1), 0 0 20px 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1), 0 0 10px 0 rgba(0, 0, 0, 0.1), 0 0 20px 0 rgba(0, 0, 0, 0.1);
-webkit-transition: all 200ms ease-in;
-moz-transition: all 200ms ease-in;
-ms-transition: all 200ms ease-in;
-o-transition: all 200ms ease-in;
transition: all 200ms ease-in;
}
#pricing .plan.plan-2 {
background-image: linear-gradient(120deg, #d5edef 0%, #9bcccf 100%);
}
#pricing .plan.plan-3 {
background-image: linear-gradient(45deg, #93a5cf 0%, #e4efe9 100%);
}
#pricing .plan.plan-4 {
background-image: linear-gradient(to top, #35beba 0%, #bcf9f7 100%);
}
#pricing .plan.plan-5 {
background-image: linear-gradient(120deg, #c3e6d6 0%, #68b894 100%);
}
#pricing .plan.plan-6 {
background-image: linear-gradient(45deg, #9da589 0%, #ecf5d6 100%);
}
#pricing .plan .plan-name {
font-weight: 600;
color: rgba(0, 0, 0, 0.65);
letter-spacing: 0.05em;
}
#pricing .plan .plan-summary {
text-transform: none;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
font-size: 14px;
}
#pricing .plan .plan-price {
height: 240px;
position: relative;
text-align: right;
}
#pricing .plan .plan-price h1 {
position: absolute;
bottom: -62.5px;
width: 100%;
font-size: 280px;
margin: 0;
right: 15px;
line-height: 1;
font-weight: 600;
color: rgba(255, 255, 255, 0.75);
text-shadow: none;
-webkit-transition: all 200ms ease-in;
-moz-transition: all 200ms ease-in;
-ms-transition: all 200ms ease-in;
-o-transition: all 200ms ease-in;
transition: all 200ms ease-in;
}
#pricing .plan .plan-price h1 small {
position: absolute;
left: 10%;
bottom: 15%;
display: block;
font-size: 100px;
text-shadow: none;
}
#pricing .plan .plan-action {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
color: #EC3742;
}
#pricing .plan .plan-action a {
display: block;
color: #333F52;
height: 60px;
line-height: 60px;
background: white;
}
#pricing .plan:hover {
-moz-transform: translate(0, -3px);
-o-transform: translate(0, -3px);
-ms-transform: translate(0, -3px);
-webkit-transform: translate(0, -3px);
transform: translate(0, -3px);
-webkit-box-shadow: 0 3px 15px 0 rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 3px 15px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 3px 15px 0 rgba(0, 0, 0, 0.2);
-webkit-transition: all 200ms ease-in;
-moz-transition: all 200ms ease-in;
-ms-transition: all 200ms ease-in;
-o-transition: all 200ms ease-in;
transition: all 200ms ease-in;
}
#pricing .plan:hover .plan-price h1 {
text-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
-webkit-transition: all 200ms ease-in;
-moz-transition: all 200ms ease-in;
-ms-transition: all 200ms ease-in;
-o-transition: all 200ms ease-in;
transition: all 200ms ease-in;
}
#pricing .plan:hover .plan-action a {
color: #555eed;
text-decoration: none;
}
</style>Conclusion
Ok so that 's What Are Membership Plans and How To Create Membership Plans In Blogger?. I hope you enjoy this article. Please do share this article. And if you are facing problem in any section or you have any question then ask us in comment box. Thank you!
Source:
www.soipro.com