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

على التدوينة

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

معاينة

كود الشريط يمكنك اضافته في آداة 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 استبدلها بمعرف مدونتك

وللحصول عليه ادخل الى لوحة تحكم المدونة ثم إنسخه من شريط عنوان المتصفح

وسطر ايقونة الخلاصات موجود فيه رابط مدونتي كما وضحت سابقاً استبدله
تجربة موفقة (تحـياتـي)

أسفل التدوينة