الأربعاء، 23 يوليو 2014

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



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

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

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- و قم بحفظ القالب.


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




ـ
روابط هذه التدوينة قابلة للنسخ واللصق
URL
HTML
BBCode

هناك 3 تعليقات :

  1. عند اكمال خطوات تحميل شريط المدونه المتحرك ياتيني اشعار بان هناك خطاء في html ماذا عليا ان اعمل كي اتجاوز الخطاء

    ردحذف
  2. أتمنى أنك أخدت نسخة احتياطية لمدونتك .

    يجب التركيز أثناء عملية نسخ و لصق الأكواد

    ردحذف
  3. مششششكوووووور جدا أخي الكريم شغالة 100%

    ردحذف