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,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 () {
$('#info').click(function () {
$('#info').fadeOut();
$('#dialog-box').fadeIn();
$('#dialog-overlay').fadeTo("normal", 0.4);
});
$('.closer').click(function () {
$('#info').fadeIn();
$('#dialog-box').fadeOut();
$('#dialog-overlay').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.
