أهلا بكم من جديد في جنا للكمبيوتر، أقدم لكم اليوم شرح تحسين شكل مدونة بلوجر الدرس الأول، وقد ذكرت الدرس الأول لاني إن شاء الله سأستمر في تقديم المزيد دائماً وهذا لن يحدث الا بدعمكم لي، فلذلك اتمني مشاركة الموضوع مع الاصدقاء، واذا كنت تنوي نشر مقالتي على مدونتك فلا تبخل بذكر المصدر😅 فانت لن تخصر شئ.
واحب أن أعتذر عن التأخير لكن اردت ان يكون الشرح بدون اي مشاكل وعملت جاهداً في ذلك .
طريقة تغيير الشكل في بلوجر، سواء كانت الصفحة الرئيسية أو باقي الصفحة، هي نفسها لذا يمكنك الآن تغيير تنسيق المقالة القديم إلى تنسيق جديد متوافق مع البث المباشر ومشاهدة الأفلام أو تنزيل البرامج ، مما يعني أنه يمكنك تغييره حسب الرغبة ، و لا حاجة لتغيير النموذج الأصلي. يمكنك معاينة العرض الجديد من خلال مشاهدة مدونتي فانا استخدمها.
في هذا الموضوع سنقسم شكل المدونة كما ترون في الصورة وبدون الحاجة الي معاينة بالتاكيد شاهدت مدونتي، كل ما سنقوم بفعله هو أضافة كود للقالب بدون التعديل على اي شئ.
بصدق، لقد تم تجربة هذه الطريقة ونجحت لأنها تمكنك من تغيير شكل مدونتك، وتغييرها إلى قالب أكثر احترافًا وما شابه، وأقدمها لكم من مدونة جنا للكمبيوتر فقط.
لكن قبل الدخول الي الشرح دعونا نعرف ما هي مميزات هذا الشكل.
مميزات الشكل الجديد
- يعطي المدونة شكل احترافي.
- يعمل على تحسين تجربة الزائر.
- لا تؤثر على السرعة.
- سهلة التركيب.
- سيتم عمل تحديثات جديدة لها كل فترة.
شرح تغير شكل مدونة بلوجر 2021
- طريقة تغير شكل مدونة بلوجر لا تختلف عن الطرق الاخري لكن تابع معي:
- نذهب المدونة التي تود العمل عليها.
- نفتح المظهر.
- ثم نقوم بعمل نسخة احتياطية.
- نعود الي المظهر.
- نقوم بفتح تعديل HTML.
بعد ذلك، سنقوم بالضغط في أي مكان بالماوس ثم Ctrl + F ونقوم بالبحث عن:
<Group description="أساسي" selector="body">
واضف اسفله هذه الأكواد كاملة
<Variable name="backgroundcustom" description="لون الخلفيه المنفصلة " type="color" default="#ffffff" value="#ffffff"/> <Variable name="backgroundcustomborder" description="لون حواف الخلفية المنفصلة" type="color" default="#eeeeee" value="#ededed"/> <Variable name="dmbackgroundcustom" description=" لون الخلفيه المنفصلة فى الوضع الليلى" type="color" default="#1b1b1b" value="#1b1b1b"/> <Variable name="dmbackgroundcustomborder" description="لون حواف الخلفية المنفصلة فى الوضع الليلي" type="color" default="#111111" value="#111111"/>
ثم أبحث عن هذا الجزء بالأكواد:
]]></b:skin>عندما تجد ]]></b:skin> قم بنسخ الكود التالي كاملاً وضعه فوقها، والكود هو:
/*==== Customs Site ==== */
.topic-author{background:$(backgroundcustom);box-shadow:0 2px 6px rgba(0,21,64,.1),0 10px 20px rgba(0,21,64,.05);border-radius:10px;margin-top:20px;display:block;padding:20px;border:1px solid $(backgroundcustomborder)}.topic-nav{background:$(backgroundcustom);box-shadow:0 2px 6px rgba(0,21,64,.1),0 10px 20px rgba(0,21,64,.05);border-radius:10px;margin-top:20px;display:block;padding:20px;border:1px solid $(backgroundcustomborder)}.topic-related{background:$(backgroundcustom);box-shadow:0 2px 6px rgba(0,21,64,.1),0 10px 20px rgba(0,21,64,.05);border-radius:10px;margin-top:20px;display:block;padding:20px;border:1px solid $(backgroundcustomborder)}.topic-comments{background:$(backgroundcustom);box-shadow:0 2px 6px rgba(0,21,64,.1),0 10px 20px rgba(0,21,64,.05);border-radius:10px;margin-top:20px;display:block;padding:20px;border:1px solid $(backgroundcustomborder)}.topic-share{background:$(backgroundcustom);box-shadow:0 2px 6px rgba(0,21,64,.1),0 10px 20px rgba(0,21,64,.05);border-radius:10px;margin-top:10px;display:block;padding:20px;border:1px solid $(backgroundcustomborder)}.middle-content{overflow:visible}aside .widget{margin-bottom:10px;background:$(backgroundcustom);box-shadow:0 2px 6px rgba(0,21,64,.1),0 10px 20px rgba(0,21,64,.05);border-radius:10px;margin-top:10px;display:block;padding:20px;border:1px solid $(backgroundcustomborder)}.sided-sections.cate.one-col{margin-bottom:10px;background:$(backgroundcustom);box-shadow:0 2px 6px rgba(0,21,64,.1),0 10px 20px rgba(0,21,64,.05);border-radius:10px;margin-top:10px;display:block;padding:20px;border:1px solid $(backgroundcustomborder)}.post-outer{margin-bottom:10px;background:$(backgroundcustom);box-shadow:0 2px 6px rgba(0,21,64,.1),0 10px 20px rgba(0,21,64,.05);border-radius:10px;margin-top:10px;display:block;padding:20px;border:1px solid $(backgroundcustomborder)}#Blog1 .headline{margin-bottom:10px;background:$(backgroundcustom);box-shadow:0 2px 6px rgba(0,21,64,.1),0 10px 20px rgba(0,21,64,.05);border-radius:10px;margin-top:10px;display:block;padding:20px;margin-bottom:0;border:1px solid $(backgroundcustomborder)}div#Pagination{margin-bottom:10px;background:$(backgroundcustom);box-shadow:0 2px 6px rgba(0,21,64,.1),0 10px 20px rgba(0,21,64,.05);border-radius:10px;margin-top:10px;display:block;padding:20px;margin-bottom:-21px;border:1px solid $(backgroundcustomborder)}div#section13{margin-bottom:10px;background:$(backgroundcustom);box-shadow:0 2px 6px rgba(0,21,64,.1),0 10px 20px rgba(0,21,64,.05);border-radius:10px;margin-top:25px;display:block;padding:0;margin-bottom:-21px;border:1px solid $(backgroundcustomborder)}.sided-sections.cate.no-wide.two-cols{margin-bottom:20px}div#LinkList4{margin-bottom:10px;background:#15151563;box-shadow:0 2px 6px rgba(0,21,64,.1),0 10px 20px rgba(0,21,64,.05);border-radius:10px;margin-top:10px;display:block;padding:20px}div#head-sec{margin-bottom:10px;background:$(backgroundcustom);box-shadow:0 2px 6px rgba(0,21,64,.1),0 10px 20px rgba(0,21,64,.05);border-radius:10px;display:block;border:1px solid $(backgroundcustomborder);margin-top:10px}.boxed div#head-sec{margin-left:20px;margin-right:20px}div#menu-bar{padding:10px;background:$(backgroundcustom);box-shadow:0 2px 6px rgba(0,21,64,.1),0 10px 20px rgba(0,21,64,.05);border-radius:10px;display:block;border:1px solid $(backgroundcustomborder)}.boxed div#menu-bar{margin-left:20px;margin-right:20px}div#section301{margin-bottom:10px;background:$(backgroundcustom);box-shadow:0 2px 6px rgba(0,21,64,.1),0 10px 20px rgba(0,21,64,.05);border-radius:10px;margin-top:25px;display:block;padding:0;margin-bottom:-21px;border:1px solid $(backgroundcustomborder);margin-bottom:10px;background:$(backgroundcustom);box-shadow:0 2px 6px rgba(0,21,64,.1),0 10px 20px rgba(0,21,64,.05);border-radius:10px;margin-top:25px;display:block;padding:20px;margin-bottom:10px;border:1px solid $(backgroundcustomborder)}div#section300{background:$(backgroundcustom);box-shadow:0 2px 6px rgba(0,21,64,.1),0 10px 20px rgba(0,21,64,.05);border-radius:10px;display:block;padding:10px;border:1px solid $(backgroundcustomborder)}.dm .topic-author{background:$(dmbackgroundcustom);box-shadow:0 2px 6px rgba(0,21,64,.1),0 10px 20px rgba(0,21,64,.05);border-radius:10px;margin-top:20px;display:block;padding:20px;border:1px solid $(dmbackgroundcustomborder)}.dm .topic-nav{background:$(dmbackgroundcustom);box-shadow:0 2px 6px rgba(0,21,64,.1),0 10px 20px rgba(0,21,64,.05);border-radius:10px;margin-top:20px;display:block;padding:20px;border:1px solid $(dmbackgroundcustomborder)}.dm .topic-related{background:$(dmbackgroundcustom);box-shadow:0 2px 6px rgba(0,21,64,.1),0 10px 20px rgba(0,21,64,.05);border-radius:10px;margin-top:20px;display:block;padding:20px;border:1px solid $(dmbackgroundcustomborder)}.dm .topic-comments{background:$(dmbackgroundcustom);box-shadow:0 2px 6px rgba(0,21,64,.1),0 10px 20px rgba(0,21,64,.05);border-radius:10px;margin-top:20px;display:block;padding:20px;border:1px solid $(dmbackgroundcustomborder)}.dm .topic-share{background:$(dmbackgroundcustom);box-shadow:0 2px 6px rgba(0,21,64,.1),0 10px 20px rgba(0,21,64,.05);border-radius:10px;margin-top:10px;display:block;padding:20px;border:1px solid $(dmbackgroundcustomborder)}.dm aside .widget{margin-bottom:10px;background:$(dmbackgroundcustom);box-shadow:0 2px 6px rgba(0,21,64,.1),0 10px 20px rgba(0,21,64,.05);border-radius:10px;margin-top:10px;display:block;padding:20px;border:1px solid $(dmbackgroundcustomborder)}.dm .sided-sections.cate.one-col{margin-bottom:10px;background:$(dmbackgroundcustom);box-shadow:0 2px 6px rgba(0,21,64,.1),0 10px 20px rgba(0,21,64,.05);border-radius:10px;margin-top:10px;display:block;padding:20px;border:1px solid $(dmbackgroundcustomborder)}.dm .post-outer{margin-bottom:10px;background:$(dmbackgroundcustom);box-shadow:0 2px 6px rgba(0,21,64,.1),0 10px 20px rgba(0,21,64,.05);border-radius:10px;margin-top:10px;display:block;padding:20px;border:1px solid $(dmbackgroundcustomborder)}.dm #Blog1 .headline{margin-bottom:10px;background:$(dmbackgroundcustom);box-shadow:0 2px 6px rgba(0,21,64,.1),0 10px 20px rgba(0,21,64,.05);border-radius:10px;margin-top:10px;display:block;padding:20px;margin-bottom:0;border:1px solid $(dmbackgroundcustomborder)}.dm div#Pagination{margin-bottom:10px;background:$(dmbackgroundcustom);box-shadow:0 2px 6px rgba(0,21,64,.1),0 10px 20px rgba(0,21,64,.05);border-radius:10px;margin-top:10px;display:block;padding:20px;margin-bottom:-21px;border:1px solid $(dmbackgroundcustomborder)}.dm div#section13{margin-bottom:10px;background:$(dmbackgroundcustom);box-shadow:0 2px 6px rgba(0,21,64,.1),0 10px 20px rgba(0,21,64,.05);border-radius:10px;margin-top:25px;display:block;padding:0;margin-bottom:-21px;border:1px solid $(dmbackgroundcustomborder)}.dm div#LinkList4{margin-bottom:10px;background:#15151563;box-shadow:0 2px 6px rgba(0,21,64,.1),0 10px 20px rgba(0,21,64,.05);border-radius:10px;margin-top:10px;display:block;padding:20px}.dm div#head-sec{margin-bottom:10px;background:$(dmbackgroundcustom);box-shadow:0 2px 6px rgba(0,21,64,.1),0 10px 20px rgba(0,21,64,.05);border-radius:10px;display:block;border:1px solid $(dmbackgroundcustomborder);margin-top:10px}.dm div#menu-bar{padding:10px;background:$(dmbackgroundcustom);box-shadow:0 2px 6px rgba(0,21,64,.1),0 10px 20px rgba(0,21,64,.05);border-radius:10px;display:block;border:1px solid $(dmbackgroundcustomborder)}.dm.boxed div#head-sec{margin-left:20px;margin-right:20px}.dm.boxed div#menu-bar{margin-left:20px;margin-right:20px}.dm div#section301{margin-bottom:10px;background:$(dmbackgroundcustom);box-shadow:0 2px 6px rgba(0,21,64,.1),0 10px 20px rgba(0,21,64,.05);border-radius:10px;margin-top:25px;display:block;padding:0;margin-bottom:-21px;border:1px solid $(dmbackgroundcustomborder);margin-bottom:10px;background:$(dmbackgroundcustom);box-shadow:0 2px 6px rgba(0,21,64,.1),0 10px 20px rgba(0,21,64,.05);border-radius:10px;margin-top:25px;display:block;padding:20px;margin-bottom:10px;border:1px solid $(dmbackgroundcustomborder)}.dm div#section300{background:$(dmbackgroundcustom);box-shadow:0 2px 6px rgba(0,21,64,.1),0 10px 20px rgba(0,21,64,.05);border-radius:10px;display:block;padding:10px;border:1px solid $(dmbackgroundcustomborder)}خاتمة
هذا كان الدرس الأول سيتم عمل الكثير من الدروس من هذا النوع، لا أظن أنكم تحتاجون فيديو للشرح لأن الموضوع بسيط جدا ولا يوجد أي صعوبه به، واذا اردتم شرح لإضافة ما او أي مساعدة لا تتردد في طلبها انا أعمل على مساعدة الجميع وفي أي وقت، ومن تعامل معي يعرف هذا جيداً.
سيتم عمل دورة بلوجر 2021 قريبا، وشروحات أكثر عن السيو وطريقة كتابة مقال احترافي بالتفصيل، وشرح العنوان والعنوان الفرعي والثانوي، لقد قمت بنشر مقالة سابقاً لكن لم يكن الشرح مفصلا لذلك أشتركوا في مدونتي جنا للكمبيوتر وتابعوا كل جديد، وشكرا لكم.
ملحوظة: أتمني مشاهدة رأيكم في التعليقات، وأخبروني إذا واجهتم أي مشكلة.
نصيحة لك اخي/اختي: لا تحاولوا نسخ شكل مدونة أخري، فقط قم بالتعديل الي شكل انت تفضله، والأختلاف ليس سيئاً، انا أفضل ان اكون مختلفلا عن أن اكون مثل الجميع، ولذلك أحاول دائما أن افعل شئ جديد وغير معتاد في هذا المجال.