كيفية تركيب شريط إخباري متحرك بشكل احترافي لمدونات بلوجر How to install a moving Newsreel

How to install a moving Newsreel

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

How to install a moving Newsreel

تركيب شريط إخباري متحرك بشكل احترافي

- قم بالدخول الى لوحة تحكم بلوجر. > واختر المدونة المراد العمل عليها > اضغط على قالب من الجهة اليمنى > وبعدها قم بالضغط على تحرير Html

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

- اضغط على Ctrl + F سيظهر لك مربع بحث داخل تحرير الهوتميل.

اكتب فيه.هذا الكود 

</head>

 - الان قم بنسخ الكود التالى فوقة مباشرة

<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 : كود اللون الخاص بـالعناوين أثناء المرور بالفأرة عليها.

- الان قم بالضغط مرة أخرى على Ctrl + F وابحث عن الكود.

<div class='main-outer'>

- قم بنسخ الكود التالى فوقة مباشرة

<!-- Start - Recent Post Breaking for Blogger --> <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> <!-- Recent Post Breaking for Blogger By afkarpro.blogspot.com --> <script type='text/javascript'> //<![CDATA[ $(document).ready(function () { var url_blog = 'http://www.ebq.co/', // غير هذا الرابط برابط مدونتك 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('<b>هناك مشكل في تحميل المواضيع !!</b>'); } }); }); // Recent Post Breaking for Blogger By afkarpro.blogspot.com //]]> </script> <!--<script src="https://afkarpro-dev.googlecode.com/svn/trunk/Recent Post Breaking for Blogger By afkarpro.blogspot.com.js" type='text/javascript' />--> </b:if></b:if> <!-- End - Recent Post Breaking for Blogger By afkarpro.blogspot.com -->

استبدل الرابط باللون الأحمر برابط مدونتك.

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