اضافة شريط اخبار عاجلة متحرك اعلى مدونة بلوجر Breaking News

اضافة شريط اخبار عاجلة متحرك اعلى مدونة بلوجر Breaking News

اضافة شريط اخبار عاجلة متحرك اعلى مدونة بلوجربشكل مميز وبدون اخطاء وعن تجربة .

قبل ان اضع لكم اكواد الأضافة قمت بتجربة الاضافة على مدونة خاصة حتى اتأكد بأن الأضافة تعمل بشكل سليم .

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

شرح اضافة شريط اخبار عاجلة الى مدونة بلوجر 

قبل اضافة اى اكواد يجب اخذ نسخة احتياطية قبل وضع اى اكواد ومن هنا درس بسيط يعلمك طريقة اخذ نسخة احتياطية الان ناتى الى الطريقة فى البداية ادخل الى لوحة تحكم مدونتك ومن بعدها اضغط على القالب الأن اضغط على تحرير HTML

الان قم بالبحث عن هذا الكود :

</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:25px;height:25px;background:#E1E1E1;overflow:hidden;margin-top:5px;}
#beakingnews .tulisbreaking{display:block;float:right;padding:0 7px;margin:0 0px 0 0;color:#FCFCFC;background:#CA2027}
#recentpostbreaking{float:right;padding:0 7px;margin:0 0px 0 0}
#recentpostbreaking ul,#recentpostbreaking li{list-style:none;margin:0;padding:0}
</style>
  </b:if></b:if>

ثم ابحث عن هذا الكود :

 </body>

ثم ضع قبلة هذا الكود :

<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
var url_blog = 'http://http://mrbloggger1.blogspot.com/', //replace with your Domain
    numpostx  = 10; //Posts want to display
$.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>

ملحوظة هامة:
ضع رابط مدونتك مكان رابط مدونة مستر بلوجر | mr blogger 

بالاخير ضع هذا الكود فى اى مكان تريدة :

<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<div id='beakingnews'><span class='tulisbreaking'>أخبار عاجلة</span><!-- tag pembuka tempat Breaking News-->
<div id='recentpostbreaking'>عاجل...</div><!-- tag tempat daftar Breaking News ditampilkan-->
</div><!-- tag penutup tempat Breaking News-->
  </b:if></b:if>
<div style='clear: both;'/>

بأمكانك تغيير كلمة اخبار عاجلة الى كلمة اخرى