[شرح] كيفية تركيب شريط أخبار متحرك الى مدونات بلوجر

 

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

• كود عرض آخر المواضيع بشكل متحرك .

السلام عليكم،

أهلاً ومرحباً بكم جميعاً في موضوع جديد لكل مالكي مدونات ومجلات منصة التدوين بلوجر ، أقدم اليكم اليوم خصيصاً اضافة رائعة يمكنها ان تزين شكل مدوناتكم وتجعلها تنبض بالحياة .

انها اضافة شريط عناوين الاخبار الرائع الذي يعطي المدونة رونقاً آخر ، شاهد الصورة >>

شرح كيفية تركيب شريط اخبار متحرك للبلوجر مجاناً

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

والآن نأتي الى طريقة تركيب الشريط داخل المدونة، وقبل البدء بأي تغيير يجب عليك أخذ نسخة احتياطية من القالب في حالة حدوث اي مشاكل يمكنك استرجاع القالب مرة أخرى، تابع معي : –

1. ادخل الى لوحة التحكم ثم اختر التبويب “قالب”.
2. اضغط على تحرير html .
3. ابحث عن الوسم </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>

5. يمكنك تغيير لون الخبر المتحرك في الشريط بواسطة تغيير رمز اللون من الكود السابق “تم تلوين الكود بالاحمر” .
6. ثم ابحث عن الكود .

   <div class='main-outer'>

7. ضع هذا الكود فوقه مباشرة .

   <!-- 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://xxxxx.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 
   //]]>
   </script>
   <!--<script src="https://afkarpro-dev.googlecode.com/svn/trunk/Recent Post Breaking for Blogger By .js" type='text/javascript' />-->
   </b:if></b:if>

8. قم بتعديل الاجزاء الملونة بالاحمر في الكود السابق الى ما يلي
   1. الرابط xxxx.blogspot.com الى رابط مدونتك .
   2. العدد 15 قم بتغييره الى عدد المواضيع التي تريدها الظهور .
   3. الرقم 8000 هو 8 ثوان يمكنك تعديله الى ما تشاء .
9. احفظ القالب .

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

والسلام عليكم ورحمة الله وبركاته .