Ditulis oleh: Ditulis pada: 1/24/2017
Untuk membuat blog memiliki loading yang ringan dan user friendly, diusahakan membuat blog menggunakan CSS dan HTML saja, namun dilarang untuk menggunakan CSS inline.Untuk itu kini saya membuat sebuah elemen web yang masih banyak digunakan yaitu spoiler. Agar bisa digunakan dan tidak memberatkan loading blog, maka spoiler dibuat hanya menggunakan CSS dengan tag details dan summary, spoiler CSS only with details and summary.
Namun sangat disayangkan, tag details dan summary ternyata tidak diperbolehkan di AMP HTML.
Baiklah, spoiler untuk blog AMP HTML akan kita buat setelah ini dan hanya menggunakan CSS juga.
Untuk demo spoiler CSS only with details and summary bisa dicoba di embed JSFiddle di bawah ini.
Untuk menggunakan spoiler seperti 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 ketika 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>