بلوجر » إنشاء أداة الأخبار العاجلة خفيفة الوزن في مدونة بلوجر

إنشاء أداة الأخبار العاجلة خفيفة الوزن في مدونة بلوجر

آخر تعديل في 2021-08-14 بواسطة Rami .M
بلوجر,اضافات بلوجر,دورة بلوجر,مدونة بلوجر,كود شريط الأخبار العاجلة,شريط الاخبار العاجلة,شريط اخر الأخبار لمدونة بلوجر,شريط اخر الاخبار بلوجر,شريط الاخبار العاجلة على سطح المكتب,شريط الاخبار بلوجر,كود شريط آخر الأخبار من جوجل لمدونات بلوجر،,شريط اخبار بلوجر,شريط اخر الاخبار,اضافة شريط الاخبار بلوجر,كيفية اضافة شريط اخباري احترافي في موقع بلوجر,انشاء مدونة بلوجر,اخبار,شرح تشغيل شريط الأخبار على مدونة بلوجر blogger،,انشاء مدونه في بلوجر,أداة الأخبار العاجلة

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

فوائد وميزات أداة الأخبار العاجلة في مدونة بلوجر

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

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

  1. تسجيل الدخول إلى بلوجر
  2. في لوحة تحكم بلوجر ، توجه الى المظهر > تعديل HTML
  3. ابحث عن علامة </head> والصق كود CSS التالي أعلى العلامة.
<style type='text/css'>
/* Breaking News TL */
#breakingwrapper{position:relative;background-color:#f5f5f5;color:#ccc;display:block;margin:10px auto 10px auto;overflow:hidden;border-radius:5px;box-shadow:0 2px 3px -2px rgba (0,0,0,0.1)}#breakingnews{width:100%;max-width:990px;display:block;margin:0 auto;line-height:42px;height:42px;overflow:hidden;font-size :13px;padding:0}#breakingnews .tulisbreaking{background:#e74c3c;color:#fff;display:block;padding:0 15px;font-size:13px;font-weight:600;height:28px;line-height :28px;float:left;margin:7px 14px 0 7px;text-align:center;border-radius:3px}#recentbreaking{float:right;margin-right:20px;font-size:13px;color:#222;font- weight:600}#recentbreaking ul,#recentbreaking li{list-style:none;margin:0;padding:0}#recentbreaking li a{color:#222;margin-right: 10px;}#recentbreaking li a:hover{color:#222;text- decoration:underline}.blog-date{display:inline-block;float:right;margin:0 20px 0 0;font-size:13px;border-radius:2px;cursor:pointer}#recentbreaking li i{margin:0 10px 0 0}
@media screen and (max-width:768px) {
#breakingwrapper{background-color:#e74c3c;color:#fff;margin:10px auto 20px auto;border-radius:0}#breakingnews{padding:0 20px;color:#fff;overflow:hidden;text-overflow:ellipsis}#recentbreaking{color:#fbc531;text-align:center;float:none;margin:0 auto}#breakingnews .tulisbreaking .breakhidden,#breakingnews .tulisbreaking{display:none}#recentbreaking li a,#recentbreaking li a:hover{color:#fff}}
</style>

4. ثم قم بإضافة JavaScript التالية أعلى علامة </body>

<script type='text/javascript'>
//<![CDATA[
// Breaking News TL
$(document).ready(function(){var e="https://www.example.com/",t=10;$.ajax({url:""+e+"/feeds/posts/default?alt=json-in-script&max-results="+t,type:"get",dataType:"jsonp",success: function(e){function t(){$("#recentbreaking li:first").slideUp(function(){$(this).appendTo($("#recentbreaking ul")).slideDown()})} var n,r,a="",i=e.feed.entry;if(void 0!==i){a="<ul>";for(var l=0;l<i.length;l++ ){for(var s=0;s<i[l].link.length;s++)if("alternate"==i[l].link[s].rel){n=i[l].link [s].href;break}r=i[l].title.$t,a+='<li><i class="fa fa-check-square"></i><a href="'+ n+'" target="_blank">'+r+"</a></li>"}a+="</ul>",$("#recentbreaking").html(a),setInterval(function() {t()},5e3)}else $("#recentbreaking").html("<span>There's nothing here?</span>")},error:function(){$("#recentbreaking").html("<strong>خطأ في تحميل الخلاصة!</strong>")}} )});
//]]>
</script>

قم بتغيير example.com بعنوان مدونتك واستبدل الرقم 10 بعدد المنشورات التي تريد عرضها.

5. أخيرًا ، احفظ الكود أدناه حيث تريد عرضه. ولكن يجب أن يكون بين علامتي <body> و </body>.

<div id='breakingwrapper'>
   <div id='breakingnews'>
     <span class='tulisbreaking'>اخر الاخبار<span class='breakhidden'/></span>
      <div id='recentbreaking'>تحميل...</div>
      <div class='blog-date'>
         <script language='Javascript'>
            var dayName = new Array("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday");
            var monName = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September" , "October", "November", "December");
            var now = new Date();
            document.write(" " " " +dayName[now.getDay()] + "," + " " + now.getDate() + " " monName[now.getMonth. ()] + "");
         </script>
      </div>
   </div>
</div>
<div class='clear'/>

تم ، الآن انقر فوق حفظ القالب وانتقل إلى مدونتك لمشاهدة النتائج.

اقرأ ايضًا : اضافة المنشورات ذات الصلة في بلوجر بين منشورات المدونة بشكل احترافي

اتمنى ان تكون هذه المقالة مفيدة لك وقد تمكنت من اضافة أداة الأخبار العاجلة في بلوجر.

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

أحدث المقالات

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

تم تصميم الموقع بواسطة منشئ الصفحات Oxygen Builder بشكل كامل.
لطلب خدمة تصميم الموقع تواصل معنا من الزر بالإسفل
خدمة تصميم الموقع
منتجات أوصي بها
إشترك فى قناتنا على يوتيوب ليصلك كل جديد
جميع الحقوق محفوظة لـ نور للمعلوماتية © 2021
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram