Showing posts with label Widget. Show all posts
Showing posts with label Widget. Show all posts

Cara Membuat Content Thumbnail Gambar dengan Bootstrap

1/24/2017 0

Kembali lagi kita bahas seputar bootstrap, sekarang saya akan membahas bagaimana memasang thumbnail gambar dan content pada blog. Terlebih dahulu bootstrap harus sudah terpasang pada template blog sobat. Silahkan lihat artikel Cara Memasang Bootstrap Pada Blog untuk yang belum pasang bootstrap pada template blognya.

Untuk sobat yang mau memasang thumbnail gambar dan content silahkan ikuti langkah-langkahnya :
Pertama sobat tentukan mau di mana memasangnya, kalau mau di postingan sobat tinggal pasang kodenya pada postingan sobat (di HTML jangan di Compose). Kalau mau di pasang di widget sobat tinggal buat gadget baru pilih HTML/JAVASCRIPT sobat tinggal kasih judul gadgetnya dan sobat copykan kodenya. Berikut kode yang harus di pasang :

<div class="row">
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img src="..." alt="patchloader">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>...</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
</div>

Pada (....) <img src="..." alt="patchloader"> silahkan isi dengan alamat gambar sobat, (...) <p>...</p> isi dengan keterangan gambar sobat dan "#" dengan alamat link sobat. Silahkan sobat lihat contoh di bawah ini :
See the Pen Thumbnail bootstrap by Ariez July (@secret28) on CodePen.

Selsai sudah pembahasan tentang memasang thumbnail dan content pada blog, semoga artikelnya dapat membantu dan bermanfaat buat sobat. Terimakasih

Artikel Terkait 

Cara Mudah Membuat Video Yang Responsive Atau Responsive Embed Dengan Bootstrap

1/24/2017 0

Untuk sobat yang suka upload video ke blog tentu ingin video yang sobat upload responsive, dalam kesempatan kali ini saya akan membagikan tutorial membuat video yang responsive dengan bootstrap. Tentunya sobat harus sudah memasang bootstrap ulu di template blog sobat. Buat yang belum pasang bootstrap pada templatenya sobat bisa lihat artikel tentang Cara Memasang Bootstrap Pada Blog .

Dengan bootstrap sobat tidak perlu repot-repot edit template sobat, karena bootstrap memungkinkan browser untuk menentukan video atau slideshow dimensi berdasarkan lebar blok,dengan menciptakan rasio intrinsik yang benar akan skala pada perangkat apapun. Jadi video sobat dapat mengikuti dalam bentuk layar apapun,misal laptop,tablet bahkan handphone.

Langsung saja sobat ikuti langkah-langkahnya

Masuk Blogger>Pos>HTML di sini sobat jangan pilih Compose pilih HTML sobat masukan kode di bawah ada 2 pilihan "16:9 aspect ratio" dan "4:3 aspect ratio"


<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

Nah mudah bukan sobat tinggal memasukan kode tadi pada postingan sobat, jadi sobat tidak perlu edit CSS sobat lagi. Semoga artikelnya dapat membantu dan bermanfaat buat sobat. Terimakasih

Artikel Terkait 

Cara Mudah Membuat Contac Form Pada Blog

1/20/2017 0
Buat sobat yang belum punya Contac Form pada kesempatan kali ini saya akan membagikan tutorialnya. Langsung saja sobat ikuti tutorilnya :

Masuk Blogger sobat pada dashboard pilih Laman dan buat Laman baru dan buat post di halaman statis, kemudian terapkan kode di bawah ini pada tab HTML. Catatan : Jika sudah menambahkan kode ini, disarankan untuk tidak menggunakan mode Compose di halaman Posini.
<form name="contact-form">
<span><i class="fa fa-pencil-square-o"></i> Name </span>
<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />

<span><i class="fa fa-envelope-o"></i> Email Address <span style="color: #f56954; font-size: x-small; font-weight: bold;">important</span></span>
<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />

<span><i class="fa fa-keyboard-o"></i> Content <span style="color: #f56954; font-size: x-small; font-weight: bold;">important</span></span>
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
<input id="ContactForm1_contact-form-submit" type="button" value="Send" />
<div style="max-width: 222px; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>

<style scoped="" type="text/css">
#comments,.post_meta,#blog-pager {display:none;}
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email{
height:auto;margin:5px auto;padding:10px;background:#fafafa;color:#444;border:1px solid #ccc;border-radius:3px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;transition:all 0.5s ease-out;}
#ContactForm1_contact-form-email-message{width:100%;height:175px;margin:5px 0;padding:10px;background:#fafafa;color:#444;font-family:'Open Sans',sans-serif;border:1px solid #ccc;border-radius:3px;transition:all 0.5s ease-out;}
#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{outline:none;background:#fff;color:#444;border-color:rgba(81,203,238,1);box-shadow:0 0 5px rgba(81,203,238,0.7);}
#ContactForm1_contact-form-submit{font-family:'Open Sans';float:left;background:#cf4d35;color:#fff;margin:10px auto;vertical-align:middle;cursor:pointer;padding:10px 18px!important;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:.5px;border-radius:4px;border:0;transition:all .8s ease}
#ContactForm1_contact-form-submit:hover {background:#e45a40;color:#fff;}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{width:100%;margin-top:35px;}
.contact-form-error-message-with-border {background:#f6f6f6;border:none;box-shadow:none;color:#444;padding:5px 0;}
.contact-form-success-message {background:#4fc3f7;border:none;box-shadow:none;color:#fff;}
img.contact-form-cross {line-height:40px;margin-left:5px;}
@media only screen and (max-width:640px){
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email,#ContactForm1_contact-form-submit{width:100%;}}
</style>Sitemap

Cara di atas apabila contac form mau di simpan di halaman statis, kalau mau menerapkannya pada widget sobat ikuti langkah-langkahnya di bawah ini :
Masuk Blogger sobat pada dashboard pilih Tata Letak tambah gadget baru dan pilih Html Java Script isi judulnya dan masukan kode di atas pada kotak konten yang di sediakan, untuk lebih jelasnya lihat gambar di bawah.

Nah begitulah cara membuat contac form dari saya, mudah-mudahan tutorialnya dapat membantu sobat dan bermanfaat buat sobat. Terimakasih ,untuk demonya silahkan lihat pada tombol di bawah.

Cara Mudah Membuat Halaman Baru di Blogger

1/17/2017 0

Bagi yang mau membuat sitemap,about me,disclaimer dll perlu membuat halaman baru atau di blogger lebih di kenal "laman". Saya akan membagikan cara membagikan tutorial bagaimana membuat halaman baru di blogger, halaman ini bentuknya statis pada dasarnya hampir mirip seperti pos hanya saja memiliki perbedaan yaitu jarang di update.

Masuk Blogger dan pilih Laman

Kemudian pilih Laman baru dan tinggal sobat isi Judul dan juga Konten untuk halaman statis blog sobat dan publikasikan, tampilannya seperti ini



Seperti yang sudah disebutkan di atas, laman di blogger secara default tidak ditampilkan di blog. Selain itu tidak ada link yang bisa diklik supaya bisa mengarah ke halaman statis yang sudah dibuat.
Untuk menampilkan link laman tersebut sobat bisa menggunakan Widget Laman, atau bisa juga secara manual dengan kode HTML yang dipasang di dalam template.

Menggunakan Widget
  • Masuk Blogger>Tataletak>Tambahkan Gadget


  • Pilih Widget kemudian Laman


  • Sekarang centang halaman statis yang mau di tampilkan

  • Simpan setelan dan lihat sekarang halaman statis sudah muncul


Menggunakan HTML
Selain menggunakan widget laman, kita juga bisa menampilkan link laman menggunakan kode HTML yang diletakan di dalam template.
  • Masuk Blogger>Template>Edit HTML dan masukan kode di bawah ini setelah <nav> atau sebelum </nav>atau sejenisnya seperti <nav class='menu' id='menu'>
 <ul class="menu">
   <li><a class="homer" href="#"><i class="fa fa-home"></i> HOME</a>
   <ul class="sub-menu">
   <li><a href="#">Sub-Menu 1</a></li>
   <li><a href="#">Sub-Menu 2</a></li>
   <li><a href="#">Sub-Menu 3</a></li>
   <li><a href="#">Sub-Menu 4</a></li>
   <li><a href="#">Sub-Menu 5</a></li>   
   </ul>
   </li>
  <li><a  href="#"><i class="fa fa-user"></i> ABOUT</a></li>
  <li><a  href="#"><i class="fa fa-camera"></i> PORTFOLIO</a>
  <ul class="sub-menu">
   <li><a href="#">Sub-Menu 1</a></li>
   <li><a href="#">Sub-Menu 2</a>
    <ul>
    <li><a href="#">Sub Sub-Menu 1</a></li>
    <li><a href="#">Sub Sub-Menu 2</a></li>
 <li><a href="#">Sub Sub-Menu 3</a></li>
    <li><a href="#">Sub Sub-Menu 4</a></li>
 <li><a href="#">Sub Sub-Menu 5</a></li> 
    </ul>
   </li>
     <li><a href="#">Sub-Menu 3</a>
    <ul>
    <li><a href="#">Sub Sub-Menu 1</a></li>
    <li><a href="#">Sub Sub-Menu 2</a></li>
 <li><a href="#">Sub Sub-Menu 3</a></li>
    <li><a href="#">Sub Sub-Menu 4</a></li>
 <li><a href="#">Sub Sub-Menu 5</a></li> 
    </ul>
   </li>
   </ul>
  </li>
  <li><a  href="#"><i class="fa fa-bullhorn"></i> BLOG</a></li>
    <li><a  href="#"><i class="fa fa-tags"></i> CATEGORIES</a>
  <ul class="sub-menu">
   <li><a href="#">Sub-Menu 1</a></li>
   <li><a href="#">Sub-Menu 2</a>
    <ul>
    <li><a href="#">Sub Sub-Menu 1</a></li>
    <li><a href="#">Sub Sub-Menu 2</a></li>
 <li><a href="#">Sub Sub-Menu 3</a></li>
    <li><a href="#">Sub Sub-Menu 4</a></li>
 <li><a href="#">Sub Sub-Menu 5</a></li> 
    </ul>
   </li>
     <li><a href="#">Sub-Menu 3</a>
    <ul>
    <li><a href="#">Sub Sub-Menu 1</a></li>
    <li><a href="#">Sub Sub-Menu 2</a></li>
 <li><a href="#">Sub Sub-Menu 3</a></li>
    <li><a href="#">Sub Sub-Menu 4</a></li>
 <li><a href="#">Sub Sub-Menu 5</a></li> 
    </ul>
   </li>
   </ul>
  </li>
  <li><a  href="#"><i class="fa fa-envelope"></i> CONTACT</a></li>
  <li><a  href="#"><i class="fa fa-sitemap"></i> SITEMAP</a></li>
  <li><a  href="#"><i class="fa fa-exclamation-triangle"></i> DISCLAIMER</a></li>
  </ul>

Save atau Simpan Template dan ganti '#' dengan url anda, untuk melihat url halaman anda klik lihat pada halaman yang mau di tampilkan urlnya. Lihat gambar di bawah ini

Selesai kini halaman statis anda sudah bisa di akses, semoga artikel dari saya bisa membantu anda dan bisa bermanfaat.Terimakasih telah berkunjung ke blog yang sederhana ini, untuk yang lebih profesional silahkan baca postingan saya tentang Cara Mudah Membuat Sitemap Atau Daftar Isi Blog Yang Responsive

Cara Mudah Membuat Sitemap Atau Daftar Isi Blog Yang Responsive

1/17/2017 0

Sitemap adalah sebuah halaman khusus yang di rancang untuk memudahkan pengunjung melihat isi blog kita. Semua postingan blog ada di dalam halaman sitemap, mungkin halaman sitemap bisa di sebut juga sebagai halaman daftar isi blog kita.

Dalam tutorial kali ini saya akan membahas bagaimana kita membuat sitemap dan menerapkannya ke dalam widget blog kita. Oh ya sitemap saya bagikan ini sifatnya responsive bisa menyesuaikan tergantung layar.

1.Masuk Blogger-Template-Edit Html dan  copy kode CSS di bawah sebelum kode ]]></b:skin> atau </style>
table {background-color: transparent;width: 100%;max-width: 100%;margin-bottom: 20px;}
table img{width: 100%;height: auto}
table.tr-caption-container{padding:0;border:none}
table td.tr-caption{font-size:12px;font-style:italic;}

table {border-spacing: 0;border-collapse: collapse;}
td,
th {padding: 0;}
th {text-align: left;}
.table {width: 100%;max-width: 100%;margin-bottom: 20px;}
.table a {text-decoration: none !important;}
.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {padding: 8px;line-height: 1.42857143;vertical-align: top;}
.table > thead > tr > th {background-color:#3498DB;color:#fff;vertical-align: bottom;}
.table > thead > tr > th a {color:#fff !important;}
.table > caption + thead > tr:first-child > th,
.table > colgroup + thead > tr:first-child > th,
.table > thead:first-child > tr:first-child > th,
.table > caption + thead > tr:first-child > td,
.table > colgroup + thead > tr:first-child > td,
.table > thead:first-child > tr:first-child > td {border-top: 0;}
.table > tbody > tr:nth-of-type(odd) {background-color: #f9f9f9;}
table col[class*="col-"] {position: static;display: table-column;float: none;}
table td[class*="col-"],
table th[class*="col-"] {position: static;display: table-cell;float: none;}
.table-responsive {min-height: .01%;overflow-x: auto;}
@media screen and (max-width: 767px) {
  .table-responsive {width: 100%;margin-bottom: 15px;overflow-y: hidden;-ms-overflow-style: -ms-autohiding-scrollbar;}
  .table-responsive > .table {margin-bottom: 0;}
  .table-responsive > .table > thead > tr > th,
  .table-responsive > .table > tbody > tr > th,
  .table-responsive > .table > tfoot > tr > th,
  .table-responsive > .table > thead > tr > td,
  .table-responsive > .table > tbody > tr > td,
  .table-responsive > .table > tfoot > tr > td {white-space: nowrap;}
  .table-responsive > .table-bordered {border: 0;}
}

2.Simpan atau save Template

3.Pilih laman dan buat laman baru dan copykan kode di bawah di HTML jangan di Compose,untuk yang tidak tau cara membuat halaman baru silahkan baca postingan Cara Membuat Halaman Baru di Blogspot
<div id="bp_toc">Loading TOC. Please wait....</div>

<script type='text/javascript'>
//<![CDATA[
   var postTitle = new Array();     // array of posttitles
   var postUrl = new Array();       // array of posturls
   var postDate = new Array();      // array of post publish dates
   var postSum = new Array();       // array of post summaries
   var postLabels = new Array();    // array of post labels

//global variables
   var sortBy = "datenewest";         // default value for sorting ToC
   var tocLoaded = false;           // true if feed is read and ToC can be displayed
   var numChars = 250;              // number of characters in post summary
   var postFilter = '';             // default filter value
   var tocdiv = document.getElementById("bp_toc"); //the toc container
   var totalEntires =0; //Entries grabbed till now
   var totalPosts =0; //Total number of posts in the blog.

//main callback function
function loadtoc(t){function e(){if("entry"in t.feed){var e=t.feed.entry.length;if(totalEntires+=e,totalPosts=t.feed.openSearch$totalResults.$t,totalPosts>totalEntires){var s=document.createElement("script");s.type="text/javascript",startindex=totalEntires+1,s.setAttribute("src","/feeds/posts/summary?start-index="+startindex+"&max-results=500&alt=json-in-script&callback=loadtoc"),tocdiv.appendChild(s)}for(var o=0;e>o;o++){for(var a,l=t.feed.entry[o],r=l.title.$t,i=l.published.$t.substring(0,10),n=0;n<l.link.length;n++)if("alternate"==l.link[n].rel){a=l.link[n].href;break}if("content"in l)var p=l.content.$t;else if("summary"in l)var p=l.summary.$t;else var p="";var c=/<\S[^>]*>/g;if(p=p.replace(c,""),p.length>numChars){p=p.substring(0,numChars);var d=p.lastIndexOf(" ");p=p.substring(0,d)+"..."}var f="";if("category"in l){for(var n=0;n<l.category.length;n++)f+="<a href=\"javascript:filterPosts('"+l.category[n].term+"');\" title=\"Click here to select all posts with label '"+l.category[n].term+"'\">"+l.category[n].term+"</a>,  ";var u=f.lastIndexOf(",");-1!=u&&(f=f.substring(0,u))}postTitle.push(r),postDate.push(i),postUrl.push(a),postSum.push(p),postLabels.push(f)}}totalEntires==totalPosts&&(tocLoaded=!0,showToc())}e(),sortPosts(sortBy),tocLoaded=!0}function filterPosts(t){postFilter=t,displayToc(postFilter)}function allPosts(){postFilter="",displayToc(postFilter)}function sortPosts(t){function e(t,e){var s=postTitle[t];postTitle[t]=postTitle[e],postTitle[e]=s;var s=postDate[t];postDate[t]=postDate[e],postDate[e]=s;var s=postUrl[t];postUrl[t]=postUrl[e],postUrl[e]=s;var s=postSum[t];postSum[t]=postSum[e],postSum[e]=s;var s=postLabels[t];postLabels[t]=postLabels[e],postLabels[e]=s}for(var s=0;s<postTitle.length-1;s++)for(var o=s+1;o<postTitle.length;o++)"titleasc"==t&&postTitle[s]>postTitle[o]&&e(s,o),"titledesc"==t&&postTitle[s]<postTitle[o]&&e(s,o),"dateoldest"==t&&postDate[s]>postDate[o]&&e(s,o),"datenewest"==t&&postDate[s]<postDate[o]&&e(s,o)}function displayToc(t){var e=0,s="",o="POST TITLE",a="Click to sort by title",l="DATE",r="Click to sort by date",i="LABELS",n="";"titleasc"==sortBy&&(a+=" (descending)",r+=" (newest first)"),"titledesc"==sortBy&&(a+=" (ascending)",r+=" (newest first)"),"dateoldest"==sortBy&&(a+=" (ascending)",r+=" (newest first)"),"datenewest"==sortBy&&(a+=" (ascending)",r+=" (oldest first)"),""!=postFilter&&(n="Click to show all posts"),s+='<div class="table-responsive">',s+='<table class="table">',s+="<thead>",s+="<tr>",s+="<th>",s+='<a href="javascript:toggleTitleSort();" title="'+a+'">'+o+"</a>",s+="</th>",s+="<th>",s+='<a href="javascript:toggleDateSort();" title="'+r+'">'+l+"</a>",s+="</th>",s+="<th>",s+='<a href="javascript:allPosts();" title="'+n+'">'+i+"</a>",s+="</th>",s+="</tr>",s+="</thead>",s+="<tbody>";for(var p=0;p<postTitle.length;p++)""==t?(s+='<tr><td><a href="'+postUrl[p]+'" title="'+postSum[p]+'">'+postTitle[p]+"</a></td><td>"+postDate[p]+"</td><td>"+postLabels[p]+"</td></tr>",e++):(z=postLabels[p].lastIndexOf(t),-1!=z&&(s+='<tr><td><a href="'+postUrl[p]+'" title="'+postSum[p]+'">'+postTitle[p]+"</a></td><td>"+postDate[p]+"</td><td>"+postLabels[p]+"</td></tr>",e++));if(s+="</tbody>",s+="</table>",s+="</div>",e==postTitle.length)var c='<span class="toc-note">Displaying all '+postTitle.length+" posts<br/></span>";else{var c='<span class="toc-note">Displaying '+e+" posts labeled '";c+=postFilter+"' of "+postTitle.length+" posts total<br/></span>"}tocdiv.innerHTML=c+s}function toggleTitleSort(){sortBy="titleasc"==sortBy?"titledesc":"titleasc",sortPosts(sortBy),displayToc(postFilter)}function toggleDateSort(){sortBy="datenewest"==sortBy?"dateoldest":"datenewest",sortPosts(sortBy),displayToc(postFilter)}function showToc(){if(tocLoaded){displayToc(postFilter);document.getElementById("toclink")}else alert("Just wait... TOC is loading")}function hideToc(){var t=document.getElementById("toc");t.innerHTML="";var e=document.getElementById("toclink");e.innerHTML='<a href="#" onclick="scroll(0,0); showToc(); Effect.toggle(\'toc-result\',\'blind\');">» Show Table of Contents</a> <span style="font-size:11px;color:red;">Terbaru!</span>'}var postTitle=new Array,postUrl=new Array,postDate=new Array,postSum=new Array,postLabels=new Array,sortBy="datenewest",tocLoaded=!1,numChars=250,postFilter="",tocdiv=document.getElementById("bp_toc"),totalEntires=0,totalPosts=0;
//]]>
</script>
 
<script src="/feeds/posts/summary?alt=json-in-script&max-results=500&callback=loadtoc" type="text/javascript"></script>

Itu lah cara membuat Sitemap atau daftar isi blog yang responsive yang sederhana dari saya, semoga artikelnya bisa membantu dan bermanfaat buat anda. Sekian dari saya, terimakasih.


Silahkan lihat contohnya pada tombol demo di bawah

Cara Mudah Membuat Flat Table Responsive

1/17/2017 0

Flat Table Responsive adalah sebuah table yang bisa menyesuaikan sesuai ukuran layar, misal kalau di buka di handphone atau tablet ukuranya mengikuti layar mobile tersebut. Jadi ketika website di buka pada ukuran yang lebih sempit kita masih bisa membaca table dengan mudah.

Berikut adalah langkah-langkah untuk membuat Flat Table Responsive
  • Masuk Blogger-Template-Edit HTML dan copykan kode di bawah setelah kode <head>

<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
  • Copy kode CSS di bawah sebelum kode ]]></b:skin> atau </style>
table {background-color: transparent;width: 100%;max-width: 100%;margin-bottom: 20px;}
table img{width: 100%;height: auto}
table.tr-caption-container{padding:0;border:none}
table td.tr-caption{font-size:12px;font-style:italic;}

table {border-spacing: 0;border-collapse: collapse;}
td,
th {padding: 0;}
th {text-align: left;}
.table {width: 100%;max-width: 100%;margin-bottom: 20px;}
.table a {text-decoration: none !important;}
.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {padding: 8px;line-height: 1.42857143;vertical-align: top;}
.table > thead > tr > th {background-color:#3498DB;color:#fff;vertical-align: bottom;}
.table > thead > tr > th a {color:#fff !important;}
.table > caption + thead > tr:first-child > th,
.table > colgroup + thead > tr:first-child > th,
.table > thead:first-child > tr:first-child > th,
.table > caption + thead > tr:first-child > td,
.table > colgroup + thead > tr:first-child > td,
.table > thead:first-child > tr:first-child > td {border-top: 0;}
.table > tbody > tr:nth-of-type(odd) {background-color: #f9f9f9;}
table col[class*="col-"] {position: static;display: table-column;float: none;}
table td[class*="col-"],
table th[class*="col-"] {position: static;display: table-cell;float: none;}
.table-responsive {min-height: .01%;overflow-x: auto;}
@media screen and (max-width: 767px) {
  .table-responsive {width: 100%;margin-bottom: 15px;overflow-y: hidden;-ms-overflow-style: -ms-autohiding-scrollbar;}
  .table-responsive > .table {margin-bottom: 0;}
  .table-responsive > .table > thead > tr > th,
  .table-responsive > .table > tbody > tr > th,
  .table-responsive > .table > tfoot > tr > th,
  .table-responsive > .table > thead > tr > td,
  .table-responsive > .table > tbody > tr > td,
  .table-responsive > .table > tfoot > tr > td {white-space: nowrap;}
  .table-responsive > .table-bordered {border: 0;}
}

Kode di atas menggunakan media screen max-width 767px jadi ketika lebar maximal layar 767px akan ada scroll di bawah table atau bisa mengubahnya menjadi auto.

  • Cara penggunaan Flat Table Responsive copykan kode HTML di bawah di postingan, copy di HTML jangan di  Compose.
<div class="table-responsive">
<table class="table"> 
<thead>
  <tr>
    <th>Nama Pertama</th> 
    <th>Nama Terakhir</th> 
  </tr>
</thead> 
<tbody>
  <tr> 
    <td>David</td> 
    <td>Silva</td>  
  </tr>
  <tr> 
    <td>David </td> 
    <td>Beckham</td> 
  </tr>
  <tr> 
    <td>John</td> 
    <td>Lennon</td> 
  </tr>
</tbody> 
</table>
</div>

Bagi yang mau lihat hasilnya silahkan lihat demonya dulu



Silahkan baca juga Cara Membuat Sitemap Atau Daftar Isi Blog Yang Responsive