Cara Membuat Widget Tab Daftar Harga di Blogspot

Widget Tab Daftar Harga

Cara membuat tab daftar harga di blog seperti contoh di bawah ini sebagai berikut ,

• Masuk Blogger
• Tema
• Edit Html

CSS Widget Tab Daftar Harga

Masukan kode css di bawah ini di atas kode ]]></b:skin>

/*pricing table*/
.tableWrap{position:relative;width:350px;background:#fff;border-radius:16px;padding:30px;box-shadow:3px 5px 30px 5px rgba(46,56,77,.1);margin:auto}
.tableWrap .tab{height:55px;display:flex;align-items:center;border:1px solid #ccc;border-radius:30px;position:relative}
.tab label{height:100%;z-index:2;width:30%;display:flex;cursor:pointer;font-size:15px;position:relative;align-items:center;justify-content:center;transition:color 0.3s ease}
#tab-1:checked ~ .tab .tab-1,#tab-2:checked ~ .tab .tab-2,#tab-3:checked ~ .tab .tab-3{color:#fefefe}
.tab label:nth-child(2){width: 40%}
.tab .tabSlider{position:absolute;height:85%;border-radius:inherit;background:#f89000;opacity:.8;transition:all 0.3s ease}
#tab-1:checked ~ .tab .tabSlider{left: 0%;width: 90px;transform: translateX(5%)}
#tab-2:checked ~ .tab .tabSlider{left: 50%;width: 120px;transform: translateX(-50%)}
#tab-3:checked ~ .tab .tabSlider{left: 100%;width: 95px;transform: translateX(-105%)}
.tableWrap input[type='radio']{display: none}
.tableCard{overflow: hidden}
.tableCard .tableCards{display:flex;width:300%}
.tableCards .tableS{width:33.4%}
.tableCards .tableRow-1{transition: all 0.3s ease}
#tab-1:checked ~ .tableCard .tableCards .tableRow-1{margin-left: 0%}
#tab-2:checked ~ .tableCard .tableCards .tableRow-1{margin-left: -33.4%}
#tab-3:checked ~ .tableCard .tableCards .tableRow-1{margin-left: -66.8%}
.tableS .tableDetail{margin:20px 0;text-align:center;padding-bottom:25px;border-bottom:1px solid #e6e6e6}
.tableDetail .tableHarga{font-size:55px;font-weight:600;position:relative}
.tableDetail .tableHarga:before,.tableDetail .tableHarga:after{position:absolute;font-weight:400}
.tableDetail .tableHarga:before{content:'Rp';left:-30px;top:17px;font-size:20px}
.tableDetail .tableHarga:after{content:'rb';right:-27px;bottom:12px;font-size:23px;font-weight:600}
.tableDetail p{font-size:18px;margin-top:5px}
.tableS .tableContent li{display:flex;font-size:15px;list-style:none;margin-bottom:10px;align-items:center}
.tableContent li svg{flex-shrink:0;height:20px;margin-right:10px;margin-top:4px;stroke:#f89000;fill:none;}
.tableContent li span{margin-left:10px}
.tableWrap .buttonx{width:90%;border-radius:25px;border:1px #ccc solid;outline:none;height:50px;font-size:18px;color:#444;cursor:pointer;margin:20px 25px 20px 10px;background:transparent;transition:transform 0.3s ease;align-items:center}
.tableWrap .buttonx:hover{transform:scale(0.98);border:1px #f89000 solid;color:#f89000;outline:none}

/* CSS darkmode sesuaikan classnya jika berbeda atau hapus bagian ini */
.darkMode .tableWrap{background-color:#1e1e1e;color:#fefefe}
.darkMode .tableWrap .tab,.darkMode .tableS .tableDetail,.darkMode .tableWrap .buttonx{border-color:rgba(255,255,255,.1)}

Kode Widget Tab Daftar Harga

Letakkan kode di bawah ini , sesuai keinginan anda.

<div class='tableWrap'>
<input id='tab-1' name='tabSlider' type='radio'/>
<input checked='' id='tab-2' name='tabSlider' type='radio'/>
<input id='tab-3' name='tabSlider' type='radio'/>
<div class='tab'>
<label for='tab-1' class='tab-1'>Free</label>
<label for='tab-2' class='tab-2'>Personal</label>
<label for='tab-3' class='tab-3'>Developer</label>
<div class='tabSlider'></div>
</div>
<div class='tableCard'>
<div class='tableCards'>
<div class='tableS tableRow-1'>
<div class='tableDetail'>
<span class='tableHarga'>0</span>
<p>Pemakaian Pribadi</p>
</div>
<ul class='tableContent'>
<li>
<svg viewBox='0 0 24 24'><circle cx='12' cy='12' r='10'></circle><line x1='15' y1='9' x2='9' y2='15'></line><line x1='9' y1='9' x2='15' y2='15'></line></svg>
<span>Lisensi</span></li>
<li><svg viewBox='0 0 24 24'><circle cx='12' cy='12' r='10'></circle><line x1='15' y1='9' x2='9' y2='15'></line><line x1='9' y1='9' x2='15' y2='15'></line></svg>
<span>Support</span></li>
<li><svg viewBox='0 0 24 24'><circle cx='12' cy='12' r='10'></circle><line x1='15' y1='9' x2='9' y2='15'></line><line x1='9' y1='9' x2='15' y2='15'></line></svg>
<span>Gratis Update Versi Terbaru</span></li>
<li><svg viewBox='0 0 24 24'><circle cx='12' cy='12' r='10'></circle><line x1='15' y1='9' x2='9' y2='15'></line><line x1='9' y1='9' x2='15' y2='15'></line></svg><span>Hapus Cridit Link</span></li>
</ul>
<button class='buttonx'>Dapatkan Sekarang</button>
</div>

<div class='tableS'>
<div class='tableDetail'>
<span class='tableHarga'>100</span>
<p>Pemakain Pribadi</p>
</div>
<ul class='tableContent'><li>
<svg viewbox='0 0 24 24'><path d='M22 11.07V12a10 10 0 1 1-5.93-9.14'></path><polyline points='23 3 12 14 9 11'></polyline></svg>
<span>Max 3 Domain</span></li>
<li><svg viewbox='0 0 24 24'><path d='M22 11.07V12a10 10 0 1 1-5.93-9.14'></path><polyline points='23 3 12 14 9 11'></polyline></svg>
<span>Support 1 Bulan</span></li>
<li><svg viewbox='0 0 24 24'><path d='M22 11.07V12a10 10 0 1 1-5.93-9.14'></path><polyline points='23 3 12 14 9 11'></polyline></svg>
<span>Gratis Update Versi Terbaru</span></li>
<li><svg viewbox='0 0 24 24'><path d='M22 11.07V12a10 10 0 1 1-5.93-9.14'></path><polyline points='23 3 12 14 9 11'></polyline></svg>
<span>Hapus Cridit Link</span></li>
</ul>
<button class='buttonx'>Dapatkan Sekarang</button>
</div>
        
<div class='tableS'>
<div class='tableDetail'>
<span class='tableHarga'>1.500</span>
<p>Jual Kembali</p>
</div>
<ul class='tableContent'>
<li><svg viewbox='0 0 24 24'><path d='M22 11.07V12a10 10 0 1 1-5.93-9.14'></path><polyline points='23 3 12 14 9 11'></polyline></svg>
<span>Unlimited Lisensi</span></li>
<li><svg viewbox='0 0 24 24'><path d='M22 11.07V12a10 10 0 1 1-5.93-9.14'></path><polyline points='23 3 12 14 9 11'></polyline></svg>
<span>Support 12 Bulan</span></li>
<li><svg viewbox='0 0 24 24'><path d='M22 11.07V12a10 10 0 1 1-5.93-9.14'></path><polyline points='23 3 12 14 9 11'></polyline></svg>
<span>Gratis Update Versi Terbaru</span></li>
<li><svg viewbox='0 0 24 24'><path d='M22 11.07V12a10 10 0 1 1-5.93-9.14'></path><polyline points='23 3 12 14 9 11'></polyline></svg>
<span>Hapus Cridit Link</span></li>
</ul>
<button class='buttonx'>Dapatkan Sekarang</button>
</div>
</div>
</div>
</div>