Cara Membuat Halaman Posting dan Komentar Dalam Tab View

Kali ini saya akan berbagi tentang Cara Membuat Halaman Posting dan Komentar Dalam Tab View cara ini sangatlah mudah, namun harus teliti dalam mengerajakannya, kalau tidak teliti nanti bisa-bisa kode yang lainnya kehapus, dan tidak akan berfungsi, ok langsung saja tutorialnya.

DEMO

1. Cari kode yang mirip ini :

<div class='post-outer'>
<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
</div>

Untuk lebih jelasnya lagi lihat gambar dibawah ini (klik gambar untuk memperjelas):

Lalu ganti kode di atas dengan kode dibawah ini:

<div class='post-outer'>
    <div class='testsaja'>
  <input checked='checked' id='s1' name='s' type='radio'/>
  <input id='s2' name='s' type='radio'/>
  <div class='tabs'>
  <label for='s1'>Post</label>
  <label for='s2'>Komentar</label>
  </div>
 <ul class='sections'>
   <li><b:include data='post' name='post'/></li>
    <li><b:if cond='data:blog.pageType == &quot;static_page&quot;'>
        <b:include data='post' name='comment_picker'/>
       </b:if>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
          <b:include data='post' name='comment_picker'/>
          </b:if></li>
</ul></div></div>

2. Selanjutnya tambahkan kode dibawah ini diatas kode ]]></b:skin>

input[type="radio"] {
    left: -9999px;
    position: absolute;
    top: -9999px;
}
.comments .comments-content .comment-thread li, .comments .comments-content .comment-thread ol {
display:block !important
}
.tabs {
    font-size: 0;
    height: 27px;
    position: relative;
    white-space: nowrap;
    z-index: 999;
}
.tabs label {
    background: none repeat scroll 0 0 #EEEEEE;
    border: 1px solid #DDDDDD;
    color: #666666;
    cursor: pointer;
    display: inline-block;
    font-size: 11px;
    letter-spacing: 1px;
    padding: 6px 20px;
    text-transform: uppercase;
    vertical-align: bottom;
}
.tabs label:first-child {
    margin-left: 0;
}
.tabs label:hover {
    background-color: #DDDDDD;
}
input:nth-child(1):checked ~ .tabs label:nth-child(1), input:nth-child(2):checked ~ .tabs label:nth-child(2), input:nth-child(3):checked ~ .tabs label:nth-child(3), input:nth-child(4):checked ~ .tabs label:nth-child(4) {
    background: none repeat scroll 0 0 #FFFFFF;
    box-shadow: none;
    color: #000000;
    padding: 6px 20px;
}
.sections {
}
.sections li {
    display: none;
    height: auto;
}
input:nth-child(1):checked ~ .sections li:nth-child(1), input:nth-child(2):checked ~ .sections li:nth-child(2), input:nth-child(3):checked ~ .sections li:nth-child(3), input:nth-child(4):checked ~ .sections li:nth-child(4) {
    display: block;
}

3. Agar TAB tersebut tidak muncul di homepage tambahkan kode css ini diatas kode </head>

<b:if cond="data:blog.pageType != &quot;static_page&quot;">
<b:if cond="data:blog.pageType != &quot;item&quot;">
<style type="text/css">
.tabs  {display:none !important}
.sections li {display:block !important;}
</style>
</b:if>
</b:if>

4. Simpan Template, dan lihat hasilnya didalam postingan, selamat mencoba dan semoga berhasil
Source : http://maz-waone.blogspot.com/2013/06/membuat-halaman-posting-dan-komentar.html

Tweet

Unknown pada 8/04/2013