Menghemat Ruang Posting Dengan Sembunyikan Teks

Menghemat Ruang Posting Dengan Sembunyikan Teks - Berawal dari blogwalking dan saya singgah pada sebuah artikel yang membahas tentang PANGJANGNYA TULISAN PADA POSTING BLOG. Jika kita membahas tentang banyaknya cerita yang bertele-tele pada sebuah artikel blog, itu semua merupakan hobby menulis seseorang yang tertuang dalam media blog, karena kita tidak bisa memaksakan hobby mereka harus sama dengan hobby kita, karena jika seseorang gemar menulis, maka apapun akan dia tulis, tidak perduli berapa halaman yang akan termuat, karena yang dia pikirkan bagaimana menyelesaikan tulisannya dalam satu judul dan berakhir.

Namun kita juga perlu ketahui, bahwa tulisan Anda untuk dibaca, bukan menemani Anda untuk mendengarkan curhatan pada tulisan Anda, karena tidak semua orang yang membaca awal sampai akhir sebuah artikel, terlebih jika artikel itu pada media blog seperti ini, dimayoritaskan banyak orang yang membaca judul saja, lalu langsung scroll mencari kolom komentar, makanya tidak heran pada kolom komentar Anda banyak teks "Artikel yang bermanfaat, Nice post, dan lain sebagainya" sebagai komentar si pembaca. Itu sudah pasti dia tidak membaca artikel Anda bukan.?

DEMO SHOW

Text Berikutnya (Beri Centang)

Akan tetapi, artikel yang terlalu pendek tidak baik juga buat blog, karena Google menganggapnya sebagai ketidakseriusan sebuah web/blog. Sepanjang apapun tulisan Anda semua itu adalah karya anda, jadi pertahankan semua itu. Masalah pembaca yang jenuh akan artikel Anda yang terlalu panjang, bisa Anda siasati dengan TRIK Menghemat Ruang Posting Dengan Sembunyikan Teks seperti ini.
Untuk menghemat ruang posting, Teks ini sengaja saya sembunyikan. Disela-sela kejenuhan pengunjung yang bosan membaca, sembunyikan beberapa teks yang mungkin itu inti dari tulisan Anda, sehingga sedikit banyak akan dapat menghibur kejenuhan mereka, kurang lebih membuat pengunjung sedikit penasaran, karena beberapa teks pada tulisan Anda dianggap hilang yang sebenarnya Anda sembunyikan.

Buat semua sahabat pecinta SAHABAT BLOGGER 77, yang tertarik dengan trik Menghemat Ruang Posting Dengan Sembunyikan Teks, berikut sumber kode untuk membuatnya

<div style="margin-bottom: 2px;">
<div style="margin-top: 5px; text-align: center;">
<input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'CLOSE'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'OPEN'; }" style="margin-top: 5px; width: auto;" type="button" value="OPEN" /> </div>
    <div style="margin: 0px; padding: 6px;">
       <div style="display: none;">
.....
teks
.....
   </div>
       </div>
</div>

Kode gabungan dari -

Panel Spoiler Dengan Transisi Hover

Kode sumber diatas adalah kode untuk membuat spoiler box, dan sudah saya modifikasi dengan penggabungan kode yang dapat anda lihat pada link diatas, saya tetap menggunakan class='spoiler' namun tombol pemicu Buka/Tutup saya ubah menjadi input.trigger:checked (Beri Centang Untuk Melihat Text berikutnya/tersembunyi)

Keterangan -

Kode berikut sudah saya desain dengan tampilan default spoiler, jadi kodenya bisa anda edit lagi untuk membuat tampilan yang berbeda sesuai selera Anda. Terimakasih
....SEMOGA DAPAT MEMBANTU.....

TAHAP AKHIR PENYELESAIAN

input.trigger {
  display:inline-block;
  margin:0;
  padding:0;
}

.spoiler {
  background-color:white;
  padding:15px 30px;
  margin:10px 0 0;
  display:none;
}

input.trigger:checked + .spoiler,
input.trigger:checked + br + .spoiler {
  display:block;
}

<input type="checkbox" class="trigger"/> //judul text Anda
<div class="spoiler">

.....*//
Tulis Teks Anda Disini
//*.....

</div>