.png)
![[ كود ] فتح الروابط الخارجيه في صفحة جديدة](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglyVZxOwLyvxsyy6EZBodkYmIOtLV5HjJF4knwn402wUphyphenhyphenHWcQMJMcSZ8aNdSIsEkkPSRRYhO-5Xkm-JpLhx6Ow9pdnlmmClQk-P6qX0hdlmnXKL10fSp_jY0412H05VDQuJv-RoRR1ce/s72-c/Untitled-1.png)
![[ كود جيكوري ] تسريع الموقع وتحميل الصور عبر إضافة lazy loading images](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbQbgggSUpqWbvPf_ikqkFRTlC-1DLuDibmyOvmD2-wltqvQk7FNR8inYhm6DLgWlIAxKDmQmGi7BRzrDX0X1IupXOrAIY27E-_aBo_eq8QN_0VU4xx6lgV5iyStC-n_yuMfwKc8hgH5r-/s72-c/lazy+loading+images.png)
 |
| [ 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>
- نضع هذا الكود تحته مباشرة :
الاحمر : لاحظ اننا قمنا بأخفاء المعالم الاساسيه من الواجهة القديمة كي لاتظهر في الواجهة الجديدة التي صممناها , وهي بعض الاشياء التي توجد في كل مدونة كالهيدر والسيدبار والفوتر وغيرها , انت اولاَ قم بتركيب الواجهة الجديدة ثم بعد ذالك حدد الكلاسات والايديات المزعجة التي تظهر في الواجهة الجديده وقم بأخفائها من خلال display:none اتمنى الفكرة وصلت ..<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
هنا كود الواجهة - اذا لم يكن لديك كود خاص بك فستخدم الواجهة التجريبيه في الدرس السابق
<style>header ,.msgall ,.centrat ,.copyright, .sidebar, .footer{display:none}</style>
</b:if> </b:if> </b:if>
اي استفسار , انا هنا :)
والرجاء عند النقل ذكر المصدر .
عند نقلك للموضوع او نسخه , حاول ان تذكر المصدر لينتفع الزائر في حال اراد المزيد من المساعده , وايضاَ احتراما وتقديراَ للجهود المبذولة في المواضيع.
معلومات عن التدوينة
صورة التدوينة
عنوان التدوينة : [ html+css ] صنع و تركيب واجهة احترافيه لمدونة بلوجر - الجزء الثاني
ملخص التدوينة:
[ html+css ] صنع و تركيب واجهة احترافيه لمدونة بلوجر - الجزء الثاني بسم الله الرحمن الرحيم والصلاة والسلام على خير خلق الله سيدنا مح...
تاق :
هذا ما كنت انتظر اخي عبد الله
ردحذفتسلم الايادي يا مبدع على المواضيع الرائعة والحصرية
ولك كل الشكر لانك لا تحتكر افكارك المبدعة مثل ما يفعل الاخرين ويقومون بنشر اسوأ الامثلة
ولكن عندك الموضوع مختلف 180 درجة
شكرا لك مرة اخرى
عفواَ على تشجيعك.
حذفشكرا اخى الكريم موضوع رائع وحصرى بالتاكيد , عدم الاحتكار للافكار يدل طيب اصلك , احسنت يا مبدع ، تحياتى
ردحذفبالتوفيق ياغالي .
حذفالسلام عليكم ورحمة الله وبركاته ... راااااااااااائع أخي ومبدع دائما . ودائما ما تقدم لنا الجديد والمفيد ..
ردحذفأتمنى أن يكون هناك جزء ثالث لكيفية تصميم واجهه احترافيه بأنفسنا وكيف نضع بها قوائم وهكذا ..
وأتمنى أيضا أن تقوم بتطبيق نفس هذه الفكرة على السكويز بيج ..
بمعني نريد أن توضح كيف يمكن انشاء سكويز بيج في نفس المدونة الأصليه بدلا من عمل مدونة خصيصا لها ..
وشكر لك .. في انتظار الجديد دائما
عليكم السلام ورحمة الله وبركاته .. انشاءالله .
حذفارجوك اخى ممكن تضفلى هذه الاضافة فى موقعى
ردحذفيا أخي ليش كذا ؟! الشرح كامل ولا ينقصه اي شيء , وما اعتقد فيه شيء صعب !!
حذفاخي الكريم شكرآ على هذا مجهود الاكثر من روووعة ربي يجعل هذا في ميزان حسناتك
ردحذفلكن ايس لدية الخبرة الكافية في قوالب بلوجر اذا تسمح هذا قالب مدونتي http://www.gulfup.com/?Du6Miq
اذا لديك وقت تركب هذه الاداة على قالب مدونتي وانا بعد ذالك اقوم بتعديل عليه
شكرآآآآ مرة اخرة
ما ادري وش الصعوبة في الموضوع مع اني تركت كل شيء جاهز , فقط ابحث واستبدل .
حذفشكرا لكم تم بدون مشاكل يمكن المشاهدة هنا
حذفhttp://www.mega-course.com/
شكراً أخيَ Jetara
ردحذفأسف علي ألتاخير فى التعليق :)
أرجو ان تقول رايكَ !!!
http://arabingo.blogspot.com/
واجهة من تصميمي :)
لا بأس بها ممتازهه .
حذفاخى هذا سهلة عليك لكن صعبة علينا نحن نعرف نصمم قوالب واعرف اصمم كثير لكن مش عارف اعمل الاضافة هذه ينفع تضفلى الكواد هذا ام لا
ردحذفمستحيل انك تكون تصمم قوالب وماتعرف تصنع واجهه وتستبدل كودين !! لا أخي ماراح اضيفها لك لان كل شيء موجود في الدرس وبوضوح كاامل .
حذفاضافتها لكن شكرا على احترامك ههههه
حذفولو مش متاكد انى مصمم هذا احد اعمالى http://www.4arbieraw.co.vu/
حذفبالتوفيق
حذفبصراحة جميل ومميز ومفهوم ....
ردحذفلكن عملت كل مهو مطلوب
المشكلة القالب تبعي منقول من ملتقى المدونين العرب
تم ظهور الواجهة بالكامل
لكن يتم تحول الزوار الى ملتقى المدونين العرب
بعد ثانية واحدة
ممكن حل للمشكلة وحذف التحويل من مدونتي؟
اسف هذا رابط المدونتي
ردحذفhttp://www.almmi-tec.com
فحصت اكواد قالبك الداخليه ولم اجد عبارة modawenon , قد يكون الكود مدموج في ملف خارجي , جرب ابحث في ملفاتك الخارجيه ستجده , ولاكن قد يكون مشفر :(
حذفكيف يمكن التشفير الأكواد أخي عبد الله ! ؟
حذفشكراً لك ولكن هل علي عمل دومين جديد لكل اضيفه الى مشاركاتي في الواجهة ؟؟
ردحذفلالا ياتراف , ليس شرط , تستطيع فعلها في دومين .blogspot
حذفشكراً على الموضوع الجميل لكن يوجد عندي طلب كيف اعمل صفحة اخرى للأعمال مثلاً مثل صفحة الاعمال الخاص بك
ردحذفهذي شغلتها شغله , لاكن انشاءالله في يوم افضى لها واشرحها بالتفصيل .
حذفاخى انا عارف انى تعبتك لكن اذا اريد ان اخفى السلايد شو اضفتها بين الحاجات المختفية لكن ايضا لاتخفى لمذا
ردحذفهذا هو الاي دي الذي يجب ان تخفيه للسلايد شو slidewrap
حذفسؤال بسيط اخى عبد الله هل تواجة مشكلة فى التخطيط بعد تركيب هذة الواجهة ؟ لانة عندى واجهت مشكلة فى التخطيط بعد التركيب باستخدام هذا الكود وهى عدم وجود تخطيط المدونة القديمة اى اقدم التخطيط الاساسى للمدونة
ردحذف<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'>
لا يعمل التخطيط
اسف للاطالة
للأسف الحل الوحيد هو display:none , اعرف انها تقوم بتثقيل المدونة ولاكن لايوجد غيره .
حذفتمام ، شكرا اخى هذا المشكلة حقا سيئة ، ولكنى ساستخدام هذا الكود حفاظا على سرعة المدونة
حذف<b:if cond='data:blog.url != data:blog.homepageUrl'>
وساضف الادوات عن طريق تحرير html
واتمنى منك اخى ان تعطنى رائيك فى قالبى الجديد :)
القالب حقيقه جداَ جميل وفيه ابداعات كثيرة , لاكن ماقلت لي راح تنشره ولا فقط هو خاص ؟!
حذفشكرا لك اخى عبد الله واتشرف لزيارتك لمدونتى انا فخور بهذة الكلمات الاكثر من رائعة
حذفللاسف هذا القالب لن اطرحة الان فيما بعد اكون انهيت امتحانتى وبعد ذلك ساطرح هذا القالب عبر مدونتك
فكرت ان افتح مدونة لدعم بلوجر كالاضافات وغيرها لكنى لم اتحمس كثيرا للفكرة لان هذا المجال به عمالقة واعتقد انى لن اظهر الا فى وقت طويل
ولكنى بدلك ذالك ساقوم بتصميم العديد من القوالب واطرحها عبر مدونتك ( اذا قبلت ) على الاقل بذان الله قالب شهريا
وذلك بدون اجر فقط ما اريدة هو دعوة صالحة وعدم استخدام القالب فيما يغضب الله وانا برئ امام الله ممن يستخدمة فى غرض يغضب الله
كبداية
قمت بارسال اول قالب الى الايميل الخاص بك لتقوم بنشر القالب عبر مدونتك مجانا للجميع
ياريت اخ عبدالله اذا رائيت عيبا فى القالب قم باصلاحة وجزاك الله خيرا
اتمنى فقط ممن يحمل القالب دعوة صالحة و الا يخذف الحقوق الخاصة بالقالب
تحياتى للجميع واتمنى ان يعجبكم القالب يمكنكم المعاينة من هنا
الله يكتب لك الاجر والعافيه , وانشاءالله ابداعاتك راح تكون عليها اقبال كبير , نعم وصلني القالب ولاكن نظراَ لانشغالي في دروسي قد ترتك المدونة لبضع ايام ولاكن سأقوم بنشر القالب في الغريب العاجل انشاءالله ونتمنى منك اشياء اكثر تبهرنا بها , وانا ماراح اقصر معك في اي شيء تطلبه .
حذفموفق يابطل .
شكرا لك أخي على المقالة الرائعة :D
ردحذفhttp://www.ar1web.com
اخي شكرا علي الاضافة لكن مدونتي تحتوي علي شلايد شو المحترف وبعد تركبيب الواجهة هيختفي شو الحل
ردحذفيختفي من الواجهه او المدونة كاملة ؟
حذفاخي عند تركيب الواجهة هيصير الصفحة الرئسية هي الواجهة و شلايدشو المحترف لا يضهر الا في الصفحة الرئسية لايضهر في صفحة /search?max-results=12
حذفشكرا لك أخي المضوع رائع وشرح اروع, ولاكن أخي انا مبتدئ لأنني واجهة مشكلة في التخطيط كما ترى في الصورة
ردحذفhttp://im77.gulfup.com/rfwOOF.jpg
أرجوك يا أخي عبد الله أن تجد لي حل
وشكراا
هذي صارت بعد تركيب الواجهه ؟!
حذفنعم
ردحذفشيء غريب حقيقه , يمكن متصفحك به العطل ؟ او اتصال الانترنت لديك ؟!
حذفلا يا اخي انا عندي نفس المشكلة بردو :(
حذفطيب قوموا بتطبيق الطريقة الثانيه التي انا الان مطبقها , اشوفها افضل .
حذفانا ايضا حصلت معي المشكله لكن كنت اعمل علي مدونه تجريبه :)
حذفwww.al-wafe.com
نعم يا اخوان السبب اننا قمنا بأخفاء الصفحة الرئيسيه بالكامل , وبلوجر تعتبر صفحة التخطيط ضمن الصفحة الرئيسيه وهذه هي المشكلة , على العموم لمن اراد تجنب هذه المشكلة فليس له حل اخر سوا الخطوة الثانيه في الدرس او الطريقة الثانيه .
حذفموفقين يا ابطال .
الطريقة الثانيه عند زيادة display:none فلم تتختفي
ردحذفheader{display:none} ,.msgall{display:none} ,.centrat{display:none} ,.copyright{display:none}, .sidebar{display:none}, .footer{display:none}
أخي عندك خطئين :
حذفالاول انت اخذت نفس الكلاسات الي في مدونتي ؟؟ وهذا غلط لان الكلاسات تختلف من قالب لقالب , بمعنى انها ليس شرط تكون مثل بعض كل القوالب .
الخطاء الثاني في طريقة كتابتك لها , فانت وضع كل كلاس + الخاصيه حقته وفصلت بينهم بفواصل وهذا غلط , والصح انك تضع الكلاسات وتفصل بينهم بفاصله ثم بعد ذالك تضع الخاصيه مثل كذا مثلا :
.msgall ,.centrat,.copyright{display:none}
كيف ييمكنني معرفة كلاس سلايدرشو
حذفتقدر من خلال قوقل كروم , يجب بالاول ان تكون لديك خلفيه عن لغة html ,
حذفلدي إطلاع عن Html
حذفاذا عندك خلفيه عن اكواد Html فكلاس السلايد شو سيكون واضح كالشمس امامك , على العموم اعطيني رابط المدونة الي فيها السلايد شو وانا سأعطيك الكلاس تبعه .
حذفأزال المؤلف هذا التعليق.
ردحذفما تضبط معك .
حذفكيف ؟!
حذفانت عكست الموضوع , فمستحيل تنفع يا اخي .
حذفعلى العموم شكرا تم تصميم صفحة :)
حذفhttp://www.blogalleryhm.com/
موفق .
حذفأخي لا اجد الاكواد الاولى
ردحذفhttp://iraq-soft-22.blogspot.com/
غريبه , كود البدي لازم يوجد بكل قالب :/
حذفx jetara شو راح اقولك اخي مبدع فنان جميل حلو عسل قمر والله تعجبني =r
ردحذفحياك الله =r
حذفq
ردحذفاخي دائما مبدع كما عهدناك و عدم احتكارك للمواضيع يدل على كرمك اخي شكرا و جعله الله في ميزان حسناتك
ردحذفاخي هنالك شيئ خاطئ في :
ردحذفعند الجزء الثاني في head
لايوجد خطاء ؟ اين هو ..
حذفلا تعمل اخي
ردحذفتعمل ولاكن انت لم تقم بالخطوات جيداَ .
حذفأزال المؤلف هذا التعليق.
ردحذفلا ابداَ , لا يوجد اضرار
حذف