Cara Membuat Dialog Box Keren Di Blog

Selamat datang agan atau aganwati kali ini Saya akan berbagi tips dan trik blogging, yaitu membuat dialog box keren di blog, silakan agan untuk mengikuti beberapa langkah di bawah ini; 

Langkah

1. Login pada dashboard blog Anda masing-masing, lalu pada menu dashboard blog pilih menu template, lalu pilih menu edit html,

2. Copy script di bawah ini lalu cari kode </b:skin> dengan cara

Ctrl

+

F

 , lalu paste tepat di atas kode </b:skin> ,

 #info:before {
content: "Info";
position: fixed;
top: 25px;
left: 175px;
border-radius: 3px;
background-color: #e74c3c;
color: #fff;
padding: 5px 10px;
z-index: 999;
cursor: pointer;
font-size: 12px;
font-weight: bold;
}
#dialog-overlay {
position: fixed !important;
position: absolute;
z-index: 999;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #2c3e50;
display: none;
}
#dialog-box {
position: fixed;
top: 30%;
left: 17%;
right: 29%;
line-height: 1.5em;
font-size: 14px;
color: #fff;
background: #159999;
border: #2c3e50 solid 3px;
box-shadow: 0 0 2px 1px #2c3e50, 0 0 10px black;
padding: 15px;
text-align: justify;
z-index: 999;
display: none;
}
#dialog-box {
position: fixed;
top: 30%;
left: 17%;
right: 29%;
line-height: 1.5em;
font-size: 14px;
color: #fff;
background: #e74c3c;
border: #2c3e50 solid 3px;
box-shadow: 0 0 2px 1px #2c3e50, 0 0 10px black;
padding: 15px;
text-align: justify;
z-index: 999;
display: none;
}
.ttd:after {
content: "Renaldy Ramadani";
position: relative;
float: right;
}
.closer:after {
content: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS1WfRJ2aZ1mP3A2mnicpdbURKzvKxi5dlASpkxzqELctzgJzgDFAZUUtk53Jxvqfn3ajCPlg0o3QFWoN7O_V7ghxr7fcj6s5pScs5UCiUjYjdeuBuNmCtpjMdSC4AgaTike8nizsLoNU/s1600/delete4.png');
position: absolute;
top: -15px;
right: -15px;
background: #e74c3c;
border-radius: 100%;
padding: 8px 12px;
z-index: 999;
cursor: pointer;
border-top: 3px solid #2c3e50;
border-right: 3px solid #2c3e50;

}
 

Silakan sesuaikan script dialog box di atas dengan blog Anda!

3. Setelah itu copy script di bawah ini lalu cari kode </body> dengan cara

Ctrl

+

F

, lalu paste tepat di atas kode </body>,

 <script type='text/javascript'>
$(function () {
 $(&#39;#info&#39;).click(function () {
  $(&#39;#info&#39;).fadeOut();
  $(&#39;#dialog-box&#39;).fadeIn();
  $(&#39;#dialog-overlay&#39;).fadeTo(&quot;normal&quot;, 0.4);
});
 $(&#39;.closer&#39;).click(function () {
  $(&#39;#info&#39;).fadeIn();
  $(&#39;#dialog-box&#39;).fadeOut();
  $(&#39;#dialog-overlay&#39;).fadeOut();
 })
});
</script>
 

4. Setelah itu copy script di bawah ini, setelah itu pada menu dashboard pilih menu tata letak lalu pilih tambahkan gadget, setelah itu pilih menu html / javascript, lalu paste script tersebut pada kolom html / javascript,

 <div id="info"></div>
<div id="dialog-overlay"></div>
<div id="dialog-box" style="font-weight:bold;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgANktcljbzTJ_mEXzOZlq4c0npM7r-4ZBCaRGL0tE73CHArb5Cy7fdqTzEcl4Dz_Asv7QoVegdJFlT9iAm1hPkwYkx7pQ6PVtC1qhfpt0ojhHbhKqbwO_QeSB2h8hBpxMXNfnh0cIUEtQE/s1600/30.gif" original="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgANktcljbzTJ_mEXzOZlq4c0npM7r-4ZBCaRGL0tE73CHArb5Cy7fdqTzEcl4Dz_Asv7QoVegdJFlT9iAm1hPkwYkx7pQ6PVtC1qhfpt0ojhHbhKqbwO_QeSB2h8hBpxMXNfnh0cIUEtQE/s1600/30.gif" style="" />Kata Anda<br />
Kata Anda<br /> Kata Anda<br />Kata Anda<br /><br />
Terima Kasih <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgANktcljbzTJ_mEXzOZlq4c0npM7r-4ZBCaRGL0tE73CHArb5Cy7fdqTzEcl4Dz_Asv7QoVegdJFlT9iAm1hPkwYkx7pQ6PVtC1qhfpt0ojhHbhKqbwO_QeSB2h8hBpxMXNfnh0cIUEtQE/s1600/30.gif" original="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgANktcljbzTJ_mEXzOZlq4c0npM7r-4ZBCaRGL0tE73CHArb5Cy7fdqTzEcl4Dz_Asv7QoVegdJFlT9iAm1hPkwYkx7pQ6PVtC1qhfpt0ojhHbhKqbwO_QeSB2h8hBpxMXNfnh0cIUEtQE/s1600/30.gif" style="" /><br /><br />
<span class="ttd"></span>
<div class="closer" title="Close"></div>
</div> 

Silakan sesuaikan isi kata-kata yang ingin Anda tampilkan pada dialog box!

5. Lalu tambahkan script jquery di blog Anda, tetapi jika di blog Anda sudah terdapat script ini tidak perlu ditambahkan, karena jquery hanya akan bekerja dengan 1 script jquery, jika lebih dari 1 akan terjadi konflik JQuery. Bagi yang belum mempunyai script jquery silkan letakan script JQuery di bawah ini tepat di atas kode </head>,

  <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/> 

6. Simpan.

Nah semoga artikel ini bermanfaat, jangan lupa like, share dan google+nya serta komentar dari Anda, terima kasih.

Share this