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 :
Sobat bisa menggunakan tutorial Maz-WaOne, atau tutorial ini sebagai alternatif
LANGKAH 1 :
Temukan kode yang awalannya seperti ini :
LANGKAH 2 : Tambahkan CSS untuk Tab
Untuk CSS Tab, silahkan dimodifikasi sendiri, akan tetapi untuk mempermudah tetap gunakan
LANGKAH 2 : Tambahkan Kode HTML
Kode HTML sebetulnya bisa diletakan di mana saja. Apabila ingin di area posting, maka tempatkan di bawah
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 :
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 == "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>
Apabila masih ada kesulitan, silahkan share di kolom komentar.
122 komentar
2. Tinggalkan komentar sesuai topik tulisan
3. Apabila ada pertanyaan diluar artikel silahkan kunjungi Ruang Obrolan.
4. Centang Beri tahu saya untuk mendapatkan notifikasi via Email ketika ada balasan
5. Untuk menghapus komentar, geser kursor ke sebelah kanan komentar Anda.
image quote pre code
tlong bantu donk
ini blogny. http://imtaq-dan-iptek.blogspot.com
BlackBerry 8330 Rp. 500.000
BlackBerry 8700 Rp. 500.000
BlackBerry 8830 World Edition Rp. 500.000
BlackBerry 9330 kepler Rp. 1.100.000
BlackBerry Bold 9000 Rp. 1.100.000
BlackBerry Bold 965 Rp. 900.000
BlackBerry Bold 9700 (Onyx) Rp. 700.000
BlackBerry Bold 9780 (Onyx II) Rp. 800.000
BlackBerry Bold 9790 (Bellagio) Rp. 1,100.000
BlackBerry Bold Touch 9900 (Dakota) Rp. 1,500.000
BlackBerry Bold Touch 9930 (Montana) Rp. 1,200.000
BlackBerry Curve 3G 9300 (Kepler) Rp. 700.000
BlackBerry Curve 3G 9330 Rp. 700.000
BlackBerry Curve 8310 Rp. 550.000
BlackBerry Curve 8320 Rp. 600.000
BlackBerry Curve 8520 (Gemini) Rp. 500.000
BlackBerry Curve 8530 Rp. 550.000
BlackBerry Curve 8900 (Javelin) Rp. 700.000
BlackBerry Curve 9220 (Davis) Rp. 650.000
BlackBerry Curve 9320 (Armstrong) Rp. 700.000
BlackBerry curve 9330 cdma-berrindo Rp. 800.000
BlackBerry Curve 9350 Rp. 800.000
BlackBerry Curve 9360 (Apollo) Rp. 950.000
BlackBerry Curve 9370 Rp. 800.000
BlackBerry Curve 9380 (Orlando) Rp. 900.000
Bl…
kalau Tabnya sudah berhasil cuma komentarnya ada di bawah bukan dalam tab
mohon bantuannya
mohon bantuannya :D
- salam damai -
Daengrio.com <---- artikel terbaru!
di tunggu postingan langkahnya :D
Daengrio.com <---
- Blogwalking Yuk! -
Mudik hula hehe
Gk bikin ribet pada saat comment.
#salam sukses
daengrio.com <---
ada orang yang bertanya di blog ane
http://www.daengrio.com/2013/10/cara-membuat-blog-seo-100-persen-di.html?showComment=1380909242939#c7550171151109296297
bisa di bantu ngejawab, soal tag title :) ane kurang paham tentang ntu :D
- terimakasih sebelumnya -
Sukses selalu Kang Ismet.
lma g buka blog..kettinggalan bnyak info..
sambil liatin demonnya :D
di demonnya juga ane di duluin pertamax! sama kang ismet! :v
- Salam Blogger! -
daengrio.com <----
kok komentar nya gk ke tab ?
btw, kang email saya kok blm di balas ya?
mantaf kang dah ane coba cara diatas jalan 100% g da kesalahan hehehehe
btw kang auto post g ke google plus hihihihihi
ngeri dianggap spam tuh
profilku lg di tangguhkan gara" auto post ke g plus
ga sob.. saya ga suka autopost.. ko bisa ya?padahal blogger sendiri yang memfasilitasi
- seiring, sejaran, seirama, bersama kang ismet! -
- salam damai -
daengrio.com <----
jempol dah :-bd buat blog.kangismet.net
btw saya mau nanya , kan kode aku kaya gini :
<!-- posts -->
<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
<data:defaultAdStart/>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.isDateStart'>
<b:if cond='data:post.isFirstPost == "false"'>
</div></div>
</b:if>
</b:if>
<b:if cond='data:post.isDateStart'>
<div class="date-outer">
</b:if>
<b:if cond='data:post.isDateStart'>
<div class="date-posts">
</b:if>
<div class='post-outer'>
<div class='testsaja'>
<input checked='checked' id='s1…
- daengrio[dot]com -
Jadi ganjen toel sana toel sini xixixixix
tutorna lebih simple dan mudah untuk dipahami..
diborong ahhh pertamaxxx, Premium, solar.... Bungkuss