Box Spoiler Alert Information Teks

Box Spoiler Alert Information Teks - Bila mendengar kata SPOILER sudah pasti Anda tahu benar apa manfaat atau fungsi membuat box dengan design theme spoiler. Spoiler hanya merupakan sebuah istilah penggunaan bahasa kode untuk menyembunyikan beberapa objek, seperti gambar atau information teks artikel, bahkan penggunaan box spoiler seperti ini masih banyak yang menggunakannya untuk menyimpan dan membungkus kode-kode HTML dalam sebuah tutorial blog.

Alasan dasar mengapa beberapa blog masih menggunakan spoiler box adalah hanya untuk memberikan nuansa rasa penasaran buat pengguna atau pembaca yang berkunjung ke blog, karena rasa penasaran itulah yang membuat pembaca tidak cepat kabur jika berkunjung ke sebuah blog yang ada spoiler boxnya. Contoh seperti Cara Membuat Text Area Dengan Tombol Buka Tutup adalah bentuk default box spoiler, namun isi objek yang tersembunyi didalam box tersebut membuat penasaran untuk menekan tombol "OPEN" (Tetapi jangan lama-lama ya melihat isi boxnya, hehe..!!).

Box spoiler kali ini adalah tampilan terbaru yang sudah saya modifikasi dari beberapa sumber yang sudah pernah saya bahas pada artikel sebelumnya. Metode efek sama seperti box spoiler, namun tombol "OPEN" untuk membuka atau menampilkan information teks yang tersembunyi saya ganti dengan sistem hover ALERT (Loading..).

INFORMATION :
Untuk membuka dan melihat isi informasi teks dalam box, cukup letakkan panah mouse Anda pada box, maka sistem akan bekerja untuk memberikan waktu loading selama 3 detik sampai box terbuka dengan sempurna, dan Anda bisa melihat dengan jelas informasi teks yang tertulis disana.

Hasilnya:





DEMO SHOW

PENERAPAN KE BLOG
Karena untuk menyimpan beberapa informasi teks yang akan Anda sertakan langsung dalam artikel, maka COPY semua kode dibawah ini, lalu letakkan pada formulir posting mode tulis HTML, CSS lengkapnya seperti ini:

<style>
/* Box Spoiler Alert Information Teks
Code input: element data transition-effect
sumber: http://sahabatblogger77.blogspot.com/
Author name: Devy Indriyani */
@import url(http://fonts.googleapis.com/css?family=Arimo|Fjalla+One);
.spoiler {
  position: relative;color: transparent;text-shadow: 0 0 20px #55657a;
  cursor: help;border:3px double #ccc;padding:8px 15px;background:#333}

.spoiler p {
  background:blue;box-shadow: 0 2px 7px rgba(0,0,0,0.5);color:#fff;
  font:bold italic 18px/32px Verdana,sans-serif;text-shadow:1px 2px 1px #111;
  padding: 4px 25px;right:-14px;top:-40px;position: absolute;border-radius:3px 0 0 3px}

.spoiler p:after {
  border-width: 7px;border-style: solid;
  border-color: blue transparent transparent blue;content: "";
  position: absolute;top:100%;right:0px;width:0px;height:0px}

.spoiler::before, .spoiler::after {
  display: block;position: absolute;line-height: 1;
  font-family: 'Fjalla One', sans-serif;color: yellow;
  text-align: center;text-shadow:none}

.spoiler::before {top: 160px;left: 0;right: 0;font-size: 32px;content: 'MOHON TUNGGU'}
.spoiler::after {
  opacity: 0;top: 190px;left: calc(50% - 36px);width: 60px;font-size: 60px;
  line-height: 72px;text-align: center;clip: rect(0, 72px, 72px, 0);content: '3 2 1';}

.spoiler:hover {
  color: #ccc;text-align: justify;text-shadow: 0 0 0 transparent;
  transition: all 1s; transition-delay: 4s}

.spoiler:hover::before {animation: countdown-before 5s forwards}
.spoiler:hover::after {animation: countdown-after 5s forwards}
@keyframes countdown-before {
25% {transform: translateY(-24px)}
75% {opacity: 1}
100% {opacity: 0;transform: translateY(-24px)}}

@keyframes countdown-after {
  25% {
    opacity: 1;
    clip: rect(0, 72px, 72px, 0);
    transform: translateY(0);
    animation-timing-function: steps(1, start)}
50% {
  clip: rect(72px, 72px, 144px, 0);
  transform: translateY(-72px);
  animation-timing-function: steps(1, start)}
75% {opacity: 1;clip: rect(144px, 72px, 216px, 0);transform: translateY(-144px)}
100% {opacity: 0;clip: rect(144px, 72px, 216px, 0);transform: translateY(-144px)}}
</style>

HTML Markup Data
» Teks warna ORANGE silahkan ganti dengan judul
» Teks warna MERAH untuk menuliskan informasi apa yang akan Anda letakkan disana, silahkan ganti dengan cerita sesuai nice postingan Anda

<div class="spoiler spoiler">
   <p>Information Teks</p>
     ...
      Tuliskan Teks Anda Disini..!!
     ...
</div>

Atau mau melihat beberapa koleksi box Spoiler lainnya disini:
» Menghemat Ruang Posting Dengan Sembunyikan Teks
» Cara Membuat Panel Slide Halaman Posting
» Membuat Panel Slide Untuk Menyimpan Text
» Modifikasi Spoiler Box Dengan CSS3 Efek Toggle