ربنا لاتؤاخذنا ان نسينا او اخطئنا ربنا ولا تحمل علينا اصرا كما حملته على الذين من قبلنا ربنا لا تحملنا مالا طاقة لنا به واعف عنا واغفر لنا وارحمنا انت مولانا فانصرنا على القوم الكافرين
السلام عليكم
مرحبا بكم في درس جديد ، في هذا الدرس سنقوم بالشرح طريقة اضافة شريط أخر الأخبار على البلوجر بالكود جديد و شغال .
السلام عليكم
مرحبا بكم في درس جديد ، في هذا الدرس سنقوم بالشرح طريقة اضافة شريط أخر الأخبار على البلوجر بالكود جديد و شغال .
من أجل عرض آخر المقالات، من الضروري اضافة شريط متميز بالمدونة . ميزة هذا
الشريط أنه يعطي أو يظهر أخر المواضيع المدونة و بالتالي يمكن لزائر
اختيار و التقل بالسرعة داخلها . أما من الجانب الشكلي ، فيطي شكلا
احترافيا للمدونة كأنك تتوفر على مدونة اخبارية أو ما شابه . بالعموم و
بدون أن أطيل عليكم نتوجه الى الشرح .
شرح طريقة اضافة الشريط الى المدونات
- نتوجه الى المدونة >> قالب .
- تحرير 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><!-- 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 = 'http://edafat.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://edafat.blogspot.com
0 التعليقات :
إرسال تعليق