القائمة الرئيسية

الصفحات

شرح كيفية تخصيص تصميم و تخطيط صفحة موضوع مُعيّن أو صفحة ثابتة في مدونات بلوجر

شرح كيفية تخصيص تصميم و تخطيط صفحة موضوع مُعيّن أو صفحة ثابتة في مدونات بلوجر
تخصيص تصميم صفحة موضوع مُعيّن في مدونات بلوجر

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


لذلك/ أحببت في مدونة فيصل أنا أشارككم اليوم طريقة سهلة جدا ومميزة لعمل كل ذلك، شرح كيفية تخصيص تصميم أو تخطيط صفحة موضوع معين أو صفحة ثابتة في بلوجر وبإمكانية تخصيص التعديلات على ثفحة مقال أو موضوع معين فقط في بلوجر دون أن تتأثر أي صفحة أخرى في المدونة بهذه التغييرات.
 بسم الله نبدأ الشرح:

كيف يمكن تخصيص وتغيير تصميم صفحة موضوع معين أو صفحة ثابتة في بلوجر؟

الإجابة .. الأمر بسيط، كل ما عليك أن تفعله هو أن تأخذ الكود التالي وإضافته في آخر محرر المواضيع أو الصفحات مع تغيير رابط صفحة الموضوع أو الصفحة الثابتة لرابط المووضع أو الصفحة المعنية والتي ترغب بتعديل تصميمها وتخصيص تخصيط القالب فيها لشكل مختلف، وتضع بين وسميها أكواد CSS أو حتى سكربتات Javascript لتعمل فقط في هذه الصفحة.



<b:if  cond='data:blog.pageType == "صع هنا رابط ثفحة الموضوع أو الصفحة الثابتة
"'><!-- [ هنا ضع أكواد CSS أو Javascript أو حتى Jquery المخصصة لتغيير شكل تخطيط وتصميم القالب في هذا الموضوع أو الصفحة الثابتة فقط ] -->  
</b:if>

للعلم: بالإمكان إضافة أي كود CSS أو Javascript في نهاية المقال بعرض HTML بدون الكود أعلاه، شريطة أن يكون داخل وسم الكود وسيعمل بشكل مباشر ولكن قد تنتج بعض الأخطاء في حال عرض جسم المقال بالكامل في الصفحة الرئيسية او صفحة الأقسام والتصنيفات، فمثلا لو أردت إضافة كود CSS معدل ليعمل على تغيير بعض خصائص القالب فقط أضفه داخل وسم CSS وهو كالتالي:


<style type="text/css">ضع هنا كود CSS</style>
<script type='text/javascript'>ضع هنا كود الجافا سكربت</script>

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

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

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

<b:if cond="data:blog.pageType == &quot;https://www.faisal2n.com/2021/08/how-to-customize-Layout-for-a-specific-post-or-page-in-blogger.html&quot;"><style scoped="" type="text/css">
    .r-r {
    float: right;
      width: calc((100%) / 1);}aside#sidepar-wid {display: none}.thumb img, img.post-thumbnail, .post-random a.reimage img, img.post-thumbnail{object-fit:cover}.yemen a{color: #fff}.bottom-footer{background: #00458c;}.yemen {color: #fff}
<!-- كود منع نسخ المحتوى لمدونات بلوجر -->
  .post-body{-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}kbd,blockquote,pre,code,table{-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}
  </style></b:if>

صورة توضح أين وضعت الكود المعني في هذا الموضوع
صورة توضح أين وضعت الكود المعني في هذا الموضوع

تنبيه: قد تختلف مسميات القوائم والعناصر في قوالب بلوجر من قالب لآخر، فمثلا قد لا يكون إسم القائمة الجانبية السايدبار #sidebar-wrapper أو الصندوق الرئيسي للموضوع قد لا يكون #main-wrapper ، لذا يجب التعامل وفقا لمسمى العنصر في قالبك.


كيف يمكن منع نسخ المواضيع في مدونات بلوجر؟

يمكن منع النسخ من خلال إضافة الكود الثالي ضمن أكواد الإستايل <style ></style>في مدونك، والذي بدوره سيعمل على منع نسخ أي من محتوى المواضيع بإستثناء ماهو داخل الإقتباسات والأكواد البرمجية.

<!-- كود منع نسخ المحتوى لمدونات بلوجر -->
  .post-body{-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}kbd,blockquote,pre,code,table{-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}
  </style></b:if>

تعليقات