Konten Light Box Dengan Tombol On Off - Apa kabar sahabat semua.? yang pasti semoga sehat selalu dan terus semangat menulis konten artikel untuk menambah jumlah posting di blog Anda masing-masing. Bukan seperti saya yang sudah sekian lama terdiam tanpa ada kabar berita terbaru menghias blog sederhana ini seperti layaknya Konten Light Box Dengan Tombol On Off (Terkadang menyala, terkadang redup) tetapi lebih sering redup, hehe..!!.

Karena sebelumnya Box Tulisan Versi Google Chrome sudah pernah kita bahas, untuk mengawali bulan baru ditahun yang baru ini, admin SAHABAT BLOGGER 77 akan memberikan sedikit trik cara membuat konten informasi box yang bisa Anda nyalakan dan padamkan dengan tombol ON/OFF seperti ini:





DEMO SHOW




light box content image



Next - Membuat Album Gambar Klik Zoom


Biasanya untuk membuat sebuah box pada tulisan cukup menambahkan border, maka konten sudah berbentuk box. Untuk Konten Light Box kali ini, semua rangka border saya rangkai dengan penggunaan box-shadow, lalu saya hubungkan dengan perintah power-light tombol on off agar konten box dapat Anda nyalakan dan padamkan jika tombol tersebut di KLIK. Untuk membuatnya, Anda cukup salin kode CSS dibawah ini, lalu tempatkan dimana Anda ingin menampilkannya. Kode lengkapnya seperti ini:



#power (display:none}
.lightbox {
  position: absolute;left: 50%;
  margin-left: -16rem;top: 5rem;
  transform-style: preserve-3d}

.ebook:hover .power-button {-webkit-animation: power 1s infinite}
.ebook *:before, .ebook *:after {position: absolute;content: ""}
.rotation {transform: rotateX(0deg) rotateY(5deg) rotateZ(0deg)}
.sprite {position: absolute;}
.scrollbar {
  top: 0.5rem;left: 1rem;width: 1rem;height: 16.8rem;
  background: #63e6db;box-shadow: 0 0 1rem #63e6db;
  border-radius:15px}

.frame > .sprite {height: 1.2rem;width: 30rem;background: #4d4837;}
.frame .sprite:nth-child(1) {
  z-index: 9;left: 1.2rem;height: 2.5rem;width: 6.8rem;
  border-radius: 0 0.4rem 0.4rem 0;background: #3f3a2d;
  box-shadow: inset -0.1rem 0.1rem 0.1rem 0 #b9a68e,
              0 0.1rem 0.1rem 0 #111111}

.frame .sprite:nth-child(1):before {
  width: 2.4rem;height: 1.6rem;left: 3.8rem;top: 0.5rem;
  border-radius: 0.3rem;
  box-shadow: inset -0.1rem -0.1rem 0.1rem 0 #b9a68e,
              inset 0.1rem 0.1rem 0.1rem 0 #111111}

.frame .sprite:nth-child(1):after {
  width: 2rem;height: 1.2rem;left: 4rem;top: 0.7rem;
  border-radius: 0.3rem;
  box-shadow: inset -0.1rem -0.1rem 0.1rem 0 #111111,
              inset 0.1rem 0.1rem 0.1rem 0 #b9a68e}

.frame .sprite:nth-child(2) {
  z-index: 1;left: 7.4rem;top: 1.2rem;height: 1rem;
  width: 27.9rem;border-radius: 0 1rem 0 0;
  box-shadow: inset 0 0.1rem 0.1rem 0 #b9a68e,
              0 0.1rem 0.1rem 0 #4d4837}

.frame .sprite:nth-child(2):after {
  content: "";position: absolute;top: 0.8rem;width: 1rem;
  height: 0.3rem;background: #4d4837}

.frame .sprite:nth-child(3) {
  z-index: 2;left: 34.7rem;top: 2rem;
  height: 18.4rem;width: 0.6rem;
  box-shadow: -0.5rem 0 0 0 #4d4837, 0.1rem 0 0 0 #111111}

.frame .sprite:nth-child(4) {
  z-index: 1;left: 7.4rem;top: 20.3rem;height: 1rem;
  width: 27.9rem;border-radius: 0 0 1rem 0;
  box-shadow: inset 0 0 0.1rem 0 #4d4837,
              0.2rem 0.2rem 0.2rem 0 #111111}

.frame .sprite:nth-child(4):after {
  content: "";position: absolute;bottom: 0.8rem;
  width: 1rem;height: 0.3rem;background: #4d4837}

.frame .sprite:nth-child(5) {
  z-index: 9;left: 1.2rem;top: 20rem;
  height: 2.5rem;width: 6.8rem;
  border-radius: 0 0.4rem 0.4rem 0;
  box-shadow: inset -0.1rem 0 0.1rem 0 #b9a68e,
              0 0.2rem 0.1rem 0 #111111,
              0 -0.1rem 0.1rem 0 #111111}

.frame .sprite:nth-child(5):before {
  width: 2.4rem;height: 1.6rem;left: 3.8rem;
  top: 0.5rem;border-radius: 0.3rem;
  box-shadow: inset -0.1rem -0.1rem 0.1rem 0 #b9a68e,
              inset 0.1rem 0.1rem 0.1rem 0 #111111}

.frame .sprite:nth-child(5):after {
  width: 2rem;height: 1.2rem;left: 4rem;
  top: 0.7rem;border-radius: 0.3rem;
  box-shadow: inset -0.1rem -0.1rem 0.1rem 0 #111111,
              inset 0.1rem 0.1rem 0.1rem 0 #b9a68e}

.frame .sprite:nth-child(6) {
  z-index: 9;left: 1.2rem;top: 2.3rem;
  height: 18rem;width: 3.8rem;
  background: -webkit-linear-gradient(45deg, #4d4837 0%, #3f3a2d 100%);
  background: -moz-linear-gradient(45deg, #4d4837 0%, #3f3a2d 100%);
  background: linear-gradient(45deg, #4d4837 0%, #3f3a2d 100%)}

.frame .sprite:nth-child(7) {
  z-index: 9;left: 0;height: 22.5rem;
  width: 1.2rem;border-radius: 0.4rem 0 0 0.4rem;
  background: -webkit-linear-gradient(45deg, #4d4837 0%, #3f3a2d 50%);
  background: -moz-linear-gradient(45deg, #4d4837 0%, #3f3a2d 50%);
  background: linear-gradient(45deg, #4d4837 0%, #3f3a2d 50%);
  box-shadow: inset 0.1rem 0.1rem 0 0 #b9a68e, inset -0.1rem 0 0.6rem 0 #695e4f}

.decoration .power-button {
  z-index: 10;left: 0.2rem;top: 10rem;
  height: 1.4rem;width: 1.4rem;cursor: pointer;
  border-radius:50%;box-shadow:1px 2px 3px #111}

.decoration #power + .power-button {background: #bdbdbd}
.decoration #power:checked + .power-button {background: #7FFF00}
.decoration .screen {
  z-index: 0;top: 2.3rem;left: 4.5rem;width: 29.6rem;
  height: 18rem;padding: 1.4rem 1.4rem 1.4rem 4rem;
  box-sizing: border-box;border-radius: 0.5rem;
  color: #63e6db;text-shadow: 0 0 1rem #63e6db;
  background: linear-gradient(45deg, rgba(183, 173, 112, 0.04) 0%, rgba(34, 34, 34, 0.04) 35%, rgba(183, 173, 112, 0.05) 54%, rgba(34, 34, 34, 0.04) 79%, rgba(183, 173, 112, 0.07) 100%);
  box-shadow: 0 0 0 0.5rem #4d4837}

.decoration .screen * {opacity: 0;}
.decoration .screen p {
  position: relative;margin-bottom: 1.5em;
  line-height: 1.5em;font-size: 1.2rem}

.decoration .screen:after {
  top:0 !important;left: 0.5rem;width: 0.1rem;
  height: 18rem;background: #ddd}

.decoration #power:checked ~ .screen {
  box-shadow: inset 0 0 2rem 0.1rem #63e6db, 0 0 0 0.5rem #4d4837;}

.decoration #power:checked ~ .screen:after {background: #8ba18f}
.decoration #power:checked ~ .screen * {opacity: 1;transition: all 0.8s ease}
.decoration .handle {
  z-index: 9;top:4px;left: 2.4rem;
  height: 18rem;width: 1.8rem;
  background: -webkit-linear-gradient(left, #b9a68e 0%, #665c4e 50%, #665c4e 74%, #b9a68e 100%);
  background: -moz-linear-gradient(left, #b9a68e 0%, #665c4e 50%, #665c4e 74%, #b9a68e 100%);
  background: linear-gradient(left, #b9a68e 0%, #665c4e 50%, #665c4e 74%, #b9a68e 100%);
  border-radius: 0.3rem;
  box-shadow: 0.2rem 0.2rem 1rem 0 rgba(0, 0, 0, 0.4);
  border-bottom:2px solid red}

.decoration .logo {
  z-index: 9;top: 18.8rem;left: 1.4rem;height: 3.3rem;
  width: 3.3rem;border-radius:50%;
  background-image: url('http://3.bp.blogspot.com/-RTGO6FtWxRM/VKD751x2X5I/AAAAAAAABHc/_XqoqIPeN7I/s600/sb-77%2Blogo.png');background-size: 100% auto}


Anda bisa berinovasi disana, dimana sepantasnya konten light box seperti ini akan Anda tempatkan, apakah untuk ditampilkan saat Anda akan membahas beberapa informasi penting dalam postingan atau sebagai smartlink info author box di blog. Anda cukup tuliskan konten apa yang akan Anda informasikan dengan HTML berikut:


<div class="lightbox">
   <div class="ebook rotation">
        <div class="frame">
             <div class="sprite"></div>
             <div class="sprite"></div>
             <div class="sprite"></div>
             <div class="sprite"></div>
             <div class="sprite"></div>
             <div class="sprite"></div>
             <div class="sprite"></div>
        </div>
                  <div class="decoration">
<input checked="true" id="power" type="checkbox" />
<label class="power-button sprite" for="power"></label>
<div class="handle sprite"></div>
<div class="logo sprite"></div>
                     <div class="screen sprite">
                           <div class="scrollbar sprite"></div>

              <div class="content">
                 <p>Tulis Konten Anda Disini...</p>
              </div>
                     </div><!..ending screen sprite..!>
                  </div><!..ending decoration..!>
   </div><!..ending ebook rotation..!>
</div><!..ending lightbox..!>

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Konten Light Box Dengan Tombol On Off
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 =

26 komentar

  1. Hallo mba devi, kalau datang kesini pasti aku tes demo dulu baru baca artikelnya hehe...ada tombol on off ya, bagus banget vy.. trims ya..

    BalasHapus
    Balasan
    1. hallo juga teh, iya neh teh baru nongol demo-demo SAHABAT BLOGGER 77.
      terimakasih teh, masih ingat sama devy,hehe

      Hapus
    2. kang jum juga masih inget kogk sama mbak devy :d

      Hapus
    3. persis kayak Bos Santika, kalau kesini pasti cek demonya dulu, baru baca penjelasanya, hehehe...

      Hapus
    4. klo ama sy pada inget gak coba ? klo gak inget juga sy pulng dlu ah cari topeng ,,,,

      Hapus
    5. emang tips cantik dari teh santika kemarin sudah dicoba belum mas Fiu. kok langsung mau pulang aja, hehe

      Hapus
    6. pulang mw ambil bungkusan tips nya dulu, supaya bisa di praktekin ke devy biar makin cantik gitu .... assssssiiiiik .... ah .... (o)

      Hapus
  2. tanpa jquery kah ?
    Wow mantab ni kak, ijin nyobain ya !


    Admin : www.sagitasoft.com

    BalasHapus
  3. Wah ada yang baru neh.. makasih penjelasannya...

    BalasHapus
  4. selalu ada tutorial menarik yia, nggak terpikirkan sama sekali light box dengan tombol on off, good....

    BalasHapus
  5. Wah Mbak devy keren amat. (h)
    Oh yah Mbak, tulisan yang di dalammnya masih tetap keideks gak sama google?

    BalasHapus
    Balasan
    1. dituliskan dalam wilayah HTML, jadi masih terbaca oleh spider

      Hapus
    2. Trus, kalau dicek di gtmetrix, kira-kira angka gtmetrixnya tetap bisa jadi nilai "A" gak yah.

      Hapus
  6. Lightboxnya cantik sekali.. kayak yang bikin. hidungnya pegang ya.. hehe

    BalasHapus
  7. Weiss, keren banget mbak, (h)

    BalasHapus
  8. wah mbk devi kok pinter banget buat ginian, minumnya apa ya?

    BalasHapus
    Balasan
    1. devy itu minumnya air yang ditaruh di gelas dan di botol mas bud ,,,hehe

      Hapus
    2. kalau mas budi bilang Devy pintar, berarti apa yang diminum orang pintar, itu juga yang devy minum.

      Orang pintar minum Tolak Angin, hehe..

      Hapus
    3. alhamdulillah saya berrti saya termasuk orang yang pintar

      Hapus
  9. numpang ngopy ya , tampilan light box nya bagus :)

    BalasHapus
  10. Kek tipi yeee mbak, bisa di off/on

    BalasHapus
  11. keren ya kalau paham masalah bahasa pemrogaman ini, bisa di edit sana sini

    BalasHapus
  12. mantaf mbak......! keyeeeen lagi... (h)

    BalasHapus
  13. wow, salute salute, keren banget mbak Dev, bungkus ah

    BalasHapus
  14. maff, untuk kode css nya, ditaro dimana mbak,..??

    BalasHapus
    Balasan
    1. Dalam area HTML Template letak CSS biasanya selalu diapit oleh tag <b:skin>...</b:skin>, mas ari bisa letakkan kode CSS diatas, namun jika fungsinya hanya untuk sekali tampilan pada postingan letakkan pada formulir kosong saat akan membuat artikel baru mode tulis HTML bukan yang Compose.
      Namun jang lupa untuk menambahkan atribut style. contoh seperti ini:

      <style type='text/css'>
      Letakkan CSS disini..
      </style>



      http://2.bp.blogspot.com/-NTfAelkvUWA/VLspREv10YI/AAAAAAAABjs/gbQKulTjDi4/s600/formulir%2BHTML.jpg

      Hapus

  • 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