Cara Membuat Tampilan "Read More dan Read Less" Pada Artikel Blog - let's read!

Wednesday, December 23, 2020

Cara Membuat Tampilan "Read More dan Read Less" Pada Artikel Blog

Jika sebuah artikel terlalu panjang, ada baiknya untuk memberikan tombol Read More dan Read Less, sehingga tampilan konten blog lebih clean dan simple, efeknya pembaca tidak jenuh melihat tulisan yang panjang. Memberikan tombol Read More dan Read Less di Artikel Blogger membutuhkan sedikit Coding html, css, dan java script.

Namun jangan bingung dulu bagi yang gak paham tentang coding, disini sudah kita siapkan draft codingnya, jadi kalian tinggal copas dan ganti judul artikel dan isinya dengan punya kalian.

Agar lebih jelas lihat terlebih dahulu contoh di bawah ini. Read More saya ganti dengan Lanjut Baca dan Read Less saya diganti dengan Tutup.

Jika Artikel yang kalian miliki akan diberikan Tombol Read More dan Read Less lebih dari satu maka kode dibawah perlu modifikasi, pada akhir artikel kita sudah menyiapkan Link Ebook yang bisa kalian Download dan pelajari.


Artikel

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel...erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.

Kode CSS


Keterangan:
  1. Ganti Judul artikel pada baris ke-5 sesuai milik kalian
  2. Pada baris ke-6 ganti isi artikel sesuai miliki kalian, perhatikan letak tiga titik silahkan sesuaikan dengan tampilan kalian
  3. Jika ingin mengganti nama "Lanjut Baca" dengan kata lain, kalian bisa merubahnya pada baris ke 7, setelah itu ganti juga kaliamat "Lanjut Baca" di baris 17
  4. Sedangkan kata "Tutup" bisa kalian rubah pada bari ke-21
  5. Perhatikan seluruh penulisan, karena ini merupakan kode program maka perbedaan dan perubahan huruf besar-kecil, tanda baca sangat sensitif.

Ebook Cara Membuat Tombol Read More dan Read Less Pada Artikel Blog

Share with your friends

Rekomendasi Untuk Anda × +
Give us your opinion