اضافة شريط آخر الأخبار

اضافة شريط آخر الأخبار

لإضافة أداة شريط متحرك _ ( آخر الأخبار ) _ وتظهر آخر المواضيع التى قمت بإضافته بشكل إحترافي رائع أفقى متحرك وتظهر مباشرة أسفل الهيدر وتعطى انطباعا للزائر لمدونتك انطباع رائع
وهذا الشريط يسهل على الزائر كيفية معرفة المواضيع المختلفة التى قمت بنشرها على مدونتك بشكل فيه سلاسة وسهولة

نأتى لكيفية إضافة تلك الأداة الرائعة

اتبع الخطوات التالية :

1 - قم بالدخول على لوحة التحكم
2 - اختر قالب _( تصميم )
3 - اضغط على زر تحرير HTML
4 - قم بأخذ نسخة إحتياطية من القالب الخاص بك تحسبا لأى خطأ قد يحدث
5 - اضغط على زرين من لوحة المفاتيح (CTRL+F) وذلك لكى تقوم بعملية البحث داخل القالب
6 - ضع الكود التالي فى مربع الحوار الذى سيظهر بعد الضغط على _ (CTRL+F)

الكود هو

</head>

7 - قبل هذا الكود مباشرة قم بلصق الكود التالي

<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>

*ــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ*

ملحوظة هامة

بالكود أعلاه

توجد جملة (( width:980px )) هذه الجملة خاصة بعرض شريط آخر الأخبار

يمكنك التعديل فقط على الرقم بحيث تتناسب مع شكل مدونتك العام من حيث العرض

وذلك حسب رغبتك ورؤيتك للشكل الجمالى الخاص بمدونتك

*ــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ*

8 - نبحث عن الكود التالي وذلك لإضافة تلك الأداة أسفل الهيدر مباشرة

الكود الذى سنبحث عنه

<div class='main-outer'>

9 - نلصق الكود التالي فوقه تماما مباشرة
الكود كالتالي :

<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 = 'https://learnvbamsexcel.blogspot.com/', // alamat blogmu contoh http://mkr-site.blogspot.com
numpostx     = 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 news
function 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>

10 - استبدل هذا الرابط التالي برابط مدونتك

https://learnvbamsexcel.blogspot.com/

11 - الآن قم بالحفظ ثم قم بتجربة ظهور شريط آخر الأخبار على مدونتك
12 - فى حالة عدم ظهور شريط آخر الأخبار
نعود لنفس الصفحة ونكرر خطوة عملية البحث الخطوة رقم ( 5 )
ونضع فى محرك البحث الذى سيظهر أمامنا الكود التالي

</head>

13 - ونلصق هذا الكود التالي مباشرة فوقه

زوار المدونة

اضافة شريط آخر الأخبار

مقالات متعلقة

إرسال تعليق

خيارات الطباعه فى VBA EXCEL

الشهادات المدرسية ج1

الإستعلام بالصورة من خلال يوزرفورم Userform

اضافة شريط آخر الأخبار

مقالات متعلقة

تعليقات: 0

إرسال تعليق