اضافة شريط متحرك لآخر أخبار على بلوجر بشكل احترافي

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

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

الآن نمر لتطبيق الإضافة:

1. توجه للوحة التحكم الخاصة بمدونتك.
2. إختر قالب.
3. تحرير HTML.
4. خذ نسخه احتياطيه ل قالب المدونه قبل إجراء أية تغييرات
5. قم بالبحث عن الوسم </head> بالإستعانة بلوحة التحكم (CTRL + F)
6. قبله تماما قم بلصق احد اكواد الالوان التالية حسب رغبتك :

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

<div class='main-outer'>

8. ونلصق الكود التالي قبله تماما (فوقه) :

<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<div id='beakingnews'><span class='tulisbreaking'>جديد الأخبار</span>
<div id='recentpostbreaking'>جاري التحميل ...</div>
</div>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
var url_blog = 'http://dzbit.blogspot.com', // alamat blogmu contoh
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>

قم باستبدل الرابط التالي http://dzbit.blogspot.com برابط مدونتك .

وصف الكاتب