Home / Blogger

Blogger Template Posting - Blogger Table of Contents

Oleh admin Post a Comment
Blogger Template Posting - Blogger Table of Contents

Table dalam suatu web bertujuan agar susunan table terlihat rapih. Walaupun bisa diatur dalam html format, pastinya agak merepotkan. Kalo buat saya selaku engineering, lebih dominan secara teknis saja asalkan terlihat rapih dan enak dipandang. Saya akan berbagi tips untuk sobat dibawah adalah snippet code yang bisa disisipkan ke dalam blogger untuk table.

Kalo saya pribadi mempergunakan snippet kode ini untuk information of application yang sudah saya buat, misalkan informasi compatibility sistem operation, framework application yang digunakan, dll.

HTML Style Script Table

Dibawah ini merupakan sisipan style yang bisa dipergunakan didalam content of blogger atau html lainnya

 <style>  
 /* START BLOGGER TEMPLATE POST CSS */  
 #BT-page .post-body {text-align:left}  
 #BT-page h2 .fa, #BT-page h3 .fa {margin-right:.4em;}  
 #BT-page .item-post-header {border-bottom:none;padding: 0px 0px 0px;}  
 #BT-page .entry-title {font-size: 27px;color: #4C8023}  
 #BT-page .theme-icon {display:none;}  
 #BT-theme-post-cover{position:relative;margin-bottom:30px;line-height:0;border:1px solid #efefef}  
 #BT-theme-post-cover a{line-height:0;display:inline-block}  
 #BT-theme-post-cover img{max-width:100%}  
 .boxCover{background:#FFF}  
 .shadowCover{position:relative}  
 .shadowCover:before,.shadowCover:after{z-index:-1;position:absolute;content:"";bottom:15px;left:10px;width:50%;top:80%;max-width:300px;background:#777;box-shadow:0 15px 10px #777;transform:rotate(-3deg)}  
 .shadowCover:after{transform:rotate(3deg);right:10px;left:auto}  
 #BT-theme-post-cover-link-wrap{position:relative;text-align:right;margin-bottom:35px}  
 #BT-demo-theme-link{  
      display:inline-block;color:#fff;font-size:16px;font-family:Cambria;font-weight:bold;padding:13px 20px;  
      font-style:normal;line-height:normal!important;border-radius:3px;transition:all .3s;  
      background:#3d92ce;  
 }  
 #BT-demo-theme-link:hover{background:#2d9fef;box-shadow:0 2px 2px #0f68b5}  
 #BT-demo-theme-link .fa {margin-left:10px}  
 #BT-beli-sekarang-link{  
      background:#4da816;display:inline-block;color:#fff;font-size:18px;font-family:Cambria;  
      font-weight:bold;padding:20px;font-style:normal;line-height:normal!important;  
      border-radius:3px;transition:all .3s;  
 }  
 #BT-beli-sekarang-link:hover{background:#57c018;box-shadow:0 2px 2px #53a53a}  
 #BT-beli-sekarang-link .fa {margin-right:10px}  
 #BT-download-popup-opener-link{  
      background:#f14949;display:inline-block;color:#fff;font-size:16px;font-family:Cambria;  
      font-weight:bold;padding:13px 20px;font-style:normal;line-height:normal!important;  
      border-radius:3px;transition:all .3s;  
 }  
 #BT-download-popup-opener-link:hover{background:#fd5e45;box-shadow:0 2px 2px #c56227}  
 #BT-download-popup-opener-link .fa{margin-right:7px}  
 #BT-download-popup{display:none;-webkit-transition:all .6s;transition:all .6s;border:2px dashed #e0e0e0}  
 #BT-download-popup.show{display:block;position:fixed;top:40px;width:640px;left:50%;margin-left:-320px;padding:50px 30px 30px 30px;background:#fff;z-index:100;box-shadow:0 0 5px #ccc;z-index:100;transform:scale(0,0)}  
  @media only screen and (max-width:850px) {  
   #BT-download-popup.show {width:auto;left:20px;right:20px;margin-left:0}  
  }  
 #BT-download-popup.show.runtransition{transform:scale(1,1)}  
 #BT-download-popup-bluler{display:none;-webkit-transition:all .6s;transition:all .6s}  
 #BT-download-popup-bluler.show{display:block;position:fixed;top:0;width:100%;height:100%;background:#fff;left:0;z-index:99;opacity:0}  
 #BT-download-popup-bluler.runtransition{opacity:.9}  
 #BT-download-popup-closer{display:inline-block;position:absolute;top:10px;right:10px;line-height:1}  
 #BT-download-popup-closer a{display:inline-block;width:18px;height:18px;text-align:center;line-height:18px;background:#bbb;color:#fff;border-radius:100%;font-size:18px;padding:7px 7px 8px 7px;transition:all .3s}  
 #BT-download-popup-closer a:hover{background:#999}  
 #BT-download-popup-download-link-wrapper{text-align:center;margin-bottom:30px}  
 #BT-download-popup-download-link{display:inline-block;color:#fff;font-size:16px;font-family:Cambria;font-weight:bold;padding:13px 20px;font-style:normal;line-height:normal!important;border-radius:3px;transition:all .3s;background:#4da816}  
 #BT-download-popup-download-link .fa{margin-right:7px}  
 #BT-download-popup-download-link:hover{background:#57c018;box-shadow:0 2px 2px #53a53a}  
 #BT-download-popup-theme-version-wrapper {font-size: 14px;margin-top:10px;}  
 #BT-download-popup-download-info-wrapper{font-size:16px;text-align:justify}  
 #BT-detail-theme th, #BT-detail-theme td {  
      border:1px solid #e0e0e0;  
      padding:7px 10px;  
      font-size:14px;  
  }  
 #BT-detail-theme th {  
      width:180px  
  }  
 #BT-detail-theme td.ul-content {  
      padding:10px 10px 3px;  
  }  
 #BT-detail-theme ul {  
      padding:0;margin:0;  
  }  
 #BT-detail-theme li {  
   margin: 0;  
   border: none;  
   list-style: inside;  
   display: inline-block;  
   padding: 7px;  
   margin-right: 7px;  
   background: #d8e6d9;  
   border-radius: 4px;  
   margin-bottom: 7px;  
   font-size: 12px;  
   line-height: 1;  
  }  
 </style>

HTML Table Script

Dibawah ini merupakan contoh utama table, bisa dikondisikan untuk berbagai kasus tampilan.

 <table id="BT-detail-theme">  
 <tbody>  
 <tr><th>Nama</th><td colspan='2'>DummyDummy</td></tr>  
 <tr><th>Rilis</th><td colspan='2'>06 DummyDummy 2017</td></tr>  
 <tr><th>Update terakhir</th><td colspan='2'>23 DummyDummy 2020</td></tr>  
 <tr><th rowspan='2'>Versi saat ini</th><td>Versi gratis</td><td>6 (6.40)</td></tr>  
 <tr><td>Versi premium</td><td>6 (6.40)</td>  
 </tr>  
 <tr><th>Change log</th>  
 <td colspan='2'>  
 <b>Versi 6 (6.40) </b> - (23 September 2020)<br/>  
 - Fix: DummyDummy &lt;!-- DummyDummy &lt;body&gt; DummyDummy<br/>  
 <br/>  
 <br/>  
 <b>Versi 6 (6.30) </b> - (23 Januari 2020)<br/>  
 - DummyDummy DummyDummy DummyDummy DummyDummy <br/>  
 - DummyDummy DummyDummy DummyDummy DummyDummy   
 <br/>  
 <br/>  
 <b>Versi 6 (6.20) </b> - (14 Agustus 2019)<br/>  
 - DummyDummy DummyDummy DummyDummy DummyDummy DummyDummy   
 <br/>  
 <br/>  
 <b>Versi 6</b> - (07 Maret 2019)<br/>  
 - DummyDummy DummyDummy DummyDummy DummyDummy <br/>  
 - DummyDummy DummyDummy DummyDummy DummyDummy <br/>  
 - DummyDummy DummyDummy DummyDummy DummyDummy <br/>  
 - DummyDummy DummyDummy DummyDummy DummyDummy <br/>  
 - DummyDummy DummyDummy DummyDummy DummyDummy <br/>  
 <br/>  
 <br/>  
 <b>Versi 5</b> - (14 Desember 2018)<br/>  
 - DummyDummy DummyDummy DummyDummy DummyDummy <br/>  
 - DummyDummy DummyDummy DummyDummy DummyDummy <br/>  
 - DummyDummy DummyDummy DummyDummy DummyDummy <br/>  
 - DummyDummy DummyDummy DummyDummy DummyDummy <br/>  
 - DummyDummy DummyDummy DummyDummy DummyDummy  
 <br/>  
 <br/>  
 <b>Versi 4</b> - (06/11/2017)<br/>  
 - DummyDummy DummyDummy DummyDummy DummyDummy  
 <br/>  
 <br/>  
 <b>Versi 1.17.09.3</b> - (24/09/2017)<br/>  
 - DummyDummy DummyDummy DummyDummy DummyDummy <br/>  
 - DummyDummy DummyDummy DummyDummy DummyDummy  
 <br/>  
 <br/>  
 <b>Versi 1.17.09.2</b> - (11/09/2017)<br/>  
 - DummyDummy DummyDummy DummyDummy DummyDummy  
 <br/>  
 <br/>  
 <b>Versi 1.17.09.1</b> - (06/09/2017)<br/>  
 - DummyDummy DummyDummy DummyDummy DummyDummy  
 </td>  
 </tr>  
 <tr><th>Dukungan Bahasa</th><td class="ul-content" colspan='2'><ul>  
 <li>Bahasa Indonesia</li>  
 <li>English</li>  
 </ul>  
 </td>  
 </tr>  
 <tr>  
 <th>Dukungan Widgets</th>  
 <td class="ul-content" colspan='2'><ul>  
 <li>DummyDummy DummyDummy DummyDummy </li>  
 <li>DummyDummy DummyDummy DummyDummy </li>  
 <li>DummyDummy DummyDummy DummyDummy </li>  
 <li>DummyDummy DummyDummy DummyDummy </li>  
 <li>DummyDummy DummyDummy DummyDummy </li>  
 <li>DummyDummy DummyDummy DummyDummy </li>  
 </ul>  
 </td>  
 </tr>  
 <tr>  
 <th>Fitur SEO</th>  
 <td class="ul-content" colspan='2'><ul>  
 <li>Full Responsive</li>  
 <li>DummyDummy DummyDummy DummyDummy </li>  
 <li>DummyDummy DummyDummy DummyDummy </li>  
 <li>DummyDummy DummyDummy DummyDummy </li>  
 <li>DummyDummy DummyDummy DummyDummy </li>  
 <li>DummyDummy DummyDummy DummyDummy </li>  
 <li>DummyDummy DummyDummy DummyDummy </li>  
 </ul>  
 </td>  
 </tr>  
 <tr><th>Penempatan Adsense</th>  
 <td class='ul-content' colspan='2'>  
 <div class='mb10'><b>Versi Gratis:</b></div>  
 <ul>  
 <li>DummyDummy DummyDummy DummyDummy </li>  
 <li>DummyDummy DummyDummy DummyDummy </li>  
 <li>DummyDummy DummyDummy DummyDummy </li>  
 </ul>  
 <br/>  
 <div class='mb10'><b>Versi Premium:</b></div>  
 <ul>  
 <li>DummyDummy DummyDummy DummyDummy </li>  
 <li>DummyDummy DummyDummy DummyDummy </li>  
 <li>DummyDummy DummyDummy DummyDummy </li>  
 <li>DummyDummy DummyDummy DummyDummy </li>  
 <li>DummyDummy DummyDummy DummyDummy </li>  
 <li>DummyDummy DummyDummy DummyDummy </li>  
 </ul>  
 </td>  
 </tr>  
 <tr><th>Dokumentasi</th>  
 <td class='ul-content' colspan='2'><ul>  
 <li>DummyDummy DummyDummy DummyDummy </li>  
 <li>DummyDummy DummyDummy DummyDummy </li>  
 <li>DummyDummy DummyDummy DummyDummy   
 </li>  
 <li>DummyDummy DummyDummy DummyDummy </li>  
 <li>DummyDummy DummyDummy DummyDummy </li>  
 </ul></td>  
 </tr>  
 </tbody>  
 </table>

Tampilan Table

Penasaran dengan hasilnya ? script diatas akan menampilkan table dibawah ini

NamaDummyDummy
Rilis06 DummyDummy 2017
Update terakhir23 DummyDummy 2020
Versi saat iniVersi gratis6 (6.40)
Versi premium6 (6.40)
Change log Versi 6 (6.40) - (23 September 2020)
- Fix: DummyDummy <!-- DummyDummy <body> DummyDummy


Versi 6 (6.30) - (23 Januari 2020)
- DummyDummy DummyDummy DummyDummy DummyDummy
- DummyDummy DummyDummy DummyDummy DummyDummy

Versi 6 (6.20) - (14 Agustus 2019)
- DummyDummy DummyDummy DummyDummy DummyDummy DummyDummy

Versi 6 - (07 Maret 2019)
- DummyDummy DummyDummy DummyDummy DummyDummy
- DummyDummy DummyDummy DummyDummy DummyDummy
- DummyDummy DummyDummy DummyDummy DummyDummy
- DummyDummy DummyDummy DummyDummy DummyDummy
- DummyDummy DummyDummy DummyDummy DummyDummy


Versi 5 - (14 Desember 2018)
- DummyDummy DummyDummy DummyDummy DummyDummy
- DummyDummy DummyDummy DummyDummy DummyDummy
- DummyDummy DummyDummy DummyDummy DummyDummy
- DummyDummy DummyDummy DummyDummy DummyDummy
- DummyDummy DummyDummy DummyDummy DummyDummy

Versi 4 - (06/11/2017)
- DummyDummy DummyDummy DummyDummy DummyDummy

Versi 1.17.09.3 - (24/09/2017)
- DummyDummy DummyDummy DummyDummy DummyDummy
- DummyDummy DummyDummy DummyDummy DummyDummy

Versi 1.17.09.2 - (11/09/2017)
- DummyDummy DummyDummy DummyDummy DummyDummy

Versi 1.17.09.1 - (06/09/2017)
- DummyDummy DummyDummy DummyDummy DummyDummy
Dukungan Bahasa
  • Bahasa Indonesia
  • English
Dukungan Widgets
  • DummyDummy DummyDummy DummyDummy
  • DummyDummy DummyDummy DummyDummy
  • DummyDummy DummyDummy DummyDummy
  • DummyDummy DummyDummy DummyDummy
  • DummyDummy DummyDummy DummyDummy
  • DummyDummy DummyDummy DummyDummy
Fitur SEO
  • Full Responsive
  • DummyDummy DummyDummy DummyDummy
  • DummyDummy DummyDummy DummyDummy
  • DummyDummy DummyDummy DummyDummy
  • DummyDummy DummyDummy DummyDummy
  • DummyDummy DummyDummy DummyDummy
  • DummyDummy DummyDummy DummyDummy
Penempatan Adsense
Versi Gratis:
  • DummyDummy DummyDummy DummyDummy
  • DummyDummy DummyDummy DummyDummy
  • DummyDummy DummyDummy DummyDummy

Versi Premium:
  • DummyDummy DummyDummy DummyDummy
  • DummyDummy DummyDummy DummyDummy
  • DummyDummy DummyDummy DummyDummy
  • DummyDummy DummyDummy DummyDummy
  • DummyDummy DummyDummy DummyDummy
  • DummyDummy DummyDummy DummyDummy
Dokumentasi
  • DummyDummy DummyDummy DummyDummy
  • DummyDummy DummyDummy DummyDummy
  • DummyDummy DummyDummy DummyDummy
  • DummyDummy DummyDummy DummyDummy
  • DummyDummy DummyDummy DummyDummy

Post a Comment for "Blogger Template Posting - Blogger Table of Contents"

Post a Comment