Loading...

Membuat Tabbed Content With Read More Di Blogger

 Ada banyak cara untuk selalu menciptakan tampilan Blog menjadi lebih baik salah satunya adala Membuat Tabbed Content With Read More Di Blogger

Ada banyak cara untuk selalu menciptakan tampilan Blog menjadi lebih baik salah satunya yakni memanfaatkan teknologi instruksi script yang kini ini terus berkembang terutama dalam memodifikasi template pada blog. Template blog ada banyak ragam dari yang mulai tampilannya elok Premium berwarna warni hingga yang Simple dan Polos saja ibarat template yang saya pakai ini dari Arlina Design namanya Digizena. 

Saya akui memang terkadang tampilan template berperan juga untuk memanjakan mata pengunjung supaya 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, bersama-sama ini yakni 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 instruksi CSS dan Jquery dengan kreasi background dibawahnya gradien memakai CSS3.

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

Langkah Pertama
Silahkan teman salin instruksi CSS dibawah ini kemudian letakkan di atas instruksi </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 instruksi Jquery ini kemudian letakkan sempurna diatas instruksi </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 instruksi 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 teman sebelum mencoba cara ini template blognya di backup terlebih dahulu untuk antisipasi kalau terjadi Error sanggup dikembalikan lagi, kemudian SAVE dan Selesai, selamat mencoba semoga bermanfaat.

Sumber http://www.dibalikseo.com

Subscribe to receive free email updates:

0 Response to "Membuat Tabbed Content With Read More Di Blogger"

Posting Komentar