Membuat Konten Tersembunyi (Collapsible) pada Postingan Blogger

Pendahuluan

Membuat konten postingan yang collapsible dapat membuat pembaca anda lebih fokus untuk melihat konten yang anda buat. Itu artinya anda memberi pilihan kepada pembaca apakah ingin melihat isi dari konten yang disembunyikan atau tidak. Ada beberapa cara yang dapat dilakukan untuk membuat konten tersembunyi (collapsible). Ada yang dilakukan dengan menambahkan kode javascript dan css ke dalam tema blog dan ada juga yang hanya menambahkannya pada postingan tertentu. Menurut saya pribadi menambahkan javascript apalagi kode dari pihak akan memperlambat proses loading blog. proses loading blog akan sangat berpengaruh pada kenyamanan pembaca dan juga kemampuan search engine untuk melacak konten anda sehingga mudah ditemukan. .Belum lagi ada juga resiko di kode javascript/css yang kita sematkan dari pihak ketiga dihapus, maka konten blog kita pun tidak akan berjalan normal sebagaimana yang kita inginkan. Baca juga postingan kami tentang Membuat Code Box atau Code Snippet pada Postingan Blog.

Saya sudah mencoba beberapa kode yang disematkan pada tema halaman kebanyakan tidak berjalan sesuai keinginan saya karena saya sebelumnya telah menggunakan tema yang sudah saya sesuaikan. mungkin nanti akan saya buat percobaan dengan blog yang baru, jadi ikuti terus perkambangan berita di blog ini dengan mengikuti halaman facebook kami di https://web. facebook.com/RDSProEdu/

Menurut saya membuat postingan yang collapsible adalah dengan menggunakan kode yang disematkan khusus pada postingan tertentu saja jadi tidak akan mengganggu keseluruhan proses loading blog. Namun cara tersebut juga memiliki kekurangan yaitu tanpa berpanjang lebar berikut adalah cara membuat konten tersembunyi (collapsible) pada postingan blogger. :

Cara Membuat Konten Tersembunyi (Collapsible) pada Postingan Blogger

1. Buka Web Browser anda dan Login ke blogger.com
2. Buat Postingan Baru
3. Edit html postingan blog anda dengan memilih tampilan html pada menu editor.
4. Pastekan kode dibawah ini:
   
   <div style="font-weight: bold; margin-top: 2px; margin: 2px; text-align: center; vertical-align: top;"><div style="text-align: left;">

   JUDUL KONTEN DISINI

   <div class="smallfont" style="font-weight: bold; margin-bottom: 2px; text-align: left; vertical-align: top;">

   <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 = 'Hide'; } else {

   this.parentNode.parentNode.getElementsByTagName('div')

   [1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText =

   ''; this.value = 'Show Again'; }" style="font-weight: normal; margin: 0px; padding: 0px; width: 80px;" type="button" value="Show" />

   <div class="alt2" style="background-color: white; border: 0px inset; color: black; margin: 0px; overflow: hidden; padding: 0px 18px;">

   <div style="display: none;">

   KONTEN TERSEMBUNYIKAN DISINI

   </div></div></div></div></div>

   <br/>
   
5. Berikut ini contoh untuk kode di atas :
   
   JUDUL KONTEN DISINI

   
   
   

   KONTEN TERSEMBUNYIKAN DISINI
6. Anda dapat mengganti tulisan yang berwarna hijau dengan tulisan yang anda inginkan. Khusus pada konten yang disembunyikan anda juga dapat menggantinya dengan kode embed dari pihak ketiga misalnya video youtube, halaman page, audio, file dari google drive, gambar ataupun link lainnya.

Menambahkan CSS pada Tema Blog untuk Variasi Tampilan Tombol

Anda juga dapat menambahkan variasi kode css agar tampilannya jadi lebih menarik dengan menambahkan kode css pada tema blog. Caranya :

1. Login ke Blogger
2. Klik Tema
3. Pada Tombol Sesuaikan pilih "Edit HTML"
4. Cari di kode "]]</b:skin>". Kemudia di atas kode "]]</b:skin>" tersebut pastekan code CSS berikut ini:
   
   /*######rdsaccordion######*/
   .rdsaccordion{
     background-color: #f70;
     color: white;
     cursor: pointer;
     padding: 5px;
     width: 100%;
     border: none;
     text-align: left;
     outline: none;
     font-size: 15px;
   }
   .active, .rdsaccordion:hover {
    background-color: #559;
   }
5. Edit html postingan blog anda dengan memilih tampilan html pada menu editor. Kemudian paste-kan kode berikut ini :
   
   <div class="rdsaccordion">
   <div style="font-weight: bold; margin-top: 2px; margin: 2px; text-align: center; vertical-align: top;"><div style="text-align: left;">

   JUDUL KONTEN DISINI

   <div class="smallfont" style="font-weight: bold; margin-bottom: 2px; text-align: left; vertical-align: top;">

   <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 = 'Hide'; } else {

   this.parentNode.parentNode.getElementsByTagName('div')

   [1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText =

   ''; this.value = 'Show Again'; }" style="font-weight: normal; margin: 0px; padding: 0px; width: 80px;" type="button" value="Show" />

   <div class="alt2" style="background-color: white; border: 0px inset; color: black; margin: 0px; overflow: hidden; padding: 0px 18px;">

   <div style="display: none;">

   KONTEN TERSEMBUNYIKAN DISINI

   </div></div></div></div></div></div>
6. Berikut ini contoh untuk kode di atas :
   
   JUDUL KONTEN DISINI

   KONTEN TERSEMBUNYIKAN DISINI
   
   

   Penutup

   Demikianlah cara membuat konten tersembunyi (collapsible) pada postingan blog untuk contoh penerapannya untuk album musik anda bisa melihatnya di sini. Terima Kasih telah berkunjung. Jika anda merasa postingan ini bermanfaat silahkan share postingan ini dengan tetap menyertakan sumbernya https://rds-production.blogspot.som/ atau boleh juga follow akun media sosial RDS Production untuk mendapatkan informasi terbaru dari kami.