Ketekape

Cara Pasang Share Media Sosial plus WhatsApp Tanpa Javascript

 
#share-button {margin:0 0 8px;padding:0;overflow:hidden}
#share-button p {float:left;box-shadow:1px 1px 5px  rgba(1,1,1,.1);background:#fafafa;display:block;padding:5px  8px!important;margin:0 3px 3px 0;border-radius:6px 6px;border:1px solid  #fff;font-weight: 700;}
#share-button a {position:relative;float:left;box-shadow:1px 1px 5px  rgba(1,1,1,.1);border-radius:6px  6px;display:block;color:#fafafa;padding:5px 8px;margin:0 3px  3px;border:1px solid #fff}
#share-button a:hover{top:1px;left:1px;box-shadow:0 0 3px rgba(1,1,1,.1)}
.wa-button{color:#fff;margin:0 auto;padding:0;font-size:14px;font-weight:700}
.wa-button a{color:#222;margin:0 auto;padding:10px 8px;background:#222}
.wa-button i{font-weight:400;margin:0 10px 0 0}

 
<div id='share-button' style='margin-top:8px;'>
<p>Share: </p>
<a  expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; +  data:blog.url'  onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=500,resizable=0,top=50,left=100&quot;);return  false;' rel='nofollow' style='background:#3b5998;' target='_blank'  title='Facebook'>Facebook</a><a  expr:href='&quot;https://twitter.com/intent/tweet?url=&quot; +  data:blog.url + &quot;&amp;text=&quot; + data:post.title +  &quot;&amp;lang=id&quot;'  onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=500,resizable=0,top=50,left=100&quot;);return  false;' rel='nofollow' style='background:#4099ff;' target='_blank'  title='Twitter'>Twitter</a>
<a data-action='share/whatsapp/share' style='background:#43d854'  expr:href='&quot;whatsapp://send?text=&quot; + data:post.title +  &quot;%20%2D%20&quot; + data:post.url'><i  aria-hidden='true' class='fa fa-whatsapp'/> WhatsApp</a>
</div>

 
<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

Apa itu White Hat SEO?

Memulai Seo Untuk Pemula

Cara kerja Seo

Cara kerja seo sebagai berikut :

• Index. Hal yang pertam dilakukan adalah index konten ke webmasters. Oleh karena ingin di index dalam google maka website harus di google webmasters. Cukup mudah untuk meminta indexing blog yaitu dengan menyalin url lalu masuk ke inspeksi url di webmasters versi terbaru. Mintalah pengindeksan google agar dirayapi googlebot.
• Crawling. Perayapan atau crawling dilakukan setelah indexing. Googlebot akan merayapi seluruh konten yang boleh dirayapi. Blogger bisa mengatur mana saja halaman yang boleh dirayapi dan tidak boleh dirayapi googlebot.
• Mesin menterjemahkan keywords. Google sebagai mesin pencaria ketika menerima permintaan perayapan akan membaca keywords untuk pertamakali. Google memiliki sistem yang canggih untuk menterjemahkan berbagai keywords dari berbagai bahasa.
• Pengelompokkan keywords. Setelah menterjemahkan keywords maka google akan mengelompokkan keywords kedalam sebuah kategori. Dari sinilah awal mula konten akan dibaca sebagai konten yang berkualitas atau tidak.
• Relevansi konten. Google akan membaca keseluruhan isi konten yang memuat keywords. Dari sinilah google mampu membaca konten berkualitas atau tidak. Konten yang mampu membahas secara keseluruhan keywords akan mendapat sinyal positif. Akan tetapi tidak cukup itu saja, google membutuhkan sinyal dari situs perujuk dan konten keseluruhan didalam website.
• Menampilkan konten. Proses kerja yang terakhir adalah menampilkan konten dimesin pencarian. Google akan memberikan peringkat pada konten sehingga page akan ditampilkan di halaman pertama atau kedua dan seterusnya.

Teknik Seo

Manfaat seo

Berikut adalah manfaat seo sebagai berikut :

• Meningkatkan visibility website. Seo memiliki manfaat untuk meningkatkan visibility website di pencarian google.
• Meningkatkan peringkat website. Peringkat website akan meningkat dipencarian google. Dari page yang diatas 6 bisa mencapai page satu bahkan top 0 page google.
• Meningkatkan visitor. Visitor website akan meningkat seiring dengan naiknya visibility website di google.
• Meningkatkan pengalaman pengguna. Pembaca sebagai pengguna website akan merasa nyaman ketika menavigasi situs. 

1. Tentukan topik artikel

2. Kumpulkan bahan bacaan.

3. Mulai menentukan judul

4. Mulai penulisan

5. Subtopik

6. Kesimpulan

Box code untuk kode script biasa digunakan untuk meletakkan script agar terlihat rapi dan teratur, sehingga tampilan laman akan terlihat berbeda dengan web lain, box untuk kode script ini banyak digunakan oleh p[emilik blog yang sering berbagi kode script, apakah anda juga termasuk pemilik blog berbagi kode script?? ada beberapa contoh box kode script yang bisa anda pakai dan kembangkan untuk merapikan kode script pada postingan anda.

Berikut ini adalah tampilan code box beserta scriptnya

<div style="border: 2px #5f200e solid; padding: 10px; background-color: #d9da81; text-align: left;"> Kode Script Anda Disini…….</div>

 <div style="border: 0; padding: 10px; background-color: #82CAFA; text-align: left;"> Kode Script Anda Disini…….</div> 

<div style="border: 2px #006400 ridge; padding: 10px; background-color:#c2c2c2; text-align: left;"> Kode Script Anda Disini……</div>

<div style="border: 3px #5f200e double; padding: 10px; background-color: #82CAFA; text-align: left;"> Kode Script Anda Disini…….</div>

<div style="border: 2px #1B1A76 dotted; padding: 10px; background-color:#c2c2c2; text-align: left;"> Kode Script Anda Disini……</div>

<div style="border: 2px #610B38 dashed; padding: 10px; background-color:#57AA52; tex>t-align: left;"> Kode Script Anda Disini……</div> 

Bagaimana cara memasangnya ?

• Masukan script di atas pada mode html (ubah mode compose menjadi html).
• Untuk mempermudah, selesaikan terlebih dulu postingan, kemudian tentukan dimana kita akan meletakkan script. kemudian selesai.
• Setelah itu masuk kembali ke mode compose
• Masukkan script yang di inginkan
• selseai.

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

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

 


<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!

Style 2

 
<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

 

<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

 
<!-- 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...