Membuat Kolom Komentar Offline - Beberapa hari ini saya mempunyai kesibukan yang mengakibatkan saya jarang online dan tidak bisa membalas komentar sahabat blogger. Oleh karena itu, saya menon-aktifkan kolom komentar. Saya berfikir dari pada banyak komentar yang tidak terbalas, lebih baik sayanon aktifkan saja kolom komentar.komentar offline

Rupanya ada sahabat yang tertarik dengan cara saya ini, dan menghubungi saya via email menanyakan bagaimana cara membuat kotak komentar menjadi offline. Bagi sahabat yang mengunjungi blog ini beberapa hari kebelakang, tentu faham bagaimana bentuknya. Bagi yang belum faham, silahkan kunjungi DEMO.

komentar offline

Sebenarnya ini hanya permainan HTML saja. Bagi sobat yang sudah faham, akan lebih mudah mencerna dan memodifikasi tampilan dengan mengedit CSSnya. Mungkin ada cara lain untuk membuat kolom komentar Offline, yang akan saya bagikan adalah versi saya sendiri.

Langkah 1 : Simpan Kode CSS

Simpan kode CSS ini di atas </b:skin>
/* Offline Mode
----------------------------------------------- */
#offline-mode{
background:#dfdede url(http://2.bp.blogspot.com/-R5Ku6QE3eJA/UcB0jk-CZwI/AAAAAAAAEeg/WYWE1iVssOo/s1600/offline-mode.png)no-repeat 3% 50%;padding:20px 20px 20px 175px;border:1px solid #c9c9c9;margin-bottom:10px}
#offline-mode h2{
font-size:220%;
text-transform:uppercase;
color:#fff;
text-shadow: -1px -1px  3px rgba(0,0,0,0.3);
}
#offline-mode p{
font-size: 12px;
color:#888;
line-height:1.8em;
margin-top:-15px;
}
silahkan edit yang diperlukan.

Langkah 2 : Simpan Kode HTML

Untuk menyimpan kode HTML, sobat cari kode <b:includable id='threaded-comment-form' var='post'> kemudian expand (klik panah sebelahnya) maka akan muncul kode seperti ini :
<div class='comment-form'>
...kode panjang....
</div>
tambahkan kode ini sesudahnya atau sebelum </b:includable>
<div id='offline-mode'>
<h2>
Offline mode</h2>
<p>Mohon maaf, form komentar sementara dinon-aktifkan karena ada sesuatu dan lain hal yang menyebabkan saya tidak bisa membalas komentar sobat. Silahkan kunjungi beberapa saat lagi apabila sobat ingin berkomentar .</p>
</div>
setelah itu, nonaktifkan sementara kolom komentar dengan menambahkan kode <!-- dan --> pada kode sebelumnya. Maka hasil keseluruhan menjadi seperti ini :
<!-- <div class='comment-form'>
..............
  </div>-->
 <div id='offline-mode'>
<h2>
Offline mode</h2>
<p>Mohon maaf, form komentar sementara dinon-aktifkan karena ada sesuatu dan lain hal yang menyebabkan saya tidak bisa membalas komentar sobat. Silahkan kunjungi beberapa saat lagi apabila sobat ingin berkomentar .</p>
</div>
Simpan Template.

Apabila ingin mengaktifkan kembali kolom komentar, pindahkan tanda <!-- dan --> pada HTML Offline-Mode, menjadi seperti ini :
<!--<div id='offline-mode'>
<h2>
Offline mode</h2>
<p>Mohon maaf, form komentar sementara dinon-aktifkan karena ada sesuatu dan lain hal yang menyebabkan saya tidak bisa membalas komentar sobat. Silahkan kunjungi beberapa saat lagi apabila sobat ingin berkomentar .</p>
</div>-->
Simpan kembali template....

Nah, itulah cara saya mengaktifkan dan menonaktifkan kolom komentar. Mengerti? atau malah puyeng? :)

118 komentar

kamana wae kang hehe
petromax jigana
benar-benar keren kang sumpah ... mantap lah pokonya

Balas

tapa kang :) heuheu leres patromax kabagean

Balas

Patut di coba yah kang, nanti saya terapkan di blog super jelek nan najis bin kotor saya.... hehehehe

Balas

oh.. ternyata bisa dimodif jadi onlinr mode to kolom komenya? baru tau..

nice tutorial

Balas

bakat ku rewas kang
jadi weh semangat koment teh ... hehhe

Balas

kang mau nanya nie, cara menampilkan thumbnails gambar di tema accentbox seperti di kangismet.net bagaimana ya, soalnya aku pakai tema tersebut gambar thumnails seperti di readmore dan related post tidak muncul , sebelumnya terima kasih kang.

Balas

wah hebat si akang ..top markotop !!
tapi hebat mana yeuh sareng ieu mangga kadieu hehe

Balas

oo kalo pasang ini, cara penggunaannya kerja dua kali ya

Balas

Ternyata gitu ... kirain kenapa di non aktifin komentarnya ... :D Sibuk mudik ya kang??

Balas

merendahnya kebangetan nih :D

Balas

ya di akal2in aja sob ;)

Balas

suatu saat pasti butuh nih yang beginian,,,,,
makasih kang di coba dulu ya,,,,

Balas

yang WP ya.... harus bongkar dulu nih lupa :)

Balas

heuheu... rajin teuing si akang mah, sagala ditalungtik :D

Balas

dua kali gimana? cuma pas ngaktifin atau nggaknya aja sih

Balas

ga mudik kok... saya di rumah aja ga kemana2... cuman lagi ada kesibukan aja :)

Balas

saya baru tahu ada cara begini, makasih kang infonya bagusss, selamat lebaran minal aidin walfaidin.

Balas

Izin Pakek + Post Ulang Kang

Balas

sama2... lebarannya masih 3 hari lagi..

Balas

itu cuman pindahin tanda ..
sy kira itu kerja 2 kali, tapi nda tau juga deh brapa kali.. hehe

Balas

eh kode tanda nya yg diatas mana nih?? hilang?

Balas

harus di konversi dulu tandanya :)

Balas

oo begitu kah,, hehe sy ngga baca pesan formulir dibawahnya

Balas

mantap tutornya mas >.<
kapan kapan dicoba , sekarang bookmark aja dulu :D

http://arya-aditya.com
#BlogWalking

Balas

ntar saya praktekin deh, oh ya mas, gemana sih cara buat komentar bisa disisipkan kode, catatan dan gambar oleh pengunjung
maksudnya kaya gini
• Untuk menyisipkan kode panjang, gunakan tag ... KODE ...
• Untuk menyisipkan catatan, gunakan [catatan].. TEKS ...[/catatan]
• Untuk menyisipkan gambar, gunakan [img]URL GAMBAR[/img]
Sebelumnya Trims

Balas

akhirnya di share juga caranya...
thanks kang....

Balas

Ya...seperti mas Abdul heheehe akhirnya dishare juga hehehehe...
Saya simpen triknya kang...siapa tahu suatu saat butuh trik ini...hatur nuhun...

Balas

kiranya kemarin dukun santet kabur kemane, eh bukan dukun tutorial hehehe... siip kang ismet ^_^

Balas

mampir dulu ahh, nunggu THR hahahay..

Balas

Udahlama gakesini wkwk, keren jg sih kotak komentar bisa digituin :D

Balas

gan mau tanya ,saya heran sama template agan kok tiap waktu kadang muncul kadang enggak bacto top sama link credit nya,,,,

:D sekalian mau nanya gimana cara buat widget Label kayak agan ? bagi kodenya dong...

Balas

Dishare juga :D
Terimakasih Kang..

Balas

Mantap kang, pake ccs lagi, Ijin coba ya

Balas

cari dimana? kata kuncinya apa mas?

Balas

Yahhh.... Terlambat deh jadi yang pertamax... :D
Baru bisa login lagi nih di dashbor blog saya Kang, makanya baru bisa berkunjung dan memberi tanggapan untuk informasi di atas.
Kalau saya biasanya untuk tidak menerima komentar dari pengunjung blog dalam beberapa hari, biasanya form komentarnya saya nonaktifkan atau sembunyikan lewat pengaturan blog tapi itupun semua komentar2 yg udah masuk ikutan sembunyi juga. Kalau mau nonaktifkan komentar pada masing2 postingannya kan repot juga Kang... :D
Mumpung ada tips baru, tidak ada salahnya untuk dipraktekkan.

Sekalian mau nanya Kang, gmn cara pasang tombol hide and show pada bagian form komentarnya aja..? Makasih sebelum dan sesudahnya

Balas

Aiiii.... gagal deh jadi yang pertamax untuk mencicipi informasi di atas... :D

Balas

Biasanya yang merendah seperti kata2 di atas, orangnya udah master apalagi dalam hal desain blog... :D

Balas

Bookmark Kang..sukses selalu..ditunggu tips lainnya :v

Balas

Ohaha :) bener juga ya, selama ini saya memakai caranya kang Taufik, dan itu sedikit ribet karena feed pos pu akan berhenti, tapi sepertinya cara ini lebih efektif :)

Balas

Akhirnya keluar juga ....jadi kepikiran bisa ngak ya hanya untuk Artikel tertentu

Balas

wah akhirnya di share caranya :) makasih kang,ijin save dulu :)

o iya kang, yang komentar ada bordernya jika sesudah komen(seperti di dte), itu namanya apa ya kang? saya udah coba yang itu tapi masih ngga bisa ._.
mohon bantuan ya kang ._.

Balas

hehe kirain mudik mas ... :)

Balas

sangat2 bermanfaat kang , apalagi menjelang lebaran, jadi bisa langsung di praktek kan ini,

izi comot kang

Balas

Bookmark dulu, boleh juga nih kalau kolom komentarnya jadi offline gini :D

Balas

<script type='text/javascript'>
//<![CDATA[
$('#comments p, #comments dd').each(function() {
// Singkirkan semua tag <br> di sebelah tag <b rel^="h">
// (semua elemen <b> dengan nilai atrubut rel yang diawali dengan "h")
$('b[rel^="h"]', this).next('br').remove();
// Menyisipkan tag <pre>
$('i[rel="pre"]', this).replaceWith(function() {
return $('<pre></pre>').append($(this).contents());
});
// Menyisipkan gambar
$('i[rel="image"]', this).replaceWith(function() {
return $('<img src="" />').attr('src', $(this).text());
});
// Menyisipkan tag <h3>
$('b[rel="h3"]', this).replaceWith(function() {
return $('<h3></h3>').append($(this).contents());
});
// Menyisipkan quota/catatan
$('b[rel="quote"]', this).replaceWith(function() {
return $('<blockquote></blockquote>').append($(this).contents());
});
// Menyisipkan tag <code>
$('i[rel="code"]', this).contents().unwrap().wrap('<code />');
});
//]]>
</script>

Balas

sama2 sob... padahal udah faham ya ;)

Balas

takut dicambuk api neraka kang kalau nyembunyiin ilmu :)

Balas

xixixiix..ganti dong blog mbah dukun

Balas

wkwkwkwkwk... apa ya THR nya?

Balas

pasti bisa ko... diapa2in juga bisa :)

Balas

loading JSnya lambat kali sob... widget label berjejer maksudnya?

Balas

thanks sob.. silahkan dicicipi

Balas

semoga jadi alternatif sob.. kayaknya harus terpisah nih tutorialnya :)

Balas

bener sob... sedikit njlimet menurut saya juga

Balas

bisa aja sob... pake tag kondisional...

Balas

coba tambah CSS ini, edit aja yang perlu
.comment .comment-block:target{border:1px solid yellow}
.comments .comment-thread.inline-thread .comment .comment-block:target{border:1px solid yellow}

Balas

iya sob.... selamet ngacak2 template and selamet lebaran aja ya :)

Balas

yah, diaktifkan aja jarang yg komentar di blog saya kang, apalagi kalo di non aktifkan, hehehe

Balas

mantap kang,ini pasti sangat dibutuhkan sementara izin simpen dulu ya kang...

Balas

silahkan sob.. awas lupa naronya :)

Balas

bagi2 THR aja biar rame :)

Balas

waduch sayang saja agak sedikit telat nie terima kasih kang kapan kapan akan saya terapkan... :-d

Balas

Mantaaapp.. mayan yeuh jang mainteneeeenn kaang :D .. wkwkwk, ditampi tutorial na :D #kangrian

Balas

Komentar juga bisa dibuat offline juga kang...terima kasih atas berbagi ilmunya ini.
Selalu mendapatkan banyak ilmu kalau bersilaturahmi di tempat Kang Ismet ini

Balas

Thanks tutorialnya kang, mungkin besok kalau blog saya sudah saya tinggal lama.

Balas

cara membuat widget label seperti blog agan gimana??? sama kok link credit,back to top kadang muncul kadang enggak solusi nya dong,kalau bisa jarin biar gk ilang lagi.
[img]https://s3.amazonaws.com/diigo/thumbnail_550/6964250_174735993_11056208.jpg?AWSAccessKeyId=0R7FMW7AXRVCYMAPTPR2&Expires=1375668398&Signature=o6jOpZRZggKp9pzm8zx2r%2F6fM8s%3D[/img]

Balas

Masih gak ngerti kang, di tunggu aja deh tutorialnya :)

Balas

biar lambat asal selamat :)

Balas

aya tukang ternak yeuh :)

Balas

terimakasih sob... semoga bermanfaat

Balas

Untuk back to top JSnya sudah saya perbaiki... untuk widget label saya liat udah bisa di blognya, tinggal hapus kode ini :
.footer li a:before {
content: "\f017";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
color: #575757;
font-size: 13px;
margin-right:17px;
position: absolute;
left:0;
}

Balas

keren teuing kang, hahaha, tapi kang bade naros yeuh lamun bade nyieun tombol back to top tapi ulah make gambar, tapi make button, tapi oge aya efekan, eta kumaha kang ?
tingali button adbi kang, tah eta lamun erek make efek back to topna kumahanya ?
http://yoga-tc.blogspot.com/2013/08/cara-membuat-halaman-posting-dan.html#comment-form

Balas

maksudna pake efek smooth scrollnya? coba ganti :
<a class='tombolkecil' href='#'>Back To Top</a>
ganti sama ini :
<a style='display:scroll' class='tombolkecil' href='javascript:void(0);' onclick='jQuery(&apos;html, body&apos;).animate({scrollTop:0}, &apos;slow&apos;);'>Back To Top</a>

Balas

Wa.. keren mas.. terimakasih infonya..
visit back ya mas http://www.center60.com/

Balas

tadinya saya sempat bertanya-tanya
"non aktifkan komentar ini gimana sih cara nya " ehh ternyata langsung di bahas di blog kang ismet.
kang saya mau tanya donk, kira kira kang ismet bisa gk yah buatkan saya template yang cocok untuk blog saya, yang jelas saya pingin punya header mirip kang ismet, biasa nya kang ismet pasang tarif berapa untuk pembuatan template ????

Balas

waduh... saya masih banyak kesibukan sob, mending gini deh.. pengennya kaya gimana? nanti saya editin.. masalah harga gampang lah

Balas

kalau tempat meletakkan kodenya saya udah paham,, tapi saya ga pernah kepikiran dengan kode <!-- dan -->

Balas

hehehe.. padahal udah tau ya.. itu salah satu cara menon-aktifkan kode HTML :)

Balas

terus tambah CSS nya untuk mempercantik tampilannya. :) atau langsung aja ke sini sma bung Abdul http://mdf-blog.blogspot.com/2012/12/memasukan-item-pada-koemntar-video.html

Balas

knpa kang CSS aja, JSnya gk ?. :)

Balas

kalau cuma kasih border kan ga usah pake JS sob... :)

Balas

saya kirain efek smooth scrolling. :) hehehe

Balas

Keren kang, langsung praktek aja nih :D

Balas

haha padahal saya nonaktifkan script 00T pake kode itu...
oon kalai saya ini...

Balas

wah mantap nih tutorial, nanti dah kalau lewat idul fitri baru mau coba. sekarang mohon maaf lahir bathin dulu, semoga ibadahnya diterima oleh Allah SWT.

Balas

sekalian izin untuk dishare diblog saya ya kang...

Balas

owh gini toh cara nya, tinggal tambahin css sama kode html komentar nya dibuat dalam tanda komentar. coba terapin ah, berhubung ga ada waktu lg buat ngeblog karna waktu tersita untuk kerja offline. suwun kang tips nya :D

Balas

kalo mau online tinggal hapus kode htmlnya aja ya kang :)

Balas

daripada hapus tambah, mending pindahin kode <!-- dan -->

Balas

mantep kang tutorialna :D , matur nuhun nya :)
salam kenal Yazid Zidan hehehe

Balas

saya pingin punya header, sidebar, floating mirip blog akang.
menu, loading, ( sebenar nya sih hampir bisa di bilang 80% mirip blog akang :D )

tapi klo akang bisa, akang bisa gk bikin blog saya seperti konsep www.AndrieWongso.com

sekalian klo bisa, minta kontak pribadi akang ismet :)

Balas

hehe.. keren kang, pengen nyoba sih, tapi lagi gk mood buat oprek template

Balas

mau nyoba tapi blog saya tidak banyak komentatornya,

Balas

ga apa2 ko klo skdar nyoba :)

Balas

Hahahaha.. Kalo dipraktekin terus kapan orang mau komentar donk.. Lha wong form komentarnya ditutup. Hahaha. Ngaco.

Balas

kang blognya bayak malware

Balas

dimana ya? saya cek di sini Clean http://sitecheck.sucuri.net/results/blog.kangismet.net

Balas
Komentar ini telah dihapus oleh pengarang.

Ilmu berharga lagi buat saya nih Kang Ismet
Ijin simpen scriptnya buat di praktekan di blog saya
Terima kasih

Balas

tutorialnya bagus jangan lupa kujungin balik yaw|

http://tutorialimparare.blogspot.com/

Balas

artikel yg bermanfaat
trims

Balas

Poskan Komentar


×
Chat