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

فايزه ركابي - Fayza Rekaby

اخر تحديث :

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

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

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

تجربة الإضافة على مدونتي الخاصة

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

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

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

أهمية إضافة شريط اخبار

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

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

طريقة الإضافة اتبع الخطوات خطوة بخطوة :

قم بالتوجه إلى لوحة التحكم بمدونتك على بلوجر

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

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

قم بالبحث عن الكود التالي بالاستعانة بلوحة التحكم بعد أن تضغط علي (CTRL+F) </head>
وقبله تماما قم بلصق احد اكواد الألوان التالية حسب اختيارك.

 
  
white
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<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:#E1E1E1;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>
  
  
  Green
  
  
  <b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<style type='text/css'>
#beakingnews{width:980px;margin:0 auto;line-height:25px;height:25px;background: #29BD9E;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>
  

Red

<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<style type='text/css'>
#beakingnews{width:980px;margin:0 auto;line-height:25px;height:25px;background:#CC1B1B;overflow:hidden;margin-top:5px;}
#beakingnews .tulisbreaking{display:block;float:right;padding:0 7px;margin:0 0px 0 0;color:#E1E1E1;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>

 

  <b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
var url_blog = 'https://fayzarekaby.blogspot.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 != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<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-->
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
var url_blog = 'https://fayzarekaby.blogspot.com/', // رابط بلوجر على سبيل المثال https://fayzarekaby.blogspot.com
numpostx     = 10; // Jumlah artikel yang di tampilkan
$.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>

ضع رابط مدونتك مكان رابط مدونة https://fayzarekaby.blogspot.com/

بأماكنك تغيير كلمة أحدث الأخبار -أضغط علي رابط الموضوع الى كلمة أخرى باختيارك. اذا كنت تريد تغيير كلمة عاجل وهى تظهر اثناء عملية التحميل المحددة بلون أخر برغبتك.

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

أعزائي أصدقاء القرية الذكية أسعدونا بتعليقاتكم الهامة إذا أعجبكم المقال شكرا لكم.

تعديل المقال

الأقسام المدونة

بواسطة : فايزه ركابي - Fayza Rekaby

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

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

تعليقات

إرسال تعليق