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

شريط متحرك لعرض اخر اخبار مقالات مدونة بلوجر
شريط متحرك لإقتراح مواضيع مدونة بلوجر

هل تبحث عن شريط متحرك لعرض اخر مواضيع مدونة بلوجر ؟ هل تبحث عن شريط متحرك لعرض اخر الاخبار في مدونتك ؟ اذن انت في المقال الصحيح.

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

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

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

إيجابيات شريط اخر الاخبار المتحرك

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

سلبيات شريط اخر المواضيع المتحرك

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

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

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

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

انصحك قبل ان تقوم بتركيب اداة شريط اخر الاخبار ان تأخذ نسخة احتياطية من قالب مدونتك قبل اي شيء.

1- نقوم اولا بتركيب أكواد JavaScript داخل قالب بلوجر والتي يجب ان تقوم وضعها اسفل body بمعنى فوق الوسم </body> مباشرة بحيث تكون اسفل كل الأكواد بما فيها HTML و CSS ومن المهم ان تكون مكتبة 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 والذي يجب وضعه مباشرة فوق </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 والتي يفضل وضعها في المكان المناسب من خلال التنسيق فإن لم تجد المكان المناسب من خلال التنسيق قم بإختيار المكان الذي تريد داخل قالب بلوجر.

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

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

التعليقات

  1. الطريقة الوحيدة التي صلحت شكرا جزيلا لك . فقط قمت بنزع div اخر الاخبار لانها جاءت في النصف مشوهة

    ردحذف
أحدث أقدم