Cara Menambahkan Kotak Desain Artikel Material Khusus Di Blog

Jika Kamu melihat seseorang menggunakannya desain tampilan artikel blog seperti diatas. Jadi Kamu telah datang ke tempat yang tepat. Saya akan menjelaskannya kepada kalian di artikel ini. Cara Menambahkan Kotak Desain Artikel Material Khusus Di Blog.

Manfaat Kotak Desain Bahan Kustom

• Ini terlihat luar biasa.
• Pengunjung akan dibuat takjub.
• Mudah untuk diterapkan.
• Tampilan yang dihias di situs web Anda.

Demo

Anda harus menambahkan dua kode untuk desain kotak bahan. Dan jika Anda menggunakan Median Ui maka Anda hanya perlu menambahkan kode kotak material.

Sebelum mengikuti langkah-langkah yang diberikan di bawah ini, harap Cadangkan Tema Anda untuk semua jenis kesalahan dan Pemulihan yang mudah.

Menambahkan Desain Kotak Bahan di Template

langka 1

1. Buka dasbor Blogger Anda.
2. Pergi ke bagian HTML dan klik Edit HTML.
3. Kemudian cari ]]</b:skin>tag ini.
4. Dan salin CSS yang diberikan di bawah ini dan rekatkan tepat di atas tag. ]]</b:skin>

Ubah kelas bagian yang ditandai .drkM dengan kelas tema Anda untuk bekerja dalam mode gelap.

Sekarang ikuti langkah-langkah di bawah ini jika Anda ingin menggunakan tabel di template lain. Jangan tambahkan tabel ini untuk Median Ui.

Langkah 2

Salin kode di bawah ini dan cukup tempel di bawah Kotak Desain Bahan CSS dan di atas  ]]</b:skin>tag kode.

/* table detail */ .Blog table.tr-caption-container{min-width:inherit;width:auto;margin:0 auto;border:0;position:relative} .Blog table.tr-caption-container tr td{background-color:transparent;border:0;padding:0} .Blog table.tr-caption-container tr:nth-child(2n+1) td, .Blog table.tr-caption-container tr:nth-child(2n+1) td:first-child{border:0;background:transparent} .Blog table.tr-caption-container .tr-caption{display:block;font-size:12px;font-style:italic;color:#767676;background-color:transparent;border:0} .Blog table{width:100%;margin:20px 0px;border:1px solid rgba(230,230,230,1);border-radius:7px;overflow:hidden;font-size:14px} .Blog table th{background-color:transparent;padding:15px 20px;border:1px solid #ddd;border-left:0;font-family:Noto Sans;font-size:13px} .Blog table th:last-child, .Blog table tr td:last-child, .Blog table tr:nth-child(2n) td:last-child{border-right:0} .Blog table td{padding:15px 20px;border:1px solid #ddd;border-left:0;border-top:0;vertical-align:middle} .Blog table tr:nth-child(2n + 1) td{background-color:rgba(0,0,0,.025)} .Blog .table{display:block;overflow-y:hidden;overflow-x:auto;border-radius:3px;scroll-behavior:smooth;}

Now don't forgot to save your theme.

Jika Anda menambahkan /* table detail */CSS, tambahkan tepat di bawah /* material design box */kode css dan di atasnya ]]></b:skin>dalam urutan tertentu.

Jika Anda menggunakan Median Ui maka jangan salin detail tabel /* ​​*/ karena sudah ada di sana.

Di bawah ini adalah kode kotak yang dapat digunakan dalam posting untuk membuat Kotak Desain Material.

FEATURESl

• Isi Artikel Anda
• Isi Artikel Anda

Kode Untuk Contoh diatas:

<div class="wendybox"> <h2>FEATURESl</h2> <ul> <li>Isi Artikel Anda</li> <li>Isi Artikel Anda</li> </ul> </div>

Anda dapat menambahkan 3 warna atau lebih untuk kotak. Gunakan kode yang diberikan di bawah ini.

Yellow Box

Isi Deskripsi

<div class="wendybox box-yellow"><h2>Yellow Box</h2><p>Isi Deskripsi</p></div>

Blue Box

Isi Deskripsi

<div class="wendybox box-blue"><h2>blue Box</h2><p>Isi Deskripsi</p></div>

Red Box

Isi Deskripsi

<div class="wendybox box-red"><h2>red Box</h2><p>Isi Deskripsi</p></div>

biru Box

Isi Deskripsi

<div class="wendybox box-biru"><h2>biru Box</h2><p>Isi Deskripsi</p></div>

hijau Box

Isi Deskripsi

<div class="wendybox box-hijau"><h2>hijau Box</h2><p>Isi Deskripsi</p></div>

ungu Box

Isi Deskripsi

<div class="wendybox box-ungu"><h2>ungu Box</h2><p>Isi Deskripsi</p></div>

Penting untuk diketahui bahwa fitur ini ditulis secara manual, tidak otomatis tampil disetiap halaman.

Di bawah ini adalah kotak dengan Desain Material dan dengan kode Tabel Detail digabungkan.

Gudang Program

Name	GudangProgram
Lisense	Personal
Version	2.0
Price	Rs.--

<div class="wendybox">
<h2>Gudang Program</h2>
<table cellpadding="0" cellspacing="0" style="text-align: left;">
<tbody>
<tr><td><b>Name</b></td> <td>Plus Ui</td></tr>
<tr><td><b>Lisense</b></td> <td>Personal</td></tr>
<tr><td><b>Version</b></td> <td>2.0</td></tr>
<tr><td><b>Price</b></td> <td>Rs.300.000</td></tr>
</tbody>
</table>
</div>

Jadi di sini sekarang saya pikir kalian pasti telah memahami semua langkah. Jika kalian mengalami kesulitan atau pertanyaan bisa kirim komentar di bawah.

Kesimpulan

Jadi saya harap Kalian menyukai posting ini. Jadi hari ini kita telah membahas tentang cara menambahkan Kotak Desain Material di tema blogger. Sukai posting kami dan ikuti blog kami untuk pembaruan rutin konten seperti ini. .

Baca Juga