Latest Post
Twitter Facebook


Download Now

Klik 2x untuk menuju link Download


Tabel di dalam blog dapat memudahkan  untuk membaca sebuah data. Biasanya tabel digunakan untuk menampilkan data spesifikasi, data nilai, dan data-data lainnya. Sehingga tabel memegang peranan yang tidak bisa dianggap enteng. Untuk itu berikut saya bagikan lngakah-langkah untuk membuat tabel keren di postingan blog :

Langkah

  • Pertama masuk ke dashboard blog anda masing-masing,
  • Setelah itu pada menu dashboard pilih menu template, lalu pilih menu edit html,
  • Setelah itu cari kode ]]></b:skin> dengan caraCtrl+F,
  • Setelah itu copy script di bawah ini lalu paste tepat di atas ]]></b:skin> ,

Style 1

Demo

 /* CSS Post Table */
body
{
   font-family: sans-serif;
    
}
.pricing_table_wdg {  
 border:1px solid #c4cbcc;
 border-radius:4px;
 -moz-border-radius:4px;
 -webkit-border-radius:4px;
 float:left;
 margin-top: 25px;
}
.pricing_table_wdg ul { 
 list-style:none; 
 float:left; 
 width:147px; 
 margin:0; 
 border:1px solid #f2f3f3;
 padding:5px;
 text-align:center;
 background-color:#FFF;
}
.pricing_table_wdg ul:hover { 
 -webkit-transform: scale(1.1);
   -moz-transform: scale(1.1);
   -o-transform: scale(1.1);
   -moz-box-shadow:3px 5px 7px rgba(0,0,0,.7);
   -webkit-box-shadow: 3px 5px 7px rgba(0,0,0,.7);
   box-shadow:3px 5px 7px rgba(0,0,0,.7);
 cursor:pointer;
 background:#d8e9f9;
}
.pricing_table_wdg ul li {  
 border-bottom:1px dashed #cfd2d2;
 padding:10px 0;
}
.pricing_table_wdg ul li:first-child { 
 color:#FFFFFF;
 font-size:18px;
 font-weight:bold;
 background:#2e818f;
}
.pricing_table_wdg ul li:nth-child(2) { 
 background:#fbfbfb;
}
.pricing_table_wdg ul li:nth-child(3) { 
 font-size:12px;
 font-weight:bold;
}
.pricing_table_wdg ul li:nth-child(n+4) { 
 font-size:14px;
}
.pricing_table_wdg ul li:last-child a { 
 color:#F0F0F0;
 text-decoration:none;
 font-weight:bold;
 display:block;
 border-radius:10px;
 -moz-border-radius:10px;
 -webkit-border-radius:10px;
 border:1px solid #c4cbcc;
 padding:10px;
 margin:5px 0;
 background: #0061bb; /* Old browsers */
 background: -moz-linear-gradient(top, #0061bb 0%, #164e82 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0061bb), color-stop(100%,#164e82)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, #0061bb 0%,#164e82 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, #0061bb 0%,#164e82 100%); /* Opera11.10+ */
 background: -ms-linear-gradient(top, #0061bb 0%,#164e82 100%); /* IE10+ */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0061bb', endColorstr='#164e82',GradientType=0 ); /* IE6-9 */
 background: linear-gradient(top, #0061bb 0%,#164e82 100%); /* W3C */
}


5. Setelah itu simpan template,

6. Lalu setelah itu pada menu dashboard blog masuk ke menu pos, untuk menerapkan tabel di postingan, masuk ke salah-satu pos yang ingin diberi tabel,

7. Lalu copy script di bawah ini untuk menjalankan tabel pada postingan, paste script tersebut pada postingan yang ingin di beri tabel,

 


<section class="container">
<h2>CSS3 Pricing Table - Demo</h2>
<div class="pricing_table_wdg">
  <ul>
   <li>Standard</li>
   <li>$20</li>
   <li>Perfect for those getting started with our app.</li>
   <li>15 Projects</li>
   <li>5GB Storage</li>
   <li>Unlimited Users</li>
   <li>No Time Tracking</li>
   <li>Enchaned Security</li>
   <li></li>
   <li><a href="" class="buy_now">Buy Now</a></li>
  </ul>
  <ul>
   <li>Premium</li>
   <li>$60</li>
   <li>Perfect for those getting started with our app.</li>
   <li>15 Projects</li>
   <li>5GB Storage</li>
   <li>Unlimited Users</li>
   <li>No Time Tracking</li>
   <li>Enchaned Security</li>
   <li></li>
   <li><a href="" class="buy_now">Buy Now</a></li>
  </ul>  
  <ul>
   <li>Professional</li>
   <li>$80</li>
   <li>Perfect for those getting started with our app.</li>
   <li>15 Projects</li>
   <li>5GB Storage</li>
   <li>Unlimited Users</li>
   <li>No Time Tracking</li>
   <li>Enchaned Security</li>
   <li></li>
   <li><a href="" class="buy_now">Buy Now</a></li>
  </ul>
  <ul>
   <li>Plus</li>
   <li>$100</li>
   <li>Perfect for those getting started with our app.</li>
   <li>15 Projects</li>
   <li>5GB Storage</li>
   <li>Unlimited Users</li>
   <li>No Time Tracking</li>
   <li>Enchaned Security</li>
   <li></li>
   <li><a href="" class="buy_now">Buy Now</a></li>
  </ul>
  <ul>
   <li>Maximum</li>
   <li>$120</li>
   <li>Perfect for those getting started with our app.</li>
   <li>15 Projects</li>
   <li>5GB Storage</li>
   <li>Unlimited Users</li>
   <li>No Time Tracking</li>
   <li>Enchaned Security</li>
   <li></li>
   <li><a href="" class="buy_now">Buy Now</a></li>
  </ul>
</div>
  </section>

Jangan lupa mengubah jenis pos dari compose menjadi html saat melakukan paste script tersebut!

8. Publikasikan.





Style 2

Demo
 
<div class="table-wrapper">
<table class="fl-table">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
<th>Header 5</th></tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Content</td>
<td>Content</td>
<td>Content</td>
<td>Content</td></tr>
<tr>
<td>2</td>
<td>Content</td>
<td>Content</td>
<td>Content</td>
<td>Content</td></tr>
<tr>
<td>3</td>
<td>Content</td>
<td>Content</td>
<td>Content</td>
<td>Content</td></tr>
<tr>
<td>4</td>
<td>Content</td>
<td>Content</td>
<td>Content</td>
<td>Content</td></tr>
<tr>
<td>5</td>
<td>Content</td>
<td>Content</td>
<td>Content</td>
<td>Content</td></tr>
<tr>
<td>6</td>
<td>Content</td>
<td>Content</td>
<td>Content</td>
<td>Content</td></tr>
<tr>
<td>7</td>
<td>Content</td>
<td>Content</td>
<td>Content</td>
<td>Content</td></tr>
<tr>
<td>8</td>
<td>Content</td>
<td>Content</td>
<td>Content</td>
<td>Content</td></tr>
<tr>
<td>9</td>
<td>Content</td>
<td>Content</td>
<td>Content</td>
<td>Content</td></tr>
<tr>
<td>10</td>
<td>Content</td>
<td>Content</td>
<td>Content</td>
<td>Content</td>
</tr>
<tbody>
</table>
</div>


 /* CSS Post Table */
*{box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;}
body{
font-family: Helvetica;
-webkit-font-smoothing: antialiased;
background: rgba( 71, 147, 227, 1);}
h2{
text-align: center;
font-size: 18px;
text-transform: uppercase;
letter-spacing: 1px;
color: white;
padding: 30px 0;}
/* Table Styles */
.table-wrapper{
margin: 10px 70px 70px;
box-shadow: 0px 35px 50px rgba( 0, 0, 0, 0.2 );}
.fl-table {
border-radius: 5px;
font-size: 12px;
font-weight: normal;
border: none;
border-collapse: collapse;
width: 100%;
max-width: 100%;
white-space: nowrap;
background-color: white;}
.fl-table td, .fl-table th {
text-align: center;
padding: 8px;}
.fl-table td {
border-right: 1px solid #f8f8f8;
font-size: 12px;}
.fl-table thead th {
color: #ffffff;
background: #4FC3A1;}
.fl-table thead th:nth-child(odd) {
color: #ffffff;
background: #324960;}
.fl-table tr:nth-child(even) {
background: #F8F8F8;}
/* Responsive */
@media (max-width: 767px) {
.fl-table {
display: block;
width: 100%;}
.table-wrapper:before{
content: "Scroll horizontally >";
display: block;
text-align: right;
font-size: 11px;
color: white;
padding: 0 0 10px;}
.fl-table thead, .fl-table tbody, .fl-table thead th {
display: block;}
.fl-table thead th:last-child{
border-bottom: none;}
.fl-table thead {
float: left;}
.fl-table tbody {
width: auto;
position: relative;
overflow-x: auto;}
.fl-table td, .fl-table th {
padding: 20px .625em .625em .625em;
height: 60px;
vertical-align: middle;
box-sizing: border-box;
overflow-x: hidden;
overflow-y: auto;
width: 120px;
font-size: 13px;
text-overflow: ellipsis;}
.fl-table thead th {
text-align: left;
border-bottom: 1px solid #f7f7f9;}
.fl-table tbody tr {
display: table-cell;}
.fl-table tbody tr:nth-child(odd) {
background: none;}
.fl-table tr:nth-child(even) {
background: transparent;}
.fl-table tr td:nth-child(odd) {
background: #F8F8F8;
border-right: 1px solid #E6E4E4;}
.fl-table tr td:nth-child(even) {
border-right: 1px solid #E6E4E4;}
.fl-table tbody td {
display: block;
text-align: center;}}

Style 3

Demo
 

<article>
    <h2>How they compare</h2>
   
    <table class="vitamins">
        <thead>
            <tr>
                <th>Vitamin</th>
                <th>Classification</th>
                <th>Sources</th>
                <th>Adequate Intake (AI)</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <td colspan="4">
                    <p><strong>mcg</strong> stands for micrograms. <strong>IU</strong> stands for International Units</p>
               
                </td>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>A</td>
                <td>fat-soluble</td>
                <td>Dark-colored fruit</td>
                <td>3,000 IU/day</td>
            </tr>
            <tr>
                <td>B</td>
                <td>water-soluble</td>
                <td>Lean meats</td>
                <td>1 mcg/day</td>
            </tr>
            <tr>
                <td>B 1</td>
                <td>water-soluble</td>
                <td>Lean meats</td>
                <td>2.2 mcg/day</td>
            </tr>
            <tr>
                <td>B 6</td>
                <td>water-soluble</td>
                <td>Nuts</td>
                <td>1.7 mg/day</td>
            </tr>
            <tr>
                <td>B 12</td>
                <td>water-soluble</td>
                <td>Meat</td>
                <td>2.4 mcg/day</td>
            </tr>
            <tr>
                <td>C</td>
                <td>water-soluble</td>
                <td>Broccoli</td>
                <td>90 mg/day</td>
            </tr>
            <tr>
                <td>D</td>
                <td>fat-soluble</td>
                <td>Fish</td>
                <td>600 IU/day</td>
            </tr>
            <tr>
                <td>E</td>
                <td>fat-soluble</td>
                <td>Avocado</td>
                <td>33 IU/day</td>
            </tr>
            <tr>
                <td>K</td>
                <td>fat-soluble</td>
                <td>Cabbage</td>
                <td>120 mcg/day</td>
            </tr>
        </tbody>
    </table>
</article>


 /* CSS Post Table */
@import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Oxygen);

/* Page layout */

body {
    background-color: #fff;
    margin: 0;
    padding: 0;
    font-family: 'Oxygen', sans-serif;
    color: #444;
    font-size: 15px;
    line-height: 18px;
    font-weight: 300;
}

header {
    margin: 0;
    background: #000;
    height: 65px;
    padding: 1px;
}

article {
    margin: 40px 30px;
}

h1 {
    font-family: 'Open Sans Condensed', sans-serif;
    letter-spacing: 1px;
    font-size: 2.3em;
    line-height: 44px;
    text-transform: uppercase;
    color: #fff;
    font-weight: 900;
    margin: 0;
    padding: 10px 0 0 30px;
    letter-spacing: 2px;
}

h2 { margin: 20px 0 10px 0;
    font-weight: 900;
}

p {
    margin: 20px 0 5px 0;
}


/* Table Layout */

table.vitamins {
    margin: 20px 0 0 0;
    border-collapse: collapse;
    border-spacing: 0;
    background: #212121;
    color: #fff;
}

table.vitamins th, table.vitamins td {
    text-align: center;
}

table.vitamins thead {
    line-height: 12px;
    background: #2e63e7;
    text-transform: uppercase;
}

table.vitamins thead th {
    color: #fff;
    padding: 10px;
    letter-spacing: 1px;
    vertical-align: bottom;
}

table.vitamins thead th:nth-child(1) {
    width: 20%;
    text-align: left;
    padding-left: 20px;
}

table.vitamins thead th:nth-child(2) {
    width: 30%;
}

table.vitamins thead th:nth-child(3) {
    width: 35%;
}

table.vitamins thead th:nth-child(4) {
    width: 15%;
}

table.vitamins tbody {
    font-size: 1em;
    line-height: 15px;
}

table.vitamins tbody tr {
    border-top: 2px solid rgba(109, 176, 231, 0.8);
    transition: background 0.6s, color 0.6s;
}

table.vitamins tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.2);
}

table.vitamins tbody tr:hover {
    color: #000;
    background: rgba(255, 255, 255, 0.7);
    font-weight: 900;
}

table.vitamins tbody td {
    padding: 12px;
}

table.vitamins tbody tr:hover td:first-child {
    background: rgba(0,0,0,0);
}

table.vitamins tbody td:first-child {
    text-align: left;
    padding-left: 20px;
    font-weight: 700;
    background: rgba(109, 176, 231, 0.35);
    transition: backgrounf 0.6s;
}

table.vitamins tfoot {
    font-size: 0.8em;
}

table.vitamins tfoot tr {
    border-top: 2px solid #2e63e7;
}

table.vitamins tfoot td {
    color: rgba(255,255,215,0.6);
    text-align: left;
    line-height: 15px;
    padding: 15px 20px;
}


/* Mobile Layout */

@media screen and (max-width: 400px) {
    h1 {
        font-size: 34px;
        line-height: 36px;
        padding-left: 15px;
    }

    article {
        margin: 10px 15px;
    }

    table.vitamins {
        font-size: 0.8em;
    }
}



Style 4

Demo

 
<!-- DIRTY Responsive pricing table HTML -->

<article>

<ul>
  <li class="bg-purple">
    <button>Self-Employed</button>
  </li>
  <li class="bg-blue">
    <button>Simple Start</button>
  </li>
  <li class="bg-blue active">
    <button>Essentials</button>
  </li>
  <li class="bg-blue">
    <button>Plus</button>
  </li>
</ul>  

<table>
  <thead>
    <tr>
      <th class="hide"></th>
      <th class="bg-purple">Self-Employed</th>
      <th class="bg-blue">Simple Start</th>
      <th class="bg-blue default">Essentials</th>
      <th class="bg-blue">Plus</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Monthly price</td>
      <td><span class="txt-top">&pound;</span><span class="txt-l">6</span></td>
      <td><span class="txt-top">&pound;</span><span class="txt-l">7</span></td>
      <td class="default"><span class="txt-top">&pound;</span><span class="txt-l">15</span></td>
      <td><span class="txt-top">&pound;</span><span class="txt-l">25</span></td>
    </tr>
    <tr>
      <td colspan="5" class="sep">Get started easily</td>
    </tr>
    <tr>
      <td>Includes free updates and new features as they become available</td>
      <td><span class="tick">&#10004;</span></td>
      <td><span class="tick">&#10004;</span></td>
      <td class="default"><span class="tick">&#10004;</span></td>
      <td><span class="tick">&#10004;</span></td>
    </tr>
    <tr>
      <td>No software to install — sign up online in moments</td>
      <td><span class="tick">&#10004;</span></td>
      <td><span class="tick">&#10004;</span></td>
      <td class="default"><span class="tick">&#10004;</span></td>
      <td><span class="tick">&#10004;</span></td>
    </tr>
    <tr>
      <td>Import customer & supplier details from Excel, Outlook and .csv</td>
      <td></td>
      <td><span class="tick">&#10004;</span></td>
      <td class="default"><span class="tick">&#10004;</span></td>
      <td><span class="tick">&#10004;</span></td>
    </tr>
    <tr>
      <td>Accept card payments in QuickBooks Online</td>
      <td></td>
      <td><span class="tick">&#10004;</span></td>
      <td class="default"><span class="tick">&#10004;</span></td>
      <td><span class="tick">&#10004;</span></td>
    </tr>
    <tr>
      <td colspan="5" class="sep">Stay protected and get support</td>
    </tr>
    <tr>
      <td>Free telephone and online support</td>
      <td></td>
      <td><span class="tick">&#10004;</span></td>
      <td class="default"><span class="tick">&#10004;</span></td>
      <td><span class="tick">&#10004;</span></td>
    </tr>
    <tr>
      <td>Strong encryption protects your business data</td>
      <td><span class="tick">&#10004;</span></td>
      <td><span class="tick">&#10004;</span></td>
      <td class="default"><span class="tick">&#10004;</span></td>
      <td><span class="tick">&#10004;</span></td>
    </tr>
    <tr>
      <td>Automatic data backups</td>
      <td><span class="tick">&#10004;</span></td>
      <td><span class="tick">&#10004;</span></td>
      <td class="default"><span class="tick">&#10004;</span></td>
      <td><span class="tick">&#10004;</span></td>
    </tr>
  </tbody>
</table>
  
</article>


 /* CSS Post Table */
/* DIRTY Responsive pricing table CSS */

/* 
- make mobile switch sticky
*/
* {
  box-sizing:border-box;
  padding:0;
  margin:0;
   outline: 0;
}
body { 
  font-family:Helvetica Neue,Helvetica,Arial,sans-serif;
  font-size:14px;
  padding:14px;
}
article {
  width:100%;
  max-width:1000px;
  margin:0 auto;
  height:1000px;
  position:relative;
}
ul {
  display:flex;
  top:0px;
  z-index:10;
  padding-bottom:14px;
}
li {
  list-style:none;
  flex:1;
}
li:last-child {
  border-right:1px solid #DDD;
}
button {
  width:100%;
  border: 1px solid #DDD;
  border-right:0;
  border-top:0;
  padding: 10px;
  background:#FFF;
  font-size:14px;
  font-weight:bold;
  height:60px;
  color:#999
}
li.active button {
  background:#F5F5F5;
  color:#000;
}
table { border-collapse:collapse; table-layout:fixed; width:100%; }
th { background:#F5F5F5; display:none; }
td, th {
  height:53px
}
td,th { border:1px solid #DDD; padding:10px; empty-cells:show; }
td,th {
  text-align:left;
}
td+td, th+th {
  text-align:center;
  display:none;
}
td.default {
  display:table-cell;
}
.bg-purple {
  border-top:3px solid #A32362;
}
.bg-blue {
  border-top:3px solid #0097CF;
}
.sep {
  background:#F5F5F5;
  font-weight:bold;
}
.txt-l { font-size:28px; font-weight:bold; }
.txt-top { position:relative; top:-9px; left:-2px; }
.tick { font-size:18px; color:#2CA01C; }
.hide {
  border:0;
  background:none;
}

@media (min-width: 640px) {
  ul {
    display:none;
  }
  td,th {
    display:table-cell !important;
  }
  td,th {
    width: 330px;
  
  }
  td+td, th+th {
    width: auto;
  }
}


 /* JavaScript Post Table */
// DIRTY Responsive pricing table JS

$( "ul" ).on( "click", "li", function() {
  var pos = $(this).index()+2;
  $("tr").find('td:not(:eq(0))').hide();
  $('td:nth-child('+pos+')').css('display','table-cell');
  $("tr").find('th:not(:eq(0))').hide();
  $('li').removeClass('active');
  $(this).addClass('active');
});

// Initialize the media query
  var mediaQuery = window.matchMedia('(min-width: 640px)');
  
  // Add a listen event
  mediaQuery.addListener(doSomething);
  
  // Function to do something with the media query
  function doSomething(mediaQuery) {    
    if (mediaQuery.matches) {
      $('.sep').attr('colspan',5);
    } else {
      $('.sep').attr('colspan',2);
    }
  }
  
  // On load
  doSomething(mediaQuery);




Please Wait Link Download...

Demikian artikel saya tentang cara membuat tabel keren di postingan blog, semoga bermanfaat, jangan lupa bagikan serta tinggalkan komentar anda, terima kasih.
Twitter Facebook

Ketekape.com - Sekilas Tentang Blogger.com | Kalau berbicara tentang blogger, pasti dalam benak yang terlintas tidak lain adalah Google, Yups, sepeunhnya benar gaess !! seperti yang kita ketahui Blogger.com merupakan layanan blog dengan hosting gratis milik dari perusahaan raksasa terkenal, Google. 

Dengan menggunakan nama domain blogspot.com semua orang bisa menikmati layanan ini dengan gratis. Namun ada beberapa tahap sejarah perjalanan, hingga akhirnya  layanan web yang awalnya bernama Pyra yang sekarang lebih kita kenal dengan nama Blogger yang patut kita ketahui. 


Sejarah Singkat Blogger


Blogger diluncurkan oleh Pyra Labs Pada 23 Agustus 1999, mulai disebarkan di internet dengan membayar lisensi penggunaannya. Sebagai salah satu perangkat publikasi blog pertama di dunia, Blogger berperan dalam mempopulerkan format blog di dunia,
Pyra Labs
Aplikasi blog Blogger pada tahun 2002 didesain ulang keseluruhan agar lebih simpel, mudah dan ditawarkan kepada perusahan-perusahaan. Globo dari Brazil yang pertama kali berminat.

Pada Februari 2003, Pyra Labs diakuisisi oleh Google, membuat sejumlah fitur premium Blogger yang sebelumnya dikomersialkan Pyra Labs menjadi layanan yang sepenuhnya gratis. Bukan hanya aplikasinya, juga perusahaan sekaligus pendiri dan seluruh karyawannya. Namun Evan Williams salah satu pendiri Pyra, mengundurkan diri tahun 2004.

Pada 9 Mei 2004, Blogger memperkenalkan beberapa perubahan besar pada sistem publikasi blognya, menambahkan fitur seperti template yang memenuhi standar web, halaman arsip individual untuk masing-masing posting dan komentar, serta fitur posting melalui email.
Pada 14 Agustus 2006, Blogger meluncurkan versi terbarunya dalam tahap beta, yang diberi nama kode “Invader“. Versi terbaru ini memigrasikan pengguna Blogger ke server milik Google dan menambahkan beberapa fitur baru. Pada Desember 2006, versi baru ini keluar dari tahap beta. Mei 2007, Blogger selesai memigrasikan semua data penggunanya ke server Google.


MKRdezign

Contact Form

Name

Email *

Message *

Powered by Blogger.
Javascript DisablePlease Enable Javascript To See All Widget