السبت، 5 يوليو 2014

إضافة شريط أخر الأخبار لمدونة بلوجر

بقلم: BR MED يوم السبت، 5 يوليو 2014 القسم : 2 التعليقات
السلام عليكم ورحمة الله وبركاته
مرحبا بكم مجددا في موضوع جديد وحصري لمدونة ورشة مدون اليوم معنا إضافة أخرى رائعة و نجد هذا في المواقع الإخبارية بكثرة و هي شريط أخر الأخبار هذه الاداه تقوم بعرض اخر اخبار المدونه على شكل شريط  افقي متحرك يتم وضعه اسفل الهيدر  بحيث يكسب الصفحة ديناميكية ويسهل للزائر التعرف على المواضيع الحديثة في المدونة .تتميز هذه الاضافه  بجماليتها وبخفتها.
شرح طريقة التركيب:
-1من  لوحة التحكم -> قالب -> تحرير HTML

2- خذ نسخه احتياطيه لـ قالب المدونه قبل إجراء أية تغييرات 

3- قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم CTRL+F

نقوم بالبحث عن الوسم : </head>
ونضع الكود التالي قبله تماما,

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<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: 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;}
</style></b:if></b:if>

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

<div class='main-outer'>
أو
<div id='container'>
أو
<div id='main'>
أو
<div id='content-wrapper'>

ونلصق الكود التالي قبله تماما

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div id='beakingnews'><span class='tulisbreaking'>أحدث الأخبار</span><!-- tag pembuka tempat Breaking News-->
<div id='recentpostbreaking'>Loading...</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://warch-mo.blogspot.com/', // alamat blogmu contoh http://mkr-site.blogspot.com
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>
لا تنسى تغير رابط مدونتي الذي باللون الأحمر
ثم تقوم بحفظ ومعاينة المدونة ومبروك عليك

هناك تعليقان (2):

  1. شكرا جزيلا اخي الكريم
    دائما متألق :)

    ردحذف
    الردود
    1. شكرا أخي الحبيب مرحبا بك في أي وقت :)

      حذف

يسعدنا تفاعلكم بالتعليق , أما لو لديك سؤال خارج الموضوع يرجى استخدام ركن الأسئلة ولإضافة كود قم بتحويله أولابمحول الأكواد , ويمكنك ان تستخدم الإبتسامات بالوقوف عليها لمعرفة الكود
=q =w =s =d =f =g =h =t =y =u =z =x =c =v =b =n =m =a =e =r