How to Create a Package Price Table on a Blog
How to Create a Package Price Table on a Blog - This time I again wrote a tutorial to create a price table on the blog. A few months ago I have made a Responsive price table, this table is very suitable when used for blogs or websites that provide services or services such as hosting and so on.
For the table this time is actually not much different from the table that I have made first, which you can see in the post how to create a list of responsive price lists in the blog. The difference is that there is only the design. For the price table this package has a simpler design but still elegant and good if you use it on a blog.
I need to remind you the table of price lists of packages or tables similar to this hosting package is very suitable for use on blogs that do not have a sidebar. Because it has a large enough width if your blog template is minimalist then the appearance may change slightly.
To overcome this problem, please delete or remove your blog sidebar for pages that display tables only using conditional tags.
In addition, if you have the knowledge of using HTML and CSS tag codes you might still be able to change a little design from this table to your liking. But if not, just use the design that I have prepared.
If you are interested in creating a package price table on a blog, please follow the steps below.
1. Enter Blogger >> Click Theme >> Edit HTML
2. Copy this CSS code then Paste it above the code ]]></b:skin> or </style>
3. Then click Save theme
Note:
To change the color of the table you can use the color picker tool.
1. Enter Blogger >> Click Page >> New Page
2. Then give the title first
3. After that enter HTML mode not Compose
4. Then enter the following HTML code:
5. Please make some changes to your liking
6. Then click Publish
If the checklist icon does not appear, please add this awesome css bundle font code and save it above the code </body>
That's the article on how to create a package price table on a blog. Hopefully with this tutorial I shared it can be useful for you and good luck.
For the table this time is actually not much different from the table that I have made first, which you can see in the post how to create a list of responsive price lists in the blog. The difference is that there is only the design. For the price table this package has a simpler design but still elegant and good if you use it on a blog.
I need to remind you the table of price lists of packages or tables similar to this hosting package is very suitable for use on blogs that do not have a sidebar. Because it has a large enough width if your blog template is minimalist then the appearance may change slightly.
To overcome this problem, please delete or remove your blog sidebar for pages that display tables only using conditional tags.
In addition, if you have the knowledge of using HTML and CSS tag codes you might still be able to change a little design from this table to your liking. But if not, just use the design that I have prepared.
If you are interested in creating a package price table on a blog, please follow the steps below.
How to Create Package Price Tables on Blog
1. Enter Blogger >> Click Theme >> Edit HTML
2. Copy this CSS code then Paste it above the code ]]></b:skin> or </style>
/* CSS Table Price */
.tabel-paket {
font-family: 'Source Sans Pro', Arial, sans-serif;
color: #ffffff;
text-align: left;
font-size: 16px;
width: 100%;
max-width: 1000px;
margin: 30px 10px;
}
.tabel-paket img {
position: absolute;
left: 0;
top: 0;
height: 100%;
z-index: -1;
}
.tabel-paket .daftar-paket {
margin: 0 0.5%;
width: 24%;
padding-top: 10px;
position: relative;
float: left;
overflow: hidden;
background-color: #222f3d;
border-radius: 8px;
}
.tabel-paket .daftar-paket:hover i,
.tabel-paket .daftar-paket.hover i {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
.tabel-paket * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
}
.tabel-paket header {
color: #ffffff;
}
.tabel-paket .nama-paket {
line-height: 60px;
position: relative;
margin: 0;
padding: 0 20px;
font-size: 1.6em;
letter-spacing: 2px;
font-weight: 700;
}
.tabel-paket .nama-paket:after {
position: absolute;
content: '';
top: 100%;
left: 20px;
width: 30px;
height: 3px;
background-color: #fff;
}
.tabel-paket .harga-paket {
padding: 0 20px;
margin: 0;
}
.tabel-paket .biaya-paket {
font-weight: 400;
font-size: 2.8em;
margin: 10px 0;
display: inline-block;
}
.tabel-paket .tipe-paket {
opacity: 0.8;
font-size: 0.7em;
text-transform: uppercase;
}
.tabel-paket .fitur-paket {
padding: 0 0 20px;
margin: 0;
list-style: outside none none;
font-size: 0.9em;
}
.tabel-paket .fitur-paket li {
padding: 8px 20px;
}
.tabel-paket .fitur-paket i {
margin-right: 8px;
color: rgba(255, 255, 255, 0.5);
}
.tabel-paket .pilih-paket {
border-top: 1px solid rgba(0, 0, 0, 0.2);
padding: 20px;
text-align: center;
}
.tabel-paket .pilih-paket a {
background-color: #156dab;
color: #ffffff;
text-decoration: none;
padding: 12px 20px;
font-size: 0.75em;
font-weight: 600;
border-radius: 8px;
text-transform: uppercase;
letter-spacing: 4px;
display: inline-block;
}
.tabel-paket .pilih-paket a:hover {
background-color: #1b8ad8 !important;
}
.tabel-paket .featured {
margin-top: -10px;
z-index: 1;
border-radius: 8px;
border: 2px solid #156dab;
background-color: #156dab;
}
.tabel-paket .featured .pilih-paket {
padding: 30px 20px;
}
.tabel-paket .featured .pilih-paket a {
background-color: #10507e;
}
@media only screen and (max-width: 767px) {
.tabel-paket .daftar-paket {
width: 49%;
margin: 0.5%;
}
.tabel-paket .nama-paket,
.tabel-paket .pilih-paket a {
-webkit-transform: translateY(0);
transform: translateY(0);
}
.tabel-paket .pilih-paket,
.tabel-paket .featured .pilih-paket {
padding: 20px;
}
.tabel-paket .featured {
margin-top: 0;
}
.tabel-paket .featured header {
line-height: 70px;
}
}
@media only screen and (max-width: 440px) {
.tabel-paket .daftar-paket {
margin: 0.5% 0;
width: 100%;
}
}
3. Then click Save theme
Note:
To change the color of the table you can use the color picker tool.
How to Install Tables on the Blog Static Page
1. Enter Blogger >> Click Page >> New Page
2. Then give the title first
3. After that enter HTML mode not Compose
4. Then enter the following HTML code:
<div class="tabel-paket">
<div class="daftar-paket">
<header>
<h4 class="nama-paket">
Starter </h4>
<div class="harga-paket"><span class="biaya-paket">$9</span><span class="tipe-paket">/month</span></div>
</header>
<ul class="fitur-paket">
<li><i class="fa fa-check"> </i>5GB Linux Web Space</li>
<li><i class="fa fa-check"> </i>5 MySQL Databases</li>
<li><i class="fa fa-check"> </i>Unlimited Email</li>
<li><i class="fa fa-check"> </i>250Gb mo Transfer</li>
<li><i class="fa fa-check"> </i>24/7 Tech Support</li>
<li><i class="fa fa-check"> </i>Daily Backups</li>
</ul>
<div class="pilih-paket"><a href="">Select Plan</a></div>
</div>
<div class="daftar-paket">
<header>
<h4 class="nama-paket">
Basic </h4>
<div class="harga-paket"><span class="biaya-paket">$29</span><span class="tipe-paket">/month</span></div>
</header>
<ul class="fitur-paket">
<li><i class="fa fa-check"> </i>10GB Linux Web Space</li>
<li><i class="fa fa-check"> </i>10 MySQL Databases</li>
<li><i class="fa fa-check"> </i>Unlimited Email</li>
<li><i class="fa fa-check"> </i>500Gb mo Transfer</li>
<li><i class="fa fa-check"> </i>24/7 Tech Support</li>
<li><i class="fa fa-check"> </i>Daily Backups</li>
</ul>
<div class="pilih-paket"><a href="">Select Plan</a></div>
</div>
<div class="daftar-paket featured">
<header>
<h4 class="nama-paket">
Professional </h4>
<div class="harga-paket"><span class="biaya-paket">$49</span><span class="tipe-paket">/month</span></div>
</header>
<ul class="fitur-paket">
<li><i class="fa fa-check"> </i>25GB Linux Web Space</li>
<li><i class="fa fa-check"> </i>25 MySQL Databases</li>
<li><i class="fa fa-check"> </i>Unlimited Email</li>
<li><i class="fa fa-check"> </i>2000Gb mo Transfer</li>
<li><i class="fa fa-check"> </i>24/7 Tech Support</li>
<li><i class="fa fa-check"> </i>Daily Backups</li>
</ul>
<div class="pilih-paket"><a href="">Select Plan</a></div>
</div>
<div class="daftar-paket">
<header>
<h4 class="nama-paket">
Ultra </h4>
<div class="harga-paket"><span class="biaya-paket">$99</span><span class="tipe-paket">/month</span></div>
</header>
<ul class="fitur-paket">
<li><i class="fa fa-check"> </i>100GB Linux Web Space</li>
<li><i class="fa fa-check"> </i>Unlimited MySQL Databases</li>
<li><i class="fa fa-check"> </i>Unlimited Email</li>
<li><i class="fa fa-check"> </i>10000Gb mo Transfer</li>
<li><i class="fa fa-check"> </i>24/7 Tech Support</li>
<li><i class="fa fa-check"> </i>Daily Backups</li>
</ul>
<div class="pilih-paket"><a href="">Select Plan</a></div>
</div>
</div>
Note: To choose which table is the most recommended, please see the code <divclass="package-list featured"> the result will be as in the third table.
5. Please make some changes to your liking
6. Then click Publish
If the checklist icon does not appear, please add this awesome css bundle font code and save it above the code </body>
<link href='//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>
That's the article on how to create a package price table on a blog. Hopefully with this tutorial I shared it can be useful for you and good luck.
Post a Comment for "How to Create a Package Price Table on a Blog"
Provide comments relevant to the posted articles and provide critiques and suggestions for the progress of the blog