أداة الأخبار العاجلة مفيدة جدًا لمدونات الأخبار لأن المستخدمين الجدد الذين زاروا الموقع من Google قد يرون فقط المعلومات التي يحتاجون إليها ولن يعودوا إلى الصفحة الرئيسية للحصول على مزيد من المعلومات. إذن ، ستكون أداة الأخبار العاجلة مفيدة جدًا للمستخدمين. سيعرض العدد الإجمالي لعناوين المنشورات التي كتبتها في مدونتك.
فوائد وميزات أداة الأخبار العاجلة في مدونة بلوجر
- أفضل تصميم لجذب المستخدمين
- كود مخصص بالكامل دون أي مشاكل.
- احصل على أكبر عدد من المستخدمين.
- تقليل معدل الارتداد
- سيتم زيادة وقت المستخدم
- أفضل طريقة لإظهار مشاركات المدونة الأخرى للمستخدمين.
خطوات إضافة أداة الأخبار العاجلة خفيفة الوزن في مدونة بلوجر
- تسجيل الدخول إلى بلوجر
- في لوحة تحكم بلوجر ، توجه الى المظهر > تعديل HTML
- ابحث عن علامة </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'/>تم ، الآن انقر فوق حفظ القالب وانتقل إلى مدونتك لمشاهدة النتائج.
اقرأ ايضًا : اضافة المنشورات ذات الصلة في بلوجر بين منشورات المدونة بشكل احترافي
اتمنى ان تكون هذه المقالة مفيدة لك وقد تمكنت من اضافة أداة الأخبار العاجلة في بلوجر.
"لا تقرأ وترحل، ضع بصمتك.. وشاركنا برأيك ..."
أحدث المقالات