Spoiler Css Only With Details And Summary

Untuk menciptakan blog mempunyai loading yang ringan dan user friendly, diusahakan menciptakan blog memakai CSS dan HTML saja, namun dihentikan untuk memakai CSS inline.

Untuk itu sekarang aku menciptakan sebuah elemen web yang masih banyak dipakai ialah spoiler. Agar sanggup dipakai dan tidak memberatkan loading blog, maka spoiler dibentuk hanya memakai CSS dengan tag details dan summary, spoiler CSS only with details and summary.

Ide ini aku sanggup dari postingan terdahulu perihal menciptakan vertical sajian dengan details dan summary.

Namun sangat disayangkan, tag details dan summary ternyata tidak diperbolehkan di AMP HTML.

Baiklah, spoiler untuk blog AMP HTML akan kita buat sehabis ini dan hanya memakai CSS juga.

Untuk demo spoiler CSS only with details and summary sanggup dicoba di embed JSFiddle di bawah ini.


Untuk memakai spoiler ibarat itu, silahkan simpan CSS di bawah ini di CSS style blog Anda.

 .spoiler details > summary{
   cursor: pointer;
   background: #26272a;
   margin: 0;
   padding:4px 18px 4px 8px;
   outline: none;
   border-radius: 3px;
   color: #efefef;
   transition: all .3s ease-in-out;
   display: inline;
   font-size: 12px;
   line-height:1;
   font-family: arial, san-serif;
 }
 .spoiler details > summary:hover {
   background: #424346;
 }
 .spoiler details > div {
   background: #efefef;
   padding:6px 10px;
   margin: 5px 0 0;
   border: 1px solid #ddd;
   -webkit-animation:slide-down .3s ease-out;
   -moz-animation:slide-down .3s ease-out;
 }
 .spoiler details > div > p {
   margin: 0;
 }
 .spoiler details > div > p img{
   margin: 4px 0 0;
   max-width: 100%;
   height: auto;
 }
 .spoiler .spoiler_title {
   display: inline;
   float: left;
   margin: 4px 10px 0 0;
   padding: 4px 0;
   font-size: 16px;
   line-height:1;
 }
 .spoiler {
   overflow: hidden;
 }
 @-webkit-keyframes slide-down{0%{opacity:0;-webkit-transform:translateY(-100%)}
 100%{opacity:1;-webkit-transform:translateY(0)}
 }
 @-moz-keyframes slide-down{0%{opacity:0;-moz-transform:translateY(-100%)}
 100%{opacity:1;-moz-transform:translateY(0)}
 }
 .spoiler details:not([open])   .block {
   display: block;
   background: #efefef;
   padding: 6px;
   border: 1px solid #ddd;
   margin: 5px 0 0;
 }
 .spoiler details[open]   .block {
   display: none;
 }

Kemudian gunakan HTML di bawah ini saat akan menyisipkan sploiler di dalam postingan (pada mode HTML).

 <div class="spoiler">
 <span class="spoiler_title">Spoiler: </span>
 <details>
   <summary>Hint</summary>
   <div>
   <p>Tulis konten di sini......</p>
   <br />
   <p>Bisa juga simpan gambar di sini......</p>
   </div>
 </details>
 <div class="block"></div>
 </div>

Sumber https://www.kompiajaib.com/

Share this post