شريط أخر الأخبار لمدونات بلوجر يعرض جميع التدوينات

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

شريط أخر الأخبار لمدونات بلوجر يعرض جميع التدوينات
شريط أخر الأخبار لمدونات بلوجر يعرض جميع التدوينات

شريط أخر الأخبار لمدونات بلوجر:

1- قم بدخول لقالب مدونتك وقم بالبحث عن الوسم التالي.

/head

عند ايجاده قم بوضع الكود التالي فوقه (اعلاه).

<style>
@media all and (min-width:750px) and (max-width:900px){#breakingnews{display:none}.sub-footer{height:140px}}
@media all and (min-width:750px) and (max-width:400px){.msg{float:right;margin:50px 150px 0 0}.mic{float:left;margin:50px 0 0 150px}.sub-footer{height:140px}#breakingnews{display:none}}
@media all and (min-width:0) and (max-width:400px){.sub-footer{height:170px}#sub-foo{display:none}.emoj{display:none}#breakingnews{display:none}#sub-foo{display:none}.emoj{display:none}}
/*اخر الاخبار*/
#breakingnews{line-height:65px;overflow:hidden;height:65px;background:#2c3648}
#breakingnews .breakhead{color:#fff;float:right;font-size:15px;background:#ff8400;height:105px;width:150px;text-align:center;line-height:65px;font-size:20px}
#adbreakingnews li a{color:#fff;margin-top:10px;transition:all 0.5s ease-in-out}
#adbreakingnews li a:hover{color:#fff}
#adbreakingnews{float:right;margin-right:30px;max-width:700px}
#adbreakingnews ul,#adbreakingnews li{list-style:none;margin:0;padding:0}
body#layout .sub-footer{display:none}
.sub-footer{clear:both;background:#2c3648;color:#fff;height:65px}
.mic{float:left;width:50px;height:50px;background-color:#e84c3d;border-radius:100%;color:#fff;font-size:25px;margin:7px;text-align:center;cursor:pointer}
.msg{float:left;width:50px;height:50px;background-color:#314559;border-radius:100%;color:#fff;font-size:25px;margin:7px;text-align:center;cursor:pointer}
@media all and (min-width:1000px) and (max-width:1150px){#breakingnews{display:none}}
</style>

2- اعد البحث عن الوسم التالي.

</body>

عند ايجاده ‘ستجده في اخر القالب’ قم بوضع الكود التالي فوقه (اعلاه).

<script type=’text/javascript’>
//<![CDATA[
  $(document).ready(function(){var e=”http://zatonna.blogspot.com”,t=20;$.ajax({url:””+e+”/feeds/posts/default?alt=json-in-script&max-results=”+t,type:”get”,dataType:”jsonp”,success:function(e){function t(){$(“#adbreakingnews li:first”).slideUp(function(){$(this).appendTo($(“#adbreakingnews ul”)).slideDown()})}var n,r,s=””,a=e.feed.entry;if(void 0!==a){s=”<ul>”;for(var l=0;l<a.length;l++){for(var o=0;o<a[l].link.length;o++)if(“alternate”==a[l].link[o].rel){n=a[l].link[o].href;break}r=a[l].title.$t,s+='<li><a href=”‘+n+'” target=”_blank”>’+r+”</a></li>”}s+=”</ul>”,$(“#adbreakingnews”).html(s),setInterval(function(){t()},5e3)}else $(“#adbreakingnews”).html(“<span>لا توجد نتائج !</span>”)},error:function(){$(“#adbreakingnews”).html(“<strong>خطأ فى التحميل !</strong>”)}})});
//]]>
</script>

3- الان مع الكود الاخير وهذا الكود تضعه في المكان الذي تريده ان يظهر فيه شريط اخر الاخبار.

<div class=’sub-footer’ id=’sub-foo’>
<div id=’breakingnews’><span class=’breakhead’>اخر المواضيع</span>
<div id=’adbreakingnews’>جاري التحميل…</div>
</div>
</div>

ملاحظة اذا لم تعرف المكان قم باخبارنا في تعليق وسنرد عليك في اقرب وقت.
بعدها قم بحفظ القالب، ومشاهدة النتيجة.
كان هذا كل شيء لتدوينة اليوم اتمنى ان تنال التدوينة تعجابكم، سلام.

5 تعليقات

اضف تعليق