Hide -the -sidebar


 أكيد! لو حاب تظهر الصفحة الرئيسية فقط بدون الشريط الجانبي (sidebar) في بلوجر، تقدر تستخدم كود CSS بسيط داخل وسم في الـ داخل أو حسب مكان القالب.

كود إخفاء الشريط الجانبي في الصفحة الرئيسية فقط


hljs.highlightAll();

:root {
–code-bg: #f5f5f5;
–code-color: #333;
–button-bg: #007BFF;
–button-color: white;
–title-color: #d84315;
}
[data-theme=”dark”] {
–code-bg: #1e1e1e;
–code-color: #f5f5f5;
–button-bg: #2196f3;
–button-color: white;
–title-color: #ffb74d;
}
.code-box {
background: var(–code-bg);
color: var(–code-color);
padding: 15px;
border-radius: 10px;
margin: 20px auto;
font-family: monospace;
position: relative;
overflow: auto;
}
.code-title {
font-weight: bold;
font-size: 16px;
color: var(–title-color);
margin-bottom: 8px;
}
.code-buttons {
display: flex;
gap: 8px;
margin-top: 10px;
justify-content: flex-end;
flex-wrap: wrap;
}
.code-buttons button {
padding: 6px 10px;
background-color: var(–button-bg);
border: none;
color: var(–button-color);
font-size: 13px;
border-radius: 6px;
cursor: pointer;
transition: 0.3s;
}
.code-buttons button:hover {
opacity: 0.85;
}



?? تبديل الوضع

كود لاخفاء الشريط الجانبى بالرئيسية

  
    /* إخفاء الشريط الجانبي */
    .sidebar, #sidebar-wrapper, .widget-area {
      display: none !important;
    }

    /* توسيع منطقة المحتوى */
    .main-wrapper, .content, #main {
      width: 100% !important;
    }
  

تحديد
نسخ
تحميل
توسيع

hljs.highlightAll();

function selectCode(btn) {
const code = btn.closest(‘.code-box’).querySelector(‘code’);
const range = document.createRange();
range.selectNodeContents(code);
const sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
}

function copyCode(btn) {
const code = btn.closest(‘.code-box’).querySelector(‘code’).innerText;
navigator.clipboard.writeText(code).then(() => alert(“تم النسخ!”));
}

function downloadCode(btn) {
const code = btn.closest(‘.code-box’).querySelector(‘code’).innerText;
const blob = new Blob(, { type: “text/plain” });
const link = document.createElement(“a”);
link.href = URL.createObjectURL(blob);
link.download = “code.txt”;
link.click();
}

function expandCode(btn) {
const codeContent = btn.closest(‘.code-box’).innerHTML;
const popup = window.open(“”, “_blank”, “width=800,height=600”);
popup.document.write(`

كود موسع

body { background: var(–code-bg); color: var(–code-color); font-family: monospace; padding: 20px; }

${codeContent}

hljs.highlightAll();

`);
}

(function autoTheme() {
const prefersDark = window.matchMedia(“(prefers-color-scheme: dark)”).matches;
document.querySelectorAll(‘.code-box-wrapper’).forEach(box => {
box.setAttribute(“data-theme”, prefersDark ? “dark” : “light”);
});
updateThemeStyles(prefersDark ? “dark” : “light”);
})();

function toggleTheme() {
const wrapper = document.querySelector(“.code-box-wrapper”);
const current = wrapper.getAttribute(“data-theme”);
const newTheme = current === “dark” ? “light” : “dark”;
wrapper.setAttribute(“data-theme”, newTheme);
updateThemeStyles(newTheme);
}

function updateThemeStyles(theme) {
const themeLink = document.getElementById(“hljs-theme”);
themeLink.href = theme === “dark”
? “https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/github-dark.min.css”
: “https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/github.min.css”;
}

✅ أين تضع الكود؟

ضعه داخل قالب بلوجر في جزء أو مباشرة داخل .

يُفضل قبل إغلاق لضمان تحميله مبكرًا.

💡 تلميحة:

لو كنت تستخدم اسم مخصص للـ sidebar أو main في قالبك، بدّل:

.sidebar

.main-wrapper

بما يتوافق مع أسماء الطبقات (classes) في قالبك.

إذا حاب، أقدر أساعدك على تعديله على حسب قالبك الحالي بالضبط، فقط قل لي اسمه أو انسخ لي جزء الـ HTML الخاص بالـ sidebar والمحتوى الأساسي.

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


كود اسفل الصفحة
 #sidebar-wrapper, #midsidebar-wrapper, .gapad2, .blog-pager, .post-header-line-1, .post-footer { display:none !important;} #main-wrapper { width:100%!important;} .post { width:100%!important; }   
تحديد
نسخ
تحميل
توسيع

عليك نسخ الكود ووضعه اسفل الصفحة

او ممكن تحميل الاكواد 

.button-outline-blue {
display: inline-block;
padding: 10px 20px;
margin: 10px 5px;
font-size: 16px;
font-weight: bold;
color: #007BFF; /* أزرق */
background-color: #ffffff; /* أبيض */
border: 2px solid #007BFF;
border-radius: 8px;
cursor: pointer;
text-decoration: none;
transition: all 0.3s ease;
}

.button-outline-blue:hover {
background-color: #f0f8ff; /* خلفية زرقاء خفيفة */
}

.button-outline-blue:active {
color: #dc3545; /* أحمر */
background-color: #ffe5e5; /* خلفية حمراء فاتحة */
border-color: #dc3545;
}

تحميل الاكواد

ولصقها بالمكان الذى تريد


بعض الفوائد التي يقدمها إخفاء المشاركات عن تصنيف معين على الصفحة الرئيسية في بلوجر:

1. التحكم الدقيق بالمحتوى:

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

2. تحسين ترتيب المشاركات:

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

3. زيادة التركيز:

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

4. تخصيص التصميم:

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

5. استهداف دقيق للجمهور:

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

أضف تعليق

تصميم موقع كهذا باستخدام ووردبريس.كوم
ابدأ