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.
Ada versi lain nih sob ini versinya kang ismet :
1. Cari kode yang mirip ini :
<div class='post-outer'>
<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == "static_page"'>
<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 == "item"'>
<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 == "static_page"'>
<b:include data='post' name='comment_picker'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<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):checke ~ .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 != "static_page"">
<b:if cond="data:blog.pageType != "item"">
<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
Sumber : http://yoga-tc.blogspot.com/2013/08/cara-membuat-halaman-posting-dan.html
