Cara Menciptakan Blog Di Blogger

Cara Menciptakan Blog Di Blogger

Belajar Blog Blogger Tutorial Blogger

Blog yaitu bentuk aplikasi web yang mirip 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 menciptakan blog di Blogger kita harus memiliki akun Gmail. Oleh alasannya yaitu  itu sebelum kita melanjutkan menciptakan blog alangkah baiknya kita harus menciptakan akun Gmail terlebih dahulu, baca artikel Saya wacana Cara Praktis Membuat Akun Gmail.

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

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

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

Silakan klik hidangan atas sebelah kiri Blog Baru untuk menciptakan blog baru. Kemudian akan muncul jendela pengisian.

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 kini Anda sudah memiliki blog baru. :D
Sumber http://kang-mousir.blogspot.com

Emoticon Wordpress Untuk Blogger

Emoticon Wordpress Untuk Blogger

jQuery Tutorial Blogger

Setelah membahas perihal SEO kali ini Saya akan mencoba membuatkan tutorial kecil yaitu Emoticon Wordpress Untuk Blogger. Emoticon ini Saya gunakan pada blog ini, emoticon ini mempunyai kelebihan yaitu lebih ramah terhadap loading blog, alasannya yakni 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 instruksi CSS ini berada di atas instruksi ]]></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 instruksi </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 instruksi </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  // http://gplus.to/mousir - http://lifeakandistar.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 dapat simpan di mana saja, namun disini Saya akan menjelasakan emoticon ini di simpan di pesan komentar. Pertama masuk ke Setelan blogger Anda ibarat gambar dibawah ini.

Kemudian pada Pos dan Komentar isi dengan instruksi dibawah ini sempurna 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

Sumber http://kang-mousir.blogspot.com

Mari Mengenal Base64

Mari Mengenal Base64

Belajar Blog Blogger CSS Tutorial Blogger

Sebelumnya Saya menunjukkan artikel perihal Emoticon Wordpress Untuk Blogger, dalam artikel tersebut ada kata base64. Kalian sudah mengenal base64 atau gres mengenalnya sekarang. Yuk, mari Kita ulas mengenai base64.

Pengertian Base64

Base64 yakni metoda yang dipakai untuk melaksanakan encoding (penyandian) terhadap data binary sehingga menjadi “printable” atau pendek katanya data binary disandikan menjadi format 7-bit character semacam pecahan isi email.

Saya hanya akan menjelaskan arti inti dari sebuah base64, sebab apabila kita jelaskan akan sangat panjang atau Anda juga sanggup membacanya lengkap di Wikipedia http://en.wikipedia.org/wiki/Base64.

Intinya Base64 yakni isyarat yang disusun oleh 64 karakter, dimana karakternya ( berdasarkan : RFC 1421 ) terdiri dari ( A-Z, a-z, 0-9, +, /)  atau “ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/”. Tapi ada satu karater perhiasan yaitu “=”, yang fungsinya untuk menggenapkan atau istilahnya sebagai pengisi pad.

Contoh Penggunaan Base64

Untuk lebih memahami Base64 Saya akan menunjukkan misalnya dengan mengubah gambar ke Base64. Misalkan Anda memiliki gambar dengan ukuran 10 Kb, maka apabila Anda merubahnya ke base64 ukurannya akan sama 10 Kb tetapi dirubah ke dalam sandi yang sulit diterjemahkan. Apabila Anda menyimpan data base64 tersebut ke Template Anda, maka ukuran file template Anda akan bertambah 10 Kb. Berikut yakni gambar

Ini yakni URL dari gambar diatas

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTl-H-zfgezPv2rWmxjQa-J7dOEKvdl90dgW7MrWBIC0fJPSBrvESIJpOJWz8AbsjtihhJBjTy28wdcVr4SvIrbFgpc8RxSpNFE9YFY2Jj_E2_MhNyTe1RH0p2Qq1gLrpTiqKfVb6ati0i/s1600/kangmousir.png

Kemudian Saya rubah ke data Base64 String,untuk melihatnya silakan klik link dibawah ini.

https://pastebin.com/aUvuxJJ1

Coba Anda buka kedua data tersebut di browser Anda, keduanya akan terlihat dengan gambar yang sama. Namun coba Anda bandingkan kecepatan kedua data tersebut. Pada URL pertama dikala dibuka browser harus membaca data tersebut lalu diproses dahulu dimana gambar tersbut di unggah. Sedangkan pada data base64 gambar pribadi terbuka, sebab semua data diproses dalam satu kali.

Support

Base64 tentunya tidak sanggup dibaca di semua browser, oleh sebab itu base64 hanya support pada browser dibawah ini.

• Internet Explorer 8+
• Google Chrome
• Opera Mini
• Firefox
• Safari

Kita juga sanggup merubah file ke base64 menyerupai Gambar, Font, File HTML, CSS, JS dll.

Alat Untuk Merubah File Ke Base64

• www.motobit.com/util/base64-decoder-encoder.asp‎
• www.base64decode.org
• webcodertools.com/imagetobase64converter‎
• www.freeformatter.com/base64-encoder.html‎
• www.opinionatedgeek.com/dotnet/tools/base64encode/

Dari alat diatas Saya sering memakai webcodertools.com/imagetobase64converter‎ sebab lebih gampang dan cepat ( berdasarkan Saya ).

Itulah klarifikasi yang sanggup Saya berikat tentang Base64. Semoga dengan adanya artikel ini Anda sanggup memahami tentang Base64. :D

Sumber http://kang-mousir.blogspot.com

Cara Menciptakan Iklan Idblognetwork Valid Html5

Cara Menciptakan Iklan Idblognetwork Valid Html5

HTML5 Tutorial Blogger

Sebelumnya Saya membuatkan artikel wacana Cara Mendaftar IdBlogNetwork dan Cara Memasang Iklan IdBlogNetwork. Setelah Saya lihat ternyata script iklan dari IdBlogNetwork memakai iframe, perlu diketahui bahwa iframe sangat tidak anggun untuk SEO. Namun, pada iframe iklan IdBlogNetwork terdapat error untuk Validasi HTML5 yaitu pada nilai dari iframe.  Untuk mengatasinya kita sanggup memanfaatkan jQuery untuk mengatasinya.

Ambil Script Iklan

Silakan ambil script iklan dari IdBlogNetwork, yang belum tahu baca Cara Memasang Iklan IdBlogNetwork. Ini yaitu referensi script iklan.

<iframe frameborder="0" src="http://sebar.idblognetwork.com/psg_ppc_flash.php?b=12756&sz=300x250" width="310px" height="260px" marginwidth=0 marginheight=0 ></iframe>

Selanjutnya memasang jQuery sebagai alternatif, menyerupai berikut ini diatas instruksi </body>.

<script type='text/javascript'> //<![CDATA[ setTimeout(function() {         $(this).replaceWith('<iframe class="idblognetwork loader" src="' + $(this).data('src') + '" allowfullscreen="allowfullscreen" width="310px" height="260px" marginwidth=0 marginheight=0 ></iframe>');     }); //]]> </script>

Kemudian tambahkan jQuery Libary dibawah ini dan simpab diatas instruksi </head>.

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

Lalu tambahkan instruksi dibawah ini pada widget Anda.

<div class="idblognetwork loader" data-src="URL IKLAN"></div>

Pengaturan

Silakan ganti dan sesuai pengaturannya, semoga lebih gampang Saya memperlihatkan warna yang harus diganti, ganti dengan warna yang Sama. Bila menemukan instruksi & pada instruksi iklan rubah jadi & atau baca artikel Saya berjudul Cara Mengatasi Error Ampersand Pada Validasi HTML5

Tips ini kondusif untuk Anda gunakan, alasannya yaitu data klik masih berjalan normal. Oleh alasannya yaitu itu Anda sanggup memakai tips ini semoga blog Anda Valid HTM5 ;)

Sumber http://kang-mousir.blogspot.com

Cara Menciptakan Flash Banner Valid Html5

Cara Menciptakan Flash Banner Valid Html5

HTML5 Tutorial Blogger

Mencoba untuk membuatkan tips dan trik Validasi HTML5, kali ini Saya akan coba membuatkan tips bagaimana cara menciptakan flash banner valid HTML5. Sebenarnya artikel menyerupai dengan artikel Saya berjudul Cara Membuat Iklan IdBlogNetwork Valid HTML5. Biasanya flash banner sering memakai iframe dan ini sangat tidak baik untuk SEO. Oleh alasannya itu Saya akan menunjukkan alternatif biar flash banner tersebut SEO Friendly dan tentunya Valid HTML5.

Mengambil URL Flash Banner

Silakan Anda ambil URL Flash Banner yang di inginkan. Contohnya menyerupai ini.

<iframe src="http://namadomain.com/Fbdevhxxxx.swf"/>

Anda ambil URL yang Saya tandai diatas.

Memasang jQuery

Kemudian tambahkan jQuery Libary dibawah ini dan simpab diatas isyarat </head>.

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

Lalu simpan jQuery ini diatas isyarat </body>.

<script type='text/javascript'> //<![CDATA[         $(this).replaceWith('<iframe class="banner loader" src="' + $(this).data('src') + '" allowfullscreen="allowfullscreen" width="738px" height="100px" marginwidth=0 marginheight=0 ></iframe>');     }); //]]> </script>

Memasang Banner

Selanjutnya simpan isyarat dibawah ini pada widget Anda HTML/JavaScript.

<div class="banner loader" data-src="URL Flash Banner"></div>

Itulah cara Cara Membuat Flash Banner Valid HTML5 .Semoga atrikel ini sanggup membantu Anda mengatasi error Validasi HTML5 pada flash banner.
Sumber http://kang-mousir.blogspot.com

Cara Mengatasi Error Ampersand Pada Validasi Html5

Cara Mengatasi Error Ampersand Pada Validasi Html5

HTML5 Tutorial Blogger

Artikel masih berafiliasi dengan Validasi HTML5, kali ini Saya mencoba membuatkan tips validasi HTML5 pada error ampersand. Error ampersand yaitu error yang terjadi pada arahan &. Untuk mengatasi error tersebut hanya tinggal menggantinya menjadi &. Pada error ini ada beberapa dilema yang muncul, oleh alasannya itu Saya akan jelaskan satu - per satu.

Error Ampersand Pertama

Biasanya error ini terjadi pada arahan &. Untuk misalnya ibarat dibawah ini.

<script src="'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&callback=showpageCount2&max-results=99999" ></script>

Perhatikan arahan yang Saya tandai, maka kita harus ganti arahan tersebut & menjadi &. Maka akan menjadi ibarat arahan dibawah ini.

<script src="'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&amp;callback=showpageCount2&amp;max-results=99999" ></script>

Error Ampersand Kedua

Setelah mengganti arahan tersebut ternyata masih error, oleh alasannya itu untuk mengatasinya tinggal menambahkan arahan amp; di belakang arahan &. Contohnya arahan dibawah ini.

<script src="'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&amp;callback=showpageCount2&amp;max-results=99999" ></script>

Perhatikan arahan yang Saya tandai, Anda hanya tinggal menambahkan arahan amp; di belakang arahan & sehingga menajadi ibarat arahan dibawah ini.

<script src="'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&amp;amp;callback=showpageCount2&amp;amp;max-results=99999" ></script>

Error Ampersand Ketiga

Untuk dilema error ketiga masih sama dengan mengatasi error kedua, Anda hanya tinggal menambahkan arahan amp; di belakang arahan & . Masalah ini akan muncul apabila cara mengatasi error pertama dan kedua masih gagal di lakukan.
Sumber http://kang-mousir.blogspot.com

Validasi Html5 Link Google Font

Validasi Html5 Link Google Font

HTML5 Tutorial Blogger

Masih membahas perihal Validasi HTML5, artikel ini yakni artikel rangkuman dari artikel yang sudah dibahas oleh Link Font Di Head Blog Error Validasi HTML5 dan Validasi HTML5 Pada Link Google Font. Alasan link tersebut tidak valid, alasannya yakni url pada link tersebut dianggap sebagai url ilegal.

Sepertinya ada perbaikan gres pada sistem HTML5. Untuk mengatasi problem tersebut terdapat 3 pilihan untuk mengatasinya, oleh alasannya yakni itu silakan di simak.

Cara Pertama : Memisahkan Jenis Font

Contoh Error pada link font google.

<link href='http://fonts.googleapis.com/css?family=Roboto:700,400,300,300italic,400italic,700italic|Oswald' rel='stylesheet' type='text/css'/>

Dalam font diatas terdapat 2 jenis varian font antara lain jenis Roboto dan Oswald, kedua font tersebut digabungkan dalam satu link dengan instruksi pemisah | . Untuk mengatasinya Anda harus pisahkan kedua varian font tersebut menjadi dua link, menyerupai dibawah ini.

<link href='http://fonts.googleapis.com/css?family=Roboto:700,400,300,300italic,400italic,700italic' rel='stylesheet' type='text/css'/> <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>

Cara Kedua : Merubah Font Menjadi CSS

Silakan Anda buka link pada font google untuk melihat instruksi CSS yang akan dipasang.

<link href='http://fonts.googleapis.com/css?family=Roboto:700,400,300,300italic,400italic,700italic' rel='stylesheet' type='text/css'/> <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>

Perhatikan url yang Saya tandai, silakan Anda buka di browser Anda url tersebut. Anda akan menemukan instruksi CSS yang akan dipasang. Dari kedua URL tersebut di sanggup CSS menyerupai dibawah ini.

@font-face {   font-family:'Oswald';   font-style:normal;   font-weight:400;   src:local('Oswald Regular'),local('Oswald-Regular'),url(http://themes.googleusercontent.com/static/fonts/oswald/v8/-g5pDUSRgvxvOl5u-a_WHw.woff) format('woff'); }  @font-face {   font-family:'Roboto';   font-style:normal;   font-weight:300;   src:local('Roboto Light'),local('Roboto-Light'),url(http://themes.googleusercontent.com/static/fonts/roboto/v10/Hgo13k-tfSpn0qi1SFdUfT8E0i7KZn-EPnyo3HZu7kw.woff) format('woff'); }  @font-face {   font-family:'Roboto';   font-style:normal;   font-weight:400;   src:local('Roboto Regular'),local('Roboto-Regular'),url(http://themes.googleusercontent.com/static/fonts/roboto/v10/2UX7WLTfW3W8TclTUvlFyQ.woff) format('woff'); }  @font-face {   font-family:'Roboto';   font-style:normal;   font-weight:700;   src:local('Roboto Bold'),local('Roboto-Bold'),url(http://themes.googleusercontent.com/static/fonts/roboto/v10/d-6IYplOFocCacKzxwXSOD8E0i7KZn-EPnyo3HZu7kw.woff) format('woff'); }  @font-face {   font-family:'Roboto';   font-style:italic;   font-weight:300;   src:local('Roboto Light Italic'),local('Roboto-LightItalic'),url(http://themes.googleusercontent.com/static/fonts/roboto/v10/7m8l7TlFO-S3VkhHuR0at4bN6UDyHWBl620a-IRfuBk.woff) format('woff'); }  @font-face {   font-family:'Roboto';   font-style:italic;   font-weight:400;   src:local('Roboto Italic'),local('Roboto-Italic'),url(http://themes.googleusercontent.com/static/fonts/roboto/v10/1pO9eUAp8pSF8VnRTP3xnvesZW2xOQ-xsNqO47m55DA.woff) format('woff'); }  @font-face {   font-family:'Roboto';   font-style:italic;   font-weight:700;   src:local('Roboto Bold Italic'),local('Roboto-BoldItalic'),url(http://themes.googleusercontent.com/static/fonts/roboto/v10/t6Nd4cfPRhZP44Q5QAjcC4bN6UDyHWBl620a-IRfuBk.woff) format('woff'); }

Selanjutnya silakan pasang instruksi tersebut diatas instruksi ]]></b:skin> atau instruksi </style>.

Cara Ketiga : Merubah Kode | Menjadi Kode %7

Perhatikan instruksi dibawah, ini yakni pola link google font yang tidak valid.

<link href='http://fonts.googleapis.com/css?family=Roboto:700,400,300,300italic,400italic,700italic|Oswald' rel='stylesheet' type='text/css'/>

Perhatikan instruksi yang Saya tandai, biar menciptakan link tersebut Valid HTML5 silakan Anda ganti instruksi tersebut dengan instruksi %7.
Sumber http://kang-mousir.blogspot.com