Horas: Tombol Show/Hide Komentar Part 3

Tidak usah berlama lama, langsung aja lihat cara penerapannya di blog

1. Pertama,pergilah ke Dashboard,lalu Template, kemudian pilih tab Edit HTML.
2. Cari kode seperti dibawah ini. Gunakan tombol Ctrl + F untuk memudahkan pencarian

<div class='post hentry'

3. Setelah ketemu, tambahkan kode ini id='postingan', maka hasilnya akan seperti ini.

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

4. Cari kode </style> dan Copas kode dibawah ini tepat diatas kode </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}

5. Cari kode <b:includable id='main' var='top'> , dan Copas kode dibawah ini jika ingin diletakkan tepat diatas Postingan. Tulisan warna hijau adalah kode yg harus anda tambahkan.

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

6. Cari kode

</b:includable>
<b:includable id='comments' var='post'>

Setelah ketemu, sisipkan kode yang berwarna hijau seperti yang terlihat di bawah ini

</b:includable>
<b:includable id='comments' var='post'
<div class='tab-komen'>
<a class='posting' href='javascript:void(0)' onclick='document.getElementById('comments').style.display='none';document.getElementById('postingan').style.display='block''>Hide Komentar</a>
<a class='komen' href='javascript:void(0)' onclick='document.getElementById('comments').style.display='block';document.getElementById('postingan').style.display='none''>Show Komentar</a>
</div>

7. Simpan/Save Template anda dan lihat hasilnya di Postingan anda.

"Terima kasih sudah membaca artikel Tutorial : Tombol Show/Hide Komentar Part 3. Anda bisa bookmark halaman ini dengan URL https://henry-dunanz.blogspot.com/2014/01/tombol-showhide-komentar-part-3.html. Jangan lupa klik salah satu tombol dibawah ini."

Tombol Show/Hide Komentar Part 3

3 komentar: