اضافة شريط اخبار عاجلة متحرك اعلى مدونة بلوجربشكل مميز وبدون اخطاء وعن تجربة .
قبل ان اضع لكم اكواد الأضافة قمت بتجربة الاضافة على مدونة خاصة حتى اتأكد بأن الأضافة تعمل بشكل سليم .
اضافة شريط اخبار عاجلة من اهم
اضافات بلوجر فهى تقوم بعرض اخر المشاركات المضافة فى مدونتك عن طريق عرض العناوين بشكل متغير ومنسق ودون ان تسبب اى ثقل للمدونة لأن الاكواد كاملة يتم وضعها داخل قالبك بدون رفع اكواد على استضافة اخرى فهى ملكا لك .
كما تلاحظون بالصورة السابقة شكل الاضافة بعد تركيبها فهى تعرض لكم عناوين المواضيع بشكل متغير متوالى فأذا كانت هذه الاضافة تريد وضعها فى مدونتك فعليك بمتابعة طريقة التركيب .
شرح اضافة شريط اخبار عاجلة الى مدونة بلوجر
قبل اضافة اى اكواد يجب اخذ نسخة احتياطية قبل وضع اى اكواد ومن هنا درس بسيط يعلمك
طريقة اخذ نسخة احتياطية الان ناتى الى الطريقة فى البداية ادخل الى لوحة تحكم مدونتك ومن بعدها اضغط على القالب الأن اضغط على تحرير HTML
الان قم بالبحث عن هذا الكود :
</head>
ضع قبلة مباشرة هذا الكود :
<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:#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 != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
var url_blog = 'http://www.bnhawy.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-->
</b:if></b:if>
<div style='clear: both;'/>
ملحوظة هامة :
بأمكانك تغيير كلمة اخبار عاجلة الى كلمة اخرى من خلال الكلمة المحددة باللون الاحمر
اذا كنت تريد تغيير كلمة عاجل وهى تظهر اثناء عملية التحميل المحددة باللون الازرق
(( لا خير فى كاتم العلم ))
تعليقات
إرسال تعليق