Blog tentang internet dan Blogging Tips

Sunday, 30 March 2014

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.
Setelan Komentar Blogger
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 

Data Emoticon Wordpress Untuk Blogger

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

Setting Google Plus

Kemudian Anda akan dibawa pada halaman About Google Plus.

Setelan Kontributo

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

Kontributor

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.

Form Kontributor

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.

Thursday, 27 March 2014

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 :

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.
Author Rich Snippet
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.
Author Rich Snippet Trik Mudah SEO

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.

Cara Membuat Blog Di Blogger

Logo Blogger
Blog adalah bentuk aplikasi web yang menyerupai tulisan-tulisan ( yang dimuat sebagai posting ) pada sebuah halaman web umum. Penyedia blog gratis sudah banyak diantaranya Blogger, Wordpress, Drupal, Blog Detik dan masih banyak lagi. Untuk membuat blog di Blogger kita harus mempunyai akun Gmail. Oleh karena  itu sebelum kita melanjutkan membuat blog alangkah baiknya kita harus membuat akun Gmail terlebih dahulu, baca artikel Saya tentang Cara Mudah Membuat Akun Gmail.

Setelah Anda mempunyai akun Gmail, langkah selanjutnya buka situs Blogger.com.

Form Login Blogger
Silakan login dengan Email dan Password Anda. Setelah selesai mengisi klik Login untuk masuk ke Blogger. Biasanya setelah selesai Login Kita akan dibawa pada Personal Info, abaikan saja kemudian masukan lagi ke Blogger dengan menambahkan url pada browser Anda lalu Enter.

Kemudian Anda kan masuk pada Dasbor Blogger, seperti gambar dibawah.

Dasbor Blogger

Silakan klik menu atas sebelah kiri Blog Baru untuk membuat blog baru. Kemudian akan muncul jendela pengisian.
Formulir Pendaftaran Blogger
Silakan isi data blog Anda.
Judul : Isi dengan Judul blog Anda.
Alamat : Isi dengan alamat blog Anda.
Template : Silakan pilih template awal blog Anda.

Langkah terakhir silakan klik Buat Blog!. Selamat sekarang Anda sudah mempunyai blog baru. :D

Monday, 24 March 2014

Cara Mudah Membuat Akun Gmail

Logo Gmail
Mempunyai akun email tentunya sangat penting bagi kita yang aktif di Dunia Maya atau menggunakan akun email hanya sebagai keperluan lainnya. Layanan penyedia email sebenarnya sangat banyak antara lain Yahoo Mail, Hotmail, AOL Mail, Gmail dan lain - lain. Saya rasa Gmail yang paling baik diantara penyedia email yang lain. Gmail memiliki kelebihan dibandingkan layanan email lainnya, yaitu satu akun gmail dapat digunakan untuk seluruh produk Google, seperti slogannya "Satu akun untuk seluruh Google". Oleh karena itu disini Saya akan membahas mengenai langkah - langkah mudah membuat akun gmail.

Pertama anda buka situs gmail.com. Maka anda melihat tampilan awal Gmail, seperti gambar dibawah.

Form Login Gmail

Gambar diatas adalah form login gmail, sedangkan bagi Anda yang belum mempunyai akun silakan klik Buat akun untuk membuat akun gmail baru. Kemudian Anda akan dibawa pada formulir pendaftaran.

Formulir Pendaftaran Gmail

Formulir Pendaftaran Bagian Pertama
1. Isi dengan Nama Depan Anda.
2. Isi dengan Nama Belakang Anda.
3. Isilah dengan Alamat Email yang Anda inginkan.
4. Buatlah Kata Sandi Anda, minimal 8 karakter.
5. Ketik ulang Kata Sandi yang telah Anda buat.
6. Masukan Tanggal Lahir Anda.
7. Pilih bulan lahir Anda.
8. Isi dengan tahun Anda dilahirkan.
9. Pilih jenis kelamin Anda.
Bila Anda ingin membuat akun Gmail untuk sebuah perusahaan atau merek produk, pilih Lainnya.

Formulir Pendaftaran Gmail

Formulir Pendaftaran Bagian Kedua
10. Isi dengan Nomor Telephone Anda atau kosongkan saja. Ini hanya Opsional saja, ini dilakukan untuk keamanan akun Anda. Saya sarankan isi saja untuk menjaga keamanan akun Anda apabila terjadi sesuatu, karena nantinya nomor ini juga digunakan untuk verifikasi akun Anda.
11. Isi dengan Email Lain Anda. Ini juga hanya Opsional saja, email ini diperlukan untuk berjaga - jaga apabila email Anda bermasalah. Bila Anda tidak mempunyainya kosongkan saja.
12. Centang apabila Anda menginginkan verifikasi langsung melalui HP. Jangan di ceklis apabila Anda ingin verifikasi melalui Kode Capctcha.
13. Isi sesuai kode yang tertera pada gambar Kode Capctcha diatas.
14 Pilih Lokasi Negara dimana Anda tinggal.
15. Centang untuk menyetujui kebijakan dan persyaratan Google.
16. Klik Langkah Berikutnya untuk melanjutkan ke langkah selanjutnya.

Verifikasi Lewat Telephone

Verifikasi Akun Anda
Kemudian Anda akan diperintahkan untuk melakukan Verifikasi Melaui Telephone.
17. Pertama pilih dahulu Lokasi Negara Anda, kemudian masukan nomor telephone Anda.
18. Disini Anda diberi pilihan untuk melakukan verifikasi antara lain melalui Pesan Teks ( SMS ) atau Panggilan Suara. Silakan pilih sesuai yang Anda inginkan.
19. Setelah Anda memilih kemudian klik Lanjutkan untuk lanjut ke langkah berikutnya.
Tunggu beberapa saat kode verifikasi yang akan Anda terima dari Google melalui Telephone.

Masukan Kode Verifikasi

Selanjutnya Anda akan diminta memasukan kode verifikasi yang telah anda terima dari Google baik dari Pesan Singkat atau Telephone. Setelah Anda menerima kode verifikasinya, Anda masukan kode verifikasi tersebut pada kolom yang disediakan. Kemudian Lanjutkan.

Upload Foto Gmail

Selanjutnya Anda kan dibawa pada perintah untuk menambahkan foto Anda sebagai Identitas. Bila Anda ingin memasang foto silakan klik Tambahkan foto. Sedangakan bagi Anda yang ingin menunda menambahkan foto klik Langkah berikutnya.

Lanjutkan Gmail

Lalu Anda akan melihat tampilan seperti gambar diatas, klik Lanjutkan ke Gmail untuk menyelesaikan pendaftaran. Tunggu beberapa saat hingga proses memuat selesai sampai nantinya Anda akan dibawa pada Panel Gmail.

Dasbor Gmail

Selamat Akun Gmail Anda selesai dibuat, saat pertama masuk Dasbor Gmail Anda akan mendapat 4 pesan di Kotak Masuk dari Tim Gmail. Silakan Anda pelajari fitur yang tersedia pada Gmail.

Sunday, 23 March 2014

Pentingnya Tag Alt Pada Gambar

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

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/AVvXsEg7AmoRxy7cm8u6rOS0sX27FnM-yQ8whMLyjX49U-qNGvu9fz-SZ6Xu0n70uZqTHQ6to-tz0UpkYdZirDtS-rdF4Yofuqm3onkp002AnW9P7W8jhxT2oB7dEoZiZpRXBxiArlRYe2VwLo8/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/AVvXsEg7AmoRxy7cm8u6rOS0sX27FnM-yQ8whMLyjX49U-qNGvu9fz-SZ6Xu0n70uZqTHQ6to-tz0UpkYdZirDtS-rdF4Yofuqm3onkp002AnW9P7W8jhxT2oB7dEoZiZpRXBxiArlRYe2VwLo8/s72/picture_not_available.png'/>

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

Popular Posts

Powered by Blogger.