اضافة شريط اخبار احترافي لمدونات بلوجر بمظهر جديد 2025

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

لماذا شريط الأخبار المتحرك مهم في مدونات بلوجر؟

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

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

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

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

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

خطوة 1: اضافة اكواد جافا سكريبت

ابدأ بإضافة كود JavaScript الخاص بالشريط المتحرك داخل قالب مدونتك. هذا الكود يجب أن يوضع أسفل وسم </body> مباشرة حتى لا يؤثر على سرعة تحميل المدونة. تأكد أيضًا من وجود مكتبة Jquery أعلى الكود.


<script type='text/javascript'>
//<![CDATA[
function Article_loop() {
    NumOfArt = $(".bnone").length, WidthOfCon = $("#bnby7amian").width(), WidthOfTito = $("#tito7").width(), Widthsource = WidthOfCon, goku = 0 - WidthOfTito;
    for (let t = 0; t < NumOfArt; t++) goku = 20 + goku + $(".bnone").eq(t).width();
    $("#bnmove").css("margin-right", WidthOfCon + "px"), setInterval(function() {
        1 == hamian && ($("#bnmove").css("margin-right", WidthOfCon + "px"), WidthOfCon < -1 * goku && (WidthOfCon = Widthsource), WidthOfCon -= 1)
    }, 15)
}
NumOfPost = 7, hamian = !0, $("#bnmove").mouseover(function() {
    hamian = !1
}).mouseout(function() {
    hamian = !0
}), $.ajax({
    type: "get",
    url: "/feeds/posts/default?alt=json-in-script&max-results=" + NumOfPost,
    data: "data",
    dataType: "jsonp",
    success: function(t) {
        NumOfEntry = t.feed.openSearch$itemsPerPage.$t, OrderOfLinks = t.feed.entry[0].link.length - 1;
        for (let n = 0; n < NumOfEntry; n++) $("#bnmove").append('<div class="bnone"><a href="' + t.feed.entry[n].link[OrderOfLinks].href + '">' + t.feed.entry[n].link[OrderOfLinks].title + "</a><div>"), n == NumOfEntry - 1 && ($("#bnmove").css("display", "flex"), Article_loop())
    }
});
//]]>
</script>

خطوة 2: اضافة اكواد CSS

نقوم بتركيب Css والذي يجب وضعه مباشرة فوق</b:skin> في قالب بلوجر بجانب اكواد Css الموجودة داخله.


.bntool{background-color:#f1f1f1;width:100%;height:40px;text-align:right;direction:rtl;display:flex;flex-direction:row;position:relative;overflow:hidden;border-left:solid 2px #0000aa;box-shadow:0 0 1px #333;border-radius:3px;margin:10px 1px}
.bntitle{display:inline-block;font-size:18px;line-height:40px;padding:0 10px;background-color:#001122;color:#fff;border-left:solid 3px #0000aa;z-index:1;border-radius:3px 0 0 3px}
.bntitle::before{content:"";display:inline-block;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='white' class='bi bi-layout-text-window-reverse' viewBox='0 0 16 16'%3E%3Cpath d='M13 6.5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h5a.5.5 0 0 0 .5-.5zm0 3a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h5a.5.5 0 0 0 .5-.5zm-.5 2.5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1 0-1h5z'/%3E%3Cpath d='M14 0a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h12zM2 1a1 1 0 0 0-1 1v1h14V2a1 1 0 0 0-1-1H2zM1 4v10a1 1 0 0 0 1 1h2V4H1zm4 0v11h9a1 1 0 0 0 1-1V4H5z'/%3E%3C/svg%3E");margin-left:8px;width:20px;height:20px;vertical-align:middle;fill:#fff}
.bnloop{display:none;flex-direction:row;position:absolute;z-index:0}
.bnone{display:flex;flex-shrink:0;font-size:inherit;line-height:40px;margin:0 10px}
.bnone a{color:#000;text-decoration:none}
.bnone a::before{content:"";display:inline-block;background:url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' data-prefix='fal' data-icon='file-alt' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='%23444' d='M369.9 97.9L286 14C277 5 264.8-.1 252.1-.1H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V131.9c0-12.7-5.1-25-14.1-34zm-22.6 22.7c2.1 2.1 3.5 4.6 4.2 7.4H256V32.5c2.8.7 5.3 2.1 7.4 4.2l83.9 83.9zM336 480H48c-8.8 0-16-7.2-16-16V48c0-8.8 7.2-16 16-16h176v104c0 13.3 10.7 24 24 24h104v304c0 8.8-7.2 16-16 16zm-48-244v8c0 6.6-5.4 12-12 12H108c-6.6 0-12-5.4-12-12v-8c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12zm0 64v8c0 6.6-5.4 12-12 12H108c-6.6 0-12-5.4-12-12v-8c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12zm0 64v8c0 6.6-5.4 12-12 12H108c-6.6 0-12-5.4-12-12v-8c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12z'%3E%3C/path%3E%3C/svg%3E") center no-repeat;margin-left:5px;width:13px;height:13px;color:#fff;vertical-align:middle}
.bnone a:hover{color:#0000dd;transition:300ms}

خطوة 3: اضافة اكواد HTML

تركيب اكواد HTML والتي يفضل وضعها في المكان المناسب من خلال التنسيق فإن لم تجد المكان المناسب من خلال التنسيق قم بإختيار المكان الذي تريد داخل قالب بلوجر


<div class="bntool" id='bnby7amian'>
	<div class="bntitle" id="tito7">آخر الاخبار</div>
	<div class="bnloop" id="bnmove"></div>
</div>

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

يحقق شريط الأخبار لمدونات بلوجر فوائد متعددة على صعيد التفاعل مع المحتوى. إحدى أهم هذه الفوائد هي:

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

تأثير شريط الأخبار المتحرك على جمالية المدونة

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

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

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

إذا كنت تريد إضافة لمسة من الحيوية على مدونتك، فليس هناك خيار أفضل من إضافة شريط متحرك.

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

اضافة شريط اخبار احترافي لمدونات بلوجر بمظهر جديد 2025

لماذا شريط الأخبار المتحرك مهم في مدونات بلوجر؟

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

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

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

تأثير شريط الأخبار المتحرك على جمالية المدونة

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