قائمة منسدلة خفيفة فقط CSS

CSS Drop Down Menu
القوائم المنسدلة من الإضافات الهامه في المدونات خصوصا التي تحتوي الكثير من الاقسام فهي تغني عن مساحات تذهب هدراً في القالب وهناك عدة أنواع من تلك الإضافة منها ما يعمل بتقنية جي كويري Jquery ومنها ما يعمل باكواد CSS فقط , ماالفرق بينهما ؟ الفرق ان التي تعمل بتقنية جي كويري اكثر تطورا لكنها أثقل  أما الـ CSS فهي خفيفة للغاية وسهلة التعامل وانا أفضلها جداً ولهذا قمت بإنشاء هذه الإضافة وراعيت أن تكون سهلة التركيب و التنسيق للجميع لكي يتحكم بها كل مستخدم كما يريد


بالنسبة لطريقة التركيب فقط أضف الكود التالي في آداة HTML/JavaScrupt



والآن مع شرح التنسيق


هذا #222222 هو لون الخلفية الاساسية للقائمة غيره بما يعجبك أو استبدله بـ transparent إن أردت عدم وجود خلفية
هذا #fff  هو لون الخط
أما الرقم 15هو حجم الخط
هذا #ccc هو لون الخلفية عند تمرير الماوس
وهذا #000 هو لون الخط عند تمرير الماوس
هذا #000 هو لون خلفية القائمة المنسدلة
 وهذا #bbb هو لون الفاصل بين كل سطر

وهذا هو شرح إضافة روابط أو قوائم جديدة


كرر السطر الأحمر في حالة الرغبة في إضافة عنصر جديد
الجزء الأزرق كاملأ هو إضافة قائمة منسدلة بداخلها قائما منسدلة أخرى كما هو موجود في المعاينة
الجزء الأخضر هو القائمة المنسدلة الفرعية يمكنك ازالتها أو تكرارها ان أردت زيادة
قليل من التركيز في الأكواد ستنجح في تنسيقها كما تريد
وطبعا تغير إسم كل رابط كما تريد وبالنسبة لرمز الـ # إستبدله بالرابط المراد فتحه عند الضغط على العنصر
وبالتوفيق

إنشاء البومات صور من صفحات فيس بوك على بلوجر

Facebook Photo Gallery in Blogger
بلوجر والمواقع الإجتماعية اصبحوا في تقارب شديد خصوصا الفيس بوك أصبح جزء من بلوجر خصوصا ان هناك الكثير من المدونات قائمة على دعم صفحات الفيس بوك وطبعا يهم هذه الفئة من المدونين وجود رابط في الأخبار والمقالات والصور على بلوجر ولهذا ستكون هذه إضافة قيمة جداً فهي إضافة تمكن من أخذ جميع البومات أى صفحة تعجبك ثم تضيفها الى مدونة بلوجر ويمكن أن تصنع صفحة البومات للعدد الذي تريده من الصفحات لا مشكلة ويعمل هذا الألبوم بتقنية جي كويري JQuery وتفتح الصور في إطار ColorBox أى لن تخرج بعيداً عن مدونتك والآن مع هذا المثال الحي

معايـــنة


كما نرى هذه البومات صفحة قناة هدى HudaTV 
الآن كيف تضيف  البومات الصفحة التي تريد
أول شئ يجب ان تحصل على معرف الصفحة وذلك بالطريقة التالية
ادخل على هذا الرابط findmyfacebookid.com
ستجد صندوق كتابة ضع به رابط الصفحة
مثال صفحة هدى
https://www.facebook.com/Huda.Tv
ثم إضغط على زر Lookup numeric ID
سيظهر رقم قم بنسخة هذا هو المعرف افعل نفس الطريقة مع اي صفحة تعجبك
نأتي لطريقة التركيب يمكنك إضافة الكود التالي إلى صفحة ثابته او موضوع لا مشكلة
""المهم ان يكون عرض الصفحة أكثر من 640px ليظهر الصندوق بشكل جيد
حتى لو لم تكن كذلك سيظهر لكن قد يكون خارج قليلا عن الإطار""
ولكن عند الإضافة حول صندوق الكتابة من وضع التأليف الى وضع HTML
هذا هو الكود






إستبدل Page ID بمعرف الصفحة
إذا كنت ستستخدم هذه الخاصة كثيراً او صادفت مشكلة في الإضافة بهذا الشكل
قم بوضع الجزء الأزرق فوق الوسم في قالبك
ثم استخدم في الموضوعات الجزء الأسود فقط
كلا الطريقتين مضبوطتان 
الكود المعلم بالأصفر يمكنك حذفه ان كانت لديك مكتبة جي كويري
أنا برئ من أى شخص يستخدم الطريقة في نشر البومات لصور تخالف الشريعة الإسلامية
وفقنا الله وإياكم الى ما يحب ويرضى
دمتم في امان الله

إضافة مواضيع ذات صلة بشكل العناوين

Related Posts Blogger Widget
إضافة أخرى من إضافات مواضيع ذات صلة بشكل مميز مع امكانية التنسيق والتنسيق الرئيسي للآداة حصري لكن مدون طبعا الفرق بين هذه الآداة والآدوات السابقة هو أنها أخف نظراً لأنها لا تحتوي صور مجرد عناوين الرسائل وهي مناسبة للمدونات كثيرة المواضيع والتي تهتم في الاساس بالعناويين كالمدونات الإخبارية والتقنية شكل الآداة كما ترونه في الصور وسيتم شرح طريقة التنسيق ليتناسب مع شكل مدونتك ويمكن تركيب هذه الإضافة مع الإضافات الأخرى التي تعتمد على الصور لا مشكلة أو يمكن الإكتفاء بها تابع معي طريقة التركيب

 الخطوة الاولى


ابحث عن هذا الوسم في القالب وأضف فوقه الكود التالي



يمكنك تغيير كلمة مواضيع ذات صلة بكلمة تناسبك
والرقم 5 قم بزيادته ان اردت زيادة عدد الروابط
انتهى بحمد الله


القالب الشهير Infrared

infared blogger template
القالب الشهير Infrared هو احد أشهر القوالب الخاصة بوورد بريس وتم تحويله لبلوجر نظراً لكثرة الطلب عليه وهو ليس قالب حديث لكنه يظل متميزاً ولم يتوقف الطلب على نسخ لهذا القالب لكن المشكلة انني تقريباً كل النسخ التي رايتها بها أخطاء كثيرة سواء العربية او الإنجليزية ولم ارى نسخة مكتملة التعريب بشكل جيد لذا قمت بعمل ترميم للقالب وتعريبه بشكل جيد ومن استخدم نسخ سابقة من هذا القالب سيعلم الفرق جيداً بين هذه النسخة وغيرها القالب منقسم لثلاث اعمدة عمودين لصندوق الرسائل وعمود السايد بار القالب يليق باى نوع من المدونات فشكله يتوافق مع كل المحتويات انا شخصيا لست من محبي القوالب الداكنة لكن هذا القالب حقاً مميز , لا داعي لكثرة الكلام جاء وقت المعاينة والتحميل





 معلومات وتنسيق القالب

يحتوي القالب على مساحة إعلانية في الهيدر بمقاس 468x60

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

  • الرئيسية


  • عن المدونة

  • راسلنا

  • مدونة


  • قائمة
     



  • قائمة
      



  • رابط


    • كرر الكود الأحمر لزيادة الروابط
    كرر الكود الأزرق لزيادة قائمة منسدلة
    الكود الأخضر داخل القائمة المنسدلة معناه قائمة منسدلة داخلية كما تراها في المعاينة كرره ان اردت زيادتها

    يحتوي القالب على قائمة منسدلة أخرى وهذه طريقة تنسيقها

    نفس طريقة التنسيق

    يحتوي أيضا على سلايدر وهذه أكواد تنسيقه



    سلايدر رقم واحد


    قم بتغير هذه الجملة كوصف للسلايد الاول







       
       


    سلايدر رقم 2


    قم بتغير هذه الجملة كوصف للسلايد الثاني







       
       


    سلايدر رقم ثلاثة


    قم بتغير هذه الجملة كوصف للسلايد الثالث







       
       


    سلايدر رقم 4


    قم بتغير هذه الجملة كوصف للسلايد الرابع













    طبعا الأجزاء بالعربية غيرها
    أما الروابط الطويلة فهي روابط الصور مرة مكبرة وهم الأربعة الموجودين بالأعلى
     ومرة مصغره وهم الأربعة الموجودين بالأسفل غير كل منها

    تم اضافة الميتا تاج ستجدها في اول القالب غير الكلمات الموجوده بها

    تم إضافة أكواد المشاركة الإجتماعية للقالب

    وتم تنسيق التعليقات وإضافة التعليقات التفاعلية

    آخر اعداد ادخل على صفحة التخطيط وقم بتحرير صندوق الرسائل والغي التأشير من على خيار التاريخ الأول

    blogger Date

     يمنع حذف حقوق التعريب والتطوير من القالب
    فنرجو مراعاة هذا الأمر وهذه شروط الإستخدام الخاصة بنا
    وبالتوفيق

    حل بعض مشاكل القوالب عن طريق الإخفاء

    Use display none to hide blogger template parts
    كثير من المدونين غير متخصصين في القوالب ومشاكلها وهناك كثير من المشاكل تصادف مدونين ولا يستطيعون حلها غالباً تكون المشاكل في وجود أجزاء في القالب مراد حذفها مثال السلايدر رأيت العديد من الاسئلة تتمحور حول حذف سلايدر أو حذف إعلان ويبحثون عن من يحل الأمر ولكن قد يمر وقت طويل حتى يجدون من يحل لهم الأمر ولذلك سنقدم حل بسيط وسهل هو ليس حل نهائي يعني لن نحذف الجزء المطلوب حذفه ولكن سنقوم بإخفاءه حتى تجد من يحذفه لك وبالتالي يظل مظهر المدونة جيد ومضبوط ولن يلاحظ الزائر المشاكل فقط كل ما عليك التركيز معي جيداً في الخطوات وسيكون الأمر سهل بالنسبة لك بإذن الله
    أولا ثبت هذه الإضافة على متصفح فايرفوكس إسم الإضافة Firebug
    كروم مدمج به إضافة مباشرة لكن أفضل العمل عبر فايرفوكس
     شاهد الفديو التالي لشرح طريقة العمل

    إذا كل ما عليك فعله هو نسخ المعرف كما شاهدنا في الفديو طرقة الحصول عليه
    والدخول لصفحة تحرير القالب وتبحث عن المعرف
    ثم تضيف بعده او تحته هذا الكود 
    display:none;
    كل معرف يكون بعده قوس كهذا { نحن نريد إضافة الكود بعد القوس مثال لمعرف البحث لدي الذي اخفيته في الفديو
     #search وبعد تجد القوس فنضيف الكود بهذا الشكل
    #search { display:none;
    أو يكون بهذا الشكل
    #search {
    display:none;
    كلاهما لن يفرق ولكن هو توضيح
    كما ذكرت في البداية هذا إخفاء فقط حتى تجد من يحذف لك الكود او تستطيع حذفه بنفسك
    ويمكن أن لا تحذفه لن يضر الأمر ولكن أوضح حتى تعلم الفرق
    وبالتوفيق

    Subscribe to: Posts (Atom)