اضافة شريط اخر مواضيع المدونة بشكل متحرك

السلام عليكم ورحمة الله

مرحبا بكم متابعي مدونة اضافات بلوجر في موضوع جديد

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

هذه الاضافة تجعل شكل المدونة يظهر بشكل رائع للغاية كما تمكن الزوار من الاطلاع على اخر المواضيع في المدونة بمجرد الدخول اليها..

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

أولا يجب عليك الدخول الى لوحة التحكم في بلوجر

بعد ذلك قم باختيار القالب ثم اختر التعديل على HTML

قم بالبحث عن الوسم التالي :

</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: 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 != &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'>جاري التحميل  ...</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://4theblogger.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>

 قم بتغيير الرابط الى رابط مدونتك ثم قم بحفظ التعديلات.

سيتم بعد ذلك اظهار الشريط الذي يحتوي على اخر مواضيع مدونتك بشكل رائع.

تتميز هذه الاضافة بكونها تضفي جاذبية وشكل مميز على مدونتك كما تمكن الزائر من معرفة اخر مواضيعك بسهولة.

الى هنا أكون قد انتهيت من شرح تركيب الاضافة 

أتمنى أن تنال اعجابكم والى اللقاء في موضوع جديد.