طريقة عمل شريط أخبار رائع لأحدث الموضوعات

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

يمكنك وضع الشريط في أي مكان تريد والمحبب لمعظم المدونين عرض الشريط أسفل القائمة الرئيسية ولكن يمكن تغيير المكان حسب رؤيتك الشخصية.

الطريقة سهلة وبسيطة ولا تأخذ وقت أو مجهود لا تحتاج إلا 3 خطوات سهلة.

الخطوة الأولى : 

1. قم بالدخول إلى مدونتك التي تريد وضع الشريط بها.
2. ثم أدخل إلى قالب المدونة.
3. إختر كود html للقالب.
4. سنقوم بالبحث عن كود </style> عن طريق الضغط على ctrl+f.
5. سنقوم بنسخ الكود التالي أعلاه مباشرة.

#breakingnews {margin-right:15px;height:30px;line-height:30px;overflow:hidden;width:100%;float:right;}
#adbreakingnews li a {font-family:inherit;font-size:20px;font-weight:800;color:#EE8F04;transition:all 0.5s ease-in-out;}
#adbreakingnews li a:hover {color:#008000;}
#adbreakingnews {float:right;margin-right:165px;}
#adbreakingnews ul,#adbreakingnews li{list-style:none;margin:0;padding:0}
#breakingnews .breakhead {position:absolute;display:block;float:right;font-size:20px;font-weight:700;text-transform:uppercase;padding: 2px 6px;}

الخطوة الثانية:

1. سنقوم بالبحث عن الكود </body>.
2. قم بنسخ الكود التالي أعلاه مباشرة.

<script type='text/javascript'>
//<![CDATA[
// Breaking News by msdesignbd.com
$(document).ready(function(){var e="",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>No result!</span>")},error:function(){$("#adbreakingnews").html("<strong>Error Loading Feed!</strong>")}})});
//]]>
</script>

الخطوة الثالثة:

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

 <div id='breakingnews'><span class='breakhead'><i class='fa fa-refresh fa-spin'/> Latest</span>

<div id='adbreakingnews'>Loading...</div></div>

<div style='clear: both;'/>

مبروك عليك شريط أحدث الموضوعات