Cara Membuat Kotak Tabel Mirip Kompi Ajaib

 

HiiroDev - pada artikel kali ini mimin akan sharing bagaimana cara membuat tabel pada blog, dan di artikel kali ini mimin akan membagikan yang tampilannya mirip seperti website milik kompi ajaib.

Kenapa harus membuat tabel? membuat sebuah tabel pada blog adalah sebuah pilih namun jika kalian menerapkan tabel akan membuat blog kalian terihat profesional, responsive dan membuat pembaca nyaman jika artikel di susun dengan rapi.

Pasang CSS dulu dengan cara copy pastekan kode di bawah ini tepat di atas kode </style>

.clear{clear:both}
.temp-sub{margin:20px 0}
.temp-sub .template_free{width: calc(50% - 5px);float: left;padding:0;margin-right:5px}
.temp-sub .template_paid{width: calc(50% - 5px);float: left;padding:0;margin-left:5px}
.temp-sub .template_free h4,.temp-sub .template_paid h4, .temp-fitur h4 {margin:0;padding:6px 10px;background:#3f474e;color:#fff;}
.temp-sub .template_free ul,.temp-sub .template_paid ul,.temp-sub .template_free li,.temp-sub .template_paid li{list-style:none;margin:0;padding:0}
.temp-sub .template_free li,.temp-sub .template_paid li{border:1px solid #ddd;border-top:none;margin:0;padding:6px 10px}
.temp-sub .template_free .fa{float:right;font-style:normal!important;color:red;padding-top: 10px;border-left: 1px solid #ddd;padding-left: 10px;margin: -6px -10px 0 0;height: 25px;width:20px;}
.temp-sub .template_paid .fa{float:right;font-style:normal!important;color:green;padding-top: 10px;border-left: 1px solid #ddd;padding-left: 10px;margin: -6px -10px 0 0;height: 25px;width:20px}

.temp-fitur{width:100%;margin:20px 0}
.temp-fitur h4{padding:6px 10px;background:#3f474e;color:#fff;}
.temp-fitur ul,.temp-fitur li{list-style:none;margin:0;padding:0}
.temp-fitur ul li{border:1px solid #ddd;border-top:none;margin:0;padding:6px 10px}
  
.fa {box-sizing:unset;}

  @media screen and (max-width:800px){
.temp-sub .template_free{width:100%;margin-right: 0;margin-bottom:10px}
.temp-sub .template_paid{width:100%;margin-left: 0;}

Jika sudah, lalu kita buat postingan baru dengan mode HTML ya bukan ( Compose ) untuk blogger, kalau untuk wordpress mode Text bukan ( Visual ).

<div class="temp-sub">
  <div class="template_free">
    <h4>
      Free Version</h4>
    <ul>
      <li><b>Remove Footer Credits</b><i class="fa fa-times"></i></li>
      <li><b>One Time Payment</b><i class="fa fa-times"></i></li>
      <li><b>No Encrypted Scripts</b><i class="fa fa-times"></i></li>
      <li><b>Lifetime Premium Support</b><i class="fa fa-times"></i></li>
      <li><b>For Unlimited Domains</b><i class="fa fa-times"></i></li>
      <li><b>Lifetime Template Updates</b><i class="fa fa-times"></i></li>
    </ul>
  </div>
  <div class="template_paid">
    <h4>
      Premium Version</h4>
    <ul>
      <li><b>Remove Footer Credits</b><i class="fa fa-check fa-6"></i></li>
      <li><b>One Time Payment</b><i class="fa fa-check fa-6"></i></li>
      <li><b>No Encrypted Scripts</b><i class="fa fa-check fa-6"></i></li>
      <li><b>Lifetime Premium Support</b><i class="fa fa-check fa-6"></i></li>
      <li><b>For Unlimited Domains</b><i class="fa fa-check fa-6"></i></li>
      <li><b>Lifetime Template Updates</b><i class="fa fa-check fa-6"></i></li>
    </ul>
  </div>
  <div class="clear"></div>
</div>

<div class="temp-fitur">
<h4>
Details Template</h4>
<ul>
<li>Template's Name: <b>Movie Online Blogger Template AMP HTML</b></li>
<li>Template's Author: <b>Adhy Suryadi</b></li>
<li>Template's Author Website: <b><a href="http://www.kompiajaib.com/" target="_blank" title="Kompi Ajaib" rel="nofollow">http://www.kompiajaib.com/</a></b></li>
<li>Template's Platform: <b>Blogger AMP HTML</b></li>
<li>Template's Version: <b>Premium</b></li>
<li>Setup intsructions: <b>included</b></li>
</ul>
</div>

<div class="temp-fitur">
<h4>
Features Template</h4>
<ul>
<li>Template with AMP HTML</li>
<li>Style like Youtube</li>
<li>Social media</li>
<li>Subscribe button</li>
<li>Chatting</li>
<li>Post with share button</li>
<li>Page</li>
<li>Ect.</li>
</ul>
</div>

Lalu pasang icons-nya Font Awesome pada blog sobat, dengan cara letakkan kode dibawah ini tepat di bawah kode <head>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" />

Untuk Wordpress kalian bisa menggunakan plugin seperti Better Font Awesome.

Terima kasih sudah membaca artikel ini jangan lupa share agar mimin semangat menulis artikel untuk kalian. Sampai Jumpaa..