Post Top Ad

Your Ad Spot

الجمعة، 12 مايو 2017

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

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

قبل ان اضع لكم اكواد الأضافة قمت بتجربة الاضافة على مدونة خاصة حتى اتأكد بأن الأضافة تعمل بشكل سليم .

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

صورة لشكل الاضافة :
كما تلاحظون بالصورة السابقة شكل الاضافة بعد تركيبها فهى تعرض لكم عناوين المواضيع بشكل متغير متوالى فأذا كانت هذه الاضافة تريد وضعها فى مدونتك فعليك بمتابعة طريقة التركيب . 

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

قبل اضافة اى اكواد يجب اخذ نسخة احتياطية قبل وضع اى اكواد ومن هنا درس بسيط يعلمك طريقة اخذ نسخة احتياطية الان ناتى الى الطريقة فى البداية ادخل الى لوحة تحكم مدونتك ومن بعدها اضغط على القالب الأن اضغط على تحرير HTML

الان قم بالبحث عن هذا الكود :
</head>
ضع قبلة مباشرة هذا الكود :
<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:980px;margin:0 auto;line-height:25px;height:25px;background:#E1E1E1;overflow:hidden;margin-top:5px;}
#beakingnews .tulisbreaking{display:block;float:right;padding:0 7px;margin:0 0px 0 0;color:#FCFCFC;background:#CA2027}
#recentpostbreaking{float:right;padding:0 7px;margin:0 0px 0 0}
#recentpostbreaking ul,#recentpostbreaking li{list-style:none;margin:0;padding:0}
</style>
  </b:if></b:if>
     ملحوظة هامة :     

الكود المحدد باللون الأحمر خاص باللون محيط الاخبار
الكود المحدد باللون الازرق خاص بمحيط اخبار عاجلة 

ثم ابحث عن هذا الكود :
</body>
ضع قبلة مباشرة هذا الكود :
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
var url_blog = 'http://www.kingnt.com/', //replace with your Domain
    numpostx  = 10; //Posts want to display
$.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);
            // kode untuk efek pada breaking news
            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>
  </b:if></b:if>
     ملحوظة هامة :     

ضع رابط مدونتك مكان رابط مدونة كينج نت المحدد باللون الأحمر

بالاخير ضع هذا الكود فى اى مكان تريدة :
<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'>أخبار عاجلة</span><!-- tag pembuka tempat Breaking News-->
<div id='recentpostbreaking'>عاجل...</div><!-- tag tempat daftar Breaking News ditampilkan-->
</div><!-- tag penutup tempat Breaking News-->
  </b:if></b:if>
<div style='clear: both;'/>
     ملحوظة هامة :     

بأمكانك تغيير كلمة اخبار عاجلة الى كلمة اخرى من خلال الكلمة المحددة باللون الاحمر
اذا كنت تريد تغيير كلمة عاجل وهى تظهر اثناء عملية التحميل المحددة باللون الازرق
(( لا خير فى كاتم العلم ))

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

  1. احبائى الكود يعمل بشكل متميز

    ردحذف
  2. ضعوا الاكواد الثلاثة بالترتيب في اداة HTML

    ردحذف
  3. مرحبا
    عملت مثل ماحكيت والشريط ظهر في المدونة ولكنه غير متحرك وفارغ بدون مواضيع

    ردحذف
  4. اخى الكريم عند وضع رابط مدونتك جرب رابطك بدون www بمعنى اذا كان مدونة كينج نت هكذا www.kingnt.com سوف اضع الرابط هكذا kingnt.com بدون https://www
    جرب ومنتظرك ردك

    ردحذف
  5. الاضافة ظهرت في الموقع لكن هل يجب ان نكتب الاخبار يدويا ام انها تظهر تلقائيا ؟
    وشكرا لك على مجهودك

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

    ردحذف

قال تعالى ( مَا يَلْفِظُ مِن قَوْلٍ إِلا لَدَيْهِ رَقِيبٌ عَتِيدٌ )

Post Top Ad