bergabung di grup telegram kami

material design box deskripsi untuk mempercantik tampilan blog

material design box deskripsi untuk mempercantik tampilan blog
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 pilih tema dan edit html salin css di bawah ini dan letakkan di atas kode ]]></b:skin>

/* 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 :

11 komentar



image quote pre code
  1. Terimakasih sudah dibuatkan tutorialnya mas
    1. Sama2 kak semoga membantu
  2. Widih lama gak baca artikel di blog ini baru kesini semuanya berubah tampilan blognya jadi semakin keren
    1. Terima kasih mas, hanya sedikit berubah saja pada versi mobile
  3. Bro kalo mode malam, malah putih semua, coba aktifin mode malam blog ini
    1. Tinggal sesuaikan aja class .dark-mode nya mas, jika pakai template median ui v 1.5 itu class nya .darkMode
  4. https://1.bp.blogspot.com/-VSOvDohq4LI/YQV51UCkE_I/AAAAAAAAAVg/EGe8SOcqCZMuZwC009JQLWVko0UUkTKDgCNcBGAsYHQ/s1560/Screenshot_2021-07-31-23-24-45-26.png

    Mas cara rapihin tulisannya gimana ya? kok saya buat berantakan,di blog ini rapih ,sudah saya coba dengan ganti font,ubah ukuran tapi tetep gabisa
    1. https://1.bp.blogspot.com/-VSOvDohq4LI/YQV51UCkE_I/AAAAAAAAAVg/EGe8SOcqCZMuZwC009JQLWVko0UUkTKDgCNcBGAsYHQ/s1560/Screenshot_2021-07-31-23-24-45-26.png

      Ini screenshot nya mas
    2. Saya menulis menggunakan mode html, jika saya lihat sampean nulis bukan pakai mode html karna seperti tag div a span dll itu ada style nya makanya jadi kurang rapih
  5. ketika saya meletakkan kode di widget yang baru dibuat, css-nya tidak berfungsi tetapi ketika saya memasukkan kode di pos atau halaman ... itu berfungsi dengan baik dan bagus ... saya menggunakan tema median ui tolong selesaikan masalah ini
    1. sudah saya update silakan di coba kembali
© 2020 - Wendy Code