Untuk membuat tab di blog, Anda dapat menggunakan beberapa cara berbeda. Salah satu cara yang mudah dan ringan adalah dengan menggunakan CSS saja, tanpa perlu Javascript. Cara ini telah dibagikan oleh Igniel, seorang blogger yang juga membuat tema-tema Blogger gratis. Anda dapat mengikuti langkah-langkah berikut untuk membuat tab CSS di blog Anda:
1. Tambahkan kode CSS berikut pada pengaturan tema blog Anda. Kode ini akan menentukan tampilan dan fungsi dari tab-tab yang akan Anda buat. Anda dapat mengubah warna, ukuran, atau gaya dari tab sesuai dengan selera Anda.
```
/* Multi Tabs CSS Only by igniel.com
Source Code: [4](^1^) */
.ignielMultiTab {
border: 0;
margin: 1.5rem 0;
padding: 0;
}
.ignielMultiTab input, .ignielMultiTab .content > div {
display: none;
}
.ignielMultiTab label, .ignielMultiTab .content {
border-style: solid;
border-width: 1px;
}
.ignielMultiTab input:checked + label, .ignielMultiTab .content {
border-color: #ddd;
}
.ignielMultiTab .label {
display: flex;
flex-wrap: nowrap;
flex-direction: row;
max-width: calc (100vw - 2.5rem);
overflow: auto;
}
.ignielMultiTab label {
background-color: #ededed;
border-color: transparent;
border-bottom: 1px solid #ddd;
color: #666;
cursor: pointer;
display: inline-block;
float: left;
padding: .65rem 1.25rem;
position: relative;
top: 1px;
transition: all .3s ease;
}
.ignielMultiTab input:checked + label {
background-color: transparent;
border-bottom: 1px solid #fff;
color: #1d1d1d;
font-weight: bold;
}
.ignielMultiTab .content {
clear: both;
padding: 1.5rem 1.25rem;
}
.ignielMultiTab #tab1:checked ~ .content .tab1, .ignielMultiTab #tab2:checked ~ .content .tab2, .ignielMultiTab #tab3:checked ~ .content .tab3, .ignielMultiTab #tab4:checked ~ .content .tab4, .ignielMultiTab #tab5:checked ~ .content .tab5 {
display: block;
}
```
2. Salin kode HTML berikut ke dalam editor Blogger. Pastikan untuk memilih mode HTML, bukan Compose. Kode ini akan membuat lima tab dengan label Satu, Dua, Tiga, Empat, dan Lima. Anda dapat mengubah label, jumlah, atau isi dari tab sesuai dengan kebutuhan Anda.
```
<!-- Multi Tabs CSS Only by igniel.com -->
<fieldset class="ignielMultiTab">
<input id="tab1" name="mTab" type="radio" checked="checked"/>
<label for="tab1"> Satu </label>
<input id="tab2" name="mTab" type="radio"/>
<label for="tab2"> Dua </label>
<input id="tab3" name="mTab" type="radio"/>
<label for="tab3"> Tiga </label>
<input id="tab4" name="mTab" type="radio"/>
<label for="tab4"> Empat </label>
<input id="tab5" name="mTab" type="radio"/>
<label for="tab5"> Lima </label>
<div class="content">
<div class="tab1"> (1) ISI SATU </div>
<div class="tab2"> (2) ISI DUA </div>
<div class="tab3"> (3) ISI TIGA </div>
<div class="tab4"> (4) ISI EMPAT </div>
<div class="tab5"> (5) ISI LIMA </div>
</div>
</fieldset>
```
3. Simpan perubahan Anda dan lihat hasilnya di blog Anda. Anda seharusnya dapat melihat tab-tab yang dapat Anda klik untuk menampilkan isi yang berbeda.
Cara lain yang dapat Anda gunakan untuk membuat tab di blog adalah dengan menggunakan perintah `start` di command prompt. Perintah ini memungkinkan Anda untuk membuka program, folder, atau dokumen dengan menggunakan nama file, path, atau URL. Misalnya, jika Anda ingin membuka window explorer di folder C:\Windows, Anda dapat mengetik perintah berikut:
`start C:\Windows`
Anda dapat menambahkan opsi `/max` atau `/min` untuk membuka window explorer dalam mode maksimal atau minimal. Anda juga dapat menambahkan opsi `/wait` untuk menunggu program selesai sebelum melanjutkan perintah berikutnya. Anda dapat mengetahui lebih lanjut tentang perintah `start` dengan mengetik `start /?` di command prompt.
Tidak ada komentar:
Posting Komentar