Kembali lagi menulis setelah sekian
lama bersemedi. Kali ini AnakGmBlog akan mengawali artikel terbaru
di Blog ini dengan tips dan trik jQuery sederhana. Sebenarnya sudah
banyak para Blogger yang membahas hal ini, namun sebagian besar
menggunakan form komentar dari pihak ketiga seperti DisqUs atau IntenseDebate.
Sedangkan form bawaan Blogger dinonaktifkan hal tersebut dengan
beberapa alasan diantaranya form komentar bawaan Blogger tidak valid
XHTML dan menggunakan metode iframe sehingga kurang fleksibel dalam
memodifikasi tampilannya. Terlepas dari alasan-alasan tersebut, AnakGmBlog tetap akan membahas cara menyembunyikan dan menampilkan isi
komentar dan form komentar bawaan Blogger dengan satu tombol yang
terekam melalui jQuery Cookie.
jQuery Cookie digunakan untuk merekam tingkah laku pengunjung blog
terhadap tombol show/hide comment. Ketika pengunjung me-load halaman
pertama kalinya dan cookie browser kosong (null) maka isi komentar dan
kotak komentar akan disembunyikan, sebuah tombol "Show" akan
ditampilkan.
Ketika
tombol "Show" ditampilkan maka isi komentar dan form komentar akan
ditampilkan, sebuah tombol "Hide" akan ditampilkan. Pada saat pengunjung
meng-klik tombol "Show" maka browser akan menyimpan cookie, sehingga
ketika pengunjung berulang-ulang kali berpindah halaman atau bahkan
keluar dari browser dan kemudian kembali lagi mengunjungi blog maka isi
komentar dan form komentar akan tetap terbuka. Namun ketika pengunjung
mengklik tombol "Hide" maka isi komentar dan form komentar akan
disembunyikan dan cookie pada browser akan dihapus. Hal ini karena
jQuery Cookie merekam dan menyimpan tingkah laku pengunjung terhadap
tombol "Show Hide Comment". Cara ini cocok bagi Blogger yang menggunakan
metode Captcha untuk mengurangi spam pada komentar.
Show Hide Comment FormKlik disini demo Show Hide Comment Form
Menambahkan Tombol Tampilkan Sembunyikan Isi dan Form Komentar
Langkah 1Login ke Blogger
Langkah 2
Masuk ke "Rancangan - Edit HTML"
Langkah 3
Klik "Expand Template Widget"
Langkah 4
Cari kode dibawah ini:
]]></b:skin>Langkah 5
Masukan (copy paste) kode CSS dibawah ini diatas kode pada langkah 4:
1
2
3
4
5
6
| .tombol { width : 100% ; display : inline- block ;zoom: 1 ; * display : inline ; vertical-align : baseline ; margin : 0 ; outline : none ; cursor : pointer ; text-align : center ; text-decoration : none ; padding : . 3em 2em . 35em ; text-shadow : 0 1px 1px rgba( 0 , 0 , 0 ,. 3 ); font-weight : bold ; font : 13px / 20px 'Open Sans' , Arial , Helvetica , Verdana , sans-serif ;} .tombol:hover { text-decoration : none ;} .tombol:active { position : relative ; top : 1px ;} . black { color : #d7d7d7 ; border : solid 1px #282828 ;box-shadow: 0 0 2px #000 inset ;-webkit-box-shadow: 0 0 2px #000 inset ;-moz-box-shadow: 0 0 2px #000 inset ; background : #282828 ; background : -webkit-gradient(linear, left top , left bottom , from( #282828 ), to( #000 )); background : -moz-linear-gradient( top , #282828 , #000 );filter: progid:DXImageTransform.Microsoft.gradient(startColorstr= '#282828' , endColorstr= '#000000' );} .black:hover { background : #000 ; background : -webkit-gradient(linear, left top , left bottom , from( #444 ), to( #000 )); background : -moz-linear-gradient( top , #444 , #000 );filter: progid:DXImageTransform.Microsoft.gradient(startColorstr= '#444444' , endColorstr= '#000000' );} .black:active { color : #666 ; background : -webkit-gradient(linear, left top , left bottom , from( #000 ), to( #444 )); background : -moz-linear-gradient( top , #000 , #444 );filter: progid:DXImageTransform.Microsoft.gradient(startColorstr= '#000000' , endColorstr= '#666666' );} |
Cari kode dibawah ini:
</head>Langkah 7
Masukan (copy paste) kode, plugin dan framework jQuery dibawah ini diatas kode pada langkah 6:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
| <script type= 'text/javascript' > //<![CDATA[ jQuery(document).ready( function () { jQuery( '#bukakeun' ).click( function () { jQuery( '#comments' ).slideToggle( 'slow' ); jQuery( this ).css({ display: 'none' }); jQuery( '#tutupkeun' ).show(); jQuery.cookie( 'komen' , 1); return false }); jQuery( '#tutupkeun' ).click( function () { jQuery( '#comments' ).slideToggle( 'slow' ); jQuery( this ).css({ display: 'none' }); jQuery( '#bukakeun' ).show(); jQuery.cookie( 'komen' , null ); return false }); if (jQuery.cookie( 'komen' ) == 1) { jQuery( '#comments' ).show(); jQuery( '#bukakeun' ).hide() } else { jQuery( '#comments' ).hide(); jQuery( '#tutupkeun' ).hide() } }); //]]></script> |
Cari kode dibawah ini:
1
2
3
4
5
6
7
8
9
| < div id = 'backlinks-container' > < div expr:id = 'data:widget.instanceId + "_backlinks-container"' > < b:if cond = 'data:post.showBacklinks' > < b:include data = 'post' name = 'backlinks' /> </ b:if > </ div > </ div > </ div > </ b:includable > |
Masukan (copy paste) kode XHMTL dibawah ini diatas kode pada langkah 8:
<button class='tombol black' id='bukakeun'>Click here for show comment</button> <button class='tombol black' id='tutupkeun'>Click here for hide comment</button>Sehingga menjadi seperti ini:
1
2
3
4
5
6
7
8
9
10
11
| < div id = 'backlinks-container' > < div expr:id = 'data:widget.instanceId + "_backlinks-container"' > < b:if cond = 'data:post.showBacklinks' > < b:include data = 'post' name = 'backlinks' /> </ b:if > </ div > </ div > </ div > < button class = 'tombol black' id = 'bukakeun' >Click here for show comment</ button > < button class = 'tombol black' id = 'tutupkeun' >Click here for hide comment</ button > </ b:includable > |
Simpan template dan preview blog anda...
Keterangan:
Jika anda sudah pernah memasang framework jQuery (pada langkah 7 baris 1) maka framework jQuery tidak perlu diikutsertakan...
Selamat mencoba semoga berhasil... Happy Blogging... :)
0 komentar:
Posting Komentar