اضافة شريط متحرك اخر اخبار المدونه بثلاثة الوان احترافيه

اضافة شريط متحرك اخر اخبار المدونه بثلاثة الوان احترافيه

بسم الله والصلاة والسلام على رسول الله اما بعد ، احبتي متابعي مدونة هشام هاشم للمعلوميات والتقنيات ، اليوم سوف نتعرف على اضافة قد شرحتها في سنة 2015 والذي يحتوي على اضافة رائعة في مدونة بلوجر في ما يخص اظهار شريط اخر الاخبار المتحرك والذي يحتوي على ثلاث الوان اختيارية ، وكما شرحنا لكم في الفيديو الامر جد سهل ولا يحتاج الى ان تكون محترف لان الشرح موجود .

في الحقيقة نحن في سنة 2019 وهناك قوالب تتوفر على شريط متحرك باشكال حد احترافية وسريعة ، ولكن هناك من لا يرغب في تغيير القالب يحتاج فقط الى اضافات للمدونة مثل شريط اخر الاخبار احترافي يتم اضافته بطريقة سريعة متجاوبة مع الهواتف الذكية ايضا، ولهذا نحن الان في صدد تقديم لكم هذه الاكواد التي سوف تحتاجها لاظهار اخر المواضيع اسفل قوائم التسميات ونتمنى لكم اعمل موفق ان شاء الله .

اضافة شريط متحرك اخر اخبار المدونه بثلاثة الوان احترافيه

1- من لوحة التحكم -> قالب -> تحرير HTML
2- خذ نسخه احتياطيه لـ قالب المدونه قبل إجراء أية تغييرات

3- قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم (CTRL+F) وبحث عن امر </head>
سوف نقوم باضافة كود شريط اخر الاخبار اعلى </head>

كود شريط اللون الازرق

<b:if cond='data:blog.pageType != "static_page"'><b:if cond='data:blog.pageType != "item"'><style type='text/css'>#beakingnews{width:980px;margin:0 auto;line-height:37px;;overflow:hidden; margin-bottom: 20px; max-height: 37px; overflow: hidden;background: #fff;-moz-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;-webkit-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;background-clip: padding-box;border-left: none;max-height: 37px;}#beakingnews .tulisbreaking{display:block;float:right;padding:0 7px;;color:#FCFCFC;background:#21b8ff;-moz-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;-webkit-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;color: #FFF;font-family:GE SS Two Medium,droidkufi-bold;font-size: 14px;line-height: 37px;padding-right: 10px;padding-left: 10px;font-weight: normal;text-transform: uppercase;}#recentpostbreaking{float:right;padding-right: 15px;}#recentpostbreaking ul,#recentpostbreaking li{list-style:none;margin:0;padding:0}#recentpostbreaking li a{color:#333; font-family:GE SS Two Medium,droidkufi-bold;font-size:14px;}</style></b:if></b:if>

كود شريط اللون الاحمر

<b:if cond='data:blog.pageType != "static_page"'><b:if cond='data:blog.pageType != "item"'><style type='text/css'>#beakingnews{width:980px;margin:0 auto;line-height:37px;;overflow:hidden; margin-bottom: 20px; max-height: 37px; overflow: hidden;background: #fff;-moz-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;-webkit-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;background-clip: padding-box;border-left: none;max-height: 37px;}#beakingnews .tulisbreaking{display:block;float:right;padding:0 7px;;color:#FCFCFC;background:#CC1B1B;-moz-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;-webkit-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;color: #FFF;font-family:GE SS Two Medium,droidkufi-bold;font-size: 14px;line-height: 37px;padding-right: 10px;padding-left: 10px;font-weight: normal;text-transform: uppercase;}#recentpostbreaking{float:right;padding-right: 15px;}#recentpostbreaking ul,#recentpostbreaking li{list-style:none;margin:0;padding:0}#recentpostbreaking li a{color:#333; font-family:GE SS Two Medium,droidkufi-bold;font-size:14px;}</style></b:if></b:if>

كود شريط اللون الاخضر

<b:if cond='data:blog.pageType != "static_page"'><b:if cond='data:blog.pageType != "item"'><style type='text/css'>#beakingnews{width:980px;margin:0 auto;line-height:37px;;overflow:hidden; margin-bottom: 20px; max-height: 37px; overflow: hidden;background: #fff;-moz-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;-webkit-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;background-clip: padding-box;border-left: none;max-height: 37px;}#beakingnews .tulisbreaking{display:block;float:right;padding:0 7px;;color:#FCFCFC;background:#29BD9E;-moz-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;-webkit-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;color: #FFF;font-family:GE SS Two Medium,droidkufi-bold;font-size: 14px;line-height: 37px;padding-right: 10px;padding-left: 10px;font-weight: normal;text-transform: uppercase;}#recentpostbreaking{float:right;padding-right: 15px;}#recentpostbreaking ul,#recentpostbreaking li{list-style:none;margin:0;padding:0}#recentpostbreaking li a{color:#333; font-family:GE SS Two Medium,droidkufi-bold;font-size:14px;}</style></b:if></b:if>

العملية الاخيرة : سوف نقوم بالبحث عن الكود التالي : <div class='main-outer'>
بعدها نقوم بنسخ هذا الكود ونضعه فوق <div class='main-outer'> مباشرة

<b:if cond='data:blog.pageType != "static_page"'><b:if cond='data:blog.pageType != "item"'><div id='beakingnews'><span class='tulisbreaking'>أحدث الأخبار</span><div id='recentpostbreaking'>Loading...</div></div><script type='text/javascript'>//<![CDATA[$(document).ready(function () {var url_blog = 'http://infosati.com/', // alamat blogmu contoh http://mkr-site.blogspot.comnumpostx = 10; // Jumlah artikel yang di tampilkan$.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><a href="' + posturl + '" target="_blank">' + posttitle + '</a></li>'; }skeleton += '</ul>';$('#recentpostbreaking').html(skeleton);// kode untuk efek pada breaking newsfunction tick(){$('#recentpostbreaking li:first').slideUp( function () { $(this).appendTo($('#recentpostbreaking ul')).slideDown(); }); }setInterval(function(){ tick () }, 5000); } else {$('#recentpostbreaking').html('<span>No result!</span>'); } }, error: function() {$('#recentpostbreaking').html('<strong>Error Loading Feed!</strong>'); } }); }); //]]></script></b:if></b:if>