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.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):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 != "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
Source : http://maz-waone.blogspot.com/2013/06/membuat-halaman-posting-dan-komentar.html
Artikel Keren Lainnya:
tutor nya manteb sob..
BalasHapusmakasih sob, silahkan dicoba hehe
Hapusmaz-waone.blogspot itu punya agan ya?
BalasHapusBUKAN sob, itu punya orang, hehe
Hapussudah nggak keren lagi lagi :(
BalasHapusklo buat saya masih keren, haha karna saya baru tau tutorial ini, keren, hehe
Hapusada kesalahan mas dalam tutorial ,, karena tidak semua template bisa menggunakannya ,, saya sudah mencoba memperbaikinya :
BalasHapushttp://de5ain.blogspot.com/2013/08/mengatasi-masalah-tutorial-tab-posting.html
btw ,, itu hover button dari template saya yah ??? :D
iya mas ijin pake ya :yaya:
Hapushehehe .. gk papa mas ,, saya malah seneng karya saya ada yg makee :D
Hapusmakasih banyak mas, hehe saya hanyalah orang yang keingin tahuannya besar, maklum lagi masa pertumbuhan menuju dewasa, hehe :D
Hapuswkwkwkwk .. sama mas ,, saya malah msih muda msih 14 tahun :D mau 15 ,, hehehee ...
Hapusmulai dari sekarang Ega jangan panggil saya mas ya, hehe karna saya bukan orang Jawa Tengah atau timur, hehe, beda dikit sob umurnya klo saya sekarang 13 tahun mau 14 tahun, 2 bulan lagi ULTAH, hehe, sob mau tanya nih klo mau membuat CSS blockquote saat di hover muncul kalimat "klik teks untuk blok semua kode" itu gimana ya ?, tapi pake toltip klo bisa, atau pake .blockquote:hover:after { kode CSSnya;} itu gimana ya ? @@,
Hapusitu bukan tooltip css sob ,,
Hapustpi pke javascript seperti ini
$(function() {
$('blockquote').attr('title', 'Klik untuk menyeleksi semua kode!').click(function() {
var refNode = $(this)[0];
if($.browser.msie) {
var range = document.body.createTextRange();
range.moveToElementText(refNode);
range.select();
} else if($.browser.mozilla || $.browser.opera) {
var selection = window.getSelection();
var range = document.createRange();
range.selectNodeContents(refNode);
selection.removeAllRanges();
selection.addRange(range);
} else if($.browser.safari) {
var selection = window.getSelection();
selection.setBaseAndExtent(refNode, 0, refNode, 1);
}
});
});
iya saya sudah pasang kode di atas tapi saya ingin jika pada blockquote di hover muncul kalimat, gitu :D
Hapusdi blog damzaky atau willyseo kan memakai itu ?? coba view source aja :D saya dulu pernah make gtu tpii lupa carana ... hehehe ,,,
HapusButuh kunjungan Sobat di mari :( Sepi pengunjung dan Komentar :( www.Mafiasitez.blogspot.com
BalasHapus