Membuat Tabbed Content With Read More Di Blogger

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

Saya akui memang terkadang tampilan template berperan juga untuk memanjakan mata pengunjung biar 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, bahwasanya ini ialah 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 pelengkap arahan CSS dan Jquery dengan kreasi background dibawahnya gradien menggunakan CSS3.

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

Langkah Pertama

Silahkan teman salin arahan CSS dibawah ini lalu letakkan di atas arahan </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 teman salin arahan Jquery ini lalu letakkan sempurna diatas arahan </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 teman gunakan arahan 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

Demo

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