10‏/04‏/2014

2014-04-10T00:19:00+03:00
10‏/04‏/2014

[ html+css ] صنع و تركيب واجهة احترافيه لمدونة بلوجر - الجزء الثاني

html-css-صنع-و-تركيب-واجهه-احترافيه-لمدونة-بلوجر-الجزء-الثاني
 [ html+css ] صنع و تركيب واجهة احترافيه لمدونة بلوجر - الجزء الثاني

بسم الله الرحمن الرحيم
والصلاة والسلام على خير خلق الله سيدنا محمد عليه افضل الصلاة واتم التسليم
السلام عليكم ورحمة الله وبركاته .

 [ html+css ] صنع و تركيب واجهة احترافيه لمدونة بلوجر - الجزء الثاني

نستكمل الموضوع السابق لمن لم يقراءه هنا : [ html+css ] صنع و تركيب واجهة احترافيه لمدونة بلوجر - الجزء الاول
تكلمت في الموضوع السابق عن طريقة فقط انشاء واجهة للمدونة , او بالأصح قمت بوضع واجهة للكل لمن اراد استخدامها لاننا لسنا في درس تعليمي للـ html او css هنا فقط للذي يعلمون التعديل والتركيب ,
طبعاَ السر في الموضوع بكل بساطة هو هذا الموضوع :  التحكم في إظهار/أخفاء الادوات والإضافات في بلوجر
والذي اعتبره بمثابة كنز في بلوجر وكثير من المدونين واصحاب المدونات يجهلون استخداماته الخارقه .



مثال مباشر على احد مدوناتي : من هنا


الطريقة : 

الطريقة اننا سنقوم بأخفاء الصفحة الرئيسيه الأصليه ونظهر بدلاَ منها الواجهة ( في الرابط الأساسي فقط كـ http://blog.7lolblogger.com )
ثم عند الدخول الى التدوينات او صفحة البحث فستختفي الواجهة , طبعاَ هذا كله راح نعمله عن طريق درس الاخفاء والاظهار .


التركيب :

الخطوة الاولى : اخفاء الواجهة الرئيسيه : 

طبعاَ الان لدينا كود الواجهة , تبغى لنا فقط التركيب - نحن جاهزون .
  • ادخل مدونتك .
  • ابحث عن <body
  • ضع هذا الكود قبله : 
<b:if cond='data:blog.url != data:blog.homepageUrl'>
  • الان ابحث عن </body>
  • وضع هذا الكود بعده :
</b:if>

----------
انتهينا من الخطوة الاولى .

الخطوة الثانيه : تركيب الواجهة الجديده :

  • ابحث عن </head>
  • وضع هذا الكود اسفله مباشرة :
<b:if cond='data:blog.url == data:blog.homepageUrl'>

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

</b:if>


** تستطيع الحصول على  الواجهة التجريبيه في هذا الموضوع :  [ html+css ] صنع و تركيب واجهة احترافيه لمدونة بلوجر - الجزء الاول

 ** ملاحظة مع هذه الطريقة ستفقد معاينة المشاركة اثناء كتابتها , لذا اذا كنت محترف في الـ css فتابع الدرس .

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

اصلاح مشكلة معاينة المشاركة للمحترفين فقط: 


طبعاَ سنقوم بتغيير تركيب الواجهه بالكامل وسنبداء من جديد .

الطريقة : 

  • ندخل القالب .
  • نبحث عن  </head> 
  • نضع هذا الكود تحته مباشرة : 

 <b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

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

<style>header ,.msgall ,.centrat ,.copyright, .sidebar, .footer{display:none}</style>
</b:if> </b:if> </b:if>
 الاحمر : لاحظ اننا قمنا بأخفاء المعالم الاساسيه من الواجهة القديمة كي لاتظهر في الواجهة الجديدة التي صممناها , وهي بعض الاشياء التي توجد في كل مدونة كالهيدر والسيدبار والفوتر وغيرها , انت اولاَ قم بتركيب الواجهة الجديدة ثم بعد ذالك حدد الكلاسات والايديات المزعجة التي تظهر في الواجهة الجديده وقم بأخفائها من خلال display:none اتمنى الفكرة وصلت ..













اي استفسار , انا هنا :)
والرجاء عند النقل ذكر المصدر .



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

عند نقلك للموضوع او نسخه , حاول ان تذكر المصدر لينتفع الزائر في حال اراد المزيد من المساعده , وايضاَ احتراما وتقديراَ للجهود المبذولة في المواضيع.

معلومات عن التدوينة
صورة التدوينة
ملخص التدوينة:

 [ html+css ] صنع و تركيب واجهة احترافيه لمدونة بلوجر - الجزء الثاني بسم الله الرحمن الرحيم والصلاة والسلام على خير خلق الله سيدنا مح...

الساعه : 2014-04-10T00:19:00+03:00
تاريخ : 10‏/04‏/2014
التعليقات : 65
    انشرها :

هناك 65 تعليقًا:

  1. هذا ما كنت انتظر اخي عبد الله
    تسلم الايادي يا مبدع على المواضيع الرائعة والحصرية
    ولك كل الشكر لانك لا تحتكر افكارك المبدعة مثل ما يفعل الاخرين ويقومون بنشر اسوأ الامثلة
    ولكن عندك الموضوع مختلف 180 درجة
    شكرا لك مرة اخرى

    ردحذف
  2. شكرا اخى الكريم موضوع رائع وحصرى بالتاكيد , عدم الاحتكار للافكار يدل طيب اصلك , احسنت يا مبدع ، تحياتى

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

    ردحذف
    الردود
    1. عليكم السلام ورحمة الله وبركاته .. انشاءالله .

      حذف
  4. اخي الكريم شكرآ على هذا مجهود الاكثر من روووعة ربي يجعل هذا في ميزان حسناتك
    لكن ايس لدية الخبرة الكافية في قوالب بلوجر اذا تسمح هذا قالب مدونتي http://www.gulfup.com/?Du6Miq
    اذا لديك وقت تركب هذه الاداة على قالب مدونتي وانا بعد ذالك اقوم بتعديل عليه
    شكرآآآآ مرة اخرة

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

      حذف
    2. شكرا لكم تم بدون مشاكل يمكن المشاهدة هنا

      http://www.mega-course.com/

      حذف
  5. يا أخي ليش كذا ؟! الشرح كامل ولا ينقصه اي شيء , وما اعتقد فيه شيء صعب !!

    ردحذف
  6. شكراً أخيَ Jetara

    أسف علي ألتاخير فى التعليق :)

    أرجو ان تقول رايكَ !!!

    http://arabingo.blogspot.com/

    واجهة من تصميمي :)

    ردحذف
  7. بصراحة جميل ومميز ومفهوم ....

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

    تم ظهور الواجهة بالكامل
    لكن يتم تحول الزوار الى ملتقى المدونين العرب
    بعد ثانية واحدة

    ممكن حل للمشكلة وحذف التحويل من مدونتي؟

    ردحذف
  8. اسف هذا رابط المدونتي
    http://www.almmi-tec.com

    ردحذف
    الردود
    1. فحصت اكواد قالبك الداخليه ولم اجد عبارة modawenon , قد يكون الكود مدموج في ملف خارجي , جرب ابحث في ملفاتك الخارجيه ستجده , ولاكن قد يكون مشفر :(

      حذف
    2. كيف يمكن التشفير الأكواد أخي عبد الله ! ؟

      حذف
  9. شكراً لك ولكن هل علي عمل دومين جديد لكل اضيفه الى مشاركاتي في الواجهة ؟؟

    ردحذف
    الردود
    1. لالا ياتراف , ليس شرط , تستطيع فعلها في دومين .blogspot

      حذف
  10. مستحيل انك تكون تصمم قوالب وماتعرف تصنع واجهه وتستبدل كودين !! لا أخي ماراح اضيفها لك لان كل شيء موجود في الدرس وبوضوح كاامل .

    ردحذف
  11. شكراً على الموضوع الجميل لكن يوجد عندي طلب كيف اعمل صفحة اخرى للأعمال مثلاً مثل صفحة الاعمال الخاص بك

    ردحذف
    الردود
    1. هذي شغلتها شغله , لاكن انشاءالله في يوم افضى لها واشرحها بالتفصيل .

      حذف
  12. هذا هو الاي دي الذي يجب ان تخفيه للسلايد شو slidewrap

    ردحذف
  13. سؤال بسيط اخى عبد الله هل تواجة مشكلة فى التخطيط بعد تركيب هذة الواجهة ؟ لانة عندى واجهت مشكلة فى التخطيط بعد التركيب باستخدام هذا الكود وهى عدم وجود تخطيط المدونة القديمة اى اقدم التخطيط الاساسى للمدونة
    <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <body>
    واضفت هنا اكواد HTTM الخاصة بالواجة واضفت اكواد Css فى </head>
    </body>
    </b:if>


    اما Body الخاص بالمدونة الاساسية اضفت بعده ID وقبل نهايتة اغلاق ID
    وذللك للتغلب على مشكلة عدم ظهور تخطيط المدونة الاساسية
    وقمت بعمل display{none;}
    لل ID الذى اضفته فى body المدونة الاساسية
    وهذا كلة للتغلب على مشكة عدم ظهور التخطيط

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

    https://lh4.googleusercontent.com/-AP-0VZCwJNg/U1Z4AP9149I/AAAAAAAABK4/bgJDlaZlM-M/h1600/law.png

    اتمنى اولا ان تزور قالبى الثانى قالب لو تيوب و تعطنى رائيك فية

    انا اريد اخفاء المدونة الاساسية بدون طريقة display:none لان هذة الطريقة تقوم بتحمل المدونة الاساسية مع الواجهة ثم تقوم باخفاها وهذا يثقل الواجهة

    واذا لجئت لهذا الكودة

    <b:if cond='data:blog.url != data:blog.homepageUrl'>

    لا يعمل التخطيط

    اسف للاطالة

    ردحذف
    الردود
    1. للأسف الحل الوحيد هو display:none , اعرف انها تقوم بتثقيل المدونة ولاكن لايوجد غيره .

      حذف
    2. تمام ، شكرا اخى هذا المشكلة حقا سيئة ، ولكنى ساستخدام هذا الكود حفاظا على سرعة المدونة
      <b:if cond='data:blog.url != data:blog.homepageUrl'>
      وساضف الادوات عن طريق تحرير html

      واتمنى منك اخى ان تعطنى رائيك فى قالبى الجديد :)

      حذف
    3. القالب حقيقه جداَ جميل وفيه ابداعات كثيرة , لاكن ماقلت لي راح تنشره ولا فقط هو خاص ؟!

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

      كبداية

      قمت بارسال اول قالب الى الايميل الخاص بك لتقوم بنشر القالب عبر مدونتك مجانا للجميع

      ياريت اخ عبدالله اذا رائيت عيبا فى القالب قم باصلاحة وجزاك الله خيرا

      اتمنى فقط ممن يحمل القالب دعوة صالحة و الا يخذف الحقوق الخاصة بالقالب

      تحياتى للجميع واتمنى ان يعجبكم القالب يمكنكم المعاينة من هنا

      حذف
    5. الله يكتب لك الاجر والعافيه , وانشاءالله ابداعاتك راح تكون عليها اقبال كبير , نعم وصلني القالب ولاكن نظراَ لانشغالي في دروسي قد ترتك المدونة لبضع ايام ولاكن سأقوم بنشر القالب في الغريب العاجل انشاءالله ونتمنى منك اشياء اكثر تبهرنا بها , وانا ماراح اقصر معك في اي شيء تطلبه .

      موفق يابطل .

      حذف
  14. غير معرف22/4/14 20:40

    شكرا لك أخي على المقالة الرائعة :D

    http://www.ar1web.com

    ردحذف
  15. اخي شكرا علي الاضافة لكن مدونتي تحتوي علي شلايد شو المحترف وبعد تركبيب الواجهة هيختفي شو الحل

    ردحذف
    الردود
    1. يختفي من الواجهه او المدونة كاملة ؟

      حذف
    2. اخي عند تركيب الواجهة هيصير الصفحة الرئسية هي الواجهة و شلايدشو المحترف لا يضهر الا في الصفحة الرئسية لايضهر في صفحة /search?max-results=12

      حذف
  16. شكرا لك أخي المضوع رائع وشرح اروع, ولاكن أخي انا مبتدئ لأنني واجهة مشكلة في التخطيط كما ترى في الصورة
    http://im77.gulfup.com/rfwOOF.jpg
    أرجوك يا أخي عبد الله أن تجد لي حل
    وشكراا

    ردحذف
    الردود
    1. هذي صارت بعد تركيب الواجهه ؟!

      حذف
  17. الردود
    1. شيء غريب حقيقه , يمكن متصفحك به العطل ؟ او اتصال الانترنت لديك ؟!

      حذف
    2. لا يا اخي انا عندي نفس المشكلة بردو :(

      حذف
    3. طيب قوموا بتطبيق الطريقة الثانيه التي انا الان مطبقها , اشوفها افضل .

      حذف
    4. انا ايضا حصلت معي المشكله لكن كنت اعمل علي مدونه تجريبه :)
      www.al-wafe.com

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

      موفقين يا ابطال .

      حذف
  18. الطريقة الثانيه عند زيادة display:none فلم تتختفي
    header{display:none} ,.msgall{display:none} ,.centrat{display:none} ,.copyright{display:none}, .sidebar{display:none}, .footer{display:none}

    ردحذف
    الردود
    1. أخي عندك خطئين :
      الاول انت اخذت نفس الكلاسات الي في مدونتي ؟؟ وهذا غلط لان الكلاسات تختلف من قالب لقالب , بمعنى انها ليس شرط تكون مثل بعض كل القوالب .
      الخطاء الثاني في طريقة كتابتك لها , فانت وضع كل كلاس + الخاصيه حقته وفصلت بينهم بفواصل وهذا غلط , والصح انك تضع الكلاسات وتفصل بينهم بفاصله ثم بعد ذالك تضع الخاصيه مثل كذا مثلا :
      .msgall ,.centrat,.copyright{display:none}

      حذف
    2. كيف ييمكنني معرفة كلاس سلايدرشو

      حذف
    3. تقدر من خلال قوقل كروم , يجب بالاول ان تكون لديك خلفيه عن لغة html ,

      حذف
    4. لدي إطلاع عن Html

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

      حذف
  19. أزال المؤلف هذا التعليق.

    ردحذف
    الردود
    1. ما تضبط معك .

      حذف
    2. انت عكست الموضوع , فمستحيل تنفع يا اخي .

      حذف
    3. على العموم شكرا تم تصميم صفحة :)

      http://www.blogalleryhm.com/

      حذف
  20. أخي لا اجد الاكواد الاولى
    http://iraq-soft-22.blogspot.com/

    ردحذف
    الردود
    1. غريبه , كود البدي لازم يوجد بكل قالب :/

      حذف
  21. x jetara شو راح اقولك اخي مبدع فنان جميل حلو عسل قمر والله تعجبني =r

    ردحذف
  22. اخي دائما مبدع كما عهدناك و عدم احتكارك للمواضيع يدل على كرمك اخي شكرا و جعله الله في ميزان حسناتك

    ردحذف
  23. اخي هنالك شيئ خاطئ في :

    عند الجزء الثاني في head

    ردحذف
    الردود
    1. لايوجد خطاء ؟ اين هو ..

      حذف
  24. الردود
    1. تعمل ولاكن انت لم تقم بالخطوات جيداَ .

      حذف
  25. أزال المؤلف هذا التعليق.

    ردحذف
    الردود
    1. لا ابداَ , لا يوجد اضرار

      حذف

يسعدنا تفاعلكم بالتعليق , لكن يرجى مراعاة الآداب العامة وعدم نشر روابط إشهار حتى ينشر التعليق , ولا ننشر تعليق يخص مدونات تخالف الشريعة الإسلامية , اما لو لديك سؤال خارج الموضوع يرجى استخدام ركن الأسئلة ولإضافة كود قم بتحويله أولا بمحول الأكواد , واحب ان انبهك انه عند تعليقك تستطيع متابعة التعليق من خلال " إعلامي " الموجودة اسفل يسار صندوق التعليقات.

يمكنك ان تستخدم الإبتسامات بالوقوف عليها لمعرفة الكود :
ت1 ت2 ت3 ت4 ت5 ت6 ت7 ت8 ت9 ج1 ج2 ج3 ج4 ج5 ج6 ج7 ج8 ج9 د1 د2

قالب حلول بلوجر النسخة الثالثه

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

أقرأ الموضوع

الاشتراك في القائمة البريدية

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

الاسم

بريد إلكتروني

رسالة