إضافة شريط آخر الأخبار إلى البلوجر

السلام عليكم

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

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

شرح طريقة اضافة الشريط الى المدونات

نتوجه الى المدونة >> قالب .
تحرير 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: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:#21b8ff;
-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: 12px;
line-height: 37px;padding-right: 10px;padding-left: 10px;font-weight: normal;
text-transform: uppercase;}
#recentpostbreaking{float:right;padding-right: 15px;;font-size:12px;}
#recentpostbreaking ul,#recentpostbreaking li{list-style:none;margin:0;padding:0}
#recentpostbreaking li a{color:#333; font-family:droidkufi-bold;font-size:12px;}
</style></b:if></b:if>

المرحلة الثانية نبحث مرة أخري عن الكود

<div class='main-outer'>

ثم نضيف الكود التالي فوقه "قبل الكود السابق"

<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://hukmat.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>

لا تنسى تغيير رابك مدونتي برابط مدونتك Hukmat.blogspot.com

إضافة شريط آخر الأخبار إلى البلوجر

مقالات ذات صلة

3 التعليقات