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




Spoiler Box




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

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Box Spoiler Alert Information Teks
Ditulis oleh= Devy Indriyani
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 >>
= TERIMA KASIH =

23 komentar

  1. keren banget mba, tapi waktunya kelamaan ..

    BalasHapus
    Balasan
    1. .spoiler:hover::before {animation: countdown-before 5s forwards}
      .spoiler:hover::after {animation: countdown-after 5s forwards}
      .spoiler:hover {
      ....
      ....
      transition: all 1s;
      transition-delay: 4s
      }


      Ubah semua kode ini untuk mempercepat waktu alert (Loading Open) ssuai selera.

      Hapus
    2. wah ada kodenya, boleh dicoba tuh ke TOGEL.eeehhh

      Hapus
    3. wah mas hendri suka ya bermain atau memasang TOGEL, ntar ditangkap POLISI loh mas, itu kan termasuk judi.

      Hapus
    4. nda apa2 ituh Vy.. sy sudah bekap..
      silahkan mas dilanjutkan kegiatannya.. aman..!,

      Hapus
  2. Wah keren ada hitung mundurnyaa
    Biasanya cuma ada close box tanda silang....

    BalasHapus
    Balasan
    1. seperti penjelasan diatas mas Wahyu, metodenya memang sama, namun perintah OPEN yang biasanya dibentuk dengan tombol, saya ganti dengan hover alert delay.

      Hapus
  3. sy cubi dulu yah... klo yg ni berhasil atau gak ,,,hehe

    BalasHapus
    Balasan
    1. kalau gak berhasil mas Fiu balik lagi kesini, kan Devy baik mas, selalu memberikan apa yang mas fiu tanyakan, bukan hanya kepada mas Fiu juga tetapi buat sahabat semua pecinta SAHABAT BLOGGER 77

      Hapus
    2. Blm bsa praktekin nih ... lg blm pegang si lepi ...
      ciaaaah .... bneran nih devy sellu mmbrikan apa yg sya tanyakan ? ")

      Hapus
    3. apa sich yang nggak buat mas fiu (c)

      Hapus
    4. asiiik.. disruput kopinya Kang Jum.!

      Hapus
    5. Ni akang2 bdua lg pada ngpain coba dimari .... hihihi

      Hapus
  4. Efek nya keren sekali mba, untuk kode css nya kalo udah ada font di css template apa gak berpengaruh :-? jd dobel font...

    BalasHapus
    Balasan
    1. blogger membatasi jenis font yang bisa digunakan dan ditampilkan untuk blog. biasanya dituliskan dengan fungsi data PHP seperti ini:

      <link href='http://fonts.googleapis.com/css?family=Bitter%7CBitter%7CDroid+Sans%7CDroid+Sans%7CPT+Sans+Narrow' rel='stylesheet'/>

      Lalu pertanyaannya bagaimana kalau kita ingin membuat tulisan yang jenis fontnya seperti 'Aladin',sans-serif, atau jenis font latin style, yang tidak tersedia pada blogger, maka kita bisa melakukan import untuk jenis font yang kita inginkan dengan media (bukan dengan link PHP).

      contoh seperti ini:
      @import url(http://fonts.googleapis.com/css?family=Arimo|Fjalla+One);

      @import url(http://fonts.googleapis.com/css?family=Allura|Aladin);


      tidak akan bermasalah atau tabrakan, karena kita sisipkan secara langsung pada selektor CSS untuk membeli font (meng-import). bukan dengan link PHP stylesheet

      Hapus
    2. Terimakasih mba, saya jadi nambah pengetahuan lagi nih... :)
      ternyata ada perbedaan antara import font sama manggil PHP font (o)
      saya kira klo dobel bisa bermasalah seperti Jqwery...

      Hapus
  5. keren, kalau ini murni dengan code-codean, gak pakai aplikasi pihak ke 3 dan semacamnya.

    BalasHapus
  6. waw bagus, ini bkinan mba devi sendiri ? berarti jago html nya ya mba hehe :)

    BalasHapus
  7. wah keren juga nihh mba devi saya izin praktek

    BalasHapus
  8. ternyata bisa juga spoiler dibikin delay pada saat kursor ditempatkan pada kolomnya. sungguh suatu tampilan yang menawan dan memang lebih variatif juga sih. saya malah baru kepikiran sista kalau masalah modifikasi ini. saya pelajari susunan kode nya dulu ya. kalau ada yang gak paham saya tanyakan nanti. hanya satu kata .... #salute

    BalasHapus
  9. Ahaha box nya ada countdown nya, haha bisa bikin pembaca penasaran nih.
    Kalau waktunya diperbanyak jadi 100 detik kayanya asik nih. Ngerjain pembaca :D

    BalasHapus
  10. keren mbah,,izin acak2 kodenya,mau digabungin dengan kode lain.. :))

    BalasHapus
  11. .Keren mbak. .Baru tau ada yang beginian hehe. :)

    BalasHapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK