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"'>6. Cari kode
<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>
</b:includable>Setelah ketemu, sisipkan kode yang berwarna hijau seperti yang terlihat di bawah ini
<b:includable id='comments' var='post'>
</b:includable>7. Simpan/Save Template anda dan lihat hasilnya di Postingan anda.
<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>
"Terima kasih sudah membaca artikel
Tutorial
:
. 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."
Komentar ini telah dihapus oleh pengarang.
BalasHapusKomentar ini telah dihapus oleh pengarang.
BalasHapusKomentar ini telah dihapus oleh pengarang.
Hapus