Cara Membuat Responsive Material Tabs Pada Blog

Apa itu Tabs dan apa fungsinya ?, Tabs atau Tabulasi adalah bagian berbentuk tabulasi yg berisi sejumlah perintah yg berisi sesuai kelompok yg terdiri atas group dan perintah, yang berisi atau menonjolkan content yang berbeda pada satu layout dengan layout yang lainnya.

Fungsinya selain mempercantik tampilan, dengan menggunakan Tabs penulis atau pembaca dapat dengan mudah untuk menjelajah isi dari content blog yang ditulis dengan tampilan lebih simple dan dinamis.

Implementasi dari Tabs ini pada prinsipnya bisa sahabat gunakan dalam tampilan blog sebagai navigasi menu, sidebar, dan sebagainya. Berikut tampilan Responsive Material Tabs kali ini.

• Tabs 1
• Tabs 2
• Tabs 3
• Tabs 4
• Tabs 5

1. There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.

2. There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.

3. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).

4. Where can I get some?

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.

5. Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.

The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.

Bagaimana cara membuat dan memasangnya di blog ?, berikut tutorial

Cara Membuat Responsive Material Tabs Pada Blog.

1. Budayakan membaca dan mencoba sebelum sahabat berkomentar.
2. Tutorial yang saya bagikan sudah 100% berfungsi di template Blogger bawaan ataupun template modifikasi pada umumnya (tergantung pada template yang sahabat gunakan).
3. Selamat mencoba dan tetap semangat...

• Direkomendasikan ikuti langkah demi langkah terlebih dahulu tanpa harus merubah/ mengganti sebagian atau seluruh kode CSS, JS atau HTML yang diberikan. Modifikasi dilakukan setelah kode tersebut berhasil diterapkan pada template.

• Backup Template sebelum merubah sebagian atau seluruh dari isi template, guna menghindari terjadinya kesalahan / ketidak sesuaian/ erorr saat merubahnya nanti. Berikut dibawah ini cara backup template bagi yang belum mengetahuinya.

×

1 / 4

2 / 4

3 / 4

4 / 4

< >

• Pelajari dan pahami HTML, CSS, Java Script dan lainya sebagai referensi bisa lihat Disini..

• Login Blogger > Menu Theme > Edit HTML
• Cari kode </style> atau </body> pada template, untuk mempercepat dan mempermudah gunakan shortcut Ctrl + F
• Copy All seluruh kode CSS dibawah ini kemudian
  
  

  
  /* ===== CSS  Responsive Material Tabs =====*/
  [ripple] {
    z-index: 1;
    position: relative;
    overflow: hidden;
  }
  [ripple] .ripple {
    position: absolute;
   
    width: 12px;
    height: 12px;
    border-radius: 100%;
    -webkit-animation: ripple 1.6s;
            animation: ripple 1.6s;
   background: #4285F4;
  }
  
  @-webkit-keyframes ripple {
    0% {
      -webkit-transform: scale(1);
              transform: scale(1);
      opacity: 0.2;
    }
    100% {
      -webkit-transform: scale(40);
              transform: scale(40);
      opacity: 0;
    }
  }
  
  @keyframes ripple {
    0% {
      -webkit-transform: scale(1);
              transform: scale(1);
      opacity: 0.2;
    }
    100% {
      -webkit-transform: scale(40);
              transform: scale(40);
      opacity: 0;
    }
  }
  .tabs {
    z-index: 15px;
    position: relative;
    background: #FFFFFF;
    width: 95%;
    border-radius: 4px;
    box-sizing: border-box;
    margin: 10px 0px 10px 10px;
    overflow: hidden;
  border:1px solid #f2f2f2;
   box-shadow: 0px .5vh 5px 0px rgba(0,0,0,.25);
  border-right: solid 2px rgba(255, 255, 255, 0.4);
  border-top: solid 2px rgba(255, 255, 255, 0.4);
  }
  .tabs-header {
    position: relative;
    background: #333333;
    overflow: hidden;
  border-bottom:2px solid #f2f2f2;
  }
  .tabs-header .border {
    position: absolute;
    bottom: 0;
    left: 0;
    background: #4285F4;
    width: auto;
    height: 5px;
    transition: 0.3s ease;
  margin-left:0px;
  
  }
  .tabs-header ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: calc(100% - 68px);
  padding-left:0px;
  margin-bottom:10px;
  margin-top: 10px;
  list-style:none;
  }
  .tabs-header li {
    transition: 0.3s ease;
  list-style:none;
  }
  .tabs-header a {
    z-index: 1;
    display: block;
    box-sizing: border-box;
    padding: 10px 10px 10px 20px;
    color: #FFFFFF;
    font-weight: 500;
    text-decoration: none;
    text-transform: uppercase;
  
  }
  .tabs-nav {
    position: absolute;
    top: 0;
    right: 0;
    background: #4285F4;
    display: flex;
    align-items: center;
    height: 100%;
    padding: 10px 10px 0px 10px;
    color: #FFFFFF;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
  }
  .tabs-nav:before {
    content: '';
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
  }
  .tabs-nav i {
    border-radius: 100%;
    cursor: pointer;
  bottom:5px;
  }
  .tabs-content {
    position: relative;
    padding: 15px 20px 0px 20px;
    transition: 0.3s ease;
    overflow: hidden;
  margin-bottom:20px;
  
  }
  .tabs-content:after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    display: block;
    width: 100%;
    height: 1px;
    box-shadow: 0 0 20px 10px #FFFFFF;
  }
  .tabs-content .tab {
    display: none;
  }
  .tabs-content .tab.activetab {
    display: block;
  }
  
  /* --------------------------------- */
  

  
  
• Paste tepat diatas atau sebelum kode </style> atau </body> tersebut.
• Save Template
• Modifikasi lanjutan perihal tampilan nanti bisa dirubah pada kode CSS ini.

• Masih pada > Menu Theme > Edit HTML
• Cari kode </body> pada template, untuk mempercepat dan mempermudah gunakan shortcut Ctrl + F
• Copy All seluruh kode JavaScript dibawah ini kemudian
  

  
  <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'/>
  

• Paste tepat diatas atau sebelum kode </body> tersebut.
• Save Template

• Login Blogger > Posts > Pilih New Posts atau Edit Posts > terdapat menu Compose dan HTML mode > Pilih HTML
• Tulis atau pasang kode Syntax Highlighting dibawah ini sesuai dengan kategori yang ingin digunakan.

<div class="tabs">
  <div class="tabs-header">
    <div class="border"></div>
    <ul>
      <li class="activetab"><a href="#tab-1" tab-id="1" ripple="ripple" ripple-color="#4285F4">Tabs 1</a></li>
      <li><a href="#tab-2" tab-id="2" ripple="ripple" ripple-color="#4285F4">Tabs 2</a></li>
      <li><a href="#tab-3" tab-id="3" ripple="ripple" ripple-color="#4285F4">Tabs 3</a></li>
      <li><a href="#tab-4" tab-id="4" ripple="ripple" ripple-color="#4285F4">Tabs 4</a></li>
      <li><a href="#tab-5" tab-id="5" ripple="ripple" ripple-color="#4285F4">Tabs 5</a></li>
    </ul>
    <nav class="tabs-nav">
<i class="fa fa-chevron-left" id="previcon" ripple="ripple" ripple-color="#FFF" style="padding-right: 5px;"></i>
<i class="fa fa-chevron-right" id="nexticon" ripple="ripple" ripple-color="#FFF" style="padding-left: 5px;"></i>
</nav>
  </div>

<div class="tabs-content">
<div class="tab activetab" tab-id="1">
<div style="text-align:justify;">
1. There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</div><br/><br/>
</div>

<div class="tab" tab-id="2">
<div style="text-align:justify;">
2. There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</div><br/><br/>
</div>

<div class="tab" tab-id="3">
<div style="text-align:justify;">
3. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</div><br/><br/>
</div>

<div class="tab" tab-id="4">
<div style="text-align:justify;">
4. <b>Where can I get some?</b><br/>
<br/>

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</div><br/><br/>
</div>
<div class="tab" tab-id="5">
<div style="text-align:justify;">
5. Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.<br/>
<br/>
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.</div><br/><br/>
</div>
</div>
</div>

• Lihat hasilnya sementara dahulu di Preview. Jika sudah merasa yakin semua berjalan dengan baik diterapkan pada template sahabat, silahkan Update untuk postingan edit atau Publish untuk postingan baru.

• Selamat, besar kemungkinan jika sahabat mengikuti setiap langkah demi langkah pasti akan berhasil membuat dan memasangnya seperti Demo diatas.
• Modifikasi lanjutan untuk tampilan sesuai dengan selera sahabat pada kode CSS diatas dan isi dari content blog sahabat dalam tabs pada kodeHTML.
• Demo Cara Membuat Responsive Material Tabs Pada Blog ini hanya sebagai referensi dibuat dengan properties CSS yang bisa sahabat kembangkan kembali menjadi model tampilan yang lebih menarik dan bagus tentunya.
• Download file lengkap .txt tutorial ini sebagai media pembelajaran.

Silahkan sahabat memodifikasi lanjut untuk penempatan, ukuran, warna, dan model gambar disesuaikan dengan gaya template sahabat. Hindari memodifikasi yang berlebihan terkadang malah jadi menggangu baik tampilan maupun fungsi.

Berikut contoh Responsive Material Tabs yang saya implementasikan pada Tutorial Cara Membuat Syntax Highlighting Prism JS Dengan Material Tabs.

Demikian semoga membantu dan bermanfaat... happy blogging.

Please Share

• style='margin-right: 30px' target='-blank'>

Artikel Lainnya Terkait Costumized