اضافة شريط آخر الأخبار المتحرك بشكل احترافي

اضافة شريط آخر الأخبار المتحرك بشكل احترافي

إضافة شريط / شريط التدوين الآلي البسيط والأنيق في التدوينات الحديثة في مدونة بلوجر - شريط الأخبار العاجلة
هو كنت تحب شريط / شريط التمرير التلقائي للمنشورات و أحد أهم الأدوات المصغرة لكل مدونة بلوجر. بمساعدة شريط الأخبار هذا ، يمكنك بسهولة عرض مشاركاتك الأخيرة في شريط واحد. وأعتقد أنها طريقة جيدة جدًا لجذب زوارك لأنه إذا قمت بإعداد هذه الأداة على مدونتك ، فسيتمكن الزوار من رؤية جميع منشوراتك الأخيرة دون مغادرة الصفحات. لذلك اليوم ، بمساعدة هذا المنشور ، سأوضح لك كيف يمكنك بسهولة إعداد شريط أخبار عاجل في مدونة المدون الخاصة بك. قم أولاً بإلقاء نظرة على شريط  من خلال النقر على زر العرض على blogger 


1 - لأخيرة وتريد إضافته إلى مدونتك الخاصة ، فاتبع الخطوات التالية.

2 - انتقل أولاً إلى لوحة معلومات blogger ،  ثم انتقل إلى قسم "النموذج" ثم انقر فوق الزر "تحرير html".

3-  الآن في محرر القوالب ، ابحث عن الكود أدناه بالضغط على مفتاح "Ctrl + F" معًا من لوحة المفاتيح.

بعد ذلك انسخ كود CSS أدناه والصقه قبل 👈👈  ]]> </ b: skin> 👉👉

#breakingnews {margin:15px 0 0 100px;margin-right:100px;height:40px;line-height:27px;overflow:hidden;background:#fff;border:1px solid #e6e6e6;}#breakingnews .breakhead {position:absolute;background:none repeat scroll 0 0 #363b40;color:#fff;display:block;float:left;font-family:inherit;font-size:16px;font-weight:400;text-transform:uppercase;padding:6.5px 22px;}#adbreakingnews li a {font-weight: bold;font-family: "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,AppleGothic,sans-serif;font-weight:700;color:#666;margin-top:10px;transition:all 0.5s ease-in-out;}#adbreakingnews li a:hover {color:#359bed;}#adbreakingnews {float:left;margin-left:75px;margin-top:6px;}#adbreakingnews ul,#adbreakingnews li{list-style:none;margin:0;padding:0}
@media only screen and (max-width:640px){#breakingnews {margin:20px 0 0 15px;margin-right:15px;}#breakingnews .breakhead {padding:6.5px 14px;}#adbreakingnews {margin-left:50px;}}


1 - الآن مرة أخرى ابحث عن الكود 👈👈 </body> 👉👉 بعد ذلك ، انسخ الكود والصقه قبل </ body>
2 - استبدل  الرابط https://bodhicomputer.blogspot.com المميز  برابط المدونة الخاص بك.
<script type='text/javascript'>
//<![CDATA[
// Breaking News
$(document).ready(function(){var e="https://bodhicomputer.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>No result!</span>")},error:function(){$("#adbreakingnews").html("<strong>Error Loading Feed!</strong>")}})});
//]]>
</script>

الآن قم بتشغيل عقلك وأضف رمز Html حيث تريد إظهار شريط التدوين الأخير هذا. (أضف أي لغة html واحدة)
<b:if cond='data:blog.pageType == "index"'>
<div id='breakingnews'><span class='breakhead'><i class='fa fa-cog fa-spin'/></span>
<div id='adbreakingnews'>Loading...</div></div>
</b:if>
سيظهر على الصفحة الرئيسية فقط
<div id='breakingnews'><span class='breakhead'><i class='fa fa-cog fa-spin'/></span>
<div id='adbreakingnews'>Loading...</div></div>

سيظهر في كل صفحة (على سبيل المثال الصفحة الرئيسية والصفحات الثابتة والمشاركات).
الآن انسخ كود CSS "Font-awesome" أدناه والصقه بعد <head> مباشرة
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
بعد ذلك ، انقر فوق الزر البرتقالي حفظ القالب لتطبيق التغييرات. هذا هو! أتمنى أن يعجبك شريط التمرير التلقائي هذا! ترقبوا المزيد من أدوات المدون!
Tags

إرسال تعليق

0 تعليقات