تك مصراوي - أخبار التكنولوجيا، الكمبيوتر والهواتف الذكية

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

إضافة مذهلة لعرض مقالات مدونتك بأسلوب احترافي | أدوات بلوجر الحديثة

🌟 أداة رائعة لتنظيم وعرض مواضيع المدونة في الرئيسية | بلوجر 2025

🧩 أفضل إضافة لعرض مشاركات مدونة بلوجر بتصميم أنيق وسريع | إضافات بلوجر

🚀 أداة عرض المواضيع في الرئيسية بتأثيرات مميزة وجذاب | بلوجر برو

🎨 إضافة عرض المواضيع بتصميم احترافي يجذب الزوار | أدوات بلوجر المتقدمة

🔥 عرض مواضيع مدونة بلوجر بطريقة احترافية وجذابة | إضافة جديدة 2025

🧰 أدوات تحسين المظهر)

أداة عرض مواضيع بلوجر بشكل احترافي وجذاب

أفضل أداة لتنظيم وعرض مقالات بلوجر بطريقة مميزة

كود عرض المواضيع في بلوجر بتصميم عصري وجميل

أداة عرض التدوينات الحديثة في بلوجر مع تأثيرات أنيقة

كود عرض المقالات في شكل شبكي Grid داخل مدونة بلوجر

أداة عرض مواضيع متعلقة Related Posts بتصميم احترافي

عرض المواضيع بشكل كروت Cards أنيقة لمدونات بلوجر

أداة بلوجر لعرض المشاركات المميزة Featured Posts بشكل متحرك

إضافة عرض المواضيع حسب التصنيف أو القسم في بلوجر

كود بلوجر لعرض المواضيع بأسلوب احترافي مثل المواقع الإخبارية

💡 نصائح لاختيار عنوان جذاب لمقال أو فيديو عن الأدوات

استخدم كلمات مثل: “احترافي”، “جذاب”، “حديث”، “سلايدر”، “شبكي”

ركّز على النتيجة أو الفائدة: “يجعل مدونتك أكثر جاذبية”، “يجذب الزوار”، “يحسن المظهر”

مثال

أداة احترافية لعرض مواضيع بلوجر في الصفحة الرئيسية | إضافات بلوجر 2026

أفضل كود لعرض مواضيع المدونة بشكل أنيق في الرئيسية | بلوجر

إضافة بلوجر جديدة لعرض المشاركات بتصميم عصري في الصفحة الرئيسية

أداة عرض المقالات في الرئيسية بتنسيق شبكي احترافي | إضافات بلوجر مجانية

أداة مميزة لعرض المشاركات حسب التصنيف في الرئيسية | Blogger Tools

كود عرض المواضيع الحديثة في واجهة بلوجر بتأثيرات جذابة

إضافة عرض التدوينات المميزة في الرئيسية بطريقة احترافية | إضافات بلوجر

أداة عرض المواضيع بطريقة كروت Cards في الصفحة الرئيسية | Blogger Addons

كود بلوجر لعرض المشاركات المميزة Featured Posts بشكل أنيق

أداة بلوجر لعرض المقالات الحديثة في الرئيسية مع تأثير التحريك | إضافات احترافية

🔹 “أداة عرض المواضيع في بلوجر تجعل مدونتك أكثر احترافية في دقيقة واحدة”

أكواد CSS الخاصة بإضافة عرض مواضيع بلوجر (ضعها فوق ]]></b:skin>).

ا@font-face{font-family:'slidefont';src:url("https://cdn.jsdelivr.net/gh/hamianemohssine/7amian@master/font-icons/Five-News-Ticker.woff2")}
.hm-container,.hm-slide,.hm-slide-item{height:auto;width:100%}
.hm-container{display:flex;flex-direction:row;justify-content:center;margin:0 auto;padding:15px 10px;box-sizing:border-box}
.hm-container *{box-sizing:border-box;transition:1s}
.hm-slide-info,.hm-slide-photo{transition:.5s;display:flex;height:100%}
.hm-slide{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;text-align:right;direction:rtl;max-width:1100px}
.hm-slide-item{position:relative;padding-bottom:68%;background-color:#f9f9f9;overflow:hidden}
.hm-slide-item:first-child{grid-column:2/4;grid-row:1/3}
.hm-slide-item>a{position:absolute;top:0;right:0;width:100%;height:100%}
.hm-slide-photo{width:100%;background-size:cover;background-repeat:round;opacity:0}
.hm-slide-photo.hm-op{opacity:1}
.hm-slide-label{position:absolute;top:10px;right:10px;background-color:#00c;color:#fff;padding:3px 10px;border-radius:5px;font-size:12px;box-shadow:0 1px 2px #000}
.hm-slide-info{position:absolute;top:0;right:0;width:100%;background:linear-gradient(0deg,#000,transparent,transparent);flex-direction:column;justify-content:flex-end;padding:5px 10px;gap:5px}
.hm-slide-item:hover .hm-slide-info{padding-bottom:15px}
.hm-slide-date{color:#f7f7f7;text-shadow:1px 1px 3px #000;font-size:12px;display:flex}
.hm-slide-date:before{content:"\f017";margin-left:4px;font-family:"slidefont"}
.hm-slide-title{display:-webkit-box;color:#fff;text-shadow:1px 1px 5px #000;margin:0 0 5px;padding:0;font-size:1rem;line-height:1.5rem;white-space:normal;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-height:3rem;text-overflow:ellipsis}
.hm-slide-item:first-child .hm-slide-title{font-size:1.3rem;line-height:2rem;max-height:4rem}
.hm-loadingPost:after{content:"";position:absolute;top:calc(50% - 20px);right:calc(50% - 20px);width:40px;height:40px;border:4px solid #aaa;border-bottom-color:transparent;border-right-color:transparent;animation:.5s linear infinite hmslideloader;border-radius:100%}
@keyframes hmslideloader{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@media (max-width:900px){.hm-slide{grid-template-columns:repeat(3,1fr)}.hm-slide-item:first-child{grid-column:1/3;grid-row:1/3}}
@media (max-width:600px){.hm-slide{grid-template-columns:repeat(2,1fr)}.hm-slide-item:first-child{grid-column:1/3;grid-row:1/3}.hm-slide-date,.hm-slide-label{font-size:12px}.hm-slide-title{font-size:.8rem;line-height:1.3rem;max-height:2.6rem}}
@media (max-width:350px){.hm-slide{grid-template-columns:repeat(1,1fr)}.hm-slide-item:first-child{grid-column:unset;grid-row:unset}.hm-slide-item:first-child .hm-slide-title{font-size:.8rem;line-height:1.3rem;max-height:2.6rem}}

أكواد Javascript الخاصة بأداة عرض مشاركات بلوجر (ضعها فوق </body>)

أكواد HTML/JavaScript الخاصة بأداة عرض آخر المواضيع (ضعها في المكان الذي يناسبك

يمكنك التحكم في عدد المواضيع المعروضة من خلال data-results لكن يفضل الحفاظ على الرقم 9 لأنه هو المناسب لهذه الأداة، كما يمكنك التحكم في التصنيف من خلال data-label في حالة كنت تريد عرض المواضيع حسب آخر المشاركات بالترتيب فحافظ على قيمة data-label كما هي "recent".

لا تنسى تعديل قيمة max-width بما يناسبك، قيمة هذا المتغير مهمة لأنها هي ما يحدد العرض الأقصى للأداة حسب العرض الأقصى الصالح لمدونتك.