12/09/2014

كيفية اضافة قوائم منسدلة في بلوجر

وجود قوائم منسدلة في المدونة مثل الموجودة في هذه المدونة تفيد القارئ كثيراً للتنقل بين المواضيع المفضلة لديه والأقسام الموجودة في المدونة ولكن للأسف هذه الميزة ليست موجودة في نظام بلوجر , ولكننا يمكننا إضافتها يدوياً ولكن لإضافتها يجب علينا استخدام لغة الــ html , css وأغلبية المدونين لا يجيدون استخدام هذه اللغات لذلك سنتعلم طريقة بسيطة يمكن لأي شخص تنفيذها بدون معرفة بلغة html , css .

الخطوة الأولى : تصميم القائمة الخاصة بنا
في البداية يجب علينا معرفة ما سنضعه في القائمة وليكن (الصفحة الرئيسية – برامج الانترنت – برامج الحماية – اسلاميات) ومثلاً قائمة اسلاميات تحتوى على قائمة أخرى مثلاً (صوتيات – مرئيات - مقالات) , بعد معرفة ما سنضعه في القائمة سنقوم بعملها عن طريق أداة مجانية على الانترنت يوفرها لنا هذا الموقع ويقوم هذا الموقع بعمل قوائم منسدلة بكل سهولة ويسر وهو مجاني أيضاً , أولاً يجب علينا التسجيل في الموقع قبل استخدامه , وبعد التسجيل نقوم بالضغط على (create menu now) وعندها سيظهر لنا
الشكل التالي
        في الجانب الأيسر نقوم بتخصيص القائمة وفي الجانب الأيمن نرى شكل القائمة بعد التغيير , إذا أردنا اختيار قالب آخر غير القالب الافتراضى نضغط على (choose template) الموجود في الجانب الأيسر ونختار القالب الذي نريده , ويمكننا تغيير الألوان الافتراضية للقالب وحجم ونوع الخط المستخدم فيها , بعد الأنتهاء سننتقل إلى الخطوة التالية وهي إضافة الروابط وتعديل الأسماء واضافة العناصر إلى القائمة وذلك بالضغط على structure لتظهر لنا الصورة التالية
        من هذه القائمة يمكننا إضافة أو تعديل العناصر الموجودة في القائمة , ولإضافة عنصر جديد إلى القائمة نضغط على علامة + الموجودة في الجزء الأيسر , كما يمكنك إضافة فواصل بين العناصر بالضغط على علامة - , وعند اختيار العنصر من الجهة اليسرى , يظهر لنا في الجانب الأيمن النص الذي سيظهر على العنصر والرابط الذي نريد اضافته اليه كما يمكننا تغيير الأيقونة الموجودة بجواره , ويمكننا بخاصية السحب والإفلات إعادة ترتيب العناصر في الجانب الأيسر ولا تنسى الضغط على (apply changes) بعد الانتهاء من التعديل ليتم حفظ التغيرات , كما يمكنك أضافة (Tooltip) (وهو النص الذي يظهر عند الوقوف على العنصر) من خلال additional options , بعد الإنتهاء سننتقل إلى الخطوة التالية وهي additional options من الجزء الأيسر هذا إذا كنت تريد التغيير في مقاس العناصر أو اضافة الشفافية عليها والأفضل أن تتركها كما هي , ومن ثم نقوم بتحميل القائمة إلى الجهاز الخاص بنا , بعد التحميل سنحصل على ملف مضغوط بهذا الاسم MyMenu1.zip ويحتوى على ملف جافا سكربت يسمى MyMenu1.js بالاضافة لبعض الملفات الأخرى .
الخطوة الثانية : حفظ ملفات القائمة على جوجل دريف
        للأسف لا يسمح موقع بلوجر بحفظ ملفات الجافا سكريبت على الموقع , لذلك سنستخد موقع جوجل دريف لحفظ الملفات عليه .
        بعد الدخول على موقع جوجل دريف من هنا نقوم بتسجيل الدخول لحساب الجي ميل الخاص بنا , بعدها سنقوم بعمل مجلد بنفس اسم المجلد الذي قمنا بتحميله سابقاً (MyMenu1) ومن ثم نقوم بتحميل كل الملفات الموجودة في المجلد على الكمبيوتر الى المجلد الذي قمنا بانشاءه على جوجل دريف , بعد تحميل الملفات سوف نقوم باختيار المجلد في جوجل درايف ومن الخصائص نختار المشاركة ونقوم بتعديل مستوى الرؤية إلى (عام على الانترنت) لكي يستطيع أن يراه أي شخص , ونقوم بنسخ الرابط لهذا المجلد ومن ثم نضيف في آخره (/MyMenu1.js) , لنحصل على رابط شبيه بالتالي
(https://googledrive.com/host/0BzKDEAJQJKlqUHM/MyMenu1.js )
        وبذلك نكون قد قمنا بتحميل الملفات إلى جوجل درايف وحصلنا على رابط مباشر للملف
الخطوة الثالثة : أضافة القائمة في المدونة
        لم يتبقى الآن سوى خطوة بسيطة وهي إضافة القائمة إلى المدونة , بعد فتح المدونة الخاصة بنا نختار Layout ومن ثم نختار add a gadget ومن ثم اختيار HTML/JavaScript ومن ثم نضع فيه الكود التالي
<script src='نضع هنا رابط الملف الذي حفظناه على جوجل دريف' type='text/javascript'></script>
<div id="MyMenu1"></div>
        وإذا أردنا تعديل القائمة مرة أخرى ما علينا إلا بالدخول على موقع إنشاء القوائم واختيار القائمة التي قمنا بإنشائها من قبل ومن ثم نحملها ونستبدلها بالملفات الموجودة على جوجل دريف .


ملحوظة : الرجاء عدم نقل الموضوع بدون ذكر الرابط ومصدر الموضوع