Membuat Dialog Box untuk Button Info di Template Subculture Fix 2018
Selamat Datang di ruang Android Tutorial, Pada Kesempatan kali ini kami akan membahas tentang Membuat Dialog Box untuk Button Info di Template Subculture Fix, Disini juga kami telah menyediakan beberapa tutorial lengkap dengan gambar dan link downloadnya. mudah-mudahan isi postingan yang kami tulis dapat dengan mudah anda mengerti.

Cara Terbaru Membuat Dialog Box untuk Button Info di Template Subculture Fix
Cara Yang Benar Membuat Dialog Box untuk Button Info di Template Subculture Fix

Membuat Dialog Box untuk Button Info di Template Subculture Fix

Mungkin sobat blogger yang memakai template subculture fix pernah bertanya Ko template saya tidak ada button info yang dipojok disebelah header ? nah saya akan menjawab pertanyaan sobat, langsung aja :

Caranya:

1. Login ke blog dan masuk ke menu edit html
2. simpan css ini diatas </style>

#dialog-box {
    position:fixed;
    top: 50%;
    left:50%;
    width:550px;
 height: 160px;
    margin-top: -150px;
    margin-left: -310px;
    color:white;
    background-color:#174a87;
    border:8px solid #0a2e58;
    box-shadow: 0 0 2px 1px black,0 0 10px black;
 font-size: 14px;
    line-height:1.6em;
    padding:15px;
    text-align:left;
    border-radius:5px;
    z-index:1000;
 display:none;
}
.close {
    background:#0a2e58;
    color:#d9e0e9;
    border-radius:3px;
    padding:4px;
    text-align:center;
    margin:0px auto 2px;
    cursor:pointer;
    width:30px;
}
.close:hover {
    background-color:#041f3e
}
.muncul:before {
content: "Info";
position: fixed;
top: 15px;
right: 342px;
background-color: #D7C446;
color: #fff;
padding: 5px 10px;
z-index: 999;
cursor: pointer;
font-size: 12px;
font-weight: bold;
}
#dialog-box .ttd:after {
  content: ".:: Rhoby Kornela ::.";
  position: relative;
  float: right;
}
#dialog-overlay {
    position:fixed !important;
    position:absolute; /*tambahkan posisi ini supaya fix di IE*/
    z-index:999; /*nilai ini harus dibawah nila z-index pada kotak dialog*/
    top:0px;
    right:0px;
    bottom:0px;
    left:0px;
    background-color:#000;
    display:none;
} 

3. Simpan Javascipt ini diatas </body>

<script type='text/javascript'>
//<![CDATA[
$(function() {
     //Tampilkan kotak dialog saat .muncul diklik
     $('.muncul').click(function() {
          $('#dialog-box').fadeIn();
          $('#dialog-overlay').fadeTo("normal", 0.4);
     });
     //Tutup kotak dialog saat .close diklik
     $('.close').click(function() {
          $('#dialog-box').fadeOut();
          $('#dialog-overlay').hide();
     });
});
//]]>
</script>

4. Simpan kode ini diatas </header>

<div class='muncul'/>
<div id='dialog-overlay'/>
<div id='dialog-box'>
Selamat datang di Blog Campus Bugs. Silahkan lihat Daftar Isi untuk mendapatkan berbagai Informasi tentang Networking dan Android yang mudah - mudahan bermanfaat untuk sobat semua. Jangan lupa setelah anda membaca artikel, direkomendasikan untuk meninggalkan jejak di kolom Komentar :).<br/><br/><br/>
<span class='ttd'/>
    <div class='close'>OK</div>
</div> 

5. Simpan Template, dan lihat hasilnya.. ;)
Bisa sobat modifikasi ulang tampilannya, sesuaikan dengan selera sobat yaa.....
Semoga Bermanfaat ^_^

Selesai sudah Membuat Dialog Box untuk Button Info di Template Subculture Fix 2018

Semoga anda bisa mengikuti langkah - langkah Membuat Dialog Box untuk Button Info di Template Subculture Fix dengan benar dan mudah-mudahan bisa memberi manfaat untuk anda semua. sekian postingan Android Tutorial kali ini.

Anda telah membaca artikel Membuat Dialog Box untuk Button Info di Template Subculture Fix dengan url permalink http://eurobokep.blogspot.com/2014/07/membuat-dialog-box-untuk-button-info-di.html Terimakasih atas kunjungannya jangan lupa share Artikel ini.

Tag : CSS,