📅 ٧ أبريل ٢٠٢٥ | 🕌 ٩ شوال ١٤٤٦ هـ
مقدمة
إذا كنت تمتلك مدونة على بلوجر وتبحث عن طريقة لإضافة شريط أخبار متحرك يعرض أحدث الأخبار والتحديثات، بالإضافة إلى عرض التاريخ الهجري والميلادي، فإليك هذه ال أداة الرائعة التي يمكن إضافتها بسهولة دون الحاجة إلى تعديل في القوالب أو الأكواد المتقدمة.
مميزات الأداة
- عرض الأخبار المتحركة بشكل احترافي.
- إظهار التاريخ الميلادي والهجري تلقائيًا.
- تصميم جذاب ومتناسق مع مختلف القوالب.
- سهولة الإضافة دون الحاجة إلى خبرة في البرمجة.
- إمكانية إيقاف حركة الأخبار عند تمرير المؤشر عليها.
طريقة الإضافة
يمكنك إضافة هذه ال أداة بسهولة إلى مدونتك على بلوجر عبر التخطيط، وذلك باتباع الخطوات التالية:
- توجه إلى لوحة تحكم بلوجر.
- اختر "التخطيط" من القائمة الجانبية.
- اضغط على "إضافة أداة" في المكان الذي ترغب في عرض الأداة فيه.
- اختر "HTML/JavaScript".
- انسخ الكود التالي والصقه داخل المربع المخصص للمحتوى:
typecode
<style>
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;700&display=swap');
.blfym-news-container {
display: flex;
align-items: center;
background: linear-gradient(135deg, #007bff, #0056b3);
color: white;
padding: 12px;
overflow: hidden;
white-space: nowrap;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
border-radius: 12px;
width: 100%;
max-width: 800px;
position: relative;
}
.blfym-date-box {
font-weight: bold;
font-size: 14px;
padding: 8px 15px;
background: #fff;
color: black;
border-radius: 8px;
display: flex;
align-items: center;
gap: 5px;
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
transition: all 0.5s ease-in-out;
z-index: 5;
}
.blfym-news-ticker {
flex-grow: 1;
overflow: hidden;
position: relative;
}
.blfym-news-content {
display: inline-block;
white-space: nowrap;
animation: blfymScrollNews 17s linear infinite;
}
.blfym-news-item {
display: inline-block;
margin-right: 30px;
}
.blfym-news-item a {
color: white;
text-decoration: none;
font-weight: bold;
transition: color 0.3s;
}
.blfym-news-item a:hover {
text-decoration: underline;
color: #ffea00;
}
@keyframes blfymScrollNews {
from { transform: translateX(100%); }
to { transform: translateX(-100%); }
}
.blfym-news-ticker:hover .blfym-news-content {
animation-play-state: paused;
}
</style>
<div class="blfym-news-container">
<div class="blfym-date-box" id="blfymDateBox">
<i>📅</i> جاري تحميل التاريخ...
</div>
<div class="blfym-news-ticker" id="blfymNewsTicker">
<div class="blfym-news-content" id="blfymNews">
<span class="blfym-news-item"><a href="#">📢 خبر عاجل: إطلاق تحديث جديد!</a></span>
<span class="blfym-news-item"><a href="#">💡 نصيحة تقنية: كيف تحسن سرعة موقعك؟</a></span>
<span class="blfym-news-item"><a href="#">📊 تقرير: ارتفاع عدد مستخدمي التطبيقات!</a></span>
<span class="blfym-news-item"><a href="#">🔥 عروض خاصة: تخفيضات تصل إلى 50%!</a></span>
</div>
</div>
</div>
<script>
function blfymUpdateDate() {
let today = new Date();
let options = { year: 'numeric', month: 'long', day: 'numeric' };
let gregorianDate = new Intl.DateTimeFormat('ar-EG', options).format(today);
let hijriDate = new Intl.DateTimeFormat('ar-SA-u-ca-islamic', options).format(today);
document.getElementById("blfymDateBox").innerHTML = `<i>📅</i> ${gregorianDate} | 🕌 ${hijriDate}`;
}
function blfymToggleDateVisibility() {
let dateBox = document.getElementById("blfymDateBox");
setInterval(() => {
dateBox.style.display = "none";
setTimeout(() => {
dateBox.style.display = "flex";
}, 1000);
}, 2000);
}
blfymUpdateDate();
setInterval(blfymUpdateDate, 86400000);
blfymToggleDateVisibility();
</script>
خاتمة
بهذه الطريقة، ستتمكن من عرض الأخبار المتحركة والتاريخ الهجري والميلادي في مدونتك بطريقة أنيقة وجذابة. يمكنك تخصيص الأخبار وتعديل سرعة الحركة بسهولة من خلال الكود أعلاه. جرب ال أداة الآن واستمتع بتجربة فريدة في مدونتك!
