السلام عليكم, في هذه المقالة سأشرح لك طريقة تركيب سكربت شريط أخر الاخبار جاهزة وسهلة التركيب لذا تابع معي خطوة بخطوة :
(خطوة إختياري)إنشاء قسم الادوات (b.section):
تابع الموضوع من هنا
1 إضافة الأداة HTML :
إذهب إلى قسم التنسيق في مدونتك بلوجر وأضف أداة HTML.
2 إضافة السكريبت :
بعد إضافة الأداة قم بتنزيل الكود (رابط التنزيل موجود في أسفل المدونة) و ألصقه داخل الأداة
3 إعدادات السكريبت :
هنا يمكنك من تحديد عدد المقالة الذي تود عرضه في مدونتك, العدد يدل على عدد المقالات.
لا تنسى تغيير هذا برابط موقعك .
هنا مدة التبديل بين عنوان المقالات.
<script src='https://code.jquery.com/jquery-3.5.1.min.js'></script>
<div id='link-home' style='display: none'>https://tajjribaa.blogspot.com</div>
<style>
.beakingnews {width: 100%;line-height: 36px;height: 35px;overflow: hidden;background-color: #fefefe;}
.beakingnews .tulisbreaking{display: block;float: right;padding: 0px 7px;color: #FFF}
#recentpostbreaking ul,#recentpostbreaking li{list-style:none;margin:0;padding:0}
.ticker {font-size: 12px;}
.ticker a {overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}
.item-control {display:none}
</style>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
var url_blog = document.getElementById('link-home').innerText,
numpostx = 10;
$.ajax({
url: '' + url_blog + '/feeds/posts/default?alt=json-in-script&max-results=' + numpostx + '',
type: 'get',
dataType: "jsonp",
success: function(data) {
var posturl, posttitle, skeleton = '',
entry = data.feed.entry;
if (entry !== undefined) {
skeleton = "<ul>";
for (var i = 0; i < entry.length; i++) {
for (var j=0; j < entry[i].link.length; j++)
{
if (entry[i].link[j].rel == "alternate")
{
posturl = entry[i].link[j].href;
break;
}
} posttitle = entry[i].title.$t;
skeleton += '<li><h3 class="ticker"><a href="' + posturl + '" target="">' + posttitle + '</a></h3></li>';
}
skeleton += '</ul>';
$('#recentpostbreaking').html(skeleton);
// kode untuk efek pada breaking news
function tick(){
$('#recentpostbreaking li:first').slideUp( function () { $(this).appendTo($('#recentpostbreaking ul')).slideDown(); });
}
setInterval(function(){ tick () }, 5300);
} else {
$('#recentpostbreaking').html('<span>لاشيء!</span>');
}
},
error: function() {
$('#recentpostbreaking').html('<strong>حدث خطء!</strong>');
}
});
});
//]]>
</script>
<div class='beakingnews'>
<span class='tulisbreaking'><svg enable-background='new 0 0 512 512' height='512' id='Capa_1' style='width: 33px;height: 35px;vertical-align: baseline;fill: #161617' viewbox='0 0 512 512' width='512' xmlns='http://www.w3.org/2000/svg'><g><g><path d='m465.104 504.5c-21.758 0-39.396-16.969-39.396-37.9v-376.267c0-11.158-9.045-20.203-20.203-20.203h-377.802c-11.158 0-20.203 9.045-20.203 20.203v376.267c0 20.932 17.638 37.9 39.396 37.9z' fill='#e7ecf6'/></path></g><g><path d='m39.825 277.213h141.423v161.626h-141.423z' fill='#df75a5'/></path></g><g><path d='m39.825 101.445h353.557v135.362h-353.557z' fill='#ffe07d'/></path></g><g><path d='m484.802 7.5c-10.879 0-19.698 8.819-19.698 19.698v355.072c0 11.158-9.045 20.203-20.203 20.203h-19.193v-312.14c0-11.158-9.045-20.203-20.203-20.203h-356.588v-42.932c0-10.879 8.819-19.698 19.698-19.698z' fill='#d8e2f1'/></path></g><g><path d='m425.707 466.6c0 20.932 17.638 37.9 39.396 37.9s39.396-16.969 39.396-37.9v-438.93c0-10.681-8.306-19.778-18.98-20.157-11.206-.398-20.416 8.568-20.416 19.685v355.072c0 11.158-9.045 20.203-20.203 20.203h-19.193z' fill='#a2b9e2'/></path></g><g><path d='m393.382 269.713h-171.728c-4.142 0-7.5 3.358-7.5 7.5s3.358 7.5 7.5 7.5h171.728c4.142 0 7.5-3.358 7.5-7.5s-3.358-7.5-7.5-7.5z'/><path d='m393.382 302.039h-171.728c-4.142 0-7.5 3.358-7.5 7.5s3.358 7.5 7.5 7.5h171.728c4.142 0 7.5-3.358 7.5-7.5s-3.358-7.5-7.5-7.5z'/><path d='m393.382 334.364h-171.728c-4.142 0-7.5 3.358-7.5 7.5s3.358 7.5 7.5 7.5h171.728c4.142 0 7.5-3.358 7.5-7.5s-3.358-7.5-7.5-7.5z'/><path d='m393.382 366.689h-171.728c-4.142 0-7.5 3.358-7.5 7.5s3.358 7.5 7.5 7.5h171.728c4.142 0 7.5-3.358 7.5-7.5s-3.358-7.5-7.5-7.5z'/><path d='m393.382 399.014h-171.728c-4.142 0-7.5 3.358-7.5 7.5s3.358 7.5 7.5 7.5h171.728c4.142 0 7.5-3.358 7.5-7.5s-3.358-7.5-7.5-7.5z'/><path d='m393.382 431.339h-171.728c-4.142 0-7.5 3.358-7.5 7.5s3.358 7.5 7.5 7.5h171.728c4.142 0 7.5-3.358 7.5-7.5s-3.358-7.5-7.5-7.5z'/><path d='m39.825 478.665h353.557c4.142 0 7.5-3.358 7.5-7.5s-3.358-7.5-7.5-7.5h-353.557c-4.142 0-7.5 3.358-7.5 7.5s3.358 7.5 7.5 7.5z'/><path d='m32.325 438.839c0 4.142 3.358 7.5 7.5 7.5h141.423c4.142 0 7.5-3.358 7.5-7.5v-161.626c0-4.142-3.358-7.5-7.5-7.5h-141.423c-4.142 0-7.5 3.358-7.5 7.5zm15-154.126h126.423v146.626h-126.423z'/><path d='m400.882 101.445c0-4.142-3.358-7.5-7.5-7.5h-353.557c-4.142 0-7.5 3.358-7.5 7.5v135.362c0 4.142 3.358 7.5 7.5 7.5h353.557c4.142 0 7.5-3.358 7.5-7.5zm-15 127.862h-338.557v-120.362h338.557z' xmlns='http://www.w3.org/2000/svg'/> <text direction='rtl' font-size='150' x='360' y='200'>جديد</text><path d='m485.787.018c-.17-.007-.824-.018-.987-.018h-138.21c-4.142 0-7.5 3.358-7.5 7.5s3.358 7.5 7.5 7.5h113.903c-1.85 3.671-2.893 7.816-2.893 12.2v170.3c0 4.142 3.358 7.5 7.5 7.5s7.5-3.358 7.5-7.5v-170.3c-.051-6.594 5.645-12.292 12.429-12.212 6.319.081 11.966 5.868 11.971 12.682v438.93c0 16.763-14.309 30.4-31.896 30.4-.001 0-.001 0-.002 0s-.001 0-.002 0c-17.584 0-31.89-13.637-31.89-30.4v-56.63h11.69c15.274 0 27.7-12.426 27.7-27.7v-149.77c0-4.142-3.358-7.5-7.5-7.5s-7.5 3.358-7.5 7.5v149.77c0 7.003-5.697 12.7-12.7 12.7h-11.69v-304.64c0-15.274-12.431-27.7-27.71-27.7h-349.08v-35.43c0-6.727 5.468-12.2 12.19-12.2h242.98c4.142 0 7.5-3.358 7.5-7.5s-3.358-7.5-7.5-7.5h-242.98c-14.993 0-27.19 12.202-27.19 27.2v35.43h-13.72c-15.274 0-27.7 12.426-27.7 27.7v221.14c0 4.142 3.358 7.5 7.5 7.5s7.5-3.358 7.5-7.5v-221.14c0-7.003 5.697-12.7 12.7-12.7h377.8c7.008 0 12.71 5.697 12.71 12.7v376.27c0 11.681 4.58 22.346 12.093 30.4h-383.403c-17.59 0-31.9-13.637-31.9-30.4v-120.13c0-4.142-3.358-7.5-7.5-7.5s-7.5 3.358-7.5 7.5v120.13c0 25.034 21.039 45.4 46.9 45.4h418.2.002s.001 0 .002 0c25.858 0 46.896-20.367 46.896-45.4v-438.93c0-14.983-11.515-27.13-26.213-27.652z'/></path></path></path></path></path></path></path></path></path></path></g></g></svg></span>
<div id='recentpostbreaking'>جاري التحميل...</div>
</div>