U3F1ZWV6ZTM5ODcyMTQzOTA5X0FjdGl2YXRpb240NTE2OTYzNzg1NzM=
recent
أخبار ساخنة

شريط اخباري منزلق مع الازرار الاجتماعية

JQuery News Ticker
كنا قد عرضنا سابقاً شريط اخباري لكنه متحرك وليس منزلق الفرق ان الشريط المتحرك يعتمد على التحرك في اتجاه اليمين او اليسار وتبدأ المواضيع في الظهور وكثير من المستخدمين يفضلونه لخفته اما شريط اليوم هو شريط منزلق يعرض كل خبر بمفرده بشكل متوالي ولهذا يمكن عرضه في مساحة اصغر من الشريط السابق وايضاً يمكن دمجه مع اضافات أخرى وهذا ما حدث قد قمت بعمل ازرار إجتماعية مع الشريط ليكون آداة متكاملة تغني عن كثير من الادوات يمكنك معاينة الشريط من الرابط التالي
كود الشريط يمكنك اضافته في آداة HTML/JavaScript


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
<style type='text/css'>
#news {
  background:#fff;
  box-shadow: 0 0 1px #777;
  display: block;
  float: right;
  height: 30px;
  overflow: hidden;
  width: 100%;
}

.titlenews {
  background: #d1000e;
  color: #fff;
  display: block;
  float: right;
  font: bold 14px/2em Tahoma;
  height: 100%;
  text-align: center;
  width: 100px;
}

#cnmunsup {
  float: right;
  line-height: 1.7em;
  margin-right: 20px;
}

#cnmunsup ul, #cnmunsup li {
  list-style: none;
  margin: 0 0 50px;
  padding: 0;
}

#cnmunsup li a {
  color: #D1000E ;
  font: bold 14px/2em Tahoma;
  text-decoration: none;
}
#cnmunsup li a:hover {color:#000;}
.sosiuln {
  float: left;
  list-style: none outside none;
  margin: 0;
  padding: 0;
}
.sosiuln li {float: left;}
.sosiuln {
  float: left;
  list-style: none outside none;
  margin: 0;
  padding: 0;
}
.sosiuln li {float: left;}
.sosiuln li a {
  background-color: #d1000e;
  background-image: url("https://lh4.googleusercontent.com/-I88QzSxT_Ro/VK0sbXS5VnI/AAAAAAAAFVk/UuNvaBc0wAQ/s456/socia-white.png");
  background-repeat: no-repeat;
  display: block;
  height: 30px;
  transition: all 0.8s ease 0s;
  width: 30px;
}
.sosiuln li a:hover {background-color: #777 !important;}
.neface a {
  background-color: #39599f !important;
  background-position: 3px 3px !important;
}
.netwetter a {
  background-color: #44b0e3 !important;
  background-position: 3px -50px !important;
}
.negplus a {
  background-color: #393939 !important;
  background-position: 4px -103px !important;
}
.neyoutube a {
  background-color: #da4038 !important;
  background-position: 3px -158px !important;
}
.neinstgram a {
  background-color: #614b3d !important;
  background-position: 3px -213px !important;
}
.neblogger a {
  background-color: #eb6302 !important;
  background-position: 3px -267px !important;
}
.nemail a {
  background-color: #017e22 !important;
  background-position: 3px -320px !important;
}
.nefeedb a {
  background-color: #ee3a43 !important;
  background-position: 3px -375px !important;
}
.nerss a {
  background-color: #e0a504 !important;
  background-position: 4px -428px !important;
}
 </style>
<div id='news'>
<span class="socialicne">
<ul class="sosiuln">
<li class="neface"><a href="#" rel="nofollow" target="_blank"></a></li>
<li class="netwetter"><a href="#" rel="nofollow" target="_blank"></a></li>
<li class="negplus"><a href="#" rel="nofollow" target="_blank"></a></li>
<li class="neyoutube"><a href="#" rel="nofollow" target="_blank"></a></li>
<li class="neinstgram"><a href="#" rel="nofollow" target="_blank"></a></li>
<li class="neblogger"><a href="http://www.blogger.com/follow-blog.g?blogID=XXXXXXX" rel="nofollow" target="_blank"></a></li>
<li class="nemail"><a href="#" rel="nofollow" target="_blank"></a></li>
<li class="nefeedb"><a href="#" rel="nofollow" target="_blank"></a></li>
<li class="nerss"><a href="http://cnmu.blogspot.com/feeds/posts/default" rel="nofollow" target="_blank"></a></li>
</ul>
</span>
<span class='titlenews'>آخر الأخبار</span>
<div id='cnmunsup'>جاري التحميل ...</div>
</div>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
var url_blog = 'http://cnmu.blogspot.com',
numpostx     = 20;
$.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>';
            $('#cnmunsup').html(skeleton);
            function tick(){
            $('#cnmunsup li:first').slideUp( function () { $(this).appendTo($('#cnmunsup ul')).slideDown(); });
            }
        setInterval(function(){ tick () }, 5000);
        } else {
            $('#cnmunsup').html('<span>لا توجد نتائج !</span>');
        }
    },
    error: function() {
            $('#cnmunsup').html('<strong>خطأ في تحميل الخلاصات !</strong>');
       }
});
});
//]]>
</script>

إعداد وتنسيق

استبدل http://cnmu.blogspot.com برابط مدونتك مكرر مرتين 
 الرقم 20 هو عدد المواضيع التي تظهر في الشريط
الكود الرمادي في بداية الاكواد يمكنك حذفه ان كان لديك مكتبة جي كويري
 هذا #d1000e هو لون خلفية كلمة آخر الأخبار
مجموعة الروابط الملونة الموجوده بين الكودين المعلمان باللون الزهري
كل سطر يخص ايقونة اجتماعية بالترتيب من اليسار لليمين ان حذفت اى سطر تحذف ايقونة فيمكنك ان تختار فقط الأيقونات التي ستستخدمها وبالباقي تحذفه
كل سطر فيه رمز # تستبدله بالرابط المناسب
ما عدا سطر أيقونة بلوجر به هذه الأحرف XXXXXXX استبدلها بمعرف مدونتك 
وللحصول عليه ادخل الى لوحة تحكم المدونة ثم إنسخه من شريط عنوان المتصفح
وسطر ايقونة الخلاصات موجود فيه رابط مدونتي كما وضحت سابقاً استبدله
تجربة موفقة (تحـياتـي) 
الاسمبريد إلكترونيرسالة