Lessons 4 bloggers: April 2008

2008-04-18

التعامل مع الصوتيات والمرئيات

نظرا لأن البعض يسأل عن كيفية اضافة المواد السمعية احبب ان اشرح بالتفصل الاكواد المتعلقة بهذة العملية .

اولا : صوت فى الخلفية يعمل اوتوماتيكيا:

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

dashbord > layout > template > page elements > add a page element

التى فى الاطار الجانبى , واختر اداة Html/Java script وضع فيها هذا الكود :

ضع رابط الملف الصوتى فى المكان المحدد الملون باللون الاحمر .
volume=100 : تحديد طبقة الصوت , ويمكنك تغيير القيمة .

loop=false : الملف لن يتكرر بعد انتهاء عرضه , يمكنك جعله يتكرر بابدال القيمة بـ true .

autostart=true : الملف سيعمل بشكل تلقائى ,يمكنك منع ذلك وجعل الزائر يختار التشغيل بابدال القيمة الى false بدلا من true .

hidden=true : هذا الوسم هو الذى يجعل شريط التشغيل يختفى فى الخلفية , بامكانك ان تظهرة بابدال القيمة true وجعلها false .

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

ثانيا : عرض الملفات الام بى ثرى mp3 :

------------------------------------

بفرض ان الملفات مرفوعه بالفعل على الانترنت ومعاك الروابط بتاعتها , هانستعمل الكود ده بتاع مشغل موقع http://www.odeo.com اعتقد انه اجمل شئ شفته واسهلهم .

استبدل لينك الملف الام بى ثرى بهذه القطعة [MP3 file address] كاملة
ويمكنك التعديل على المقاسات , العرض width والطول height .

مثال : الكود ده لاغنية لسامى يوسف ..

هايدينا المنظر ده :

ثالثا : الفيديو

-------------------

طبعا الفيديو امره سهل , لان بلوجر فيها خدمة رفع الفيديو وبتدعم امتدادات كتير , غير انك ممكن تجيب الفيديو بسهولة من عالـ Youtube او اى موقع تانى بمجرد الحصول على كود الفيديو ونسخه فى التدوينة فى وضع Edir Html مش فى وضع compose .

لكن على اى حال لو عايز تستخدم طريقة الاكواد الكلاسيك , يمكنك استعمال هذا الكود ايضا لجميع انواع الملفات ,صوت او فيديو بامتدادات MP3 , WMA , AVI , MPG

وللامتدادات النادرة الاخرى مثل realplayer او quick time او rm او ram او غيرها , صوت او فيديو , يمكنك استعمال هذا الكود

فى حالة الكودين الاخرين , المتصفح هايطلب منك انك run active x قبل الدخول .
اوهايطلب منك انك install quickplayer لو كان الملف كويك .
ملحوظة : لو كانت الاضافات غير مدعمة فى المتصفح لديك يمكنك تثبيتها من هـــــنـــا

رابعا : قطع المشغلات الصوتية flash players widgets
--------------------------------------------------

اعتقد ان افضل مشغل من نوع فلاش شوفته هو اللى فى الموقع ده , لوجود كثير من الاشكال وامكانية التعديل على الالوان , وامكانية عمل قائمة تشغيل كاملة playlist بالاضافة الى افض امكانية وهى البحث عن ملفات الام بى ثرى بكل سهولة .
اختار المشغل : من هـــنــا .

بعد الانتهاء هايطلب من التسجيل , وهايديك كود المشغل .
اصنع اداه add a page element من النوع Html/Java script وانسخ فيها الكود واحفظ .

اهم شئ انك ممكن تستعمل الموقع ده فى الحصول على الروابط المباشرة على الانترنت بدون رفع ومعاناه .

-----------------

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

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

كيف تكتب باحتراف

مع الاسف مع الالم - على راى عبد السلام النابلسى - بدخل مدونات كتير اجد هناك الكثير من التدوينات باللغة العربية مكتوبة من الشمال لليمين , والسبب ان صاحب المدونة اما انه لم يعلم بعد ان بلوجر قد دعمت اللغة العربية , او انه لم يعرب المدونة باى طريقة مثل التى هــنــا ,او هــنــا , لا سيما ان عملية المحاذاة align للنص اثناء تحرير التدوينة لا تجدى مع الكثيرين مادامت المحاذاة الرئيسية للمدونة من اليسار لليمين كاللغة الانجليزية , على اى حال هى فرصة طيبة للتحدث ليس فقط عن كيفية محاذاة النص من اليمين لليار اثناء التحرير , ولكن عن وضع الـ edit html بشكل عام , والذى يتجاهله الكثيرون .

اولا : بعض الاختصارات التى ستتعرض لها اثناء التعامل مع هذا الوضع :

1- هذا الوسم <br> : وهو اختصار لكلمة break ووظيفته " كسر " السطر الحالى وبداية سطر جديد .انشاء سطر جديد بمعنى ابسط .

2- الوسم <div> : واهو اختصار لكلمة division , ووظيفته انشاء قسم جديد . وهذا الوسم يحتاج الى كود غلق بهذا الشكل </div> فى نهاية القسم .

3- الوسم <p> : وهو اختصار لكلمة paragraph ووظيفته انشاء قطعة نصية جديده , ويحتاج ايضا الى كود غلق بهذا الشكل </p> .

4- الوسم <span> : لا اعلم اختصار لاى كلمة , لكن وظيفته اكساب صفات للنص مثل " الحجم " و " اللون " وهكذا كتلك التى نراها .
--------------------

قديما عانيت كثيرا مع الوضع compose لانى كنت ادرج بعض المصطلحات باللغة الانجليزية , وبعد الحفظ اجد وضعية الكلمات الانجليزية تعاكست مع الكلام العربى , والعكس .
والسبب ان الوضع الافتراضى للمدونة ملائم للمستخدم الاجنبى - لم تكن بلوجر دعمت اللغة العربية بعد - اما الان فيمكنك تعريب المدونة لينصلح هذا الامر بسهولة .
دعنا ندخل فى صلب الموضوع

الان انت تريد كتابة تدوينة بسيطة , وليس بها الا نص عربى , وتريد ان تكون محاذاة النص من اليمين الى اليسار , جميل جدا
دعك من وضع الـ compose واختر وضع الـ Edit Html ستفتح لك نافذه بها بضع الاكواد , احذفها كلها وابدا انت بالتالى , العمليه سهلة جدا .
اكتب هذه القطعة البسيطة جدا

الان انت انشات قسما div يحاذى النص بداخله الجهة اليمنى . وبالطبع ستضع انت كلامك كله مكان الخطوط الحمراء .
اذا اردت ان تنشأ سطرا جديدا لا تضغط زرار enter فى لوحة المفاتيح , ولكن ببساطة ضف <br> الى جانب الكلمة لتنهى بها السطر وتنشأ سطرا جديدا كما فى المثال .
اما حجم الخط ولونه فالاسهل بكل صراحة ان تتعامل معه فى وضعية الـ compose , بعد ان تنتهى من كتابته بالكامل فى وضعية الـ Edit Html . بدلا من الدخول فى متاهات من الاكواد بدون داعى .

الشكل الذى سيظهر فى الوضعية compose كالتالى

طيب , اذا كنت مثلى , وفى تدويناتك بعض الجمل بالانجليزيه ستجد ان المحاذاة الافتراضيه هى عكس المرغوب فيه تماما , لذلك يجب ان تهيئ هذا القسم div لكى يتعامل مع الوضع , ستضيف هذه القطعة البسيطة dir="rtl" وهى اختصار لكلمة Right To Left لتصبح بالشكل التالى :

ستجد ان الكلام يسير بالشكل الذى اردته تماما .

وبالتالى اذا كانت كل تدويناتك باللغة الانجليزية وادرت فى تدوينة معينة اقتباس مطلحات باللغة الانجليزية , ستستعمل نفس الكود ولكت ستغير القيمة rtl وتجعلها ltr .

يمكنك ايضا ان تستعمل الكود <p> بدلا من <div> , بنفس الطريقة . والافضل ان تنشأ قسم كبير من النوع <div> يتخلله اكواد من النوع <p> حسب الحاجة ,وليس العكس , حيث ان الأول هو الأعم .
واتمنى ان تختفى ظاهرة التدوينات العربية ذات المحاذاة من اليسار الى اليمين من المدونات , يارب .

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

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

قوالب xml

قوالب جديده نوفى

NewFangled

حمل من هنا
_____________

Webby

[Plantilla-Webby.jpg]

حمل من هنا
______________

New Chocolate

[Chocolate.jpg]

حمل من هنا
________________

Grungy

[grungyscreenshotmin.gif]

حمل من هنا
________________

Bloggy Mix

[Plantilla-Blix.jpg]

حمل من هنا

_____________

كل القوالب من النوع الحديث modern

كل قالب عبارةعن ملف بصيغة xml
لمعرفة كيفية تشغيل القوالب الجديده من هنا
ملحوظة : لوكان نظامك قديم " classic " فلازم تعمل " ترقية upgrad " الاول .
ملحوظة تانية : باستثناء البروفايل والارشيف كل القطع التانية هاتتحذف
لو مش عايزها تتحذف لازم تنقل اكواد القطع دى من التمبليت القديم وتضيفها للتمبليت الجديد قبل الحفظ
لمعرفة مزيد من التفاصيل من هنا
ملحوظة تالتة : خد نسخة احتياطية " backup " من القالب القديم " download full template "احتياطيا

ولمزيد من التفاصيل من هنا

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

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

قوالب البلوجرز المعتمدة

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

ملحوظة : كل القوالب دى من النوع الحديث modern , يعنى معمولة بلغة xml , لو صادف ان مدونتك لسه " كلاسيك " فلازم تحولها الى " مودرن " اولا قبل تفعيل اى من تلك القوالب .

طريقة التشغيل مشروحة فى الموضوع ده
والخلاصة انك بعد ما تحفظ القالب عالهارد هاتروح تعمل edit للقالب القديم زى ماهو فى الصورة

وتختار browse وبعدين تختار القالب الجديد

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

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

Minima White

Minima Black

Minima Blue

Minima Ochre

Son of Moto

Ms.Moto

Dots

Dots Dark

TicTac

Tic Tac Blue

Denim

Denim Washed

Denim Light

897

565

Thisaway

Thisaway Blue

Rounders(01)

Rounders(02)

Rounders(03)

Sand Dolla r

Herbert

Scribe

Harbor

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

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

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

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

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

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