Cara Menambahkan Emoticons Smiley Ke Blog - Hai semua AiRa LoKa best friend... kali ini saya mau bagi-bagi tutorial tentang Cara Menambahkan Emoticons Smiley Ke Blog.
uzumaki lutfan |
hallo sobat uzu, pada kesempatan hari ini saya akan membagikan trik blogger, yaitu cara memasang emoticon pada blog. Walau mungkin di mbah google anda akan menemukan banyak tutorial yang membahas tentang cara menambahkan yahoo smiley emoticons pada komentar blogger, tapi yang menggunakan konsep JQuery mungkin masih jarang. Ini adalah fasilitas emoticons otomatis yang dapat merubah simbol :), :D, :P, menjadi sebuah gambar yang telah ditentukan. Nah, bagi yang mau coba, Langsung saja..
Check It Out......
1. Masuk ke Blogger > Dashboard Blogger > Template > Edit HTML. Cari kode ]]></b:skin>, lalu pastekan script dibawah ini diatas kode ]]></b:skin>.
2. Cari kode </head>. Lalu pastekan script dibawah ini diatas kode </head>./* Emoticon Smiley -------------------------------------------- */
.emoWrap {
background-color:#fff;
border:2px solid#0B6138;border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px;
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;
}
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>Nb: Jika blog anda sudah terpasang JQuery, hapus script yang berwarna biru.
<script type='text/javascript'>
//<![CDATA[
var emoRange = "#comments p, div.emoWrap",
putEmoAbove = "iframe#comment-editor",
emoMessage = "Untuk menyisipkan emoticon, beri satu spasi sebelum memasukkan kode.";
//]]>
</script>
<script src='https://sites.google.com/site/airalokablogspotcom/download/Emoticon%20Smiley.js' type='text/javascript'/>
3. Simpan.
Selamat mencoba!
thanks for tutorialnya gan :)
BalasHapussalam kenal
ok gan, thanks dah mampir...
BalasHapusthanks gan tutorialnya menarik.,
BalasHapusijin coba dan numoang share alamat http://arofidwiandriansya.blogspot.com/2015/01/cara-membuat-teks-berjalan-mondar.html
Ok gan, thanks dah berkunjung.. :)
BalasHapus