Emoticon Wordpress Untuk Blogger

Setelah membahas tentang SEO kali ini Saya akan mencoba berbagi tutorial kecil yaitu Emoticon Wordpress Untuk Blogger. Emoticon ini Saya gunakan pada blog ini, emoticon ini memiliki kelebihan yaitu lebih ramah terhadap loading blog, karena Saya merubah gambar ke base64. Emoticon ini Saya ambil dari sini http://codex.wordpress.org/Using_Smilies.

Langkah Pertama : Memasang CSS

Lalu silakan Anda simpan kode CSS ini berada di atas kode ]]></b:skin> atau </style>.

.emoWrap{margin:0 auto;text-align:center}
.emo,.emoKey{display:inline-block;*display:inline;vertical-align:middle}
.emoKey{width:auto;border:1px solid #ccc;background-color:white;font:normal bold 11px/normal Arial,Sans-Serif;padding:2px;margin:0 0 0 2px;color:black}

Langkah Kedua : Memasang jQuery

Agar emoticon ini berkeja pakai jQuery versi dibawah ini, dan simpan diatas kode </head>

<script async='async' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>

Silakan Anda simpan jQuery ini diatas kode </body>.

<script type='text/javascript'>
//<![CDATA[
// Automatic Emoticons by Taufik Nurrohman
// http://gplus.to/tovic -  http://dte.web.id
// Modification - Wordpress Emoticon For Blogger by Kang Mousir
// http://gplus.to/mousir - http://kang-mousir.blogspot.com

var emoRange = ".comment_reply_form,.div.comment-form,#comments p, div.post-body, div.emoWrap",
    emoMessage = "Untuk menyisipkan emoticon setidaknya Anda harus menambahkan satu spasi di awal simbol.";
(function ($) {
    $(document).ready(function () {
        function emo(emo, imgRep, emoKey) {
            $(emoRange).html(function () {
                return $(this).html().replace(/<br ?\/?>(:|;|=|\^)/ig, "<br> $1").replace(emo, " <img src='" + imgRep + "' class='emo delayLoad' alt='" + emoKey + "' />")
            })
        }
        emo(/\s:\)/g, "data:image/gif;base64,R0lGODlhDwAPALMOAP/qAEVFRQAAAP/OAP/JAP+0AP6dAP/+k//9E///////xzMzM///6//lAAAAAAAAACH5BAEAAA4ALAAAAAAPAA8AAARb0EkZap3YVabOGRcWcAgCnIMRTEEnCCfwpqt2mHEOagoOnz+CKnADxoKFyiHHBBCSAdOiCVg8KwPZa7sVrgJZQWI8FhB2msGgwTXTWGqCXP4WBQr4wjDDstQmEQA7", ":)");
        emo(/\s:D/g, "data:image/gif;base64,R0lGODlhDwAPALMNAEVFRf/qAAAAAP/////OAP/JAP+0AP6dAP/+k//9E///x///6//lAAAAAAAAAAAAACH5BAEAAA0ALAAAAAAPAA8AAARZsEkJap241aUQIhcGcEkSnMQBTEBnnnC6aogpwHcAasqbB7mCCoD4wXCGSlHAbDqTANtgSh0IClACsEq9qjRaAfe6AxMYTvKXQiAU3m9ZpmKoG4YZlmU2iQAAOw==", ":D");
        emo(/\s:\(/g, "data:image/gif;base64,R0lGODlhDwAPALMMAP/qAEVFRQAAAP/OAP/JAP6dAP+0AP/+k//9E///x//lAP//6wAAAAAAAAAAAAAAACH5BAEAAAwALAAAAAAPAA8AAARYkEkZap2Y1ZXOGRcWcAgCnEMRTEEnnLCQrtrxwjGoJSZw+yeCKnDo/W4EQ+WAawKSlZ4zqAwMpieFcGU9Cb7fp04zGPwACpmKVSa43bNMxUA3DDMsC20SAQA7", ":(");
        emo(/\s:\-\o/ig, "data:image/gif;base64,R0lGODlhDwAPALMNAP/qAEVFRQAAAP/////OAP/JAP6dAP+0AP/+k//9E///x//lAP//6wAAAAAAAAAAACH5BAEAAA0ALAAAAAAPAA8AAARbsEkZap24VaYQIhcWcEkCnIQRTEEnCCfwpquGmHEOagoOn7+CKnADxoKHCiLHBBSSAZzs9To9KwTgYLsVLISrQFbA7RZ2GgJhQTbTWOoC9azKVA74wzDDstQmEQA7", ":-o");
        emo(/\s@@,/g, "data:image/gif;base64,R0lGODlhDwAPALMNAP///wAAAP/qAEVFRf/OAP/JAP+0AP6dAP/lAP/9E//+k///6///xwAAAAAAAAAAACH5BAEAAA0ALAAAAAAPAA8AAARXsEk5ap241cWUIhcWjEkinGMwBUAbnALrNnILvLUr77Gr264eMDCovVA24iCRgqFGhgrBSUUUDgPN9HksgCgEAsJpJWAng3BhvTZnMRWD3IB9ZzQWuyQCADs=", "@@,");
        emo(/\s\:s/g, "data:image/gif;base64,R0lGODlhDwAPALMMAP/qAEVFRQAAAP/OAP/JAP6dAP+0AP/+k//9E///x//lAP//6wAAAAAAAAAAAAAAACH5BAEAAAwALAAAAAAPAA8AAARYkEkZap2Y1ZXOGRcWcAgCnEMRTEEnCCfwpqt2mHEOagkOnz+CKnADxoKGyiHHBBCSAVzz9KwMpieFcBW4/mQvwk4zGCheMC2NVSa43WtRwEA3DDMsS20SAQA7", ":s");
        emo(/\s:-d/ig, "data:image/gif;base64,R0lGODlhFwASALMMAEVFRf/qAP/////OAP/JAP6dAP/9E/+0AP/+k///x///6//lAP///wAAAAAAAAAAACH5BAEAAAwALAAAAAAXABIAAASDkMlJqwQY2F2xEBgnAt+nddlJkaXKYEqCIEM4seYdG0bgDwUVDnSR9XxI4AlnAyAMGCTgl2oVob5pQEsIglIa5xFJJhwypa+TzA6YPelvT8sGvOEtwGDb3nbBKS97dFkENSBxSwMDC2CGXkNEF4sElZVKJoArAAedB0FVaTabGaSBDBEAOw==", ":-d");
        emo(/\s:wow:/ig, "data:image/gif;base64,R0lGODlhDwAPALMKAEVFRf/qAP/MAP////+pAP/+qP/9EzExMf///p4AAP///wAAAAAAAAAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQFDAAKACwAAAAADwAPAAAETFBJCWqdWFVUurgYwBlGYAoEMAFdab6oqhXuC6tsWb17nAc7Uy/FshkDvtoRSRQsYSmNUxgUfChWKgAZW1k/FWs0BCCYzaCMxiKbRAAAIfkEBQwACgAsAwAEAAkABAAABBBQAaDqlGNQkOc527dRFhUBACH5BAUMAAoALAIAAwALAAkAAAQeUCkA5KwSjFE1n4PEhQqniWfZbeuXYZclz3QtJ3MEACH5BAUMAAoALAEAAgANAAgAAAQgUEkApKJ2jlHBrprEDWJHWmfpZanCXedYWt5bgzSOSREAIfkEBQwACgAsAQACAA0ACAAABCVQyWKkCsJOAMLl2SZ1wJgVpZWOBKqtCkB8Y5AC4dfpnhb0F2AEACH5BAUMAAoALAEAAgANAAgAAAQgUEkApKJ2jlHBrprEDWJHWmfpZanCXedYWt5bgzSOSREAIfkEBQwACgAsAQACAA0ACAAABCVQyWKkCsJOAMLl2SZ1wJgVpZWOBKqtCkB8Y5AC4dfpnhb0F2AEACH5BAUMAAoALAEAAgANAAgAAAQgUEkApKJ2jlHBrprEDWJHWmfpZanCXedYWt5bgzSOSREAIfkEBQwACgAsAQACAA0ACAAABCVQyWKkCsJOAMLl2SZ1wJgVpZWOBKqtCkB8Y5AC4dfpnhb0F2AEACH5BAUMAAoALAIAAwALAAkAAAQfUCkTpApVGgBq4NUmdcAoiAppXiDbWRicWXRt32MdAQAh+QQFDAAKACwDAAQACQAEAAAEC9CESSkAFoebqw8RADs=", ":wow:");
        emo(/\s8\)/g, "data:image/gif;base64,R0lGODlhDwAPALMNAP/qAEVFRQAAAP/OAP/JAP6dAP+0AP/+k//9E///x//////lAP//6wAAAAAAAAAAACH5BAEAAA0ALAAAAAAPAA8AAARZsEkZap24VZbOGRcWcAgCnEMRTEFnnnC6ascLx2sr7DvA76rAgacQ+HZFQ+VwNJ54BGXAdoNFK4PqbUFQabJOmIAAogwGi99YxjoT3m+2KGCoG4IZlmU2iQAAOw==", "8)");
        emo(/\s:x/ig, "data:image/gif;base64,R0lGODlhDwAPALMNAP/qAEVFRQAAAP/OAP/JAP+0AP6dAP/+k//9E///////x///6//lAAAAAAAAAAAAACH5BAEAAA0ALAAAAAAPAA8AAARbsEkZap241aXOGRcWcAgCnIMRTEEnnLCQrtphvicOaooJ/wCCKmADCHDGF6FQOcSeQWbAB4QtK4PY8QhgCFeBrCBBJgsIO81gsG3PWGuCXP4WBQr4wjDDstAmEQA7", ":x");
        emo(/\s:P/ig, "data:image/gif;base64,R0lGODlhDwAPALMOAP/qAEVFRQAAAP/OAP8AAP/JAP+0AP6dAP/9E//+k///x///6zMzM//lAAAAAAAAACH5BAEAAA4ALAAAAAAPAA8AAARd0EkZap3Y1aVSGhcWcAgCnMMRTEEnCCfwpquWmHEOagoOn7+CKnADxoKGSiLHBBSSAROjCWA8KwPZa7sVrgJZAWE8FhR2msGgESAHziqWutB+0zIVg94wzLAsNRMRADs=", ":P");
        emo(/\s:\|/g, "data:image/gif;base64,R0lGODlhDwAPALMMAP/qAEVFRQAAAP/OAP/JAP6dAP+0AP/+k//9E///x//lAP//6wAAAAAAAAAAAAAAACH5BAEAAAwALAAAAAAPAA8AAARYkEkZap2Y1ZXOGRcWcAgCnEMRTEEnnKcgpKt2vHAOaokJ4L8TQRU4+IA4gqFyyDkByorvKVwGBtSTYri6/mRgAWGnGQwUuS2NZSa43WtRwEA3EDMsS20SAQA7", ":|");
        emo(/\s;\)/g, "data:image/gif;base64,R0lGODlhDwAPALMMAP/qAEVFRQAAAP/OAP/JAP6dAP+0AP/+k//9E///x//lAP//6wAAAAAAAAAAAAAAACH5BAEAAAwALAAAAAAPAA8AAARXkEkZap2Y1ZXOGRcWcAgCnEMRTEEnnDCQrtrxxjCoJSZw+y+CKnDo/WAEQ+WAwyUrvWZQGRg0TwKFcFX1xYI6zWCgEJizhBlrTGi31aKAYW4YZlgW2iQCADs=", ";)");
        emo(/\s:lol:/ig, "data:image/gif;base64,R0lGODlhDwAPALMNAEVFRf/qAAAAAP/////OAP/JAP+0AP6dAP/9E//+k///x///6//lAAAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQFFAANACwAAAAADwAPAAAEWrBJCWqduNWlUiIXBiyCgARBeQAToJhonK5UcgoxHoCacuspXGEFsMmOBUMlATymlABEaUotQQmpgXY7EAxZAKyA2y3wNAQCo2qmUdKFeJzgbgEMeAMxY7dkIgAh+QQFFAANACwCAAIACwAHAAAEE7BJJFuoOOvNq+if8GGiNAzZ2UQAIfkEBQoADQAsBQAHAAUAAgAABAVQSDlqjQAh+QQFCgANACwFAAcABQACAAAEBTBIKWqNACH5BAUKAA0ALAUABwAFAAIAAAQFUEg5ao0AIfkEBRQADQAsBQAHAAUAAgAABAUwSClqjQA7", ":lol:");
        emo(/\s:oops:/ig, "data:image/gif;base64,R0lGODlhDwAPAMQfAPqzAP3KAOBsAPeOW//3zftoaP62dfecAP/Sh/ykaf+3t/6YmOdzSkVFRf/k5P/69f/MzP/qAPiAgP/86frXAP7jAPmmpv/8E/7Lg//+k+NfX9lINgAAAP/lmfrBewAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQFFAAfACwAAAAADwAPAAAFZuAnik1ZjuhXTkSWBSfasNcV3cHRjE3L3UBObqfK/IBBmIpgixydOF0jY+M8rZEAoJSpUCrIiFdbugAAFGTlfC6dDwHwjQI42HcNQCBt5XjhRA0BcWqDOjyDiYmHMnlsUik8JkQjIQAh+QQFCgAfACwBAAEADQANAAAFUeAnfs9EEMY4ll2HvMYwmt9rf7FI1PadTi4ETwgbEFyiW82QIHgMmB7imUggBgyrzYMdVBmbQc8AZsgGA49QhEl4RQZoDxOXweP4ukpUrdpFIQAh+QQFMgAfACwBAAEADQANAAAFSOAnik65jKgDQUq7FGP5tfT3kjNdn2qbK7lXT1SbLSQOi0XXUh4VEs1CZ4lKrpqPhJotwK7LkeIlES2mzDPMfG6rUaLrdS0KAQAh+QQFCgAfACwBAAEADQANAAAFUOAnihNBGGM6dR3iGsNYfm79wSJB1za6ujvEDkZoiWw0Q4LgMWB4iGYigRgwqDWPdTBlfAY8g5cRGww8QhEmwRUZnDzMO+Z+2+cp0XRKF4UAACH5BAUKAB8ALAEAAQANAA0AAAVR4Cd+E5FlwTiW1xW9wTGa32t/sZjV9p0SrghPCDtkXKJbLQDIUAKVXuTJjBwEgB7legAABIJDLwA+yAAHilBUQQNEAWivEpfB4/i6SuT12kUhADs=", ":oops:");
        emo(/\s:cry:/ig, "data:image/gif;base64,R0lGODlhDwAPAMQQAP/qAEVFRQAAAP/OAP/JAP6dAP+0AP/+k//9E///////x///6//lAACM2IG71l5eXgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQFHgAQACwAAAAADwAPAAAFXCAkikFZjihULspxDCcasAgC3EMRjEEr3EBBbqc6/IBBmEphQyIJusDBJjgCqgCCoXRwOrWlpvcGDgzGNwZ0Z75V31mlajB4IBmPIY9O6Pf1MgEGgwZRKTwmRCMhACH5BAUUABAALAQABQAHAAcAAAURICRA5EieZNKcTYK+MGyeQggAIfkEBQoAEAAsBAAIAAcAAQAABQZg4kCkk4QAIfkEBQoAEAAsBAAHAAcAAwAABQogII5AkoymiSYhACH5BAUKABAALAQACAAHAAMAAAULIABApEieZIJCSQgAIfkEBQoAEAAsBAAHAAcABAAABQ1g0gBkk5BoqgJC2wIhACH5BAUKABAALAQACAAHAAEAAAUGYOJApJOEACH5BAUKABAALAQABwAHAAMAAAUKICCOQJKMpokmIQAh+QQFCgAQACwEAAUABwAGAAAFDyAEQORInmgKmCKLJmkSAgA7", ":cry:");
        emo(/\s:evil:/ig, "data:image/gif;base64,R0lGODlhDwAPAMQQAEVFRf/qAAAAAP/OAP/JAP6dAP/9E/+0AP8AAP/+k///x/4qAP5tA5aWlv/lAP//6wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAABAALAAAAAAPAA8AAAVpIABApGiSkLmYj5IkgyoyhaEYRqAPQ8GINUBORwT0AA1AwiAg6pqx5C0gaD6bhIJoKUBUqV0B4bClIhDEs5gsvBK/Y9HASXdkR8ZrFRsr8aw6DgJHKEYDBIiIhCgpAAePB1ojjIUmkyghADs=", ":evil:");
        emo(/\s:twisted:/ig, "data:image/gif;base64,R0lGODlhDwAPAMQRAEVFRf/qAAAAAP/OAP6dAP/9E/+0AP8AAP/////+k//JAP//x/4qAJaWljMzM/5tA///6wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAABEALAAAAAAPAA8AAAVrIABEpGiSkcmY0JIkgyo+RLEURaAPA/GINUBORwT0AA1AoiAg6pqx5C0gaD6bCoJoKThUqV2BwrClHg7Es5gsvBK/Y9Eg4HASHdmRscrvx0o8AgiDgwJHKEYxfEZaKCUABpEGWiOOiCaVKCEAOw==", ":twisted:");
        emo(/\s:roll:/ig, "data:image/gif;base64,R0lGODlhDwAPALMNAEVFRf/qAAAAAP/OAP/JAP////6dAP+0AP/+k///x//9E//lAP//6wAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQFCgANACwAAAAADwAPAAAEXrBJCWqduFWWEBoXBnCKEpyDAUxAJwhn8KarhghFAeM6qCW8XFCnAtx0uGTyUEHIXjsogQkwPWOvwLQyiHlPC4JK0/2eCD7yYAGAAtBjymBAqNdpmcphfyhmWBY1ExEAIfkEBQoADQAsBAAFAAgAAwAABAqwiFnkvFbYoGcEACH5BAUKAA0ALAQABAAHAAQAAAQLsIlG5ayz1Kb5LhEAIfkEBTIADQAsBAAEAAgAAwAABApQtNkkLbThgiePACH5BAUUAA0ALAkACgACAAIAAAQEsAnRIgAh+QQFCgANACwEAAQABwAEAAAEDbCURmUBtIErMOhahkUAIfkEBQAADQAsAgACAAsABwAABB2wSSEbrTJUXVX4zQcqQikEpkBMTdFaWFnJGxdyEQAh+QQFAAANACwCAAIACwAGAAAEFrBJJVuoOFehG7dBCIrKJwQmMV6hGAEAIfkEBQAADQAsAgACAAsABgAABBawSSEbrThLpVuYQmiFlFBIhYmW5ChGADs=", ":roll:");
        emo(/\s:!:/ig, "data:image/gif;base64,R0lGODlhDwAPAMQdAP/qAEVFRf/OAP/JAP/9E/+0AP6dAP/+k///x391AP/lAAAAAL+vAP//68W1Bi8vL9LBBfPfBHFvV3JwWL+wAEpHKbGiAgMDA21rUxQUFOnXBvvnAFNPJgAAAAAAAAAAACH5BAEAAB0ALAAAAAAPAA8AAAVpYCeKQVmOaFc2yHEIJxqwBAHcghGMQWsnCwZORzrYAEAhbtc7Ii+UG2CgCxillox0Wigdto7KdtANOAEOzrgs2G4gUgWV2b5JHpPbAEYSCBQAGhgRcjk7fQIDioqGKSUFkAVVKTwmhyMhADs=", ":!:");
        emo(/\s:\?\:/ig, "data:image/gif;base64,R0lGODlhDwAPAMQaAEVFRf/qAP/OAP/JAP6dAP+0AP/9E//+k+/bAH91AAAAAN/NAP//x8++AA8OAL+vAP/lAC8rAJ+SAP//6x8cAF9XAN+wAO+8AL+XAG9mAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAABoALAAAAAAPAA8AAAV1oCaKQFmOqFZOzHEIJwqwhhHcAgGMQGsskooEEcjtVAcDwkFJUBSL4q5nS0ADy0xgoAMksY1bQ5HYFkqHm7rhiBAHZ4BNHWgTzSUB/aF43CBcU3piCVFbMCQCAhABVg+ARjyKAxYYFwORMgAFnAVdKTwmRyMhADs=", ":?:");
        emo(/\s:idea:/ig, "data:image/gif;base64,R0lGODlhDwAPALMNAEVFRf/qAAAAAP/////OAP/JAP+0AP/9E/6dAP/+k///x//lAP//6wAAAAAAAAAAACH5BAEAAA0ALAAAAAAPAA8AAARdsEkJap24VaZSIhcGcMcRnAQCTEBnCjCqUsk73AK6tvaNBwUVoBYQ4H4FQyVxMg6cuWTF1Hw+T1IA4dSMBRbB3babA4IoBMKiCAOnVmhCoSCYvzMVg94gzLAscBMRADs=", ":idea:");
        emo(/\s:arrow:/ig, "data:image/gif;base64,R0lGODlhDwAPALMMAP/qAEVFRQAAAP/OAP/JAP/9E/6dAP+0AP/+k///x//lAP//6wAAAAAAAAAAAAAAACH5BAEAAAwALAAAAAAPAA8AAARXkEkZap2Y1ZUQGhcWcEUBnIMRTEFnnnC6asgLCEK8tvaJnwRVoHbDGXOEQwXhOxqTlZfzBw0MYLCfIri7ZnMAAogyGCiwWxmrTGi31aLAYX4QZliW2SQCADs=", ":arrow:");
        emo(/\s:mrgreen:/ig, "data:image/gif;base64,R0lGODlhDwAPANUAAAAAAP///wDywwDuvwDsvgDqvADktwDitgDgtADcsQDarwDYrgDWrADSqQDOpgDKogDIoQDGnwDEngC+mQC8lwC4lAC0kQCyjwCujACqiQCohwCmhQCggQCcfQCafACWeQCOcgCKbwCGbACCaQB+ZQB8ZAB4YP///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAACcALAAAAAAPAA8AAAZ6wJNQCCgWh8hTcQJpKAxHJEBzoTQVh4IAMAR0NkWJY1EcbIkeAKYCeAASBwCBCwB9OBkLJeJgJBAGUAAhRoWFCUUiAAEBi4yOAA1FI5CMjY8QRSWVj48TdCSLjpcAF1xKJqGjRRsap6iqRh4dr0QAJSMiISBRSUqFSUEAOw==", ":mrgreen:");
        var one = 0;
        $(document.body).on("click", function () {
            $('.emoKey').remove()
        });
        $('.emo').css('cursor', 'pointer').live("click", function (e) {
            $('.emoKey').remove();
            $(this).after('<input class="emoKey" type="text" size="6" value=" ' + this.alt + '" />');
            $('.emoKey').trigger("select");
            if (emoMessage && one === 0) {
                alert(emoMessage);
                one = 1
            }
            e.stopPropagation()
        })
    })
})(jQuery);
//]]>
</script>

Langkah Ketiga : Memasang Emoticon

Sebenarnya emoticon ini bisa simpan di mana saja, namun disini Saya akan menjelasakan emoticon ini di simpan di pesan komentar. Pertama masuk ke Setelan blogger Anda seperti gambar dibawah ini.

Kemudian pada Pos dan Komentar isi dengan kode dibawah ini tepat di Pesan Formulir Komentar lalu Simpan.

 :) :D :( :-o @@, :s :wow: 8) :x :P :| ;) :lol: :oops: :cry: :evil: :twisted: :roll: :!: :?: :idea: :arrow: :mrgreen: :-d 

Demo

Data Emoticon Wordpress Untuk Blogger

Icon	Teks
:)	:)
:D	:D
:(	:(
:-o	:-o
@@,	@@,
:s	:s
:wow:	:wow:
8)	:D
:x	:x
:P	:)
:|	:|
;)	;)
:lol:	:lol:
:oops:	:oops:
:cry:	:cry:
:evil:	:evil:
:twisted:	:twisted:
:roll:	:roll:
:!:	:!:
:?:	:?:
:idea:	:idea:
:arrow:	:arrow:
:mrgreen:	:mrgreen:
:-d	:-d

Memasang Author Rich Snippet

Artikel ini adalah lanjutan dari artikel sebelumnya tentang Mengenal Author Rich Snippet. Bagi yang belum mengenal Author Rich Snippet silakan baca artikel Saya sebelumnya. Untuk memasang Author Rich Snippet dibutuhkan akun Gmail yang terintegrasi dengan Google Plus.

Memasang Author Rich Snippet pada blog sangat mudah, Anda hanya tinggal menambahkan link rel=author pada blog Anda. Kemudian mengisi kontributor web/blog Anda pada Google Plus. Saya akan menjelaskan langkah - langkahnya, oleh karena itu silakan disimak.

Langkah Pertama : Mengisi Kepemilikan Web/Blog

Pertama masuk ke akun Google Plus Anda kemudian masuk ke menu About atau Anda juga bisa menggunakan link ini.

https://plus.google.com/Alamat atau ID Google Plus Anda/about

Bisa juga dengan cara seperti ini masuk ke alamat ini https://www.google.com/settings/account, Kemudian klik Edit Profile.

Kemudian Anda akan dibawa pada halaman About Google Plus.

Silakan lihat samping kanan bawah yang terdapat kontributor, kemudian klik Edit. Nanti akan muncul pop up jendela pengisian kontributor seperti ini.

Pada kontributor perhatikan tanda warna merah, silakan klik Add custom link untuk menambahkan kontributor baru. Perlu di perhatikan pada tanda merah kanan atas terdapat notifikasi tampilan kontributor. Silakan pilih Publik agar Author Rich Snippet ini muncul, alasan tidak muncul bisa terjadi karena ini.

Silakan isi Label dengan judul web/blog Anda, sedangkan URL isi dengan alamat web/blog Anda. Kemudian pada setelan sebelah kanan atas pilih Current contributor.

Langkah Kedua : Memasang Rel Author

Selanjutkan Anda tinggal menambahkan rel=author seperti ini dan simpan dibawah kode <head>

<link href='URL Google Plus Anda' rel='author'/>

Maka jadinya akan seperti kode dibawah ini.

<link href='https://plus.google.com/107577168276378903527/about' rel='author'/>

Saran Saya tambahkan URL Google Plus yang terdapat ID Number. Sampai sini Memasang Author Rich Snippet pada blog sudah selesai. Untuk mengeceknya bisa Anda lihat di http://www.google.com/webmasters/tools/richsnippets.

Mengenal Author Rich Snippet

Saat Anda mendengar Author Rich Snippet mungkin Anda sudah tidak asing atau baru mengenalnya. Sebelum kita mengulas Apa Author Rich Snippet ? alangkah baiknya kita harus mengenal dahulu mengenai Rich Snippet.

Apa Itu Rich Snippet ?

Rich Snippet adalah beberapa data yang disajikan kepada mesin pencari, diantara nya seperti Judul, Alamat URL, Pemilik, Lokasi, dan lain - lain. Saat Anda mengetik kata kunci pada mesin pencari, secara otomatis mesin pencari akan menampilkan data - data yang dibuat oleh pemilik blog/web.

Berdasarkan pengalaman dan penelusuran yang Saya lakukan ternyata Rich Snippet sangat berpengaruh terhadap SEO. Namun, perlu Anda ketahui juga bahwa Rich Snippet tidak menjamin blog/web Anda berjaya di mesin pencari. Tentunya ada beberapa hal lain agar blog/web Anda berjaya di mesin pencari.

Baca :

• Memasang Tag Alt Pada Gambar
• Pentingnya Tag Alt Pada Gambar

Apa Itu Author Rich Snippet ?

Sekarang kita akan menjelaskan Apa Itu Rich Snippet ?. Author  Rich Snippet adalah data yang disajikan kepada mesin pencari, berupa Foto Author, Nama Author dan Jumlah Followers. Untuk lebih jelas mengenai Author Rich Snippet Saya sajikan dengan Screenshoot nya.

Itu adalah contohnya namun, terkadang Author Rich Snippet kadang muncul dengan fotonya dan kadang pula tidak seperti halnya contoh gambar diatas. Oleh karena itu Author Rich Snippet yang benar adalah seperti gambar dibawah ini. Saya ambil sampel dari trikmudahseo.blogspot.com.

Keuntungan Memasang Author Rich Snippet

Ada beberapa keutungan memasang Author Rich Snippet atau baca lebih lengkapnya 5 Keuntungan Memasang Author Rich Snippet

1. Menambah kepercayaan Search Engine kepada blog/web Anda.
2. Menarik perhatian pengunjung, karena dengan adanya Author Rich Snippet pengunjung akan lebih tertarik kepada blog/web Anda.
3. Mempunyai nilai klik lebih tinggi.
4. Memungkinkan blog/web Anda ada di halaman pertama search engine.
5. Lebih Professional

Author Rich Snippet ini dibutuhkan akun Gmail karena data yang ditampilkan pada mesin pencari adalah data dari Google Plus. Bagi Anda yang ingin mengetahui Apakah blog Anda sudah ada Author Rich Snippet dapat mengeceknya di http://www.google.com/webmasters/tools/richsnippets. Itulah pembahasan sederhana mengenai Mengenal Author Rich Snippet. Semoga bisa menambah pengetahuan Anda semua.

JavaScript “Extend”

Fungsi ini setara dengan JQuery.extend() yang memungkinkan kita untuk menciptakan variabel opsional, dimana variabel tersebut bisa dinyatakan ataupun ditiadakan. Jika tidak dinyatakan, maka nilai variabel yang tidak hadir tersebut akan jatuh pada nilai default yang telah ditentukan di dalam fungsi:

// http://stackoverflow.com/a/12317051/1163000
function extend(target, source) {
    target = target || {};
    for (var prop in source) {
        if (typeof source[prop] === "object") {
            target[prop] = extend(target[prop], source[prop]);
        } else {
            target[prop] = source[prop];
        }
    }
    return target;
}

Contoh Penggunaan

function myFunction(config) {

    var defaults = {
        firstName: 'Taufik',
        lastName: 'Nurrohman',
        age: 22
    };

    // Extend...
    config = extend(defaults, config);

    return config;

}

Ketika Anda mengubah beberapa nilai variabel konfigurasi, maka variabel-variabel konfigurasi default yang lain yang tidak diubah akan menyesuaikan:

myFunction({
    firstName: 'Foo'
});

Hasil

Taufik telah berubah menjadi Foo.

Sebenarnya dulu Saya sudah pernah menulis posting yang sejenis dengan ini. Tapi metode yang Saya tuliskan dalam posting tersebut tidak mampu untuk menangani objek multi-dimensi seperti ini:

var defaults = {
    option_1: value_1,
    option_2: value_2,
    option_3: {
        option_3_1: {
            option_3_1_1: value_3_1_1,
            option_3_1_2: value_3_1_2
        },
        option_3_2: value_3_2,
        option_3_3: value_3_3
    },
    option_4: value_4
};

Pentingnya Tag Alt Pada Gambar

Setelah menelusuri fungsi dari tag alt pada sebuah gambar, ternyata tag alt sangat penting untuk optimasi SEO. Banyak dari kalangan Blogger yang melupakan untuk menambahkan tag alt pada gambar. Padahal tag alt  ini fungsinya sangat penting. Oleh karena itu mari kita bahas seberapa penting tag alt. pada sebuah gambar
Fungsi Tag Alt
Tag Alt ini ibarat sebuah keyword pada sebuah blog. Perlu Anda ketahui, bahwa SE tidak bisa membaca gambar. Mesin Pencari membaca judul dan tag alt pada gambar. Buat tag alt dengan deskripsi singkat, setidaknya mewakili dari gambar tersebut.

Seberapa Penting Untuk Blog
Saya katakan sangat penting. Untuk membuktikannya coba Anda cari gambar di Google Search Image, kemudian buka gambar tersebut terlihat nama gambarnya sama dengan kata kunci yang anda cari. Sama halnya dengan fungsi tag alt. Mesin pencari juga menggunakan kata kunci dimana gambar tersebut di publikasikan pada artikel.

Bagaimana Membuatnya ?
Cara membuat sangat mudah Anda hanya tinggal menambahkan tag alt di depan gambar atau Anda juga bisa menyimaknya pada artikel berikut Memasang Tag Alt Pada Gambar

Memasang Tag Alt Pada Gambar

Tag Alt adalah sebuah tag untuk memudahkan Search Engine dalam menemukan keyword pada sebuah gambar. Tag Alt ini sangat penting untuk optimasi SEO. Untuk itu perlu kita tahu bagaimana Memasang Tag Alt Pada Gambar.

Dibawah ini adalah contoh gambar tanpa tag alt.

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2KSi1La__LQS-7EfVBagVVXvSVacYlpJOGmdXrN5OGB9zdy7sNnIfudEEy6G__pWjmEU6LbdUOQVNTivu1jWyQVS5o4m1quXLrJ0KVxgrJH-14MpXqWbaeH0cb5TidjzGq0nmfJVzE3Q/s72/picture_no_available.png'/>

Selanjutkan kita tambahkan tag alt pada gambar tersebut.

<img alt='Memasang Tag Alt Pada Gambar' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2KSi1La__LQS-7EfVBagVVXvSVacYlpJOGmdXrN5OGB9zdy7sNnIfudEEy6G__pWjmEU6LbdUOQVNTivu1jWyQVS5o4m1quXLrJ0KVxgrJH-14MpXqWbaeH0cb5TidjzGq0nmfJVzE3Q/s72/picture_not_available.png'/>

Tag alt yang baik adalah disimpan di depan atau seperti contoh diatas.

Sortir Array Berdasarkan Nilai dari Key

// http://stackoverflow.com/a/2699110/1163000
function sort_array_by_value($key, &$array) {

    $sorter = array();
    $ret = array();

    reset($array);

    foreach($array as $ii => $value) {
        $sorter[$ii] = $value[$key];
    }

    asort($sorter);

    foreach($sorter as $ii => $value) {
        $ret[$ii] = $array[$ii];
    }

    $array = $ret;

}

Contoh Kasus

Sampel array:

$my_array = array(
    array(
        'id' => 1,
        'title' => 'Orange',
        'time' => '2014-03-05 03:00:42'
    ),
    array(
        'id' => 2,
        'title' => 'Banana',
        'time' => '2013-01-06 13:05:15'
    ),
    array(
        'id' => 3,
        'title' => 'Grape',
        'time' => '2011-05-15 01:30:45'
    )
);

Menyortir data berdasarkan nilai dari title …

sort_array_by_value('title', $my_array);

print_r($my_array);

Akan menghasilkan urutan seperti ini:

Array
(
    [1] => Array
        (
            [id] => 2
            [title] => Banana
            [time] => 2013-01-06 13:05:15
        )

    [2] => Array
        (
            [id] => 3
            [title] => Grape
            [time] => 2011-05-15 01:30:45
        )

    [0] => Array
        (
            [id] => 1
            [title] => Orange
            [time] => 2014-03-05 03:00:42
        )

)

Syntax Highlighter Generik dengan PHP

PHP

<?php

/**
 * Original => http://phoboslab.org/log/2007/08/generic-syntax-highlighting-with-regular-expressions
 * Usage => `echo SyntaxHighlight::process('source code here');`
 */

class SyntaxHighlight {
    public static function process($s) {
        $s = htmlspecialchars($s);

        // Workaround for escaped backslashes
        $s = str_replace('\\\\','\\\\<e>', $s); 

        $regexp = array(

            // Comments/Strings
            '/(
                \/\*.*?\*\/|
                \/\/.*?\n|
                \#.[^a-fA-F0-9]+?\n|
                \&lt;\!\-\-[\s\S]+\-\-\&gt;|
                (?<!\\\)&quot;.*?(?<!\\\)&quot;|
                (?<!\\\)\'(.*?)(?<!\\\)\'
            )/isex' 
            => 'self::replaceId($tokens,\'$1\')',

            // Punctuations
            '/([\-\!\%\^\*\(\)\+\|\~\=\`\{\}\[\]\:\"\'<>\?\,\.\/]+)/'
            => '<span class="P">$1</span>',

            // Numbers (also look for Hex)
            '/(?<!\w)(
                (0x|\#)[\da-f]+|
                \d+|
                \d+(px|em|cm|mm|rem|s|\%)
            )(?!\w)/ix'
            => '<span class="N">$1</span>',

            // Make the bold assumption that an
            // all uppercase word has a special meaning
            '/(?<!\w|>|\#)(
                [A-Z_0-9]{2,}
            )(?!\w)/x'
            => '<span class="D">$1</span>',

            // Keywords
            '/(?<!\w|\$|\%|\@|>)(
                and|or|xor|for|do|while|foreach|as|return|die|exit|if|then|else|
                elseif|new|delete|try|throw|catch|finally|class|function|string|
                array|object|resource|var|bool|boolean|int|integer|float|double|
                real|string|array|global|const|static|public|private|protected|
                published|extends|switch|true|false|null|void|this|self|struct|
                char|signed|unsigned|short|long
            )(?!\w|=")/ix'
            => '<span class="K">$1</span>',

            // PHP/Perl-Style Vars: $var, %var, @var
            '/(?<!\w)(
                (\$|\%|\@)(\-&gt;|\w)+
            )(?!\w)/ix'
            => '<span class="V">$1</span>'

        );

        $tokens = array(); // This array will be filled from the regexp-callback

        $s = preg_replace(array_keys($regexp), array_values($regexp), $s);

        // Paste the comments and strings back in again
        $s = str_replace(array_keys($tokens), array_values($tokens), $s);

        // Delete the "Escaped Backslash Workaround Token" (TM)
        // and replace tabs with four spaces.
        $s = str_replace(array('<e>', "\t"), array('', '    '), $s);

        return '<pre><code>' . $s . '</code></pre>';
    }

    // Regexp-Callback to replace every comment or string with a uniqid and save
    // the matched text in an array
    // This way, strings and comments will be stripped out and wont be processed
    // by the other expressions searching for keywords etc.
    private static function replaceId(&$a, $match) {
        $id = "##r" . uniqid() . "##";

        // String or Comment?
        if(substr($match, 0, 2) == '//' || substr($match, 0, 2) == '/*' || substr($match, 0, 2) == '##' || substr($match, 0, 7) == '&lt;!--') {
            $a[$id] = '<span class="C">' . $match . '</span>';
        } else {
            $a[$id] = '<span class="S">' . $match . '</span>';
        }
        return $id;
    }
}

?>

CSS

pre {
  display:block;
  background-color:#3F3F3F;
  margin:1em 0;
  padding:1em;
  font:normal normal 13px/1.4 Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,Monospace;
  color:#E3CEAB;
  overflow:auto;
  white-space:pre;
  word-wrap:normal;
}
pre code {
  font:inherit;
  color:inherit;
}
pre span.N {color:#8CD0D3} /* Numbers */
pre span.S {color:#CC9385} /* Strings */
pre span.C {color:#7F9F7F} /* Comments */
pre span.K {color:#DFC47D} /* Keywords */
pre span.V {color:#CEDF99} /* Vars */
pre span.D {color:#FFFFFF} /* Defines */
pre span.P {color:#9F9D65} /* Punctuations */

Lihat Demo