مساحة إعلانية

الأربعاء، 7 يناير، 2015

الأربعاء، 7 يناير، 2015

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

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 استبدلها بمعرف مدونتك
وللحصول عليه ادخل الى لوحة تحكم المدونة ثم إنسخه من شريط عنوان المتصفح
وسطر ايقونة الخلاصات موجود فيه رابط مدونتي كما وضحت سابقاً استبدله
تجربة موفقة (تحـياتـي)

هناك 26 تعليقًا:

  1. جميل يالغالي هل نقدر نغير حركة الاخبار مثل حركة كتابية مع الوقت الموضوع

    ردحذف
  2. تغييرالحركة لا ينفع أخي فهذا يحتاج تعديل في برمجة السلايدر
    مسالة عدم عمله لديك لا أعرف السبب ربما يكون الجي كويري يكون لديك نسخة غير مضبوطه او انك اضفت المكتبة مرتين هذا غالباً سبب المشكلة

    ردحذف
  3. كود الجي كوري لم انسخه مع الكود لان هو موجود قبل في قالبك التقنيات عصرية .. لم افهم هاي العبارة انك اضفت المكتبة مرتين
    شكرا للرد اخ عمر

    ردحذف
    الردود
    1. أقصد أخي ان تكون لديك آداة بها كود جي كويري وتسبب العطل او ان المساحة التي تضيف با كود الشريط ليست بالحجم المناسب
      فقد جربت الشريط على نفس القالب ويعمل جيدا

      حذف
  4. الشريط الي قبل هذا شغال عادي بس هذا لا وانا اريد هذا يعطيك العافيه يالغالي

    ردحذف
    الردود
    1. هناك حل احذف جميع السطور الخاصة بالأيقونات ان عمل الشريط معك فالمشكلة في المساحة المعروض بها الشريط ان لم يعمل حقيقة لا اعرف السبب فكما اخبرتك انا جربته على نفس القالب وعمل جيداً وبالتوفيق

      حذف
  5. لم يعمل وحذفت كل الايقونات ع كلا يعطيك ربي دوام الصحه والعافية

    ردحذف
  6. الردود
    1. حبيبي يا حج أحمد =s
      تسلم يا غالي

      حذف
  7. واصل تميزك. رووووووعة. شكرا أخي الكريم على المواضيع المميزة. و على الموضوع الأكثر من رائع. بارك الله فيك. و لا تحرمنا من جديدك. مواضيعك جميله جدااااااااااا واكثر من رائعه. نتمنى ان تشرفنا هنا في هذا الركن الحديث http://arabinfoormatic.blogspot.com

    ردحذف
  8. اخي ممكن بعد ازنك طريقة وضع الشريط الاخباري في اقصي الجزئ العلوي من الصفحة ؟

    ردحذف
    الردود
    1. هذا امر لا يمكن شرحه اخي الكريم لانه يختلف من قالب لآخر هذه تحتاج خدمة دعم فني وانا لا اقدم هذا النوع من الخدمات عبر المدونة

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

    ردحذف
    الردود
    1. الشريط يجلب آخر المواضيع في المدونة كعناوين لا علاقة له بالإعلانات أخي الكريم

      حذف
  10. ياخي الشريط لا يشتغل اصلا

    دبرلنا حل لهل موضوع الشريط الي قبله شغال بس هذا مش شغال بتاتا

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

      حذف
  11. جميل أخي علي الشرح الوافي ونشكرك

    ردحذف
  12. أنا عايز اكتب أنا اللى يظهر مش عايز عناوين اخر المواضيع ممكن الكود بس يكون نفس التصميم ومشكور مقدما

    ردحذف
    الردود
    1. هذا غير متاح في تلك الآداة لكن يمكنك مراجعة الموضوع التالي
      http://cnmu.blogspot.com/2014/11/Alert-Message.html

      حذف
  13. سلايد جميل استاذنا

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

    ردحذف
  14. رااااائع
    http://arabyanoo.com/

    ردحذف
  15. لقد اشتغل الكود بشكل جيد، لكن ظهرت مشكلة أخرى وهي انه لدي بمدونتي كود يظهر الاخبار في صور، هدا الاخير توقف عن الاشتغال بعد تشغيل كود آخر الأخبار. اود من فضلك الإبقاء على الكودين بمدوتي فهل من مساعدة؟
    ولك جزيل الشكر.

    ردحذف
    الردود
    1. ربما يكون هناك تعارض بين الكودين
      يمكنك استخدام واحد منهما او العمل على ازالة التعارض
      مسألة الخلاصات سأحاول في موضوع قادم تناول الأمر

      حذف

نسعد ونتشرف بتعليقاتكم
لكن هناك شروط يجب اتباعها لضمان نشر التعليقات
1ان يكون التعليق يخص محتوى الموضوع
2ان لا يحتوي التعليق اى روابط دون داعي
3إن أردت إضافة كود حوله اولا بمحول الأكواد
4أن لا يحتوي التعليق اي الفاظ او اساءات لاى احد
5أى سؤال بعيد عن محتوى الموضوع يرجى استخدام ركن الأسئلة

جميع الحقوق محفوظة لــ كن مدون 2013-2015 ©