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

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

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

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

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

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

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

</head>

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

<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<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 للبحث عن السطر أسفله :

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

<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'> <div id='beakingnews'><span class='tulisbreaking'>أحدث المواضيع <b>>></b></span>
    <div id='recentpostbreaking'>تحميل ...</div>
</div>

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

</b:if></b:if>

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

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

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

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

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

عن الكاتبHm

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

مدونة الباحث الليبي

مدونة الباحث الليبي

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

عن الكاتبHm

مقالات قد تهمك