كيفية إنشاء شريط أخبار لموقع بلوجر: خطوات سهلة وسريعة

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

كيفية إنشاء شريط أخبار لموقع بلوجر

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

أهمية شريط الأخبار؟

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

خطوات إضافة شريط الأخبار

الخطوة الأولى: إضافة هيكل HTML

الخطوة الأولى في إنشاء شريط الأخبار هي بناء هيكله الأساسي باستخدام HTML. للقيام بذلك، ادخل إلى لوحة التحكم في موقع بلوجر الخاص بك وتوجّه إلى قسم المظهر. بعد ذلك، انقر على تحرير HTML وابحث عن علامة </header>. أسفل هذه العلامة، قم بلصق كود HTML المخصص لشريط الأخبار. بهذه الطريقة، يكون لديك الأساس الذي سيظهر عليه الشريط لاحقًا.

<div id="bytesvibe-ticker">
    <span class="latest">تحميل...</span>
</div>

الخطوة الثانية: تصميم الشريط باستخدام CSS

بعد الانتهاء من HTML، حان الوقت لتنسيق الشريط وجعله جذابًا وأنيقًا. لتحقيق ذلك، أضف أكواد CSS أعلى ]]></b:skin> في محرر HTML. ستمنح هذه الأكواد شريط الأخبار مظهرًا جميلًا وتجعله متجاوبًا مع مختلف أحجام الشاشات، مما يضمن تجربة مشاهدة مثالية سواء على أجهزة الكمبيوتر أو الهواتف.

      /* element: Reaction */
.sharethis-inline-reaction-buttons {
    margin-top: 20px;
    display: flex;
    max-width: 400px;
    padding: 2px;
    line-height: 25px;
    box-shadow: 2px 2px 6px 1px rgb(102 102 102 / 13%);
    background: #fff;
    border-radius: 2px;
    font-size: 20px;
    text-align: center;
}

.drK .sharethis-inline-reaction-buttons {
    background: #2d2d30;
    box-shadow: none;
}

.drK #st-1 .st-btn span {
    color: #fff;
} 

#bytesvibe-ticker {
    max-width: 100%;
    color: #444444;
    font-size: .9rem;
    background-color: #ffffff;
    border-radius: 6px;
    box-shadow: 0 20px 30px -20px rgba(5,5,5,0.24);
    overflow: hidden;
    line-height: 1.7em;
}

span.latest {
    background-color: #9175ff;
    color: #ffffff;
    display: block;
    padding: .7rem 0rem;
}

span.latest:before {
    content: 'جديد';
    margin-right: 10px;
    background-color: #ffffff;
    color: #9175ff;
    padding: .5rem .3rem;
    border-radius: 2px;
    font-weight: bold;
    display: inherit;
    align-items: center;
}

span.latest {
    display: flex;
    max-height: 45px;
    overflow: hidden;
}

span.latest .roll {
    position: relative;
    width: calc(90% - 50px);
}

span.latest a {
    color: #fff;
    text-decoration: none;
    font-weight: normal;
    opacity: 0;
    position: absolute;
    bottom: 0;
    left: 0;
    transform: translateY(-6px);
    transition: all 600ms ease;
    pointer-events: none;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

span.latest a.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}  

الخطوة الثالثة: إضافة JavaScript للمحتوى الديناميكي

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

      <script>/*<![CDATA[*/
function displayLatestPosts(e){for(var t='<div class="roll">',l=0;l<e.feed.entry.length;l++){for(var r=e.feed.entry[l].title.$t,a="",n=0;n<e.feed.entry[l].link.length;n++)if("alternate"===e.feed.entry[l].link[n].rel){a=e.feed.entry[l].link[n].href;break}t+='<a href="'+a+'">'+r+"</a><br>"}t+="</div>",document.querySelector(".latest").innerHTML=t;const s=document.querySelectorAll(".latest .roll a");let i=-1,c=s.length;const d=()=>{s.forEach((e=>{e.classList.remove("active")}))};i=0,d(),s[i].classList.add("active");setInterval((()=>{i>=c-1?i=0:i+=1,d(),s[i].classList.add("active")}),5e3)}
/*]]>*/</script>

<script src='/feeds/posts/default?alt=json-in-script&max-results=20&callback=displayLatestPosts'/>

التخصيصات شريط أخبار

يمكن تخصيص شريط الأخبار ليعكس أسلوب مدونتك وشخصيتك. على سبيل المثال، يمكنك تعديل عدد المنشورات المعروضة من خلال تغيير الرقم 20 في الكود (max-results=20). بالإضافة إلى ذلك، يمكنك تغيير ألوان الشريط، وأنواع الخطوط، وسرعة التمرير، مما يجعله متوافقًا مع تصميم المدونة ويُعزز جاذبيته البصرية.

الفوائد شريط أخبار

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

الأسئلة الشائعة:

1. ما هو شريط الأخبار في بلوجر؟

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

2. كيف يمكنني إضافة شريط أخبار إلى مدونتي على بلوجر؟

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

3. هل يمكنني تخصيص شريط الأخبار ليعكس أسلوب مدونتي؟

نعم، يمكنك تخصيص شريط الأخبار بما يتناسب مع تصميم مدونتك من خلال تغيير الألوان، الخطوط، عدد المنشورات المعروضة، وسرعة التمرير.

4. هل يتطلب شريط الأخبار تحديثًا يدويًا؟

لا، إذا قمت بإضافة كود JavaScript، فإن شريط الأخبار سيُحدث تلقائيًا دون الحاجة لتحديث يدوي.

5. ما هي فوائد إضافة شريط أخبار إلى مدونتي؟

يساعد شريط الأخبار في زيادة تفاعل الزوار، ويعزز من معدل الزيارات، كما يجعل المدونة تبدو أكثر نشاطًا وتحديثًا، مما يشجع الزوار على العودة بشكل مستمر.

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

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