+ + + + +
Share/Save/Bookmark

2008-04-18

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



اخر تحديث بتاريخ : 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 بيكسل , مش اكتر من كده , عشان كده اضطريت احذف الكودين بتوع تحديد الطول والعرض .


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

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

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

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


اللى يعرف حد عنده " بلوج " يشرحله الطريقة يا خوانا
call me , عشان انا حاسس ان التدوين بقا ممل yawn , و الايموشنز دى ممكن تبعث جو من المرح rolling on the floor بالاضافة الى انها هاتساعد على التعبير party .



الصق لوجو المدونة عندك

اشكال بديلة اخرى من هـنـا

21 اضف تعليق , التعليقات:

مدونة ابن حجر said...

متشكرين يا سيدي

Mohammed samy said...

thanks ya man

ضى القمر said...

اخى وائل ..

جميلة جداا الطريقه اللى ذكرتها ..

ولكنى لم اجربها بصراحه .. لأننى مازلت أستعمل الأنترنت أكسبلولر .. بالرغم من اقتناعى أن ان الفايرفوكس أفضل بكثيير ..

لكن بعض المواقع العربى بتكون مش مظبوطه فى الفاير فوكس .. علشان كده بستعمل الفاير فوكس لما بكون محتاج الrss بس

تحيتى لك

سأقوم بتجربه الامر واعطيك النتيجه ..

ولى طلب آخر ..

أتمنى منك زياتردة مدونتى واعطائك رأيى بها ..

ومايفيدها من جديد أكوادك حتى يعطيها جمالا أكثر ..

فى انتظار افادتك يا اخى

تقبل زيارتى

ضى القمر said...

ولى طلب آخر ..

أتمنى منك زيارة مدونتى واعطائى رأيك بها ..

ومايفيدها من جديد أكوادك حتى تكون أكثر جمالا ..

فى انتظار افادتك يا اخى

تقبل زيارتى

ملاحظه : اعتذر منك لأنى أخطأت فى احرف كلماتى هذه فى الرد السابق .. ولهذا قمت بأعادة كتابتها مرة آخرى .

أروى ...!. said...

أخ وائل كتب رد وأختفى لا أعلم لماذا
طبقت ماذكرت بالحرف الواحد وتفعل عندي بأسفل صفحة فايرفوكس
يوجد وجة وعندما أذهب
edt
لا أجد شيئاً وإذا حاولت تفعيلها من أسفل الصفحة
أضغط على
new user script
وأضح النيم والرابط وأذاطلب
تفعيل سكريبت
تخرج هالكلمة
Could not launch editor.
[Exception... "Component returned failure code: 0x80520003 (NS_ERROR_FILE_EXECUTION_FAILED) [nsIProcess.run]" nsresult: "0x80520003 (NS_ERROR_FILE_EXECUTION_FAILED)" location: "JS frame :: chrome://greasemonkey/content/utils.js :: launchApplicationWithDoc :: line 188" data: no


وجزيت خيراً على مدونتك أستفدت منها
كثيراً

Wael said...

اروى

والله مش عارف المشاكل دى جت ليه

اتاكدى انك نفذتى الخطوات بشكل سليم واحدة واحدة , وانك سطبتى كل الاضافات بشكل سليم
dr.wael4health@hotmail

OMAR said...

السلام عليكم

جزاك الله كل خير اخى وائل

واتمنى لك النجاح والتوفيق فى دراستك

اتبعت الطريقة وكله تمام يا باشا

ضوء said...

مرحبا


عندي استفسار ياأستاذي الكريم
الآن في درس الايموشنز
الفاير فوكس , تم تنصيبه بشكل ممتاز
كذلك الملف الذي يجعل الفايرفوكس يقبل أي إضافات تم تحميله بشكل جيد

لكن الملف الثالث الذي هو عبارة عن أكواد الإبتسامات
لم يعمل !
تم التحميل وأضفته على الفاير فوكس
لكن كانت تظهر لي مشكلة
وهي أن الفاير فوكس لايستطيع إيجاد الملف ..

مالعمل ؟


ملاحظة , عندما حمّلت الملف الذي يجعل الفايرفوكس يقبل أي إضافات
الأيقونة ظهرت على شكل ورقة بيضاء
وعندما أريد تشغيلها وحدها يُخبرني النظام أن ويندوز لم يعثر على هذا الملف ..

هل من الممكن أن تكون المُشكلة هنا .. ؟

مشكلتي نفس مشكلة أروى

Wael said...

Omar
وعيكم السلام ورحمة الله
شكرا ليك

* * *

ضوء

فيه ناس اتبعت الخطوات ونجحت معاها , وده دليل ان الخطوات مظبوطة

وبالتالى نفس اجابتى على اروى , انك تنفذى الخطوات بطريقة سليمة من الاول , ثانيا اتاكدى ان نسخة الفايرفوكس حديثة وانك مسطبة الفلاش بلاير flash player احتمال الموضوع يتظبط
وان شاء الله تشتغل , وابقى قوليلى النتيجة

ßεşσσσ said...

السلام عليكم

يعطيك العافية مرة روعة الدروس
انا طبقت خطوة خطوة عندي الفايرفوكس من اول
وطبقت باقي الخطوات
بس لمن اجي واختار انشاء مدونة ايديت تجيني عادي الصفحة وفجاة تصبح صفحة بيضااااء

ßεşσσσ said...

مرحبا استاذي عدنا من جديد
ابشرك ضبطت معي وكله تمام
الف شكر ليك

Dr Ibrahim samaha said...

قشطة يا مان

Dr Ibrahim samaha said...

بقولك ايه انا كل ما اضغط على ايموشن الاقيها نازلة فى أخر الموضوع وبضطر اعملها كوبى وباست

ثانيا الإيموشن بتبقى طالعة شكلها حوله اطار ودى بيعطة شكل وحش للموضوع........ ايه العمل؟

Wael said...

dr ibrahim

ايوة مسالة الكوبى والبيست دى لازم منها انا كمان عندى كده

انما حكاية الاطار دى تقدر تشيلها

هاتدخل القالب وتدور على

.img{

او

.post img{

وتشوف من ضمن الخصائص بتاعتهم ان فيه اطار border
وتشيله او تخلى قيمته صفر

اوكى

ري ري " بـنـت الـشـهـيـدة " said...

وآآآآآو ..

الله يديك العآفية ..

هو صحيح انا شوية دخت مع شرحك .. ^^

لكن الحمدلله الطريقة نفعت معآيآ وشغآلة دحين زي الفل ..

والله طول عمري متعقدة من البلوج و نفسي في السمآيلآت ..

تسلم والله يآخويه .. ^^

oRiGiNaL HeArT said...

مرسي على الشرح
بس انا اتبعته بالحرف ومفيش نتيجة
انا بستخدم فايرفوكس 3ز7 ممكن تكون الاضافة دى مش شغالة معاه ؟

Wael said...

original

لا المفروض شغالة

اتاكدى بس من الخطوات
والجافا
والفلاش بلاير بالمرة
ربما يكون ليهم علاقة

ƇσĻΌя ϔΌῧΓ lὶᵮҽ said...

الشرح جدا رائع

ابتديت معاك وكل شي تمام التمام شرحك كان في قمة الدقه والجمال

لكن لمن وصلت للرابط التاني ماتحملش معايا
bloggeremoticons.user.js

شكل الرابط انتهت مده صلاحيته

ياليت تغيروه

Wael said...

ƇσĻΌя ϔΌῧΓ lὶᵮҽ

اه فعلا اتحذف من على السيرفر

ببساطة شديدة

اعملى ملف تكست

وغيرى اسمه وامتداده الى

bloggeremoticons.user.js

وانقلى فيه الاكواد الموجودة فى الموضوع من اولها لاخرها , واحفظى



تاكدى انك غيرتى الامتداد
هو ده ببساطة الملف
تقدرى تعدلى روابط الايموشنز بعد كده

للاسف مش معايا الملف , والا كنت رفعته

محمد احمد فهمى said...

شريط الرسايل بتاع مدونتى على البلوجر وعنوانها aldelar.blogspot
لما اجى ادخل على الرسايل لااجد ايقونة وضع فيديو مطلقا مالعمل؟

Oxy said...

السلام عليكم =$
إضآفة رآآئعة جدا ، وقد تمت تجربتها
لكن هناك مشكلة
عندما بدأت استخدم المحرر الجديد
لم تعد السمايلات تظهر =(

هل علي أن اثبتها مرة اخرى على المحرر الجديد ام انها لا تتوافق معه

دمت بـ خير =$

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Post a Comment

اضف تعليقك هنا

اضغط على عنوان البوست لتظهر التعليقات