Untuk penerapan pada blog sahabat infoalya.com dapat meletakkan kode dibawah ini pada halaman statis jika hanya ingin menampilkan pada halaman statis tertentu, begitupula dengan halaman postingan blog, atur sebagai widget jika ingin menampilkan di semua halaman blog, kira-kira seperti itu penjelasannya.
<style type="text/css"> /* CSS Dialog Khusus */ #myModal{background:rgba(8,8,8,0.88);position:fixed;top:0;right:0;width:100%;height:100%;z-index:9}.modal.in .modal-dialog{-webkit-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)}.modal.fade .modal-dialog{-webkit-transition:-webkit-transform .3s ease-out;-moz-transition:-moz-transform .3s ease-out;-o-transition:-o-transform .3s ease-out;transition:transform .3s ease-out;-webkit-transform:translate(0,-25%);-ms-transform:translate(0,-25%);transform:translate(0,-25%)}@media screen and (max-width:480px){.modal-dialog{top:0!important;left:0!important}}@media screen and (max-width:320px){.modal-dialog{top:0!important;left:0!important}}.modal-dialog{position:fixed;top:50px;left:300px;width:auto;margin:10px;width:700px;max-width:100%}.modal-content{position:relative;background-color:#fff;background-clip:padding-box;border:1px solid #999;border:1px solid rgba(0,0,0,.2);border-radius:6px;outline:none;-webkit-box-shadow:0 3px 9px rgba(0,0,0,.5);box-shadow:0 3px 9px rgba(0,0,0,.5)}.modal-header{min-height:16.42857143px;padding:15px;border-bottom:1px solid #e5e5e5}.modal-header .close{margin-top:-2px}button.close{-webkit-appearance:none;padding:0;cursor:pointer;background:transparent;border:0}.close{float:right;font-size:21px;font-weight:700;line-height:1;color:#000;text-shadow:0 1px 0 #fff;filter:alpha(opacity=20);opacity:.2}.modal-title{margin:0;font-size:150%!important;margin-bottom:-10px!important}.modal-body{position:relative;padding:20px}.modal-footer{padding:19px 20px 20px;margin-top:15px;text-align:right;border-top:1px solid #e5e5e5}.btn{display:inline-block;padding:6px 12px;margin-bottom:0;font-size:14px;font-weight:400;line-height:1.42857143;text-align:center;white-space:nowrap;vertical-align:middle;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-image:none;border:1px solid transparent;border-radius:4px}.btn-primary{color:#fff;background-color:#428bca;border-color:#357ebd} </style> <div id="myModal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button onclick='document.getElementById('myModal').style.display='none'' aria-hidden="true" id="closex" class="close" data-dismiss="modal" type="button">×</button> <h4 class="modal-title" id="myModalLabel"> Modal title Here</h4> </div> <div class="modal-body"> Ini adalah contoh dialog box yang muncul saat loading /masuk di blog. Dapat diletakkan di laman statis, posting ataupun sebagai widget blog. </div> <div class="modal-footer"> <button onclick='document.getElementById('myModal').style.display='none'' class="btn btn-primary" type="button">Close</button> </div> </div> </div> </div>
Mungkin itu yang dapat admin sampaikan untuk hari ini, semoga dapat membawa manfaat.