Udah Lama Nih Saya Tidak Share nah share kali ini saya akan memberikan tutorial tentang "Cara Membuat Posting dan Komentar dalam Tab View" tutorial ini saya ambil dari blog kang ismet nah oke langsung aja oke cekidot
LANGKAH 1 :
Temukan kode yang awalannya seperti ini :
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 == "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>
Nah Itu dia Tutorialnya Semoga Bermanfaat....
Caranya sangat oke gan, tetapi apakah ini masih menambah pageview blog atau tidak ??
ReplyDeletemenarik ini sob, saya jajal dlu ya..
ReplyDeletesoalny prnah jg lihat posting dan komentar dalam tab yg berbeda..
thanks infony..
-keep blogging-
#blogwalking
wah mantap sob izin nyoba dan salam kenal ^_^
ReplyDeleteoh iya minta dong templatenya, bisa dikirim ke asl4m.21@gmail.com
ditunggu yah sob ^_^