Artikel ini sebenarnya sudah pernah saya bahas pada postingan saya yang lalu yaitu pada postingan Emoticon Blogger Otomatis dengan JQuery namun karena adanya sedikit keganjilan pada postingan dahulu itu kita tidak dapat memodifikasi pemberitahuan pada saat emoticon tersebut di klik yang mana tampilannya masih menggunakan tampilan alert default. Dan pada postingan saya kali ini tampilan pemberitahuaanya sudah bisa kita edit sesuka kita (tidak lagi menggunakan alert default).
Baik langsung saja, Untuk membuatnya, pertama-tama masuklah ke menu Template kemudian klik Edit HTML
Temukan kode ini:
</body>
Salin kode di bawah ini dan letakkan di atasnya:
<style type='text/css'>
#alert-box {
position:fixed !important;
position:absolute;
top:50px;
right:0;
left:0;
z-index:9999;
text-align:center;
width:370px;
margin:0 auto;
padding-bottom:10px;
height:auto;
background-color:#fff;
-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0 1px 2px rgba(0,0,0,0.4);
box-shadow:0 1px 2px rgba(0,0,0,0.4);
z-index:1000;
opacity:0;
}
#alert-box .title {
background-color:#3B5998;
padding:10px;
color:#fff;
font:normal 16px Arial,Sans-Serif;
margin:0;
position:relative;
}
#alert-box .message {
background-color:white;
width:88%;
margin:10px 0 2px 15px;
padding:2px 5px;
border:1px solid #ccc;
text-align:center;
display:block;
}
#alert-box .close-wrapper {
text-align:center;
padding:10px 15px 0;
border-top:1px solid #ddd;
margin-top:10px;
}
#alert-box .close-wrapper .close {
position:relative;
left:43%;
width:30px;
background-color:#FF0C39;
border:none;
font:bold 12px Arial,Sans-Serif;
color:#fff;
padding:5px 10px;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
cursor:pointer;
}
#alert-box .close-wrapper .close:hover {
background-color:#aaa;
}
#emoWrap {
padding:10px 14px;
color:black;
font:bold 12px Tahoma,Arial,Sans-Serif;
text-align:center;
}
img.emo, input.emoKey {
display:inline-block; /* Penting! */
*display:inline;
vertical-align:middle;
}
input.emoKey {
border:1px solid #ccc;
background-color:white;
font:bold 11px Arial,Sans-Serif;
padding:1px 2px;
margin:0px 0px 0px 2px;
color:black;
}
</style>
<div id="alert-box">
<div class='title'>PENTING UNTUK DIPERHATIKAN</div>
<div class="message"></div>
<div class='close-wrapper'>
<div class="close">OK</div>
</div>
</div>
<script type='text/javascript'>
//<![CDATA[
var emoRange = "#comments p, div#emoWrap",
putEmoAbove = "#comment-editor",
emoMessage = "Untuk menyisipkan emotikon setidaknya Anda harus menambahkan satu spasi di depan. Jangan pernah melupakan itu atau emotikon Anda tidak bisa diterjemahkan.";
//]]>
</script>
<script src='http://externalproject.googlecode.com/svn/trunk/eks/js/emo.auto.v1.js' type='text/javascript'></script>Klik Simpan Template dan lihat hasilnya.
0 Komentar: