Cara Membuat Postingan dan Komentar dalam satu Tab Viewer

Pada tutor kali ini, saya akan membahas tentang cara membuat posting dan komentar dalam 1 tab view. Seperti yang dilansir oleh Kang Ismet metode ini dapat mengefisiensikan tempat karena didesain untuk 1 tab viewer. Bagi yang belum tau tab viewer, bisa kalian lihat pada postingan saya sebelumnya, klik disini. Tab viewer banyak digunakan pengungjung untuk menghemat tempat seperti yang ada pada sidebar Blog Gunk-D ini. Saya menggunakan tab viewer untuk memaksimalkan blog saya, agar blog saya tidak tampak terlalu panjang, sehingga dapat menyesuaikan bentuk page yang ada pada halaman awal dan seterusnya. Jika kalian tertarik untuk memasangnya, ikuti tutor berikut :

 

 Tutorial Pemasangan

1. Seperti biasa, login ke akun blogger masing-masing

2. Masuk ke halaman Template, kemudian klik Edit HTML

3. Cari kode berikut

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

atau

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

tambahkan id='postingan' sehingga hasilnya seperti ini 

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

4. Kemudian, kalian tambahkan kode CSS berikut diatas kode ]]></b:skin>

.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. Selanjutnya tambahkan kode HTML. 

Jika kalian ingin meletakkannya diarea posting, tempatkan dibawah kode <b:includable id='main' var='top'>

Jika ingin meletakkannya lebih keatas, tempatkan kodenya diatas kode <div id='main-wrapper'>

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> 

6. Jika sudah, klik Save/Simpan

Kirim komentar kalian jika mengalami kesulitan

Selamat Mencoba!

(sumber : http://blog.kangismet.net/)

Tweet