Jquery Emoticos untuk Blogger

Posted by Unknown at 8:15 PM . Wednesday, November 6, 2013

Labels: blogger, emoticos, jquery, untuk

Sebelumnya saya sudah pernah berbagi tentang Tambahkan Emoticon pada Blog, yang bisa ditampilkan baik pada Komentar maupun pada Postingan :y; dan untuk Blog yang memakai Komentar Thread hanya akan tampil pada Komentarnya saja :q; seperti Emoticons yang diciptakan oleh master DTE yang sudah saya Edit supaya kawan tidak berkecil hati karena bisa tampil baik di Komentar maupun di Postingan Blog, cuma Logo Iconnya berbeda [maaf saya belum sempat untuk meng-Editnya] agar sama :z;
Perlu kawan ketahui, pada umumnya Emoticons mempergunakan simbol misalnya :) :# atau simbol yang lainnya untuk pemanggilan, tapi saya tetap mempergunakan : [titik-dua], abjad [a s/d z] ; [titik-koma] tanpa spasi kalau tidak lain dari yang lain bukan namanya

Khusus untuk Postingan

Khusus untuk Komentar

Caranya sebagai berikut :

Masuk Account Blogger dengan ID kawan
Pada Dasbor pilih Template - Edit HTML
Scrool ke bawah sampai </body>
Copas script berikut tepat diatasnya

<style type=text/css>
.emoWrap {background-color:#585858;border:0px solid #D3BA59;padding:10px 14px;color: black;font:normal bold 12px/normal Tahoma,Arial,Sans-Serif;text-align:center;}
.emo,.emoKey {display:inline-block; /* Penting! */ *display:inline;vertical-align:middle;}
.emoKey {border:1px solid #ccc;background-color:white;font:normal bold 11px/normal Arial,Sans-Serif;padding:1px 2px;margin:0 0 0 2px;color:black;}
</style>
<strong id="dte_emo-bar">Klik untuk melihat kode:
<br/>
<style type=text/css>
.emoWrap {background-color:#585858;border:0px solid #D3BA59;padding:10px 14px;color: black;font:normal bold 12px/normal Tahoma,Arial,Sans-Serif;text-align:center;}
.emo,.emoKey {display:inline-block; /* Penting! */ *display:inline;vertical-align:middle;}
.emoKey {border:1px solid #ccc;background-color:white;font:normal bold 11px/normal Arial,Sans-Serif;padding:1px 2px;margin:0 0 0 2px;color:black;}
</style>
<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js type=text/javascript/>
<script type=text/javascript>
//<![CDATA[
var emoRange = "#comments p, div.emoWrap",
putEmoAbove = "#comment-editor",
emoMessage = "Untuk menyisipkan emoticon setidaknya Anda harus menambahkan satu spasi di awal simbol.";
//]]>
</script>
<script src=https://sites.google.com/site/blogbegocreation/javascript/autoemoticons.js type=text/javascript/>
<script src=https://sites.google.com/site/blogbegocreation/javascript/Editor_Smyle.js type=text/javascript/>
</strong>

Simpan Template kawan
Selanjutnya cari <b:includable id=threaded-comment-form var=post> atau yang mirip seperti berikut ini kodenya

<b:includable id=threaded-comment-form var=post>
<div class=comment-form id=comment-form> <!...Kotak Pesan kalau ada...>
<p><data:blogCommentMessage/></p>
<br/>
<strong id="dte_emo-bar">Klik untuk melihat kode:
</strong> <!...Kode Pesan yang kawan Tambahkan...>
<data:blogTeamBlogMessage/>
<b:if cond=data:mobile>
<a expr:href=data:post.commentFormIframeSrc id=comment-editor-src/>
<iframe class=blogger-iframe-colorize blogger-comment-from-post id=comment-editor name=comment-editor src= style=display:none;border:none;background:none;width:100%;height:300px;/>
<b:else/> <!...Ciri yang kawan Cari...>
<a expr:href=data:post.commentFormIframeSrc id=comment-editor-src/>
<iframe class=blogger-iframe-colorize blogger-comment-from-post id=comment-editor name=comment-editor src= style=border:none;background:none;width:100%;height:300px;/>
</b:if>
<data:post.friendConnectJs/>
<data:post.cmtfpIframe/>
<script type=text/javascript>
BLOG_CMT_createIframe('<data:post.appRpcRelayPath/>', '<data:post.communityId/>');
</script>
</div></b:includable>

Teks yang saya beri warna merah adalah Kotak Pesan untuk Template yang sudah ditambahkan
Teks yang saya beri warna biru adalah Pesan untuk melihat Kode Emoticons - ditambahkan
Simpan Template kawan

Klik Saya