Tutorial blogging kali ini sebenarnya sudah lama banget, admin memutuskan untuk mempostingnya kembali tujuannya hanya untuk melengkapi panduan blogging yang ada di blog ini, hhe.
baiklah, kembali ke topiknya, tujuan pemasangan emoticon itu sendiri kurang lebih agar pengunjung yang singgah di blog sobat dapat tertarik untuk berkomentar pada postingan yang telah sobat buat.
5. Save template
Bagi sobat yang tertarik untuk memasang maupun mengganti emoticon di blognya maka saya jamin deh blog sobat akan tambah lebih keren tentunya semakin seo.
Untuk melihat demonya secara langsung, sobat bisa melihatnya di kolom komentar blog ini.
Cara memasang emotion pada komentar blog:
1. Login ke akun blogger sobat atau klik disini
2. Pada Dashboard pilih Template » Edit HTML
3. Cari kode </body> kemudian letakkan code berikut tepat di atasnya
2. Pada Dashboard pilih Template » Edit HTML
3. Cari kode </body> kemudian letakkan code berikut tepat di atasnya
<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
//<![CDATA[
var emoRange = "#comments p, div.emoWrap",
putEmoAbove = "iframe#comment-editor",
emoMessage = "To insert emoticon you must added at least one space before the code.";
// Emoticon bar before comment-form
$(function() {
$(putEmoAbove)
.before('<div style="text-align:center" class="emoWrap"> :) :)) ;(( :-) =)) ;( ;-( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ $-) (b) (f) x-) (k) (h) (c) cheer <br/><b>Click to see the code!</b><br/>To insert emoticon you must added at least one space before the code.</div>');
var emo = function(emo, imgRep, emoKey) {
$(emoRange)
.each(function() {
$(this)
.html($(this)
.html()
.replace(/<br>:/g, "<br> :")
.replace(/<br>;/g, "<br> ;")
.replace(/<br>=/g, "<br> =")
.replace(/<br>\^/g, "<br> ^")
.replace(emo, " <img style='max-height:24px' src='" + imgRep + "' class='emo delayLoad' alt='" + emoKey + "' />"));
});
};
emo(/\s:\)\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqCXsHsl3Ol-lYYpyvt0Hv5X7vW6q5CC4oR7Hob_cgYcEUBFuZaUtY65E3g5foMOQBL94Ckhuzdy_J9hgKymZNuZ5KsVmkvL-1yF0u_3r4Om8aXv3PfePX-u7u8VsBdZOwrbMbrKrcP70/s36/03.gif", ":))");
emo(/\s;\(\(+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrtPZB6eH-iqIzV21583rOMjLrbtlRN_wWNf1fJUZWfWI0Oge2Vbqtt_zfdQJVBSoNg6XLaPUHNHyh3UQUfYIj9DgKG6gxibHm0ymLkNQxSI1TBooyJKPpgTT0NtaL649hKI0d0MAKbBw/s47/06.gif", ";((");
emo(/\s:\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKjlWjN9do5WPHkyte_Me-LUJR6is7YSQQMepFYz4qkxSZmnV-FYqgfxYcpLxW6xpgI4gdK3Z1-rP42oA4fFHe0EIXCBzqRy-1Azy1RZIHQ2mRRRc68ZiBLuMv5L8R_c2Bn9KytkfnQmI/s36/01.gif", ":)");
emo(/\s:-\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhq7-1LUMi2ylZJAJzsM2krafWinhqkvPjaZEhHDDvt3to0-cw9wE0NrZpdxf4JXyLl0PMf4yc-wj-DT4s8n2bv2A9CstONyVDI7iS4d0fQoIzeLOrxEH-q595ka7MfL7P8PzlU4lIIlqk/s36/02.gif", ":-)");
emo(/\s=\)\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWJLxgWNIqlyE6Y4v_MMCJhk9zl_0qYJlwli2Qjz1ZMj9EuN4zYsV9xd9IbTNhUXa_eg7u1D9w1UlJetiuLRTmruFbCT5z_D7DI9Br3iBPIlV0afQIjJgWA05RC_oJG5NOwQ7O0J74MDQ/s36/03a.gif", "=))");
emo(/\s;\(+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhmIilqyv7A48foeqKDyrFsBhTIuQ43QIuembD4AyIOQ05P8N1wwkUXVJwFtxLwZv0pnB5C4sXPolbCzH35x58LHlDUzEDZm3hiKkhyP_f5R16jF9Pd_WKuOZd1EWFnAlvy7SwmR_hAOk/s36/04.gif", ";(");
emo(/\s;-\(+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmpAPkL05g4q3AR6eaE8WqQcepmX9CWjsmccyGT-r9cIt8jfqIOWbH3Tn0Y6LvyjjJlBGOrw_fWFTNusoYvxTODxKIdwF5IU3TI_K3urix8dQaGXQAlJL8dHSIH_7DxA8uJhLZrYMUSEQ/s36/05.gif", ";-(");
emo(/\s:d/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmy1RdlamGX8ssgFMzA-xcgfeICeG5g3aR9Y5_wgc5fXB64dTC1BBypMuEjDB3uvj7Zkx5T5DzaVlPN8uob1Sq1iCXESLLFTg_Qa9nX7Cs2hY8daNyuPHHwdigBTo8ZIgnHqFkG2RrELQ/s36/7.gif", ":d");
emo(/\s:-d/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhUjb6_A0wDXUtBmacbYSHWTulZXw71K5ZrjYX4VtKAbi1UEquMVaYDmZFP-PwnUp7oyOIqJ0cU8bztn0e_whiVH3TpmKYIv0FW_h0KdudH4bHp8crGxHbdcDSmjP9PSIhha9ru9KGG-M/s36/8.gif", ":-d");
emo(/\s@-\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTky4bYZRkDweJkBI8dzupO2GcQY2EMA3pzgVCyI83t9Cpfmx5yFF0Faa-pvnpbcwrEs9wxIm72STVTE2OTQbjBu3VdQTZikaysTVqQdUkBf3Az-qhEYLt5BODUdOsmQPcRrx80ukUVmM/s36/09.gif", "@-)");
emo(/\s:p/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRNN5CxejXCYdYmGMlOZcAnDwnkEAp8cd51-fi3A0aj04CiFmfVAAAm10z7iwkIB6Y42aM3Ax48Ea2LEXYLHtETxa30O8K3dzSlrwc-pkThZ-Uk2ClsHQCzWj2yQ5kjr6zWaqWdp8gR2w/s36/10.gif", ":p");
emo(/\s:o/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP6DiIn-Gt6AMTgZ089OOlPwxdsBCzbiYGnK22EoFjY8UHJPaMtStPZTvWKVsSMo0dMca4xi6U3DI4HCKviXXkJZi46IBXwKX6slyKipggy3tGt0M39L2O3f2Ran0cJqpkP_tyOJ5bJp0/s36/11.gif", ":o");
emo(/\s:>\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4hnPfZwkOG-qUjJTYOc_mTyJhu0wBSK9VCVsvcrD73d9bhdt3trFQ0-B3ZtKM6pAdmrWzra1TJu1-VWseP4todF2CUSi0Cgu8gBBCn4vHjwD_zAxZuwbFAWzNcykJ9p1AERlqYEaRae4/s36/12.gif", ":>)");
emo(/\s\(o\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNbx8JzTNvfJHdPraiBmP1-zt83rz0QzYms6cUuvC2R0elvF27MfGjeLHaVbUYd5uCMIFppPjQg4QdNNNZaqvv0YDRm4Ghd7Cvupk-Q4jIUhWbag9rR_fLHlULgPTsVTtGrI9VhVEempg/s36/13.gif", "(o)");
emo(/\s\[-\(+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEia90U2Aao2J5FjMqauHtAi2dour74nEXOAPXQfPu6l0CSz6H3MZtuDFP9GflGpeckCpYwd_Hwe-hGTG3NTcyACX__bpHREDoDRZwJ_oK9kU_5nSyyx1nFiZLuIGT5U1izvcxjjZZ0c4bs/s36/14.gif", "[-(");
emo(/\s:-\?/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4V7K5ZosIES_QIn14AybgVeI_iUq0dS7QidVf_2Ji2RHaiDw2Jo0p-5jvrvzF2EndM20Slr7XgOAaPp6kok7ytfwSIEXER2paqEfgsq8khy55kSgk1LoyFjxjxHg5Q9NZn_KGV3RYIGw/s36/15.gif", ":-?");
emo(/\s\(p\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqXMjhxZ2yLirxLAKK0oOD1hyphenhyphenHB1hp4sdKbDtYUr0_OqGbEwA0wZSYaqdZnOB0GZXd897elMTADLyybscsVvtuLy8s-510bnoQHxXoZII5llgYwt0cTjYG0mgG-W_gYduH-mzv39srPK4/s36/16.gif", "(p)");
emo(/\s:-s/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimvCwj_NZJZmPsmFGn_aaDFGMecW7UVQU-tkHv7MXiLH59_Z9YPeGajBV8wVR6U0ZolT9WYh77ZiDBqXGJxoalXXYvMR79CRwgUTFU4M3FFShIkXrQDXTQBxX9Wk8tA3Ttv194gK3I8Uk/s36/17.gif", ":-s");
emo(/\s\(m\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdSyqTbesKxF27tyfEMeSWMERUfWtPcg22gxDf8D342naCVflcwayiBxG1ihSA7LJw2MMdgJIOSSlNqgqJUyXuj-QgSFUOH4W77AMKLuLl1_gvIln5FQVAvuSVpa3xNoL6v1BkRboaVi8/s36/18.gif", "(m)");
emo(/\s8-\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhX43QcV8oWrncoKJ83Xn2xWj4vsfSVfTJBp32G7TCPs3nr9UsqMYcx-MZn8R-Cj_bBtj9YqmNctNTClAnv2qk2mXN28GCg3BBfDPtxlH_2Tm3BVOnUMDKMhN_sfFabOb7i3GYgsuvuhF8/s36/19.gif", "8-)");
emo(/\s:-t/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpFLdW8q-rFeJLf11sQR1CAgV8LqlOaf-89iaaBW2YyeOfMW9SU7hvu1gGyTLCAHle3jaerBF6CBiN3ei38mnx6rVsrJ22gd1wUYquTm-uUf1z2vSHq9BjGQ8TtA0uj86rLjGnu0gGuXM/s36/20.gif", ":-t");
emo(/\s:-b/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBFb8AFA15x_Wk1LNoOak43UWyKSLxoGRT32GmmSiGuyq-n9yFS2wDAl2H8z7mj8jtty_d0yoISO6u60S2bU6parHzyaF5IjX4Q5B0xP68SDMObza9Jf3bYiGj_i4uEJozPRazYOp56SA/s36/21.gif", ":-b");
emo(/\sb-\(+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP3YNFdJb0lujV8kSiQPxQ95uiWJLVUpCHHC87eYoNtrkMXsUYvS5kpbXWrI_dtihElcso9RGxIlrZ0L9URO8Wl-0B2NSDjIJLQSJG0RbOD6_KnpbIGynelDkRPyfxg8gEqB1dHABUtVk/s35/22.gif", "b-(");
emo(/\s:-#/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5IOKQPv2gw-C8RyAuW7hI-LTO_bX794xideFpCuqlYGIPkpxoBrF4IWNiZ-gqJmCDJYHUWVZAj8FtclbGH7OLYQe2fM-8jh65jIILR1512IFjh-rwbqx-HS1W-0VtmalbpRMPkVwtpdo/s36/23.gif", ":-#");
emo(/\s=p~/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAIMbY_EpC7-OQnc9G0pDo3NOWXoqgoaTDhmE6sEihOy_Bf4KI8gYAnNgfiZQ9XqgdiYCCozUSsMNf5Z9lzNxtig5nrEFggXvCO9K17_XS6Xp9j2DBDJ0CxBngt-2St2nTSlMFElq87N0/s36/24.gif", "=p~");
emo(/\s\$-\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrJNy-57DxNn0Zb0HZGfiaRwWeu1KL2Giz74Xg8AvNFLwGmXfdH26Fvaq6xrVsbX4kcytmBXpsX8YFQtZ6ZbXFq0WHqZ61ZcsGtvy_zakVIJ9MeHIyWMmQzGzfJrxAsmdEmUNwcKc139U/s36/25.gif", "$-)");
emo(/\s\(b\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8NaAyBirS5RWixB56bxX4g75eDEPRxwswt2FEYgmUa-7R_6UTyIo_t7Yl6fczQ_1DPFecY6Mpd_DDR78B91D71WTfA8TTXP8ex1qTwld0jKausIisfJUfoabaVxblv2ISEUPMrWfloC8/s36/26.gif", "(b)");
emo(/\s\(f\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkDLVpRE9b-0keLb0Mdk9vsDn2xhj4G7omn6_-jXIf-8roWHBjHVBpFhWGe3axIL1VwxUmiTMFtbsumna1wOtjz91bFiqFBFmEJxaNJC5yvLpxbzTjoweZLs6VXOMd2uCGTJXprXlsQY8/s36/27.gif'", "(f)");
emo(/\sx-\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEir5hJkosdDe-ao8sZk967S-1zRdOob4ik2_gWxsgRPszOut3p4_W2tjcLUS8nXqAeXc-mJcMOyvTDdsI6em-_3MJSSVM61DnFLJ5dOkcR1aQk3OruB1d8_-kkMPPCHoAHmUhGmrqDk8sY/s36/28.gif", "x-)");
emo(/\s\(k\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW8lA_D6w3H-eFgH4InhR8U70KB06SIxYWhxE_1W8IWfR4vEA9JWRRxyfUSRUCc7Qsfc1s52xK-RFvy2W2hk6D_pEscLcH9XsopeDiL4L9lEYLOGh30OoaadybK8bV2WS0sZZm66rB0UY/s36/29.gif", "(k)");
emo(/\s\(h\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiKwHORvCR2tSmX2QLUA5bmFCv2aW-R0DL4trvf4ZiAgIXrIFak-D-pacTb4V4JgJv3INsmf7RmnRcsdQgHrLn81cRCuN5ktv46vNagheOxq1QhyeRHWlzNkbYSnwTcKV2Lp07yn-06T0/s36/30.gif", "(h)");
emo(/\s\(c\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmSCRnX58Afivhj8Yq8GAKT_Imi4pA3l1416sAnrdGaFhOqq6zll-MK4xHq39kQGyw2KKiNgWsQBsZHqJHQDj_NjVhqI5ZawcCg5MzOQ8GGpwh4j9gSm_G_-4ZJUwgexNGJ7K4Nne1Q4o/s36/31.gif", "(c)");
emo(/\scheer/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5W7LUru_gzriWCsyA9-2Nbz6IdV1XaZf2phNtNTifWzj9pQ2u6yI8DvDGHA49LNn6PaafeuDdcvHH0hnmlz4FW7tHjUY1gvb-rTdrPfYg0o5rStQ1xawSaRjwxmvGpNRMNOoPKf9AhyphenhyphenU/s36/32.gif", "cheer");
// Show alert one times!
$('div.emoWrap')
.one("click", function() {
if (emoMessage) {
alert(emoMessage);
}
});
// Click to show the code!
$('.emo')
.css('cursor', 'pointer')
.live("click", function(e) {
$('.emoKey')
.remove();
$(this)
.after('<input class="emoKey" type="text" size="' + this.alt.length + '" value=" ' + this.alt + '" />');
$('.emoKey')
.trigger("select");
e.stopPropagation();
});
$('.emoKey')
.live("click", function() {
$(this)
.focus()
.select();
});
});
//]]>
</script>
</b:if>
4. Untuk memperindah tampilannya baik dengan mengubah background maupun memberikan border silahkah sobat cari code ]]></b:skin> dan letakkan code berikut ini di atasnya.
.emoWrap{ background:#ccc; border: 1px solid #333; margin:5px; padding:10px;}
.emoWrap{ background:#ccc; border: 1px solid #333; margin:5px; padding:10px;}
Gimana sobat mudahkan cara pemasangan emotion pada komentar di blog? Oleh karena itu saya berharap satu klik tombol g+1 buat admin agar untuk kedepannya blog ini semakin maju dan berkembang. Terimakasih.
http://junedalbughisy.blogspot.com
8-) :>) (o)
ReplyDeleteTRimakasih atas kunjungannya
Delete