Show Hide Content Dengan Jquery Di Postingan

Show Hide Content Dengan Jquery Di Postingan

Bola Hero Gawai

Show Hide Content Dengan Jquery Di Postingan

Show Hide Content
Lagi iseng-iseng ngecek speed blog di PageSpeed Insights, tertarik juga untuk membuat show hide content-nya yaitu show hide yang menampilkan masalah-masalah pada blog yang harus diperbaiki. Pasti Anda semua sudah mengetahu show hide content tersebut yang ada di PageSpeed.

Itung-itung menambah koleksi macam-macam show hide content, maka kali ini saya mencoba membuat show hide content ala Google ini dengan versi saya dengan bantuan jquery.

Bagi yang tertarik untuk mencobanya, silahkan coba dan copy kode-kodenya pada iframe JSFiddle di bawah ini.


Perhatikan pada kode css .text-area p dengan tinggi (height) auto, sehingga tinggi teks areanya mengikuti banyaknya content yang dibuat. Jika Anda ingin menentukan tinggi teks areanya maka tinggal ganti kode auto pada height dengan angka pada satuan px seperti contoh 80px. Dan tambahkan kode overflow: auto untuk konten yang melebihi tinggi yang kita tentukan, seperti pada iframe JSFiddle di bawah ini.


Dan satu lagi saya juga membuat show hide content yang banyak digunakan di forum-forum Google seperti pada iframe JSFiddle di bawah ini.


Karena ini menggunakan jquery, maka template Anda wajib memasang jquery library berapa pun versinya seperti di bawah ini. Jika sudah ada maka abaikan ini.


<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'></script>

Selamat mencoba...
Mohon ma'af saya baru bisa mengucapkan "Minal 'aidin wal faidzin, mohon ma'af lahir dan bathin, selamat Hari Raya Idul Fitri 1435 H. semoga kita selalu dalam lindungan-Nya...amiin".

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

21 Comments Add Comment

script ini memang sangat membantu mas, terutama buat desain responsive.

Balas

atas ane master :'( bisa pertamax, keduax ajadah, ijin coba kang..

Balas

Hehehee @Mas Andre & @Mas Arif silahkan dicoba aja :)

Balas

kang adhy inovatif banget, kali ini kodingnya sangat simpel ya bang...mantab deh. teruslah bereksperimen bang. asik... :D
udah kenal bitcoin bang?? kayaknya abang harus tau tuh biar bisa dapat lebih penghaslan dari internet :D

ngasih info doank

Balas

sejak mas adhy membahas kodi ini sudah saya terapkan di blog bahasa linggis mas, dan baru bebarapa minggu ini sudah saya terapkan di blog indo saya.

Balas

Cukup simpel mas :-bd

Balas

wah bagus mas gak ribet :-d saya izin simpen codenya hehe :D

Balas

:) Keren juga ya mas ... :)

Balas

Keren.. oh ya mas, cara taro widget di bawah waktu tampilan mobile gimana? Krbetulan lgi pake abdroid dan liat ada widget dibawah, biasanya kan klo tampilan mobile widget ngilang.. tlg jawab mas, klo bisa kunbalnya juga :)

Balas

ubah ukuran auter-wrapper jadi 100%, main-wrapper 100% float:left dan sidebar bikin 100% float:right (sidebar otomatis akan turun kebawah).

Balas

kalau masih binggung bisa tiru kodinya kompi ajaib atau blog saya

Balas

aku ijin nyoba nanti ya kang, kayaknya tambah keren kalo dipasang show hide content dgn jquey hehehe....

Balas

Disain yang kedua mantap Kang keren bgt :)

Balas

Sepertinya perlu dicoba tuh bung... makasih infonya :)

Balas

Iya mas biar lebih mudah dimengerti :)

Balas

Silahkan mas :)

Balas

Hehehehe lumayan mas :) silahkan dicoba :)

Balas

Iya betul kata mas Andre :) silahkan dicoba dulu.

Balas

Iya silahkan dicoba mas :)

Balas

Hehehe boleh dipilih kang :) besok harga udah naik hhehehe :D

Balas

betul gan, gak cuma dollar aja yang bisa dicari di interet, e-cuerancy seperti bitcoin juga patut diketahui. Bahkan penghasilannya akan lebih besar dibanding masa2 banner iklan saja bang. saya juga udah posting tentang bitcoin ini. Baru sekitar 2 minggu lebih saya udah dpt penghasilan 3 jutaan bang. beneran..!!

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×