إجعل المشاركات الشائعة تظهر بحلة جديدة و بألوان رائعة

🚀 تطوير شكل أداة المشاركات الشائعة في بلوجر بطريقة احترافية

دليل عملي لتحسين مظهر Popular Posts وزيادة تفاعل الزوار داخل مدونتك بشكل عصري وملون

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

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

تصميم ملون واحترافي لأداة المشاركات الشائعة

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

خطوات تركيب أداة المشاركات الشائعة في مدونتك

سجّل الدخول إلى لوحة تحكم مدونتك في بلوجر.

📌 وين تحط الكود بالضبط:

ادخل إلى لوحة تحكم بلوجر
توجه إلى قسم المظهر
اضغط على تحرير HTML
اضغط على CTRL + F وابحث عن السطر التالي:

]]></b:skin>

قم بلصق الكود مباشرة فوق هذا السطر

⚠️ مهم جداً:

✔ أضف أداة المشاركات الشائعة (Popular Posts) من قسم التخطيط اولا
✔ ما تحتاج حتى إضافة HTML أخرى

💡 بعد الحفظ، ادخل لمدونتك وشوف التغيير مباشرة.

💡 معلومة مهمة: لا تضيف الكود في أي مكان آخر داخل القالب، حتى لا يتسبب في خلل بالمظهر أو وظائف المدونة.

كود الأداة الجاهز للنسخ


/* Popular Posts ملون واحترافي */
.PopularPosts ul,
.PopularPosts li,
.PopularPosts li img,
.PopularPosts li a,
.PopularPosts li a img{
list-style:none;
border:none;
background:none;
outline:none;
margin:0;
padding:0;
}

.PopularPosts ul{
font-size:15px;
color:#fff;
width:100% !important;
font-weight:bold;
}

.PopularPosts ul li{
counter-increment:num;
position:relative;
padding:10px 5px 10px 40px;
height:70px;
}

.PopularPosts ul li img{
width:60px;
height:60px;
float:left;
margin-right:15px;
border:4px solid rgba(0,0,0,0.2);
transition:0.4s;
}

.PopularPosts ul li img:hover{
border-color:rgba(0,0,0,0.5);
}

.PopularPosts ul li:before{
content:counter(num);
position:absolute;
left:10px;
top:30%;
font-size:32px;
font-weight:700;
color:rgba(0,0,0,0.3);
}

.PopularPosts .item-title{
height:64px;
overflow:hidden;
}

.PopularPosts ul li:nth-child(1){background:#5d93b2;}
.PopularPosts ul li:nth-child(2){background:#67b8b3;}
.PopularPosts ul li:nth-child(3){background:#67c27a;}
.PopularPosts ul li:nth-child(4){background:#ee9f7e;}
.PopularPosts ul li:nth-child(5){background:#ea6868;}
.PopularPosts ul li:nth-child(6){background:#b65757;}
.PopularPosts ul li:nth-child(7){background:#e9c462;}
.PopularPosts ul li:nth-child(8){background:#84d558;}
.PopularPosts ul li:nth-child(9){background:#4dd38c;}
.PopularPosts ul li:nth-child(10){background:#b44d7a;}

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

✍️ بقلم: قاسي للمعلومات

👤 عن الكاتب

قاسي، مهتم بالتقنية والربح من الإنترنت، أشارك شروحات وأدوات مفيدة لمستخدمي بلوجر بطريقة بسيطة واحترافية.