Jul 1, 2017

Membuat Tabbed Content With Read More Di Blogger

Tabbed Content With Read More

Ada banyak cara untuk selalu membuat tampilan Blog menjadi lebih baik salah satunya adalah memanfaatkan teknologi kode script yang sekarang ini terus berkembang terutama dalam memodifikasi template pada blog. Template blog ada banyak ragam dari yang mulai tampilannya bagus Premium berwarna warni sampai yang Simple dan Polos saja seperti template yang saya pakai ini dari Arlina Design namanya Digizena. 

Saya akui memang terkadang tampilan template berperan juga untuk memanjakan mata pengunjung agar betah namun hal itu bukan menjadi faktor penting mendatangkan pengunjung setia saya tetap berpegang Konten no 1.

Berbicara tampilan Blog terkadang kita suka bosan juga melihat halaman utama yang itu-itu saja tidak ada kreasi menarik nah di kesempatan kali ini akan kita bahas Cara Membuat Tabbed Content With Read More Di Blogger, sebenarnya ini adalah lanjutan dari postingan sebelumnya yang sudah pernah dibahas yaitu Membuat Tab View Menggunakan Onclick Event namun di updated kali ini akan kita tambahkan tombol Read More dan sedikit tambahan kode CSS dan Jquery dengan kreasi background dibawahnya gradien menggunakan CSS3.

Bagi sobat yang tertarik untuk mencobanya mari kita simak pembahasannya berikut ini.

Langkah Pertama
Silahkan sobat salin kode CSS dibawah ini lalu letakkan di atas kode </head>.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/*<![CDATA[*/
.container-content {
  width: 100%;
  margin: 0 auto 10px
}
ul.tabs {
  margin: 0 0 -1px;
  padding: 0;
  list-style: none
}
ul.tabs li {
  background: 0 0;
  display: inline-block;
  margin: 0;
  padding: 10px 15px;
  cursor: pointer;
  font-weight: 700;
  border-radius: 4px 4px 0 0;
}
.tab-content,
ul.tabs li.current {
  background: #7e8b96;
  color: #fff
}
.tab-content {
  display: none;
  padding: 15px
}
.tab-content.current {
  display: inherit
}
.container-content .tab-content p,
.container-content .tab-content ul,
.container-content .tab-content ol {
  margin: 0
}
.container-content .tab-content ul li,
.container-content .tab-content ol li {
  margin: 0 0 0 20px;
  padding: 0
}
.tab-content a {
  color: #9fe3ff
}
.technical-box {
  display: block;
  line-height: 1.3
}
.technical-box:after {
  content: "";
  clear: both;
  display: block
}
.technical-box .field-name {
  display: inline-block;
  font-weight: 700;
  width: 180px;
  margin: 0;
  position: relative;
  top: 0;
  float: left
}
.technical-box .field-value {
  display: inline-block;
  margin: 0;
  width: calc(100% - 180px);
  float: left
}
.tab-content input[type="checkbox"] {
  position: absolute;
  left: -9999px;
}
.hideContent {
  position: relative;
  height: auto;
}
label {
  background: #7e8b96;
  display: block;
  height: 30px;
  line-height: 30px;
  cursor: pointer;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
}
label:before {
  position: absolute;
  content: 'Read More 🔽';
  width: 120px;
  text-align: center;
  left: 50%;
  margin-left: -60px;
  font-weight: bold;
}
.tab-content input[type="checkbox"] ~ div {
  width: 100%;
  overflow: hidden;
  max-height: 144px;
  padding-bottom: 30px;
  position: relative;
}
.tab-content input[type="checkbox"] ~ div:after {
  content: "";
  width: 100%;
  height: 70px;
  position: absolute;
  bottom: 15px;
  background: -moz-linear-gradient(top, rgba(126, 139, 150, 0) 0%, rgba(126, 139, 150, 1) 100%);
  background: -webkit-linear-gradient(top, rgba(126, 139, 150, 0) 0%, rgba(126, 139, 150, 1) 100%);
  background: linear-gradient(to bottom, rgba(126, 139, 150, 0) 0%, rgba(126, 139, 150, 1) 100%);
  z-index: 1;
}
.tab-content input[type="checkbox"]:checked ~ div {
  max-height: 3000px;
  transition: 2s;
}
.tab-content input[type="checkbox"]:checked ~ div:after {
  background: 0 0;
}
.tab-content input[type="checkbox"]:checked + label:before {
  content: 'Content Less 🔼';
}
@media screen and (max-width:414px) {
  ul.tabs li {
    width: 100%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 4px;
    background: #7e8b96;
    margin: 0 0 5px;
    color: #fff;
    opacity: .7;
  }
  ul.tabs li.current {
    opacity: 1
  }
}
/*]]>*/
</style>
</b:if>


Langkah Ke Dua
Silahkan sobat salin kode Jquery ini lalu letakkan tepat diatas kode </body>.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script>
//<![CDATA[
$(document).ready(function() {
  $('ul.tabs li').click(function() {
    var tab_id = $(this).attr('data-tab');

    $('ul.tabs li').removeClass('current');
    $('.tab-content').removeClass('current');

    $(this).addClass('current');
    $("#" + tab_id).addClass('current');
  })
})
//]]>
</script>
</b:if>


Langkah Ke Tiga
Untuk menampilkannya tambahkan tabbed content di dalam postingan silahkan sobat gunakan kode HTML ini

<div class="container-content">
  <ul class="tabs">
    <li class="tab-link current" data-tab="tab-1">Description</li>
    <li class="tab-link" data-tab="tab-2">Technical</li>
    <li class="tab-link" data-tab="tab-3">Change Log</li>
  </ul>

  <div id="tab-1" class="tab-content current hideContent">
    <input type="checkbox" id="check_id">
    <label for="check_id"></label>
    <div>
      <p>
CONTENT FOR tab-1 (Description) HERE
      </p>
    </div>
  </div>

  <div id="tab-2" class="tab-content">
    <span class="technical-box">
<span class="field-name">Title:</span> <span class="field-value">Wondershare Player for Android 3.0.5</span>
    <span class="field-name">Filename:</span> <span class="field-value">wsplayer.apk</span>
    <span class="field-name">File size:</span> <span class="field-value">16.9 MB</span>
    <span class="field-name">Supported OS:</span> <span class="field-value">Android 2.2 or above</span>
    <span class="field-name">License:</span> <span class="field-value">Freeware</span>
    <span class="field-name">Author:</span> <span class="field-value"><a href="https://www.wondershare.com/" rel="nofollow" target="_blank" class="external-link">Wondershare Software (H.K.) Co., Ltd.</a></span>
    </span>
  </div>
  <div id="tab-3" class="tab-content">
      <p>
CONTENT HERE FOR tab-3 (Change Log)
      </p>
  </div>
</div>

RESULT

Perhatikan setiap langkah dan cara penerapan kodenya, ada baiknya sobat sebelum mencoba cara ini template blognya di backup terlebih dahulu untuk antisipasi jika terjadi Error dapat dikembalikan lagi, kemudian SAVE dan Selesai, selamat mencoba semoga bermanfaat.

Artikel Terkait

Halo Sobat, sedikit cerita mengenai diri saya, saya adalah hanya seorang penulis amatiran yang mencoba berbagi pengetahuan dari apa yang saya dapat sehari-hari. Pengalaman ini saya tuangkan di tulisan dengan tujuan baik agar pengetahuan dan pengalaman saya ini dapat bisa di pergunakan dan bermanfaat khususnya untuk diri saya pribadi dan umumnya untuk orang lain, sehingga saya beri nama Web saya ini dibalikseo.com yang filosofinya adalah dibalik pengetahuan yang saya dapat.