حصرياً شريط أخر المقالات لمدونات بلوجر سلس بإحترافية

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


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


كيفية إضافتها إلى مدونتك أتبع الشرح التالي:

أولاً توجه إلى لوحة التحكم في مدونتك > القالب ثم نضغط على زر تحرير html 
بإستخدام لوحة مفاتيح كمبيوترك نضغط على ctrl+f ثم نبحث عن الرمز </head>

الآن نضيف الكود التالي فوق الرمز </head> مباشرةً 

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>

ملاحظة هامة: هناك الكثير من المدونات التي تحمل نفس الكود 
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>
تفقد مدونتك إذا كانت تحمل نفس الرمز لا حاجة لإضافته قد يكون لديك إصدار أخر من jquery كلها تعمل بشكل جيد يرجى البحث عن كلمة ajax إذا كان هناك رمز يشبه الكود الموجود بالأعلى لا حاجة نهائياً لإضافته مرة أخرى تخطى هذه المرحلة واتبع المراحل الأخرى


  • الآن نبحث عن الرمز </body>
ثم نضيف الكود التالي فوقه مباشرةً


<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
  var url_blog = 'http://madad2.com', // Replace With your Blog Url (Add Blogspo.com url)
    numpostx  = 20; // How many Post do You Want To Show
$.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);

            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>

غير http://madad2.com برابط مدونتك

الرقم 20 هو عدد المواضيع التي سوف تظهر يمكنك تغييرها


  • الآن بعد تطبيق الرموز بالمكان الصحيح إبحث عن الرمز 
</header>
  • ثم أضف الكود التالي أسفله مباشرةً أو حيث تريد ظهور الشريط يمكن إضافته عن طريق التخطيط ثم إضافة أداة ثم أداة HTML/JavaScript  ولصق الكود حيث تريد ظهوره



<style type='text/css'>
#beakingnews {
    background: none repeat scroll 0 0 #F0F0F0;
    border-bottom: 1px solid #191F1D;
    height: 35px;
    line-height: 25px;
    overflow: hidden;
}

#beakingnews .tulisbreaking {
    background: none repeat scroll 0 0 #393939;
    color: #DDDDDD;
    display: block;
    float: right;
    font-family: sans-serif;
    font-weight: bold;
    margin: 0 5px 0 0;
    padding: 5px 10px 5px 30px;
}

#recentpostbreaking{float:right}

#recentpostbreaking ul, #recentpostbreaking li {
    color: #333333;
    font-family: sans-serif;
    font-size: 12px;
    font-weight: bold;
    list-style: none outside none;
    margin: 0;
    padding: 3px;
}

#recentpostbreaking ul, #recentpostbreaking li a {
    color: #000000;
}

</style>
    <div id='beakingnews'><span class='tulisbreaking'>أخر المقالات</span>
<div id='recentpostbreaking'>تحميل...</div>
</div>




  • الان يمكن تخصيص الشريط باللون الذي يناسب مدونتك

393939 هو لون خلفية كلمة اخر المقالات
DDDDDD هو لون الخلفية بشكل عام
000000 هو لون النص

يمكنك تغيير الألوان بما يناسب مدونتك أون لاين بالمدونة  هنا  


أرجو أن تكون مفيدة لنا ولكم إن شاء الله




مشاركات أقدم المقال التالي
5 تعليق
  • admin
    admin 10‏/02‏/2014، 12:15:00 ص

    :-# لم تنجح معي http://hunter-311.blogspot.com/

    • مداد الجليد
      مداد الجليد 10‏/02‏/2014، 12:25:00 ص

      تأكد أن الرمز jquery غير موجود في مدونتك استخدم الطريقة بدون اضافته

  • Unknown
    Unknown 21‏/04‏/2014، 11:01:00 ص

    (h)

  • Unknown
    Unknown 09‏/05‏/2015، 5:28:00 م

    نجحت معى بس لو انا اريد عرض مواضيع من قسم معين ؟

    • مداد الجليد
      مداد الجليد 09‏/05‏/2015، 11:24:00 م

      غير بدل /feeds/posts/default?alt=json-in-script&max-results=
      /feeds/posts/default/-/التسمية-المطلوبة?max-results=

أضف تعليق
عنوان التعليق