Membuat Text Lightbox Effect Menggunakan Modal Bootstrap Pada Blogger

Pernahkah kalian melihat sebuah artikel yang didalamnya ada sebuah tombol yang apabila di klik maka akan mengeluarkan sejenis pop up diarea tersebut? Jika penah maka itulah yang dinamakan dengan Text Lightbox Effect. Disini membuat Text Lightbox Effect dengan modal bootstrap dimana gabungan dari beberapa script kode dianataranya adanya script CSS, Javascript dan HTML.

Text Lightbox Effect ini bermanfaat apabila anda ingin memberikan informasi yang tersembunyi dibalik terks tersebut dan sebagainya. Text Lightbox Effect ini juga mampu untuk meminimalisir penggunaan teks yang banyak pada sebuah bacaan dengan membungkus beberapa kalimat didalamnya.

Bagaimana cara membuat Text Lightbox Effect tersebut? Anda bisa simak penjelasan saya dibawah ini.

Sebelumnya saya menggunakan Text Lightbox Effect pada blogger. Jadi jika anda pengguna wordpress bisa mencari cara lain karena saya belum mencobanya di wordpress. 

CARA PEMASANGAN TEXT LIGHTBOX EFFECT

1. Anda masuk ke 'Tema'. Lihat gambar berikut :
   
2. Lalu pilih 'Sesuaikan' Klik lagi 'Edit HTML' (Untuk berjaga-jaga dari masalah yang timbul pada saat pemasangan sebaiknya anda backup terlebih dahulu template anda, lihat disini Cara Backup & Restore Template Blogger). Lihat gambar berikut :
   
3. Kemudian cari teks </head> lalu masukan kode CSS dibawah ini :
   Lihat gambar berikut :
   
   

   <style type="text/css">
   /* The Modal (background) */
   .modal {
       display: none; /* Hidden by default */
       position: fixed; /* Stay in place */
       z-index: 1; /* Sit on top */
       padding-top: 100px; /* Location of the box */
       left: 0;
       top: 0;
       width: 100%; /* Full width */
       height: 100%; /* Full height */
       overflow: auto; /* Enable scroll if needed */
       background-color: rgb(0,0,0); /* Fallback color */
       background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
   }
   
   /* Modal Content */
   .modal-content {
       position: relative;
       background-color: #fefefe;
       margin: auto;
       padding: 0;
       border: 1px solid #888;
       width: 80%;
       box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
       -webkit-animation-name: animatetop;
       -webkit-animation-duration: 0.4s;
       animation-name: animatetop;
       animation-duration: 0.4s
   }
   
   /* Add Animation */
   @-webkit-keyframes animatetop {
       from {top:-300px; opacity:0} 
       to {top:0; opacity:1}
   }
   
   @keyframes animatetop {
       from {top:-300px; opacity:0}
       to {top:0; opacity:1}
   }
   
   /* The Close Button */
   .close {
       color: white;
       float: right;
       font-size: 28px;
       font-weight: bold;
   }
   
   .close:hover,
   .close:focus {
       color: #000;
       text-decoration: none;
       cursor: pointer;
   }
   
   .modal-header {
       padding: 2px 16px;
       background-color: #5cb85c;
       color: white;
   }
   
   .modal-body {padding: 2px 16px;}
   
   .modal-footer {
       padding: 2px 16px;
       background-color: #5cb85c;
       color: white;
   }
   </style>

4. Cari teks </body> lalu masukan kode Javascript dibawah ini :
   Lihat gambar berikut :
   
   

   <script type="text/javascript">
   //<![CDATA[
   // Get the modal
   var modal = document.getElementById('myModal');
   
   // Get the button that opens the modal
   var btn = document.getElementById("myBtn");
   
   // Get the <span> element that closes the modal
   var span = document.getElementsByClassName("close")[0];
   
   // When the user clicks the button, open the modal 
   btn.onclick = function() {
       modal.style.display = "block";
   }
   
   // When the user clicks on <span> (x), close the modal
   span.onclick = function() {
       modal.style.display = "none";
   }
   
   // When the user clicks anywhere outside of the modal, close it
   window.onclick = function(event) {
       if (event.target == modal) {
           modal.style.display = "none";
       }
   }
   //]]>
   </script>

5. Pilih 'Save' 
6. Sekarang anda buat artikel yang akan diisi dengan Text Lightbox Effect tersebut. Pilih ketikan ke 'Mode HTML' lalu masukan kode HTML dibawah ini :
   Lihat gambar berikut :
   
   

   <h2>Animated Modal with Header and Footer</h2>
   
   <!-- Trigger/Open The Modal -->
   <button id="myBtn">Open Modal</button>
   
   <!-- The Modal -->
   <div id="myModal" class="modal">
   
     <!-- Modal content -->
     <div class="modal-content">
       <div class="modal-header">
         <span class="close">&times;</span>
         <h2>Modal Header</h2>
       </div>
       <div class="modal-body">
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus massa dolor, facilisis at ante a, ornare lobortis est. Proin a accumsan tortor, non lacinia lorem. Etiam suscipit nisl id eros porta, et mollis orci consequat. Curabitur vitae eleifend nulla, in semper neque. Nulla tincidunt sollicitudin nibh, quis pharetra nisl vestibulum id. In hac habitasse platea dictumst. Sed fermentum purus id molestie convallis. Aliquam quam turpis, ultrices vel dapibus a, convallis sit amet nunc. Donec eleifend augue sed quam tincidunt, in posuere nisi dignissim. Phasellus bibendum odio dui, sit amet venenatis augue aliquam et. Morbi non condimentum velit. In non sem convallis, porta dolor vitae, volutpat justo. Vestibulum rutrum pellentesque augue, quis aliquet velit tincidunt ut.</p>
         <p>Dibuat oleh Marwan Abdul Anwar</p>
       </div>
       <div class="modal-footer">
         <h3>Modal Footer</h3>
       </div>
     </div>
   
   </div>

7. Setelah itu, anda tinggal edit saja apa saja yang akan dituliskan pada pop up teks tersebut.
8. Prosee selesai. Lihat gambar berikut :
   
   

   Jadi jika anda ingin membuat artikel yang ada Text Lightbox Effect lagi hanya tinggal memasukan kode HTML-nya saja pada bagian artikel tersebut sesuai dengan langkah pada no. 5. 

Anda bisa lihat contoh dari pembuatan Text Lightbox Effect pada artikel blogger disini : Lihat aku
Seperti itulah cara Text Lightbox Effect pada blogger. Semoga bermanfaat dan jika ada yang mengalami masalah pada saat pemasangan Text Lightbox Effect tersebut coba pahami lagi semua langkah-langkahnya atau bisa berkomentar disini.

Terima kasih anda telah membaca artikel Membuat Text Lightbox Effect Menggunakan Modal Bootstrap Pada Blogger. Jika anda kurang paham silahkan berkomentar dibawah & Ada baiknya jika artikel ini bermanfaat Share ke saudara atau teman anda.

Related Posts: