read more ilustration |
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>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.
#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>
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.
Great post.
BalasHapuswww.pink-purpledots.blogspot.com
Waauuww...mantab ini, aku bookmark, ya?
BalasHapusAku intip-intipin smeua tips-tipsnya bisa dicontek, hehehe
Silahkan Kak Hanila, halaman ini memang untuk berbagi
Hapus