bergabung di grup telegram kami

material design box deskripsi untuk mempercantik tampilan blog

material design box seperti ini akan cocok apabila di pakai di situs yang bertema penjualan atau jasa seperti toko online atau landing page

material design box deskripsi untuk mempercantik tampilan blog

Hallo semua pada kesempatan kali ini saya akan membagikan cara membuat material design box deskripsi untuk mempercantik tampilan blog kalian.

tutorial ini di reguest oleh Dwi Prastyo via email,yang di mana beliau mengirimkan contoh dari blog yang tidak akan saya sebutkan di sini mohon maaf, karena blog tersebut membagikan template bajakan / cloningan.

material design box deskripsi untuk mempercantik tampilan blog
reguest oleh Dwi Prastyo

material design box seperti ini akan cocok apabila di pakai di situs yang bertema penjualan atau jasa seperti toko online atau landing page, yang dapat menjelaskan suatu produk atau jasa yang di jual secara lengkap dan ringkas.

untuk demonya bisa lihat di dalam postingan ini, ok buat kalian yang ingin membuatnya mari simak caranya di bawah ini.

Cara Membuat Material Design Box Deskripsi

silakan masuk ke blogger > tema > edit html salin css di bawah ini dan letkkan di atas kode ]]></b:skin> atau di atas kode </style>

/* material design box */
.wendybox{background-color:#fff;position:relative;margin:40px 2px;padding:40px 15px 15px;border:1px solid rgba(230,230,230,1);border-radius:5px;box-shadow:0 10px 20px 0 rgba(30,30,30,.07)}
.wendybox h2 {background-color:#02d07a;border-radius:3px;padding:8px 20px!important;position:absolute;margin:0!important;font-size:17px!important;color:#fff;top:-20px;font-weight:bold;left:30px;text-transform:uppercase}
.wendybox.box-yellow h2{background:#e2c601}
.wendybox.box-blue h2{background:#2ad2c9}
.wendybox.box-red h2{background:#f7176a}

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

/* css darkmode sesuaikan classnya jika berbeda atau hapus bagian ini */
.darkMode .wendybox{background-color:#2d2d30;color:#fefefe;}
.darkMode .wendybox table,.darkMode .wendybox table td,.darkMode .wendybox{border-color:rgba(255,255,255,.15);color:#fefefe}

jika sudah jangan lupa untuk klik simpan, dan untuk cara menerapkanya di postingan simak caranya di bawah ini

DESCRIPTION

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque molestie venenatis nibh, eget egestas justo bibendum et. Aenean volutpat fermentum mi ut aliquet. Aliquam in sapien eu turpis volutpat vulputate. Pellentesque sodales ultricies dignissim.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque molestie venenatis nibh, eget egestas justo bibendum et. Aenean volutpat fermentum mi ut aliquet. Aliquam in sapien eu turpis volutpat vulputate. Pellentesque sodales ultricies dignissim.

Format penulisan :

<div class="wendybox">
<h2>Judul</h2>
<!--text kalian di sini-->
</div>

DESCRIPTION

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque molestie venenatis nibh, eget egestas justo bibendum et. Aenean volutpat fermentum mi ut aliquet. Aliquam in sapien eu turpis volutpat vulputate. Pellentesque sodales ultricies dignissim.

Format penulisan :

<div class="wendybox box-blue">
<h2>Judul</h2>
<!--text kalian di sini-->
</div>

FEATURES

  • Responsive Design
  • Google Rich Results
  • Fast Load and SEO Optimize
  • Google Rich Results
  • Mobile Friendly
  • Documentation and Tutorial (Full)

Format penulisan :


<div class="wendybox box-yellow">
<h2>Judul</h2>
<ul>
<li>text kalian</li>
<li>text kalian</li>
</ul>
</div>

DETAIL

Nama Coding Pro
Lisensi Personal
Versi 1.0
Harga Rp.100.000

Format penulisan :

<div class="wendybox">
<h2>Judul</h2>
<table cellpadding="0" cellspacing="0" style="text-align: left;">
<tbody>
<tr><td><b>Nama</b></td> <td>Coding Pro</td></tr>
<tr><td><b>Lisensi</b></td> <td>Personal</td></tr>
<tr><td><b>Versi</b></td> <td>1.0</td></tr>
<tr><td><b>Harga</b></td> <td>Rp.100.000</td></tr>
</tbody>
</table>
</div>

ok jadi sekian cara membuat material design box deskripsi untuk mempercantik tampilan blog kalian semoga bermanfaat, jika punya pertanyaan silakan tinggalkan komentar di bawah ini dengan akun asli.

Baca juga :
tutorial blogger
perlu bantuan?