تركيب شريط إخباري متحرك بشكل احترافي لعرض أحدث المواضيع على مدونات بلوجر

شاركه على Facebookشاركه على +Googleشاركه على Twitterأضفه إلى Deliciousأضفه إلى StumbleUponأضفه إلى Digg

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

طريقة تركيب هذه الإضافة :

1- قم بتسجيل الدخول إلى لوحة تحكم مدونتك و اضغط على قالب من القائمة الجانبية.

2- ثم أنقر على "تحرير Html".

* لا تنسى أخذ نسخة إحتياطية لقالب مدونتك، لاسترجاعها عند حدوث أي خطأ ( تعلم كيف تقوم بأخد نسخة إحتياطية لقالب مدونتك و استرجاعها عند الضرورة ).

3- بعد ذلك اضغط على Ctrl + F للبحث عن السطر أسفله :

</head>

4- ثم انسخ فوقه مباشرة الكود التالي :

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>
#beakingnews{width:100%;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:#555;
-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;}
#recentpostbreaking li a:hover{color:#666;}
</style>
</b:if></b:if>

** استبدل كود الألوان التالية بمايتناسب مع مدونتك : 
* #555 : كود اللون الخاص بخلفية "أحدث المواضيع".
* #333 : كود اللون الخاص بـالعناوين.
* #666 : كود اللون الخاص بـالعناوين أثناء المرور بالفأرة عليها.


5- قم بالضغط مرة أخرى على Ctrl + F للبحث عن السطر أسفله :

<div class='main-outer'>

6- ثم انسخ فوقه مباشرة الكود التالي :

<!-- Start - Recent Post Breaking for Blogger -->
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>  <div id='beakingnews'><span class='tulisbreaking'>أحدث المواضيع <b>>></b></span><!-- غير عبارة أحدث المواضيع بالعبارة التي تناسبك -->
    <div id='recentpostbreaking'>تحميل ...</div><!-- -->
  </div><!-- Recent Post Breaking for Blogger By afkarpro.blogspot.com -->

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
var url_blog = 'http://afkarpro.blogspot.com/', // غير هذا الرابط برابط مدونتك
numpostx     = 15; // عدد المواضيع التي تريدها أن تظهر على الشريط
$.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);
// Recent Post Breaking for Blogger By afkarpro.blogspot.com
function tick(){
$('#recentpostbreaking li:first').slideUp( function () { $(this).appendTo($('#recentpostbreaking ul')).slideDown(); }); }
setInterval(function(){ tick () }, 8000); } else {
$('#recentpostbreaking').html('<span>لا يوجد أي موضوع !</span>');
        }  }, error: function() {
$('#recentpostbreaking').html('<strong>هناك مشكل في تحميل المواضيع !!</strong>');
       } }); }); // Recent Post Breaking for Blogger By afkarpro.blogspot.com
//]]>
</script>
<!--<script src="https://afkarpro-dev.googlecode.com/svn/trunk/Recent Post Breaking for Blogger By afkarpro.blogspot.com.js" type='text/javascript' />-->
</b:if></b:if> 
<!-- End - Recent Post Breaking for Blogger By afkarpro.blogspot.com -->

* استبدل الرابط باللون الأحمر برابط مدونتك.
* استبدل قيمة numpostx من 15 إلى عدد المواضيع التي تريدها أن تظهر في الشريط.

* عدل على القيمة 8000 بعدد الثواني التي تريد أن يستغرقها كل عنون في الظهور (هنا 8000 تعني 8 ثواني).

7- و قم بحفظ القالب.

*! أتمنى أن أكون قد وفقت في إيصال المعلومة لكم بدون تعقيدات ;)
و إذا واجهت أي مشكل أو لديك أي استفسار لا تتردد في طرح سؤالك وذلك بالرد بتعليق، سأجيب بالتأكيد! إن شاء الله ...

و دمتم في رعاية الله وحفظه