ايموشنز للبلوجر ... نحن نتحدى الملل

اخر تحديث بتاريخ : 6/8/2009

الكثير لا يعلم مزايا المتصفح firefox وما يميزه عن الـ internet explorer , ربما سوى ان firefox يجعل عملية التصفح اسرع , لكن الامر ان " فايرفوكس " به مزايا اخرى كثيرة من ضمنها ميزة سنتحدث عنها اليوم .
لا اعلم ما اسمها لكن دعنا نقول انها ميزة اضافة الـ " add ons " او "plugins " او " الاضافات الخاصه " , من ضمن هذه الاضافات اضافة لمستخدمى البلوجرز - اللى هو احنا يعنى ولا مؤاخذه - يجعلهم قادرين على استخدام " الايموشنز " اثناء تحرير التدوينات وادراجها داخل البوست .
وهذه الصورة مثال لما اريد توضيحة وكيفية انشاءه .



حتى تتمكن من استخدام هذه الخاصيه لابد اولا من تنصيب برنامج " الفايرفوكس"
هذه صفحة موقع البرنامج يمكنك التحميل منها مجانا , من هــــــنــــــا

بعد التحميل والتنصيب , ناتى للخطوة التالية وهى تحميل ملف يجعل " الفاير فوكس " مجهزا لاستقبال الاضافات الخاصة التى تحدثنا عنها , ايا كانت تلك الاضافات , ويمكنك تحميله من هـــــــنــــــا
كيفيه تنصيب هذا الملف كالاتى : شغل برنامج الفاير فوكس وافتح اى صفحة , جوجل مثلا , وقم بـ " سحب والقاء drag and drop " للملف على نافذة " الفايرفوكس " لتظهر نافذة التنصيب وتكمل معاها للاخر .
الخطوة التالية هى تحميل ملف اضافة خاصية " الايموشنز " لمستخدمى البلوجر وبهذا الملف يوجد روابط للصور " الايموشنز " التى ستظهر فى " الفايرفوكس " , اسم الملف emoticons.js و يمكنك تحميله من هــــــــنــــــــا
وطريقة تنصيبه بالظبط كالملف السابق .
بعد تنصيب هذا الملف ستظهر ايكونة تدل على تفعيله فى الركن الايسر بالاسفل من نافذة الفايرفوكس بالشكل الاتى


ولو ضغطت على الايكونة " كليكة " يمين ستظهر خيارات " تفعيل " و " الغاء تفعيل " وباقى خيارات هذه الخاصية .

الان اذهب الى مدونتك , واختار " تحرير edit " تدوينة جديده ستجد ان " الايموشنز " قد ادرجت بالفعل

___________________________________________________

ده كله كلام هايف , اللى عايز يكتفى بيه مفيش مشاكل , واللى عايز يكمل يستنى , عشان هانبدل " الايموشنز " دى بايموشنز افضل او حسب الاختيار , لان اللى فى الملف شكلهم مش لطيف وكمان مش متحركة .

اولا : لازم يكون عندك مصدر " source " لايموشنز اللى انت عايزها , منين ؟
ممكن تبحث فى جوجل بكلمة " emotion pack " او " animated emotions " او " ايموشن متحركة " او ماشابه لغاية ما توصل .
يا اما تاخد بعضك وتروح لاى منتدى من اللى سعادتك مسجل فيهم , وتعمل نفسك كانك هاترد على موضوع فى المنتدى ( بينى وبينك يعنى ) , هاتلاقى ف صفحة اضافة الرد ايموشنات على جنب , اعمل save picture as للايموشنز اللى تعجبك عالهارد عندك . او تضغط كليكة يمين وتختار properties وتنسخ اللينك بتاعها علطول , اعمل اى حاجه المهم تجيب ايموشنز من تحت " طقاطيق " الارض .

ثانيا : ترفع الايموشنز اللى عندك عالهارد لموقع رفع صور , والافضل استخدام حساب على google page creator ولمعرفة كيفية الاشتراك ورفع الملفات روح للموضوع ده هتلاقى فيه الشرح . من هـــــــــــــــــــــــــنــــــــــــــــــا
وده برنامج لرفع الصور الى موقع imageshacker للى عايز يستخدمه للرفع بدلا من google pages جابهولنا الدكتور بطوط حبوب , من هــــــــنـــــــا , وبنهديله الوردة دى من اسرة البرنامج

ثالثا : هانفتح مع بعض الملف اللى اسمه bloggeremoticons.user.js بالـ notepad او البرنامج النصى بتاع الويندوز , عشان نعدل عليه ونغير روابط الايموشنز القديمة ونستبدلها بالروابط الجديده .
هنلاقيه بالشكل ده

// Based on the original emoticonsforblogger by Kuribo (http://www.kuribo.info/2006/04/emoticons-for-blogger.html)
// Modified by Wolverinex02 (http://wolverinex02.blogspot.com/)

// FEATURES
// Works only in Compose modes
// Add the emoticons at the end of the text

// TODO
// modify the script to insert the emoticon directly after the cursor

// ==UserScript==
// @name Emoticons for Blogger
// @namespace http://www.kuribo.info/
// @description You can use emoticons in Blogger.
// @include http://*.blogger.com/post-edit.g?*
// @include http://*.blogger.com/post-create.g?*
// ==/UserScript==

window.addEventListener("load", function(e) {


function setemoticons(domname)
{
var editbar = document.getElementById(domname);
if (editbar) {

var buttons = "<br />";
buttons += emoticonButton("arrow", "http://wolverinex02.googlepages.com/icon_arrow.gif");
buttons += emoticonButton("biggrin", "http://wolverinex02.googlepages.com/icon_biggrin.gif");
buttons += emoticonButton("confused", "http://wolverinex02.googlepages.com/icon_confused.gif");
buttons += emoticonButton("cool", "http://wolverinex02.googlepages.com/icon_cool.gif");
buttons += emoticonButton("cry", "http://wolverinex02.googlepages.com/icon_cry.gif");
buttons += emoticonButton("eek", "http://wolverinex02.googlepages.com/icon_eek.gif");
buttons += emoticonButton("evil", "http://wolverinex02.googlepages.com/icon_evil.gif");
buttons += emoticonButton("exclaim", "http://wolverinex02.googlepages.com/icon_exclaim.gif");
buttons += emoticonButton("idea", "http://wolverinex02.googlepages.com/icon_idea.gif");
buttons += emoticonButton("lol", "http://wolverinex02.googlepages.com/icon_lol.gif");
buttons += emoticonButton("mad", "http://wolverinex02.googlepages.com/icon_mad.gif");
buttons += emoticonButton("mrgreen", "http://wolverinex02.googlepages.com/icon_mrgreen.gif");
buttons += emoticonButton("neutral", "http://wolverinex02.googlepages.com/icon_neutral.gif");
buttons += emoticonButton("question", "http://wolverinex02.googlepages.com/icon_question.gif");
buttons += emoticonButton("razz", "http://wolverinex02.googlepages.com/icon_razz.gif");
buttons += emoticonButton("rolleyes", "http://wolverinex02.googlepages.com/icon_rolleyes.gif");
buttons += emoticonButton("redface", "http://wolverinex02.googlepages.com/icon_redface.gif");
buttons += emoticonButton("sad", "http://wolverinex02.googlepages.com/icon_sad.gif");
buttons += emoticonButton("smile", "http://wolverinex02.googlepages.com/icon_smile.gif");
buttons += emoticonButton("surprised", "http://wolverinex02.googlepages.com/icon_surprised.gif");
buttons += emoticonButton("twisted", "http://wolverinex02.googlepages.com/icon_twisted.gif");
buttons += emoticonButton("wink", "http://wolverinex02.googlepages.com/icon_wink.gif");

buttons += separator();

editbar.innerHTML += buttons;
}
}


function emoticonButton(name, url) {
return "<span class='' style='display: block;' id='htmlbar_undefined' title='" + name + "' onmouseover='ButtonHoverOn(this);' onmouseout='ButtonHoverOff(this);' onmouseup='' onmousedown='CheckFormatting(event);(function() {var rich_edit = document.getElementById(\"richeditorframe\");var rich_body = rich_edit.contentDocument.getElementsByTagName(\"body\");rich_body[0].innerHTML+=\"<img class=\\\"emoticon\\\" src=\\\""+url+"\\\" width=\\\"15\\\" height=\\\"15\\\" alt=\\\"" + name + "\\\" title=\\\"" + name + "\\\" />\";})();ButtonMouseDown(this);'><img src='" + url + "' alt='" + name + "' border='0'></span>\n";
}

function separator() {
return "<div style=\"display: block;\" class=\"vertbar\"><span style=\"display: block;\" class=\"g\"> </span><span style=\"display: block;\" class=\"w\"> </span></div>\n";
}

setemoticons("formatbar");

}, false);

- روابط الايموشنز هى اللى ملونة باللون الاحمر , هانغيرها بالروابط الجديدة بتاعة الايموشنز اللى رفعناها على google page creator او اى سيرفر تانى , او حتى لينكات ايموشنز موجوده جاهزة عالويب , نوبروبليمز .

- الكلام اللى مكتوب باللون الازرق ده " عنوان " كل ايموشن على حده , وده اللى هايظهر لما تقف بالمؤشر على الايموشن , ممكن تغيره بس لازم يكون انجليزى .

- حاجه مهمة جدا , الكلام اللى ملون باللون الاخضر ده عباره عن كودين لتحديد " طول " و " عرض " كل الايموشنز الموجوده , ودول مهمين فى حالة اذا كانت كل الايموشنز مقاساتها واحده , انما لو الايموشنز مقاساتها مختلفة هاتضطر تحذف الكودين دول ( كل الكلام الملون باللون الاخضر ) , عشان الايموشنات تظهر بحجمها الطبيعى . وده افضل من تحديدها بحجم معين .

- بعد التعديل على الملف احفظه , وسطبه مع الفاير فوكس بالطريقة اللى قولناها قبل كده . ولو كنت مسطب الخاصية قبل كده بالفعل دوس " كليكة " يمين على ايكونة الخاصية , وانزع علامة " صح " من كلمة enable عشان تبطل الخاصية , وتفعل الملف الجديد .

- يفضل فى الايموشنز اللى تختارها الاتى :
1- ان حجمها " بالكيلو " ميكونش كبير عشان ميحصلش بطء فى تحميل الصفحات .
2- ان مقاساتها " الطول والعرض " متكونش كبيرة , عشان ميحصلش مساحات متباينة بين السطور بسبب مقاس الايموشن .
3 - ان عدد الايموشنز ميكونش كبير , ممكن 25 بحد اقصى , او 300 كيلو بايت كحجم اقصى لكل الايموشنز . منعا لبطئ التحميل .

انا عملت الايموشنز الخاصة بيا والشكل النهائى كان كده , مقاسات الايموشنزكانت مختلفة انما بتتراوح من 35 الى 50 بيكسل , مش اكتر من كده , عشان كده اضطريت احذف الكودين بتوع تحديد الطول والعرض .


واى استفسار على الرحب والسعة , وكل سنة ونتم طيبين بمناسبة المولد النبوى .
ــــــــــــــــــــــــــــــــــــــــــ

تحديث :
اختصارا للوقت والجهد قمت بعمل ملف به روابط جميع " ايموشنز" الياهو ماسنجر .

كل ما عليك انك تسطبه بدلا من الملف بالاعلى . حمل الملف ده , واسمه bloggeremoticons2.user من هــــــــنـــــــــا

والشكل النهائى هايكون كده ...


اللى يعرف حد عنده " بلوج " يشرحله الطريقة يا خوانا , عشان انا حاسس ان التدوين بقا ممل , و الايموشنز دى ممكن تبعث جو من المرح بالاضافة الى انها هاتساعد على التعبير .

اكتب ايميلك هنا