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.?
Text Berikutnya (Beri Centang)
Buat semua sahabat pecinta SAHABAT BLOGGER 77, yang tertarik dengan trik Menghemat Ruang Posting Dengan Sembunyikan Teks, berikut sumber kode untuk membuatnya
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)
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.
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.....
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
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 >>
saya lihat demonya dlu mbak
BalasHapusdemonya gak kemana-mana kok mas, untuk hasilnya bisa langsung di lihat pada kotak kecil dibawah tulisan DEMO SHOW (silahkan beri tanda centang)
Hapus
HapusSAYA 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
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.
Hapussemoga utang bapak dimaafkn diakhirat. amin
Hapuskeren mbak tutornya, biasanya saya menggunakan spoiller utk sembunyikan teks, itupun tdk sesempurna ini :(
BalasHapusmakasih sharingnya ;)
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
Hapusini semacam tombol spoiler ya :)
BalasHapusbenar mas, spoiler default yang sedikit saya modifikasi
Hapusdg begitu loading lebih cepat ya?
BalasHapusBerarti 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
BalasHapusmungkin 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
Hapuskalau dibuat ke samping dan bukan ke bawah, jadi kayak halaman 1, 2 dst begitu bagaimana sob....
BalasHapusjika 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,
Hapusjika 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>
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.
BalasHapusmakasih ilmunya ya
sekaligus memberi nuansa permainan mas untuk pengunjung, sehingga blog kita tidak membosankan buat mereka, hehe
HapusKalau saya lihat kodenya hampir sama ya dengan kode atau cara kerja spoiler, hanya saja tampilannya saja yang berbeda.
BalasHapussaya mengambil kelas pada spoiler mas, jadi sama saja dengan spoiler sebenarnya, hanya perubahan pada tombol pemicunya saja yang berbeda.
HapusWah keren nih... gerakannya ada yang lebih halus ngak Mbak?
BalasHapusJadi gerakannya pelan seperti togel
tambahkan selector transisi pada CSS diatas, sehingga akan seperti ini
HapusHapus 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;
}
Kurang lebih mirip spoiler gitu ya?
BalasHapusTerima kasih share infonya, mba... :)
BalasHapusOmong-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 ^_^
keren sis triknya... jadi lebih hemat nih ruang posting-nya
BalasHapusmakasih
eh.. keren nih, caranya agak beda. kalau spoiler di klik, ini di centang :3
BalasHapusbisaaa yah dinikin kaya gini, baruu tau deh saya mbak, hehe
BalasHapussaya seneng banget nulis panjang2 entah dibaca apa engga sama yg komen hhiii
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
BalasHapusMakasih mbak dan senang sudah bisa mengunjungi blog ini. Akan saya coba praktekkan terutama menghemat ruang karena saya seorang pemula
BalasHapus