أفضل 7 إضافات (Widgets) جاهزة لتزيين وتنسيق القائمة الجانبية (مع الأكواد)

تُعتبر القائمة الجانبية (Sidebar) في أي مدونة إلكترونية واحدة من أهم المساحات الإستراتيجية التي تؤثر مباشرة على سلوك الزائر وتفاعله. فهي أول ما يقع عليه عين القارئ عند تصفح الموقع عبر الحواسيب، والمكان المثالي لتوجيهه نحو تصفح المزيد من المقالات أو النقر على الإعلانات. إن ترك القائمة الجانبية بتنسيقها الافتراضي البسيط يجعل المدونة تبدو غير احترافية، بينما تزيينها وتنسيقها باستخدام أكواد CSS خفيفة ونظيفة يمنح موقعك لمسة جمالية ساحرة تزيد من مدة بقاء الزائر وتخفض معدل الارتداد (Bounce Rate)، وهو أمر بالغ الأهمية لتصدر نتائج البحث (SEO).

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

كود عنوان الأداة الاحترافي (Custom Widget Title Design)

بدلاً من ظهور عناوين الأدوات الجانبية (مثل: تابعنا، أرشيف المدونة) بنص تقليدي، يمنحك هذا الكود خطاً سفلياً ملوناً وأنيقاً يعطي القائمة الجانبية تنظيماً هندسياً جذاباً.

طريقة التركيب: ضع الكود في المظهر فوق </style>.

      
      code-snippet
    
        HTML
        
    /* تنسيق عناوين الأدوات الجانبية */
.sidebar .widget h2, .sidebar .widget .title {
  font-size: 18px; color: #2c3e50; font-weight: bold;
  position: relative; padding-bottom: 10px; margin-bottom: 15px;
  border-bottom: 2px solid #f1f2f6; text-align: right;
}
.sidebar .widget h2:after, .sidebar .widget .title:after {
  content: ""; position: absolute; bottom: -2px; right: 0;
  width: 50px; height: 2px; background: #ff4757; /* لون الخط المميز */
}

إضافة صناديق السوشيال ميديا الأنيقة (Social Media Follow Buttons)

أزرار منسقة بالكامل بتقنية Flexbox البرمجية لعرض حساباتك على منصات التواصل الاجتماعي بشكل طولي أو عرضي متناسق يتحول لألوان المنصات الرسمية عند مرور الفأرة.

طريقة التركيب: أضف أداة جديدة (HTML/JavaScript) في تخطيط القائمة الجانبية وضع الكود التالي

      
      
      
      إضافة صناديق السوشيال ميديا الأنيقة
    

        HTML
        
    

    <style>
.diyou-social-sidebar { display: flex; flex-direction: column; gap: 10px; }
.social-item {
  display: flex; align-items: center; justify-content: center; padding: 10px;
  color: white; font-weight: bold; text-decoration: none; border-radius: 4px; transition: all 0.3s;
}
.fb-side { background: #3b5998; } .fb-side:hover { background: #2d4373; opacity: 0.9; }
.yt-side { background: #ff0000; } .yt-side:hover { background: #cc0000; opacity: 0.9; }
.tg-side { background: #0088cc; } .tg-side:hover { background: #006699; opacity: 0.9; }
</style>

<div class="diyou-social-sidebar">
  <a href="رابط_فيسبوك" class="social-item fb-side" target="_blank">تابعنا على فيسبوك</a>
  <a href="رابط_يوتيوب" class="social-item yt-side" target="_blank">اشترك في قناتنا</a>
  <a href="رابط_تلغرام" class="social-item tg-side" target="_blank">انضم لقناتنا على تلغرام</a>
</div>
  

كود قائمة الأقسام والتسميات المتطورة (Styled Labels List)

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

طريقة التركيب: ضع كود الـ CSS في قالب مدونتك.

      
      
      
      قائمة الأقسام والتسميات المتطورة
    

        HTML
        
    

    /* تزيين قائمة الأقسام */
.Label ul li { display: inline-block; margin: 5px; }
.Label ul li a {
  display: block; padding: 6px 12px; background: #f1f2f6;
  color: #333; font-size: 13px; border-radius: 20px;
  text-decoration: none; transition: all 0.3s ease; border: 1px solid #e4e7ed;
}
.Label ul li a:hover {
  background: #ff4757; color: white; border-color: #ff4757;
  transform: scale(1.05);
}
  

إضافة صندوق التعريف بالكاتب الاحترافي (About Me Widget)

صندوق مميز يُوضع في أعلى القائمة الجانبية لتعريف زوار مدونة فيكا للمعلومات بهوية الكاتب أو تخصص الموقع، مما يرفع من عامل الموثوقية (E-A-T) لدى خوارزميات جوجل.

      
      إضافة صندوق التعريف بالكاتب الاحترافي
    
        HTML
        
    <style>
.author-box { background: #ffffff; border: 1px solid #e4e7ed; padding: 20px; text-align: center; border-radius: 8px; }
.author-img { width: 90px; height: 90px; border-radius: 50%; object-fit: cover; border: 3px solid #ff4757; margin-bottom: 10px; }
.author-name { font-size: 16px; font-weight: bold; color: #2c3e50; margin-bottom: 5px; }
.author-desc { font-size: 13px; color: #7f8c8d; line-height: 1.5; }
</style>

<div class="author-box">
  <img src="رابط_صورتك_هنا" class="author-img" alt="مدون تقني">
  <div class="author-name">طاقم diyou dz</div>
  <p class="author-desc">منصة رقمية متخصصة في تقديم أحدث السكربتات البرمجية، إضافات بلوجر، شروحات التقنية، وأسرار الربح من الإنترنت لعام 2026.</p>
</div>

تنسيق أداة "المشاركات الشائعة" برقم تسلسلي (Popular Posts Styling)

أداة المشاركات الشائعة (Popular Posts) أساسية لتدوير الزوار. هذا الكود يقوم بإضافة أرقام تسلسلية ملوّنة (1، 2، 3) بجانب المقالات الأكثر قراءة لتبدو كقائمة تصنيفات احترافية.

      
      
      
      تنسيق أداة "المشاركات الشائعة" برقم تسلسلي
    

        HTML
        
    

    /* تنسيق المقالات الشائعة */
.PopularPosts ul li {
  position: relative; padding: 10px 40px 10px 10px !important;
  border-bottom: 1px dashed #e4e7ed; counter-increment: diyou-counter;
}
.PopularPosts ul li:before {
  content: counter(diyou-counter); position: absolute; top: 12px; right: 0;
  width: 25px; height: 25px; background: #2ed573; color: white;
  border-radius: 50%; text-align: center; line-height: 25px; font-weight: bold; font-size: 12px;
}
.PopularPosts .item-title a { color: #2c3e50; text-decoration: none; font-size: 14px; font-weight: 500; }
.PopularPosts .item-title a:hover { color: #ff4757; }
  

إضافة بنر إعلاني ذكي وثابت عند النزول (Sticky Sidebar Ad Widget)

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

طريقة التركيب: ضع الكود التالي داخل أداة (HTML) في أسفل منطقتي التخطيط الجانبي

      
      إضافة بنر إعلاني ذكي وثابت عند النزول
    
        HTML
        
    <style>
.sticky-ad-box {
  position: -webkit-sticky; position: sticky; top: 20px;
  background: #fafafa; border: 2px dashed #b2bec3;
  padding: 10px; text-align: center; border-radius: 6px;
}
</style>

<div class="sticky-ad-box">
  <span style="font-size:10px; color:#aaa; display:block; margin-bottom:5px;">إعلان مخصص</span>
  <div style="width:100%; height:250px; background:#dfe4ea; line-height:250px; color:#747d8c;">مساحة إعلانية مربحة</div>
</div>
</div>

كود تأثير الظل والانسيابية للأدوات (Widget Hover Shadow Effect)

كود CSS بسيط وعبقري يطبق على جميع أدوات القائمة الجانبية؛ حيث يمنحها إطاراً ناعماً يتوهج ويظهر خلفه ظل ثلاثي الأبعاد خفيف يرتفع للأعلى بانسيابية عند مرور مؤشر الماوس فوق أي أداة.

      
      
      
      كود تأثير الظل والانسيابية للأدوات
    

        HTML
        
    

    /* تأثير الظل للأدوات الجانبية */
.sidebar .widget {
  background: #ffffff; padding: 15px; border-radius: 6px;
  margin-bottom: 20px; border: 1px solid #f1f2f6;
  transition: all 0.3s ease-in-out;
}
.sidebar .widget:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
  border-color: #e4e7ed;
}
  

إن تزيين القائمة الجانبية بهذه اللمسات البرمجية الذكية يعطي مدونتك هوية بصرية قوية وموثوقة تزيد من رغبة الزائر في استكشاف الموقع ونقر الإعلانات. ولكن تذكر دائماً مبدأ "التوازن"؛ لا تكثر من وضع الأدوات والصور المتحركة داخل الـ Sidebar حتى لا يتسبب ذلك في تشتيت القارئ أو إبطاء سرعة تحميل الصفحة على الهواتف. اختر الإضافات الـ 7 الأساسية التي تخدم أهداف مدونتك، واضمن لمدونتك تصدراً ومظهراً فخماً متوافقاً تماماً مع السيو!

قناة يوتيوب

اشترك الآن

قناة تيليجرام

انضم الآن

تحليل المقال

متواجدون ...

👁️

مشاهدات ...

📝

كلمات 0

⏱️

قراءة 0 د

📅

نشر 20/05/2026

♻️

تحديث 20/05/2026

إضافات بلوجر

Diyou DZ

سمير مدون جزائري صاحب قناة Diyou DZ على اليوتيوب تعرض كل مايخص البنوك والقروض والسكن في الجزائر و مدونة فيكا للمعلومات التقنية والتطبيقات والمواقع الربحية وكل مايساعدك في حياتك اليومية

مقالات قد تهمك

تعليقات

إرسال تعليق

مدونة فيكا للمعلومات

أقسام الوصول السريع (مربع البحث)