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 ^_^

Source: Blog Dian Anarchyta & & Blog Kangismet