tab view komentar
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 :
<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 == &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>
Apabila masih ada kesulitan, silahkan share di kolom komentar.

123 komentar

Walahhhh masih kosong euy,
diborong ahhh pertamaxxx, Premium, solar.... Bungkuss

Balas

Mantap Kang, sangat kreatif....

Balas

sakantenan pom bensina we :D

Balas

ide orang ko sob.. cuma membuatnya lebih simple

Balas

Hebat kang. :)
tutorna lebih simple dan mudah untuk dipahami..

Balas

Jadi berdampingan nya kang siga panganten xixixiixi
Jadi ganjen toel sana toel sini xixixixix

Balas

makasih ya bang hehehe pengen buat yang seperti ini langsung praktek deh

Balas

Kalau Postingnya Berbentuk Readmore Tetap Bisa Ya Kang?

Balas

simpel-lendung tea nya kang :)

Balas

wkwkkwwkkw.... towel towel ah... :)

Balas

bisa.. kalau readmore kan di homepage, ini di area postingan ko..

Balas

wow mantab kang ismet!, ngak jadi PERTAMAX1

Balas

oh gitu ya, jadi tinggal kita atur saja, hm.. ilmu yang cukup aneh bin keren hehehe :)

Balas

kunjungan perdana sob,,,,

Balas

keren ya.. tapi di bawahnya ada garis, . gimana ngilanginnya tuh.

Balas

wah tipsnya bagus Kang :) salam blogwaling !!

Balas

keren kang artikelnnya ngiut lagi yah [ bolehkan? :) ]
- daengrio[dot]com -

Balas

Tutorialnya kembali membuat saya kepengen untuk mengutak atik kembali HTML blog saya Mas.

Balas

Nah ini yang aku tunggu-tunggu :) Makasih kang :)

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 == &quot;false&quot;'>
&lt;/div&gt;&lt;/div&gt;
</b:if>
</b:if>
<b:if cond='data:post.isDateStart'>
&lt;div class=&quot;date-outer&quot;&gt;
</b:if>
<b:if cond='data:post.isDateStart'>
&lt;div class=&quot;date-posts&quot;&gt;
</b:if>
<div class='post-outer'>
<div class='testsaja'>
<input checked='checked' id='s1' name='s' type='radio'/>
<input id='s2' name='s' type='radio'/>
<div class='tabs'>
<label for='s1'>Post</label>
<label for='s2'>Komentar</label>
</div>
<ul class='sections'>
<li><b:include data='post' name='post'/></li>
<li><b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<b:include data='post' name='comment_picker'/>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include data='post' name='comment_picker'/>
</b:if></li>
</ul></div>
</div>
<b:if cond='data:post.includeAd'>
<b:if cond='data:post.isFirstPost'>
<data:defaultAdEnd/>
<b:else/>
<data:adEnd/>
</b:if>
<div class='inline-ad'>
<data:adCode/>
</div>
<data:adStart/>
</b:if>
</b:loop>
<b:if cond='data:numPosts != 0'>
&lt;/div&gt;&lt;/div&gt;
</b:if>
<data:adEnd/>
</div>


Aku biasa naro di bawah kode post-outer , pertanyaanku . . kan mau pake cara yang di atas, nah terus kode ini diapakan?

Balas

dirubah aja ke kode awal sebelum pasang tutorial dari mas wawan, kalau bingung.. tinggal liat kebalikannya

Balas
Komentar ini telah dihapus oleh pengarang.

heheh.. datengnya kurang cepet :)

Balas

aneh bin ajaib bin titan ;)

Balas

ditunggu kunjungan berikutnya

Balas

Kalo di tutorial mas wawan kan saya ganti kode diantara

<div class='post-outer'>
Kode ini diganti ama kode yang dari mas wawan
<b:if cond='data:post.includeAd'>

Berarti kode itu diganti kang?

Balas

kalau disimpan di area postingan, biasanya pengaruh widget, coba hapus kode border pada .main .widget

Balas

silahkan berwksperimen :)

Balas

kembalikan aja ke sebelumnya.. iya gani lagi, tapi kalau mau coba aja.. efeknya gimana :)

Balas

ada-ada aja cara baru diblog kangismet,ijin bookmark aja siapa tau bisa berguna suatu hari nanti,hehehe
jempol dah :-bd buat blog.kangismet.net

Balas

jangan pake jempol kaki ya :D :D

Balas

ngikut blog nya kang ismet! :D

Balas

absen dulu, mau sholat jum'at :)
- seiring, sejaran, seirama, bersama kang ismet! -
- salam damai -
daengrio.com <----

Balas

oplosan banyak kang!
absen sholat jum'at!
daengrio.com <---

Balas

yu... siap2 jum'atan :-d

Balas

Kang, kok jadinya malah seperti ini ? http://mafiasitez.blogspot.com/2013/10/hati-hati-cermin-2-arah.html?showComment=1380859152419#c1442214500287593570 :( Berhasil sih kang, tapi ini kenapa ya?

Balas

sama kaya komentar g plus barengan komentar blogger ya kang :d
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

Balas

nyaeta teu aya damel kang :)

Balas

betul..persis ky gitu ssystem toggle gitu...
ga sob.. saya ga suka autopost.. ko bisa ya?padahal blogger sendiri yang memfasilitasi

Balas

betul kang aneh sesama produk :d tak apalah :d yang penting nulis terus hehehehehe
ni aja jd pake profile blogger auto tp dah ngajuin banding
pantesan semalem ada statistik aneh dr zickbloggerdotcom da beberapa situs lain dan itu url spam di view didashboar view about me yg berarti profile g+ saya

skrng g bs pake komen g+,richsnippet sama share g+ itu aja yg g bs :d

Balas

merugikan tuh.. bisa dituntut tuh gugel :D

Balas

hahaha g tau lah mau lihat dulu ngaruh sama blog apa nggak nya soalnya sayang klo g masuk 10besar trafik turun ;d ckckckck jd g bs ngopi :d

Balas

@yandi : coba tambahkan kode css ini .post-outer {width:982 !important;}
.tab-komen {clear: both;float: left;font-size: 11px;margin-bottom: 0;padding: 0;position: relative;text-align: center;text-transform: uppercase;width: 100%;}
.tab-komen a {width: 50%;}

Balas

jadi lebih rapi lagi ya kang. Ada ruangan khusus gitu hehe...
btw, kang email saya kok blm di balas ya?

Balas

hehhe.. jarang buka email sob :)

Balas

Plus sudah valid HTML5 ya kang :D keren deh

Balas

Di Firefox comment dan postingan nya ada di kanan kang <i rel="image">http://3.bp.blogspot.com/-JPe0bb2LC9s/Uk5tunGv2cI/AAAAAAAACp0/W4o84lv4WCQ/s1600/gakcenter.jpg </i>

Balas

waduh kok gak keluar gambarnya..?@$%

Balas

Ternyata berdampingan jadi keren dan unik ini...

Balas

coba liat di blog ini kang : http://celco-blog.blogspot.com
kok komentar nya gk ke tab ?

Balas

wah wah wah boljug ni, Kang.. apa dg begini bisa mempercepat loading halaman post, Kang?

Balas

hehhe... tergantung selera sob

Balas

langkah 1 nya udah blom? saya ga liat ada id='postingan'

Balas

bisa juga sih kang.. soalnya komen di hidden.. kamana wae atuh suhu teh? :)

Balas

hehhe.. salah nulis tuh.. udah bener sekarang sob :)

Balas

@Mas Fatriawan : Sudah saya pasang kode itu . . saya kan lebih suka pake border .. nah pas pake border kok malah yang tab posting agak ke atas , tab komen agak ke bawah :/

Balas

coba tambahkan setelah kode html tab, kode <div class='clear'/>

Balas

Mas Fatriawan atau Kang Ismet? Apa email kalian . . saya mau Kirimkan Kode Template saya . . nanti tolong di editin ya? :(

Balas

Stress banget saya dari tadi gak bisa mulu :(

Balas

ini suka itu suka akhirnya berantakan .....selamat berjuang...!!!

Balas

absen dulu kang :)
sambil liatin demonnya :D
di demonnya juga ane di duluin pertamax! sama kang ismet! :v
- Salam Blogger! -
daengrio.com <----

Balas

coba kirim ke kangismet@gmail.com

Balas

Sumpah mas, pusing banget udah berhari hari nyelesain ini gak berhasil :(

Balas

kalau dikolaborasikan dengan Ajax bisa gak...?

Balas

hmm...
lma g buka blog..kettinggalan bnyak info..

Balas

Ikut menyimak nya Kang,. Kreasina selalu aya wae....
Sukses selalu Kang Ismet.

Balas

sukses salalu kang, semoga di berikan kesehatan :)
#salam sukses
daengrio.com <---

Balas

Kang? Lihat ini :) http://mafiasitez.blogspot.com/2013/10/masalah-menghadapi-tab-post-dan-comments.html

Balas

ahahah suhu naun, Kang.. suhu derajat celsius? :D Aya wae, Kang..mung pabeulit itu-ieu sapertos biasa na :P

btw, ajeb Kang..udah dicobain di blog percobaan dan bisa. Tinggal satu ganjalan lagi nih, kalau dihidden gitu..isi komen masih keindeks gak sama mesin pencari ya?
Mudah2an masih,.. aamiiiin..

Balas

masih kang... google tetp ngeindeks element hidden

Balas

kang bisa minta tolong ^_^
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 -

Balas

pelajari aja tentang tag title sob.. lebih baik sobat yang jawab lho :

Selengkapnya : [url=http://moz.com/learn/seo/title-tag]Learn about Title Tag[/url]

Balas

hehe.. nuhun kang Marlon

Balas

bener tuh, lebih baik admin blog itu sendiri yang menjawab :)

Balas

ok kang makasih :)
#salam damai!

Balas

untungnnya saya tahu bahasa jerman :v

Balas

mana lu mam, bantu dong

Balas

akhirnya udah ane jawab dengan bijak :D
ikut meramaikan yah kang! :D

Balas

Makasih kang udah berhasil ,

Balas

Keren nih Kang !!
Gk bikin ribet pada saat comment.

Balas

makin gampang kalau mau komen tapi nggak mau baca artikelnya dulu hehe...tinggal klik aja tombol sebelahnya :D

Balas

Bener banget .. jadi lebih simpel :D

Balas

Terlambat hadir kang ...
Mudik hula hehe

Balas

Nostalgia masa berpacaran hoe ..hoe

Balas

mantep kang, dicoba berhasil nih, thanks tutornya kang =D

Balas

absen malam dulu kang :)
di tunggu postingan langkahnya :D
Daengrio.com <---
- Blogwalking Yuk! -

Balas

wew postingannya keren kang!
ane mau terapin dulu di blog lain, baru ane bereksperimen dulu ^_^
Daengrio.com <---
- Blogwalking Yuk! -

Balas

yang ini betul-betul keren dah kang saya akan mencoba mempraktekannya :)

Balas

wew di tunggu artikel selanjutnya kang!
#salam damai!
Daengrio.com <---- artikel terbaru!

Balas

wew silahkan gan, ane udah praktekin :)
- salam damai -
Daengrio.com <---- artikel terbaru!

Balas

Alhamdulillah, siap dicoba sambil untap-intip postingan terbarunya soal onclick event, Kang.. hatur nuhun :)

Balas

multi fungsi tuh JS nya, bisa dipakai buat manggil apa saja. haha

Balas

Kang setelah saya coba kok Title post nya ilang yah ??
mohon bantuannya :D

Balas

saya liat, udah bisa ya sob :-d

Balas

manggi tuyul juga bisa.. wkwkwkkwkwkw

Balas

Satu masalah lagi, Kang.. punten..
Postingan saya kan cenderung panjang-panjang..nah..saya coba pasang HTML-nya di (atas dan) di bawah postingan.. begitu klik tombol komentar.. yang tampak space kosong..karena jumlah komen masih nol atau baru 5 biji..

ada kemungkinan solusinya, Kang?

Balas

ada contohnya ga kang? saya coba disini http://testerajacoy.blogspot.com/2013/10/demo-posting-dan-komentar-dengan-tab.html larinya ke id soalnya

Balas

oh.. ada Kang.. ini contohnya. Nuhun pisan :)
http://muxsampel.blogspot.com/2011/02/sea-stet-iudico-cetero-cu-ut-mei-ferri.html

Balas

wkwkkw.. hanya yang diundang eung... :)

Balas

halah tobaat.. ampun Kang.. mangga dicobi deui.. :D

Balas

sapamendak abdi mah.. seharusnya loncat ke id, karena link membuat hash otomatis (biasanya karena addthis script) jadi teu loncat kana id kang, coba sementara copot dulu widget addthis nya

Balas

wew , disaya kok gak ada yah Kang , waktu dipostungan titlenya ilang apa kegusur sama tab Postingnya ??

Balas

Kang, coba dilihat pada blog saya kok komentarnya masih tetap kebawah.
kalau Tabnya sudah berhasil cuma komentarnya ada di bawah bukan dalam tab
mohon bantuannya

Balas

mau periksa, males nonaktifin JS di browser... soalnya di blognta diprotect :D

Balas

BlackBerry 8230 Rp. 500.000
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
BlackBerry Pearl 3G 9100 Rp. 700.000
BlackBerry Pearl 3G 9105 Rp. 700.000
BlackBerry Pearl 8100 Rp. 500.000
BlackBerry Pearl 8120 Rp. 500.000
BlackBerry Pearl 8130 Rp. 500.000
BlackBerry Pearl Flip 8220 Rp. 600.000
BlackBerry Pearl Flip 8230 Rp. 500.000
BlackBerry PlayBook Rp. 1,200.000
BlackBerry PlayBook 64GB Rp. 1,200.000
BlackBerry PlayBook-32GB Rp. 1,200.000
BlackBerry porsche design p'9981 Rp. 4,8250.000
BlackBerry porsche design p'9981 Rp. 4,4500.000
BlackBerry Storm 9500 Rp. 700.000
BlackBerry Storm2 9520 Rp. 700.000
BlackBerry Storm2 9530 Rp. 600.000
BlackBerry Storm2 9550Rp. 650.000
BlackBerry Style 9670 Rp. 650.000
BlackBerry Torch 9800 Rp. 1,200.000
BlackBerry Torch 9810 Rp. 1,350.000
BlackBerry Torch 9850 Rp. 1,100.000
BlackBerry Torch 9860 (Monza) Rp. 1,400.000
BlackBerry Tour 9630 Rp. 650.000

Balas

DISTRIBUTOR LENSA CANON Bergaransi
Daftar harga Promo online Lensa Canon datascrip
CANON EF 100-400mm f/4.5-5.6L IS USM Rp.7.150.000,-
CANON EF 100mm f/2 USM Rp.1.900.000,-
CANON EF 100mm f/2.8 Macro USM Rp.2.350.000,-
CANON EF 100mm f/2.8L Macro IS USM Rp.3.700.000,-
CANON EF 135mm f/2.8 SoftFocus Rp.1.900.000,-
CANON EF 135mm f/2L USM Rp.3.750.000,-
CANON EF 14mm f/2.8L II USM Rp.9.500.000,-
CANON EF 15mm f/2.8 Fisheye Rp.4.100.000,-
CANON EF 16-35mm f/2.8L II USM Rp.6.800.000,-
CANON EF 17-40mm f/4L USM Rp.3.300.000,-
CANON EF 180mm f/3.5L Macro USM Rp.6.200.000,-
CANON EF 200mm f/2.8L II USM Rp.3.300.000,-
CANON EF 20mm f/2.8 USM Rp.2.050.000,-
CANON EF 24-105mm f/4L IS USM Rp.4.900.000,-
CANON EF 24-70mm f/2.8L USM Rp.6.100.000,-
CANON EF 24mm f/1.4L II USM Rp.7.400.000,-
CANON EF 24mm f/2.8 Rp.1.550.000,-
CANON EF 28-135mm f/3.5-5.6 IS USM Rp.2.050.000,-
CANON EF 28-300mm f/3.5-5.6L IS USM Rp.11.200.000,-
CANON EF 28mm f/1.8 USM Rp.2.050.000,-
CANON EF 35mm f/2 Rp.1.250.000,-
CANON EF 400mm f/5.6L USM Rp.5.150.000,-
CANON EF 50mm f/1.2L USM Rp.6.800.000,-
CANON EF 50mm f/1.4 USM Rp.1.600.000,-
CANON EF 50mm f/2.5 Compact Macro RP.1.400.000,-
CANON EF 70-200mm f/2.8L IS II USM Rp.9.700.000,-
CANON EF 70-200mm f/2.8L USM Rp.5.550.000,-
CANON EF 70-200mm f/4L IS USM Rp.5.300.000,-
CANON EF 70-200mm f/4L USM Rp.3.250.000,-
Bagi yang serius order sebelum kehabisan,untuk harga promo terbatas
TOKO PLANET DIGITALCANON melayani pengiriman seluruh Indonesia.
Melalui kantor TIKI/JNE.CARA Pesan online
TLP.021-4067-5777
HP.085-228-567-888
PIN BB:2A90DC9D Belanja di toko kami transaksi aman no tipu tipu.
Alamat TOKO ITC CEMPAKA MAS JLN LETJEN SOEPRAPTO NO 28 JAKARTA PUSAT
Promo discond terbatas
DISTRIBUTOR TERPERCAYA.
http://canon-indonesia.jimdo.com/

Balas

Mas, saya punya tab komennya berhasil muncul. cuman komen yg dibawah postingan masih nongol dan tab komennya gak bisa di-klik. bisa minta solusinya, mas?
ini blogny. http://imtaq-dan-iptek.blogspot.com

Balas

coba betulkan dulu penulisan id='postingan' baca lagi di atas cara penempatannya

Balas
Komentar ini telah dihapus oleh pengarang.

kang di blog saya ada keluar tulisan seperti ini : Kesalahan saat mengurai XML, baris 1838, kolom 27: Element type "div" must be followed by either attribute specifications, ">" or "/>".

tlong bantu donk

Balas

ntar dicoba deh..hehe.... oia itu kang, blog Maz-WaOne udh kehapus google kyknya.... jd dead link gt.

Balas

mantap mas tutorialnya, mau tanya bisa pasang jadi 3 tab... terus comentnya bisa diganti ga gan kayak diisi widget gitu mas... thanks

Balas

sama aja sob.. tinggal buat containernya, terus buat pemicu jquerynya

Balas

Terimakasih gan atas tutorianya,. sangat membantu sekali buat saya,. bila ada kesempatan mampir juga ke Blog saya ini www.jawacyber.com,. Jawa Cyber

Balas

Poskan Komentar


×
Chat