?

Catatan

NULL

Tentang Blog Ini×

Blog ini adalah tempat Saya menuangkan hasil-hasil karya Saya sekaligus tempat saya belajar membangun sebuah blog/website dan berharap untuk tetap bisa memberikan yang terbaik kepada pembaca. kom4 (seekor nyamuk kecil yang tak pernah berhenti menyebarkan wabah.!)

Tentang Saya

Salam pembuka dari saya sebagai penulis blog ini sebelumnya akan memperkenalkan diri saya sebagai salah satu blogger yang berasal dari Sulawesi.

Berikut adalah data diri saya Dharla Ferdana, Bagi para pembaca yang mungkin juga ingin menghubungi saya, bisa melihat alamat juga kontak saya yang disediakan dibawah ini. jika ada yang mengaku saya,namun mempunyai data yang berbeda dari yang ada dibawah, maka itu bukanlah saya. berikut data diri saya:

Nama : Muh. Dharla Ferdana Samudra
Email : dharlaferdana@yahoo.co.id
Invite My BBM : PIN : 2779647D

iklan
Bagikan kepada teman!

Modifikasi Tampilan Alert Emoticon Pada Komentar

Alert Default
Tampilan Alert sebelum di modifikasi (Default).

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).

Alert modifikasi
Tampilan Alert sesudah di modifikasi.

Baik langsung saja, Untuk membuatnya, pertama-tama masuklah ke menu Template kemudian klik Edit HTML

Edit HTML Blogger
Mengedit 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://dh-f.googlecode.com/svn/trunk/dhf-emoAuto.js' type='text/javascript'></script>

Klik Simpan Template dan lihat hasilnya.

iklanBuruan Pasang Iklan Anda Di Sini Dengan Harga Yang Terjangkau.Pajang bisnis online anda di blog http://kom4.blogspot.com dan dapatkan keuntungan yang lebih dari penjualan produk bisnis anda.
iklanBuruan Pasang Iklan Anda Di Sini Dengan Harga Yang Terjangkau.Pajang bisnis online anda di blog http://kom4.blogspot.com/ dan dapatkan keuntungan yang lebih dari penjualan produk bisnis anda.
Iklan Murah

3 Komentar:

 Permalink
test emoticon :emo1:
 Permalink
boss, request tutorial ym emoticons-nya, keren. =))
 Permalink
test,,test

Tautan (link) hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan tautan dengan aman, gunakan kode <i rel="anchor">http://nama_situs.com</i>
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG ANDA</i>
Untuk menyisipkan gambar, gunakan kode <i rel="image">URL GAMBAR</i>
Untuk menyisipkan judul, gunakan tag <b rel="h4">JUDUL ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA DI SINI...</strong>
Untuk menciptakan efek huruf miring gunakan tag <em>TEKS ANDA DI SINI...</em>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.
:) :( ^_^ :D ;) :-bd :'( :\ :p B) :Q :Ozz 7:( \o/ **p <3 0:) :-a 7:O *fck* x@ X@ ~x( :yaya: =p* Klik untuk melihat kode!

Konversi Kode di Sini (Jendela Munculan) Emoticon

Batal

Pasang IklanPasang IklanPasang IklanPasang Iklan

Terakhir Diperbaharui

Ke atas!