أخر الاخبار
بلوجر
0

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

Sky3Android
اخر تحديث :

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


دورة بلوجر,تصدر نتائج البحث فى جوجل سيو بلوجر,تصدر نتائج البحث بلوجر, سيو بلوجر,تعلم سيو بلوجر,تصدر نتائج محركات البحث فى بلوجر, تصدر نتائج البحث في اليوتيوب,تعلم التصدر فى جوجل,تصدر نتائج البحث جوجل, دورة تعلم السيو,الربح من الانترنت,تصدر نتائج بحث جوجل,دورة تعلم تصدر نتائج البحث, دورة تعلم تصدر محركات البحث,تصدر نتائج البحث,تصدر محركات البحث ,,strong seo,search engine optimization,seo for beginners,seo google,seo
السلام عليكم متابعي مدونة سكاي اندرويد.
سنقدم لكم اليوم طريفة عمل اداة الأخبار العاجلة على المدونة في بلوجر ,وهي طريقة سهلة وبسيطة ,كل ماعليك هو متابعة الشرح حتى نهاية المقال.

أداة الأخبار العاجلة مفيدة جدًا لمدونات الأخبار لأن المستخدمين الجدد الذين زاروا الموقع من 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>


 ثم قم بإضافة 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'/>

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

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


الكلمات الدلالية

دورة بلوجر,تصدر نتائج البحث فى جوجل سيو بلوجر,تصدر نتائج البحث بلوجر,

سيو بلوجر,تعلم سيو بلوجر,تصدر نتائج محركات البحث فى بلوجر,

تصدر نتائج البحث في اليوتيوب,تعلم التصدر فى جوجل,تصدر نتائج البحث جوجل,

دورة تعلم السيو,الربح من الانترنت,تصدر نتائج بحث جوجل,دورة تعلم تصدر نتائج البحث,

دورة تعلم تصدر محركات البحث,تصدر نتائج البحث,تصدر محركات البحث

,,strong seo,search engine optimization,seo for beginners,seo google,seo
تعديل المقال
الأقسام
Sky3Android
بواسطة : Sky3Android
سكاي اندرويد

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

تعليقات



    حجم الخط
    +
    16
    -
    تباعد السطور
    +
    2
    -