Cara Membuat Posting dan Komentar dalam Tab View

Posting dan Komentar dalam Tab View - Tutorial ini sudah dibahas oleh +Fatriawan B diblognya. Walau cara kerjanya hampir sama, disini saya menggunakan cara yang berbeda yaitu dengan onClick event, seperti sudah saya jelaskan sebelumnya.

Tutorial ini merupakan request dari salah seorang sahabat pengunjung blog ini yang merasa kesulitan mengaplikasikan tutorial dari Maz WaOne (mungkin sudah bisa diterapkan, tapi tidak valid HTML5). Supaya lebih jelas cara kerjanya, silahkan kunjungi halaman demo :

• Demo

Sobat bisa menggunakan tutorial Maz-WaOne, atau tutorial ini sebagai alternatif

LANGKAH 1 :

Temukan kode yang awalannya seperti ini :

<div class='post hentry' ........

atau

<article class='post hentry' ........

tambahkan setelahnya id='postingan', maka hasilnya kurang lebih seperti ini :

<div class='post hentry' id='postingan' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>

LANGKAH 2 : Tambahkan CSS untuk Tab

Untuk CSS Tab, silahkan dimodifikasi sendiri, akan tetapi untuk mempermudah tetap gunakan .posting dan .komen, sebagai contoh silahkan coba CSS ini  simpan di atas ]]></b:skin> atau </style> :

.tab-komen{float:left;text-align:center;width: 100%;margin-bottom:20px;padding:0;font-size:16px;text-transform:uppercase;clear:both;}
.posting {width:50%;padding:9px 0;line-height:20px;float:left;border: none;background: #878787; color: #fff !important;text-align: center; text-shadow: 0 0 1px rgba(0, 0, 0, 0.3);transition: background-color .4s ease-out 0s;}
.komen{width:50%;padding:9px 0;line-height:20px;float:right;border: none;background: #9f9f9f; color: #fff !important;text-align: center; text-shadow: 0 0 1px rgba(0, 0, 0, 0.3);transition: background-color .4s ease-out 0s;}
.posting:hover { background: #666; text-shadow: 0 0 1px #222;}
.komen:hover { background: #666; text-shadow: 0 0 1px #222;}
#comments {display:none}

jangan lupa untuk menyembunyikan komentar pada halaman posting seperti CSS di atas, menggunakan #comments {display:none}

LANGKAH 2 : Tambahkan Kode HTML

Kode HTML sebetulnya bisa diletakan di mana saja. Apabila ingin di area posting, maka tempatkan di bawah <b:includable id='main' var='top'>. Apabila ingin lebih atas silahkan simpan di atas <div id='main-wrapper'>, bahkan di mana saja sesuai keinginan. Kode HTML :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='tab-komen'>
<a class='posting' href='javascript:void(0)' onclick='document.getElementById(&apos;comments&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;postingan&apos;).style.display=&apos;block&apos;'>Posting</a>
<a class='komen' href='javascript:void(0)' onclick='document.getElementById(&apos;comments&apos;).style.display=&apos;block&apos;;document.getElementById(&apos;postingan&apos;).style.display=&apos;none&apos;'>Komentar</a>
</div>
</b:if>

Apabila masih ada kesulitan, silahkan share di kolom komentar.