Text Article

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 -


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>



TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Menghemat Ruang Posting Dengan Sembunyikan Teks
Ditulis oleh= Devy Indriyani
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
= TERIMA KASIH =

27 komentar

  1. Balasan
    1. demonya gak kemana-mana kok mas, untuk hasilnya bisa langsung di lihat pada kotak kecil dibawah tulisan DEMO SHOW (silahkan beri tanda centang)

      Hapus

    2. SAYA SEKELUARGA INGIN MENGUCAPKAN BANYAK TERIMAH KASIH KEPADA AKI NAWE BERKAT BANTUANNNYA SEMUA HUTANG HUTANG SAYA SUDAH PADA LUNAS SEMUA BAHKAN SEKARAN SAYA SUDAH BISA BUKA TOKO SENDIRI,ITU SEMUA ATAS BANTUAN AKI YG TELAH MEMBERIKAN ANKA JITUNYA KEPADA SAYA DAN ALHAMDULILLAH ITU BENER2 TERBUKTI TEMBUS..BAGI ANDA YG INGIN SEPERTI SAYA DAN YANG SANGAT MEMERLUKAN ANGKA RITUAL 2D 3D 4D YANG DIJAMIN 100% TEMBUS SILAHKAN HUBUNGI AKI NAWE DI 085-218-379-259

      Hapus
    3. tetapi masalahnya kan kita-kita kagak punya utang pak, kalau bapak punya utang sih itu derita bapak, terus si aki nawe jangan digangu-ganggu lagi attuh kan udah tua, udah aki-aki, bukannya sholatnya dibanyakin malah jual nomer 2D 3D 4D, kalau begitu tunggu yang 6D aja dech.

      Hapus
    4. semoga utang bapak dimaafkn diakhirat. amin

      Hapus
  2. keren mbak tutornya, biasanya saya menggunakan spoiller utk sembunyikan teks, itupun tdk sesempurna ini :(

    makasih sharingnya ;)

    BalasHapus
    Balasan
    1. trik diatas juga mirip dengan spoiler mbak, hanya saja kode spoiler default saya ubah dengan trigger-checked, sebagai tombol pemicunya, sehingga yang tampil hanya kotak kecil untuk tanda centang

      Hapus
  3. ini semacam tombol spoiler ya :)

    BalasHapus
    Balasan
    1. benar mas, spoiler default yang sedikit saya modifikasi

      Hapus
  4. dg begitu loading lebih cepat ya?

    BalasHapus
  5. Berarti kalau dilihat teks nya cuma sedikit karena ada kata berikutnya..saya pernah lihat ini sewaktu saya berselancar di dunia maya padahal yang saya tau ruangnya masih banyak..jadi seperti ini ya mbak..makasih tutorialnya bisa dipraktekin

    BalasHapus
    Balasan
    1. mungkin yang jenx indah lihat itu semacam RED MORE mbak, yang mana teks akan terpotong beberapa halaman yang digantikan dengan link baca selengkapnya, tetapi yang ini beda mbak, teks tetap berada pada halaman yang sama, hanya saja beberapa paragraf sengaja saya sembunyikan, yang jika pengunjung mau membaca paragraf yang tersembunyi dengan tombol beri centang seperti diatas

      Hapus
  6. kalau dibuat ke samping dan bukan ke bawah, jadi kayak halaman 1, 2 dst begitu bagaimana sob....

    BalasHapus
    Balasan
    1. jika kita perhatikan kode ini < input.trigger:checked + br + .spoiler > disana menggunakan perintah br(kode alinea baru pada HTML), sehingga jika tampilan kita ubah kesamping tidak bisa mas,
      jika ingin membuat menjadi kesamping coba tambahkan kode @media-gird, kode ini untuk membagi halaman postingan,seperti ini

      <style>
      .sample-grid {
      width:auto;
      overflow:hidden;
      margin:0 auto;
      }

      .sample-grid .custom-grid-3 {
      width:31%;
      margin:0 0 1.5em 3.5%;
      float:left;
      display:inline;
      overflow:hidden;
      word-wrap:break-word;
      min-height:1px;
      }

      .sample-grid .custom-grid-3:first-child {margin-left:0}

      @media (max-width:auto) {
      .sample-grid .custom-grid-3 {
      float:none;
      display:block;
      width:auto;
      margin:0 0 1.5em 0;
      }
      }</style>
      *//CSS//*
      <div class="sample-grid">
      <div class="custom-grid-3">
      <p style="color: blue; font-weight: bold;">Halaman 1</p>
      </div>
      <div class="custom-grid-3">
      <p style="color: red; font-weight: bold;">Halaman 2</p>
      </div>
      </div>

      Hapus
  7. hiyah bener banget, kalau suguhannya terlalu panjang kadang baru scroll udah panjang langsung kabur, apalagi kalau dikolom komentar dilarang komentar OOT....jadi sepertinya trik menghemat ruang postingan ini patut diterapkan nih.
    makasih ilmunya ya

    BalasHapus
    Balasan
    1. sekaligus memberi nuansa permainan mas untuk pengunjung, sehingga blog kita tidak membosankan buat mereka, hehe

      Hapus
  8. Kalau saya lihat kodenya hampir sama ya dengan kode atau cara kerja spoiler, hanya saja tampilannya saja yang berbeda.

    BalasHapus
    Balasan
    1. saya mengambil kelas pada spoiler mas, jadi sama saja dengan spoiler sebenarnya, hanya perubahan pada tombol pemicunya saja yang berbeda.

      Hapus
  9. Wah keren nih... gerakannya ada yang lebih halus ngak Mbak?
    Jadi gerakannya pelan seperti togel

    BalasHapus
    Balasan
    1. tambahkan selector transisi pada CSS diatas, sehingga akan seperti ini

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

      lalu gantikan dengan kode berikut

      .spoiler {
         overflow:hidden;
         background:#fff;
         margin:10px 0 0;
         padding:0 30px'
         height:auto;
         visibility:hidden;
         -webkit-transition:all 1s ease-in-out;
         -moz-transition:all 1s ease-in-out;
         -ms-transition:all 1s ease-in-out;
         -o-transition:all 1s ease-in-out;
         transition:all 1s ease-in-out;
      }

      Hapus
  10. Kurang lebih mirip spoiler gitu ya?

    BalasHapus
  11. Terima kasih share infonya, mba... :)

    Omong-omong tentang CSS dan Kode HTML kadang memang bikin mumet dan frustasi, hihi... tapi asik banget sebenarnya kalau udah utak-atik kedua hal itu, suka sampai lupa waktu, *pengalamanpribadi ^_^

    BalasHapus
  12. keren sis triknya... jadi lebih hemat nih ruang posting-nya
    makasih

    BalasHapus
  13. eh.. keren nih, caranya agak beda. kalau spoiler di klik, ini di centang :3

    BalasHapus
  14. bisaaa yah dinikin kaya gini, baruu tau deh saya mbak, hehe
    saya seneng banget nulis panjang2 entah dibaca apa engga sama yg komen hhiii

    BalasHapus
  15. Memang yang ideal itu panjang artikel blog yang 'moderat' yakni tidak pendek dan tidak panjang. Namun bisa jadi suatu artikel itu sangat panjang sehingga perlu solusi tepat yaitu dengan menyembunyikan teksnya. Terima kasih sharingnya tentang 'Menghemat Ruang Posting Dengan Sembunyikan Teks'. Salam cemerlang. cheer

    BalasHapus
  16. Makasih mbak dan senang sudah bisa mengunjungi blog ini. Akan saya coba praktekkan terutama menghemat ruang karena saya seorang pemula

    BalasHapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK