November 14, 2019

CONTOH PEMBUATAN TOMBOL READ-MORE DAN READ-LESS PADA TEMPLATE BLOGGER DENGAN JAVASCRIPT

read more ilustration
read more ilustration
Pada halaman awal blog (Homepage) kita hanya memiliki opsi "Lanjutkan membaca" untuk membuka snippet pada homepage (halaman utama blog) menuju ke konten yang kita tuju. Tidak ada sekaligus opsi tombol mengembalikan halaman konten menjadi snippet kembali. Saya memiliki triknya, teman teman.

Nah melalui contoh w3school saya mendapatkan trik yang bagus untuk itu.

perhatikan snippet LoremIpsum dan tombol "read more" berikut dibawah ini, dan cobalah KLIK read more, lalu ketika semua tulisan muncul tombol akan berganti dengan "Read Less" klik untuk mengembalikannya ke mode "snippet"

Tombol Lanjutkan dan Batasi membaca

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.
.


Jika kalian membuat template HTML baru kalian tentu saja bisa menerapkannya langsung ke halaman HTML dengan kode sebagai berikut:
<style>
#more {display: none;}
</style>

</head>
<body>
<h2>Tombol Lanjutkan dan Batasi membaca </h2>
<p>DISINI ADALAH HALAMAN KONTEN.</span></p>
<button onclick="myFunction()" id="myBtn">Read more</button>
<script>
function myFunction() {
var dots = document.getElementById("dots");
var moreText = document.getElementById("more");
var btnText = document.getElementById("myBtn");
if (dots.style.display === "none") {
dots.style.display = "inline";
btnText.innerHTML = "Read more";
moreText.style.display = "none";
} else {
dots.style.display = "none";
btnText.innerHTML = "Read less";
moreText.style.display = "inline";
}
}
</script>
Contoh diatas hanyalah pembelajaran dan contoh kode yang dapat kita terapkan pada halaman HTML sebuah template blog. Tentu saja struktur template blogger bawaan jenis yang lama sudah terdiri dari elemen elemen pembentuk. Sayangnya ia belum memiliki snippet dan "Read More" pada homepagenya.

Misalnya kita harus memodifikasi salah satu tag <data:post.body/> untuk menghasilkan "Read more" pada jenis template template lama tersebut.

Namun jika hanya sekedar ingin sebuah template dengan "Read More" pada 4 Varian jenis template terbaru blogger seperti: Contempo, Soho, Emporio dan Notable, "Read more" ini telah di sertakan secara otomatis secara default oleh blogger, dan siap dipergunakan tanpa perlu memodifikasinya lagi.

I am a student of Senior High School (SMA) I am living in Bandar Lampung, Selalu tertarik dengan HTML, sedang belajar Javascript, python dan C++

3 comments:

  1. Great post.

    www.pink-purpledots.blogspot.com

    ReplyDelete
  2. Waauuww...mantab ini, aku bookmark, ya?
    Aku intip-intipin smeua tips-tipsnya bisa dicontek, hehehe

    ReplyDelete
    Replies
    1. Silahkan Kak Hanila, halaman ini memang untuk berbagi

      Delete