Table Template Kompi Ajaib

Cara Membuat Table Template Seperti Kompi Ajaib. Table template responsive seperti ini cocok untuk kalian yang membahas suatu template ataupun menjual template.

Memasang tabel pada blog adalah pilihan yang tepat jika blog anda membahas tentang hal tersebut. Karena selain membuat blog anda lebih terlihat profesional, pembaca akan lebih nyaman jika artikel anda tersusun dengan rapi.

Cara Membuat Table Template Seperti Kompi Ajaib

Table Template Kompi Ajaib
Dagruel

Pasang css nya dulu, untuk cara nya cek dibawah.

Blogger

Buka Blogger > Tema > Edit HTML > Letakkan CSS berikut tepat diatas </style>

WordPress

Buka Dashboard > Appearance > Theme Editor > style.css > letakkan css nya, atau bisa juga Dashboard > Appearance > Customize > Additional CSS > letakkan css nya
.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, Buat postingan baru pastikan memakai mode HTML (bukan Compose) untuk blogger, sedangkan 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>
Ganti text yang ditandai sesuai keinginan kalian.

Untuk Icons nya silahkan pasang Font Awesome di blog kalian cara nya

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

Blogger

Buka Blogger > Tema > Edit HTML > Letakkan HTML diatas tepat dibawah <head>

WordPress

Bisa menggunakan plugin Better Font Awesome.

Sekian Postingan saya kali ini semoga bermanfaat, dan jika ada yang ingin di tanyakan silahkan berkomentar dibawah. Sampai jumpa dipostingan selanjutnya Terima Kasih.

https://template.kompiajaib.com/2019/02/movie-online-blogger-template-amp-html.html

Comments