19‏/11‏/2013

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

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


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


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

أولاً توجه إلى لوحة التحكم في مدونتك > القالب ثم نضغط على زر تحرير 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 هو لون النص

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


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




هناك 6 تعليقات

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

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

      حذف
  2. تم بحمد الله الانتهاء من كتاب مطبخ حواء الجديد (الإصدار الثالث )

    بعد جهد كبير صدر كتابنا الذي ننتظره جميعآ بحلته الجديدة ,

    والذي يحتوي على بابين جديدين للاطباق الهندية والصينية الحصرية

    حيث تم جمع مادة الكتاب من المسابقة الكبرى للاطباق الهندية والصينية التي اجريت عام 2009

    بين الاف العضوات وتم اختيار افضل الاطباق التي قدمت للمسابقة
    وتقديمها حصريآ لكم بالخطوات المصورة من عضواتنا المميزات

    مع اختلاف البلاد العربية والخليجية

    بالاضافة الى الابواب الاخرى (بالصور المجددة لتضيف جمال لكتابنا القيم) :

    للاطباق الرئيسية

    المقبلات

    العصائر

    المعجنات

    الحلويات الشرقية والغربية

    والذي ستزين سفرتك بأطباق متجددة ومميزة

    اطباقنا تم اختيارها وانتقاءها لتناسب كافة الاذواق


    اكسبي زوجك وخففي مصروفاتك, 13938361631.pngاكسبي زوجك وخففي مصروفاتك, 13450_1335023933.gif
    المصدر: منتديات بيت حواء - من قسم: كتاب مطبخ حواء

    http://forum.hawahome.com/t463277.html

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

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

      حذف

تعليقاتكم تشجعنا على تقديم المزيد وهي محل إهتمامنا دائمًا

© جميع الحقوق محفوظة مداد الجليد 2013 - حقوق الطبع والنشر | مدعومة بكل فخّر من blogger | سياسة الخصوصية