Cara Mudah Membuat Responsive Pricing Widget

Selamat datang di The Royal Moringa. Postingan kali ini akan membahas mengenai cara pembuatan widget perbandingan/tabel harga/comparison widget/pricing widget yang dibuat dalam bentuk table. Menu Perbandingan ini dapat digunakan untuk menyampaikan informasi mengenai sesuatu hal/beberapa hal yang sedang diperbandingkan. Misal, widget perbandingan jenis kamar hotel yang menampilkan fasilitas masing-masing jenis kamar, widget pilihan paket internet, widget perbandingan harga paket free & pro, dan lain sebagainya. Widget ini bisa ditampilkan di halaman utama sebuah web/blog maupun sebagai bagian dari postingan. Berikut langkah-langkah membuat widget perbandingan untuk ditampilkan di homepage.

Pricing Widget Style 1

Pricing Widget Style 2

1. Log in ke akun blog anda > Pada dashboard pilih Theme > Edit HTML > copy dan paste kode CSS berikut diatas ]]></b:skin>

#responsive-container {
    width: 1000px;
    margin: auto;
}
#trm-comparison {
    float: left;
    width: 100%;
    background-color: #FFF;
    padding-bottom: 75px;
    padding-top: 30px;
    margin: 0px 0px 55px 0px;
    font-family:Palatino Linotype;
}
#trm-comparison li {
    display: block;
    float: left;
    margin: 12px 0px;
    font-size: 20px;
    width:100%;
}
#trm-comparison li h3 {
    margin: 10px 10px 10px 150px;
    float: left;
    font-size: 18px;
}
#trm-comparison ul {
    margin: 10px 20px;
    padding: 0px;
    overflow:hidden;
    text-align:center;
}
#trm-comparison h2 {
    font-size: 30px;
    font-weight: 300;
    margin: 25px 0px 58px 0px;
    width: 100%;
    text-align: center;
}
#trm-comparison h3 {
    font-size: 160%;
    text-align: center;
    margin-top: 40px;
}
.col_1_of_4:first-child {
    margin-left: 0;
}
.span_1_of_4 {
    width: 16.5em;
    background-color:#fff;
}
.col_1_of_4 {
    display: block;
    float: left;
    margin: 1% 1.75% 1% 1.75%;
    background-color:#ededed;
}
@media screen and (max-width: 1110px) {
    #responsive-container {
        max-width: 800px;
        overflow: hidden;
    }
    #trm-comparison li p {
        width: 266px;
        margin-top: 0;
    }
    .col_1_of_4:first-child {
    margin-left: 0;
    }
    .span_1_of_4 {
    width: 18.5em;
    }
    .col_1_of_4 {
    display: block;
    float: left;
    margin: 1% 4.75% 1% 4.75%;
    padding: 0 5% 0 5%;
    }
}
@media screen and (max-width: 810px) {
    #responsive-container {
        max-width: 300px;
        overflow: hidden;
    }
    #our-services li p {
        width: 229px;
        margin-right: 0px;
    }
    .col_1_of_4:first-child {
    margin-left: 0;
    }
    .span_1_of_4 {
    width: 16.5em;
    }
    .col_1_of_4 {
    display: block;
    float: left;
    margin: 1% 9.75% 1% 9.75%;
    padding: 0 5% 0 5%;
    }
}

2. Kemudian menuju ke bagian <body> dan cari posisi dimana anda akan meletakkan widget ini. Misal anda akan meletakkannya sebelum footer maka cari <div class='footer'> atau <div id='footer'> kemudian copy dan paste kode HTML berikut diatasnya.

<!-- Comparison Widget by The Royal Moringa--> 
<b:if cond="data:blog.url == data:blog.homepageUrl">
<div id="trm-comparison">
<div id="responsive-container">
<h2>
Judul Utama Widget</h2>
<div class="col_1_of_4 span_1_of_4">
<h3>
Judul 1</h3>
<p align="center" style="font-size:16px;">
Sub Judul 1</p>
<ul>
<li>Info 1</li>
<li>Info 2</li>
<li>Info 3</li>
<li>Info 4</li>
</ul>
</div>
<div class="col_1_of_4 span_1_of_4">
 
<h3>
Judul 2</h3>
<p align="center" style="font-size:16px;">
Sub Judul 2</p>
<ul>
<li>Info 1</li>
<li>Info 2</li>
<li>Info 3</li>
<li>Info 4</li>
</ul>
</div>
<div class="col_1_of_4 span_1_of_4">
<h3>
Judul 3</h3>
<p align="center" style="font-size:16px;">
Sub Judul 3</p>
<ul>
<li>Info 1</li>
<li>Info 2</li>
<li>Info 3</li>
<li>Info 4</li>
</ul>
</div>
<div class="col_1_of_4 span_1_of_4">
 
<h3>
Judul 4</h3>
<p align="center" style="font-size:16px;">
Sub Judul 4</p>
<ul>
<li>Info 1</li>
<li>Info 2</li>
<li>Info 3</li>
<li>Info 4</li>
</ul>
</div>
</div>
</div>
</b:if>

3. Silakan edit/ganti judul, sub judul, dan info sesuai dengan keinginan anda. Warna background dan tulisan juga dapat anda ganti seperti gambar diatas.

4. Save Template dan lihat hasilnya

Nah, sekarang anda telah berhasil membuat widget tabel perbandingan dalam bentuk kolom. Terima kasih telah membaca dan selamat mencoba!

The Royal Moringa

Cara Mudah Membuat Responsive Pricing Widget

Post a Comment

0 Comments

Popular Posts

Cara Menyimpan File Dokumen Line di Android

Perbedaan Penulisan Sumber Kutipan & Daftar Pustaka

Cara Mudah Membuat Form Pendaftaran di Blog

Categories

Footer Menu Widget

The Royal Moringa

Cara Mudah Membuat Responsive Pricing Widget

You may like these posts

Post a Comment

0 Comments

Social Plugin

Popular Posts

Cara Menyimpan File Dokumen Line di Android

Perbedaan Penulisan Sumber Kutipan & Daftar Pustaka

Cara Mudah Membuat Form Pendaftaran di Blog

Categories

Footer Menu Widget