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.

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

24 komentar untuk "Cara Membuat Halaman Posting dan Komentar Dalam Tab View"

  1. maz-waone.blogspot itu punya agan ya?

    BalasHapus
  2. Balasan
    1. klo buat saya masih keren, haha karna saya baru tau tutorial ini, keren, hehe

      Hapus
  3. ada kesalahan mas dalam tutorial ,, karena tidak semua template bisa menggunakannya ,, saya sudah mencoba memperbaikinya :

    http://de5ain.blogspot.com/2013/08/mengatasi-masalah-tutorial-tab-posting.html

    btw ,, itu hover button dari template saya yah ??? :D

    BalasHapus
    Balasan
    1. hehehe .. gk papa mas ,, saya malah seneng karya saya ada yg makee :D

      Hapus
    2. makasih banyak mas, hehe saya hanyalah orang yang keingin tahuannya besar, maklum lagi masa pertumbuhan menuju dewasa, hehe :D

      Hapus
    3. wkwkwkwk .. sama mas ,, saya malah msih muda msih 14 tahun :D mau 15 ,, hehehee ...

      Hapus
    4. mulai 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 ? @@,

      Hapus
    5. itu bukan tooltip css sob ,,
      tpi 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);
      }
      });
      });


      Hapus
    6. iya saya sudah pasang kode di atas tapi saya ingin jika pada blockquote di hover muncul kalimat, gitu :D

      Hapus
    7. di blog damzaky atau willyseo kan memakai itu ?? coba view source aja :D saya dulu pernah make gtu tpii lupa carana ... hehehe ,,,

      Hapus
  4. Butuh kunjungan Sobat di mari :( Sepi pengunjung dan Komentar :( www.Mafiasitez.blogspot.com

    BalasHapus
  5. Makasih gan informasinya :)
    Kunjungi juga web kami
    http://apotekherbalkita.com/
    http://pengobatanalamimustajab.com/
    http://grosiracemaxstasik.com/

    BalasHapus
  6. ini dia yang di cari-cari, terimakasih atas informasinya :)

    BalasHapus
  7. Nice artikelnya, terimakasih infonya sangat bermanfaat :)
    Ijin share http://kedaijellygamatgoldg.com/
    http://kedaijellygamatgoldg.com/jelly-gamat-gold-g/

    BalasHapus
  8. Great blog! I really love how it is easy on my eyes and the information are well written. I am wondering how I might be notified whenever a new post has been made. I have subscribed to your rss feed which really should do the trick! Have a nice day!

    BalasHapus
  9. Thank you for the information you have provided, I was pleased to read the article in this blog. Visit also my blog ;
    Jasa Percetakan Murah
    hadirkanlah
    Kata Kata Cinta
    Kata Kata Bijak

    BalasHapus
  10. Great blog! i actually love however it's straightforward on my eyes and therefore the info area unit well written. i'm curious however i'd be notified whenever a brand new post has been created. I actually have signed to your rss feed that extremely ought to do the trick! Have a pleasant day! judionlinebola.biz

    BalasHapus

Untuk menyisipkan kode, gunakan tag <i rel="code">Kode disini...</i> atau <i rel="pre">Kode disini...</i>
Untuk menyisipkan gambar, gunakan <i rel="image">URL gambar disini...</i>
Untuk menyisipkan catatan, gunakan <b rel="quote">Tulis catatan disini...</b>
Untuk menciptakan efek tebal, gunakan tag <b>Teks anda disini...</b>
Konversi Kode Back to Top

Back to Top