شريط أخر الأخبار المتحرك الأصدار التانى - عالم المدون

الخميس، 5 مايو، 2016

شريط أخر الأخبار المتحرك الأصدار التانى


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

معاينة الإضافة

معاينة 

شرح التركيب


1- قم بالبحث فى قالب مدونتك عن الوسم <head> ثم قم بوضع الكود التالى فوقة (قبلة)

<link href='http://cdn.jsdelivr.net/darfonts/0.1/tv-tha-tye-wide/stylesheet.css' rel='stylesheet'/>

2- قم بالبحث عن الوسم ]]></b:skin> ثم قم بوضع الكود التالى فوقة (قبلة)

.ticker {overflow: hidden;}
.ticker .title {float: right; width: 110px; height: 40px; line-height: 40px; text-align: center; color: #FFFFFF; background: #333333;}
.post-tag{display: inline-block;height: 20px;line-height: 20px;padding: 0px 5px;font-size: 13px;margin-left: 4px;color: #fff !important;font:13px/1.5em tahoma;background-color: #B565BE;}
.ticker .ticker-icon {float: right;margin-right: 10px;}
.ticker .ticker-icon i {margin-left: 10px;display: inline-block;font-size: 13px;}
.ticker .title h6 {text-align: right; line-height: 38px; font-size: 16px; font-weight: bold;   font-family: ge_ss_tvbold !important; color: #fff;  border-left: 1px solid #464646;border-top: 1px solid #464646;width: 115px;}
.ticker .tickercontainer {width: 91.4%;margin: 0;overflow: hidden;float: right;height: 40px;}
.ticker .tickercontainer .mask {position: relative;top: 8px;overflow: hidden;height: 40px;}
.ticker ul.newsticker {position: relative;right: 100px;list-style-type: none;margin: 0;padding: 0;height: 40px;}
.ticker ul.newsticker li {float: right;padding: 2px;height: 32px;margin-left: 15px;line-height: 20px;}
.ticker ul.newsticker a {white-space: nowrap;padding: 0 7px;color: #FFFFFF;font-size: 13px;font-weight:400;font:13px/1.5em tahoma;font-family: ge_ss_tvbold !important;}
a.post-tag {line-height: 21px;}
.newsticker li:nth-child(1) a.post-tag{background-color: #e5192c;}
.newsticker li:nth-child(2) a.post-tag{background-color: #e5192c;}
.newsticker li:nth-child(3) a.post-tag{background-color: #e5192c;}
.newsticker li:nth-child(4) a.post-tag{background-color: #e5192c;}
.newsticker li:nth-child(5) a.post-tag{background-color: #e5192c;}
.newsticker li:nth-child(6) a.post-tag{background-color: #e5192c;}
.newsticker li:nth-child(7) a.post-tag{background-color: #e5192c;}
.newsticker li:nth-child(8) a.post-tag{background-color: #e5192c;}
.newsticker .recent-title{display: inline-block;}
.ticker ul.newsticker span {margin: 0 0 0 10px;}
.ticker ul.newsticker .sep {display: inline-block;width: 6px;height: 7px;margin: 0 40px;}
.ticker-section {width: 95.5%; overflow: hidden;background-color: #333333;border-top: 1px solid #464646;margin-right: 30px;}
.jari { color: #fff; position: relative; right: 5px; }
@media only screen and (max-width:640px){
.ticker .title{display:none}
.ticker .tickercontainer {width: 95%;}}
.fa-globe:before {content: "\f1ea";}

3- قم بالبحث عن الوسم </body> ثم قم بوضع الكود التالى فوقة (قبلة)

<script>
  //<![CDATA[
(function(e){function n(e,t){var s=e.data("settings");if(typeof t==="undefined")t=false;if(t){i(e)}var o=r(e);e.animate(o.css,o.time,"linear",function(){e.css(s.direction,"0");n(e,true)})}function r(e){var t=e.data("settings");var n=e.children().first();var r=Math.abs(-e.css(t.direction).replace("px","").replace("auto","0")-n.outerWidth(true));var t=e.data("settings");var i=r*1e3/t.speed;var s={};s[t.direction]=e.css(t.direction).replace("px","").replace("auto","0")-r;return{css:s,time:i}}function i(e){var t=e.data("settings");e.css("transition-duration","0s").css(t.direction,"0");var n=e.children().first();if(n.hasClass("webticker-init"))n.remove();else e.children().last().after(n)}function s(e,t){if(typeof t==="undefined")t=false;if(t){i(e)}var n=r(e);var s=n.time/1e3;s+="s";e.css(n.css).css("transition-duration",s)}function o(t,n,r){var i;e.get(t,function(t){var s=e(t);s.find("item").each(function(){var t=e(this),n={title:t.find("title").text(),link:t.find("link").text()};listItem="<li><a href='"+n.link+"'>"+n.title+"</a></li>";i+=listItem});r.webTicker("update",i,n)})}function u(t){var n=t.data("settings");t.width("auto");var r=0;t.children("li").each(function(){r+=e(this).outerWidth(true)});if(r<t.parent().width()||t.children().length==1){if(n.duplicate){itemWidth=Math.max.apply(Math,t.children().map(function(){return e(this).width()}).get());while(r-itemWidth<t.parent().width()||t.children().length==1){var i=t.children().clone();t.append(i);r=0;t.children("li").each(function(){r+=e(this).outerWidth(true)});itemWidth=Math.max.apply(Math,t.children().map(function(){return e(this).width()}).get())}}else{var s=t.parent().width()-r;s+=t.find("li:first").width();var o=t.find("li:first").height();t.append('<li class="ticker-spacer" style="width:'+s+"px;height:"+o+'px;"></li>')}}if(n.startEmpty){var o=t.find("li:first").height();t.prepend('<li class="webticker-init" style="width:'+t.parent().width()+"px;height:"+o+'px;"></li>')}r=0;t.children("li").each(function(){r+=e(this).outerWidth(true)});t.width(r+200);widthCompare=0;t.children("li").each(function(){widthCompare+=e(this).outerWidth(true)});while(widthCompare>=t.width()){t.width(t.width()+200);widthCompare=0;t.children("li").each(function(){widthCompare+=e(this).outerWidth(true)})}}var t=function(){var e=document.createElement("p").style,t=["ms","O","Moz","Webkit"];if(e["transition"]=="")return true;while(t.length)if(t.pop()+"Transition"in e)return true;return false}();var a={init:function(r){r=jQuery.extend({speed:50,direction:"right",moving:true,startEmpty:true,duplicate:false,rssurl:false,hoverpause:true,rssfrequency:0,updatetype:"reset"},r);return this.each(function(){jQuery(this).data("settings",r);var i=jQuery(this);i.addClass("newsticker");var a=i.wrap("<div class='mask'></div>");a.after("<span class='tickeroverlay-right'>&nbsp;</span><span class='tickeroverlay-left'>&nbsp;</span>");var f=i.parent().wrap("<div class='tickercontainer'></div>");u(i);if(r.rssurl){o(r.rssurl,r.type,i);if(r.rssfrequency>0){window.setInterval(function(){o(r.rssurl,r.type,i)},r.rssfrequency*1e3*60)}}if(t){i.css("transition-duration","0s").css(r.direction,"0");s(i,false);i.on("transitionend webkitTransitionEnd oTransitionEnd otransitionend",function(t){if(!i.is(t.target)){return false}s(e(this),true)})}else{n(e(this))}if(r.hoverpause){i.hover(function(){if(t){var n=e(this).css(r.direction);e(this).css("transition-duration","0s").css(r.direction,n)}else jQuery(this).stop()},function(){if(jQuery(this).data("settings").moving){if(t){s(e(this),false)}else{n(i)}}})}})},stop:function(){var n=e(this).data("settings");if(n.moving){n.moving=false;return this.each(function(){if(t){var r=e(this).css(n.direction);e(this).css("transition-duration","0s").css(n.direction,r)}else e(this).stop()})}},cont:function(){var r=e(this).data("settings");if(!r.moving){r.moving=true;return this.each(function(){if(t){s(e(this),false)}else{n(e(this))}})}},update:function(t,n,r,i){n=n||"reset";if(typeof r==="undefined")r=true;if(typeof i==="undefined")i=false;if(typeof t==="string"){t=e(t)}var s=e(this);s.webTicker("stop");var o=e(this).data("settings");if(n=="reset"){s.html(t);s.css(o.direction,"0");u(s)}else if(n=="swap"){s.children("li").addClass("old");for(var a=0;a<t.length;a++){id=e(t[a]).data("update");match=s.find('[data-update="'+id+'"]');if(match.length<1){if(r){if(s.find(".ticker-spacer:first-child").length==0&&s.find(".ticker-spacer").length>0){s.children("li.ticker-spacer").before(t[a])}else{s.append(t[a])}}}else s.find('[data-update="'+id+'"]').replaceWith(t[a]);}s.children("li.webticker-init, li.ticker-spacer").removeClass("old");if(i)s.children("li").remove(".old");stripWidth=0;s.children("li").each(function(){stripWidth+=e(this).outerWidth(true)});s.width(stripWidth+200)}s.webTicker("cont")}};e.fn.webTicker=function(t){if(a[t]){return a[t].apply(this,Array.prototype.slice.call(arguments,1))}else if(typeof t==="object"||!t){return a.init.apply(this,arguments)}else{e.error("Method "+t+" does not exist on jQuery.webTicker")}}})(jQuery);
$(".ticker .jari").each(function () {
 var e = $(this).text();
 if (e.match("recent")) {
  $.ajax({
   url: "/feeds/posts/default?alt=json-in-script&max-results=6",
   type: "get",
   dataType: "jsonp",
   success: function (e) {
    var t = "";
    var n = "<ul>";
    for (var r = 0; r < e.feed.entry.length; r++) {
     for (var i = 0; i < e.feed.entry[r].link.length; i++) {
      if (e.feed.entry[r].link[i].rel == "alternate") {
       t = e.feed.entry[r].link[i].href;
       break
      }
     }
     var s = e.feed.entry[r].title.$t;
     var o = e.feed.entry[r].category[0].term;
     n += '<li><a href="/search/label/' + o + '" class="post-tag">' + o + '</a><h3 class="recent-title"><a href="' + t + '">' + s + "</a></h3></li>"
    }
    n += "</ul>";
    $(".ticker .jari").each(function () {
     $(this).html(n);
     $(this).prev("h2").prepend('<i class="fa fa-thumb-tack"></i>');
     $(this).removeClass("widget-content").addClass("layout-content");
     $(this).find("ul").webTicker();
     $("p.trans").each(function () {
      var e = $(this).text();
      var t = $(this).attr("data-tran");
      $("#pages-wrapper *").replaceText(e, t)
     })
    })
   }
  })
 } else {
  $.ajax({
   url: "/feeds/posts/default/-/" + e + "?alt=json-in-script&max-results=10",
   type: "get",
   dataType: "jsonp",
   success: function (e) {
    var t = "";
    var n = "<ul>";
    for (var r = 0; r < e.feed.entry.length; r++) {
     for (var i = 0; i < e.feed.entry[r].link.length; i++) {
      if (e.feed.entry[r].link[i].rel == "alternate") {
       t = e.feed.entry[r].link[i].href;
       break
      }
     }
     var s = e.feed.entry[r].title.$t;
     var o = e.feed.entry[r].category[0].term;
     n += '<li><a href="/search/label/' + o + '" class="post-tag">' + o + '</a><h3 class="recent-title"><a href="' + t + '">' + s + "</a></h3></li>"
    }
    n += "</ul>";
    $(".ticker .jari").each(function () {
     $(this).html(n);
     $(this).prev("h2").prepend('<i class="fa fa-thumb-tack"></i>');
     $(this).removeClass("widget-content").addClass("layout-content");
     $(this).find("ul").webTicker();
     $("p.trans").each(function () {
      var e = $(this).text();
      var t = $(this).attr("data-tran");
      $("#pages-wrapper *").replaceText(e, t)
     })
    })
   }
  })
 }
});
  //]]>
</script>

4- الأن مع الكود الخاص باظهار الشريط يمكنك وضع فى المكان الذى تريد ومن الممكن ان يتم وضعه أسفل القائمة العلوية كما فى المعاينة .

<div class='clear'/>
<div class='ticker ticker-section' id='ticker'>
   <div>
     <div>
<div class='content-wrap container-wrapper '>
  <div class='title second-color-bg '>
        <div class='ticker-icon'> <i class='fa fa-newspaper-o icon'/> </div>
        <h6>أخبار حصرية</h6>
      </div>
  <div class='jari'>
    recent
  </div>
       </div>
</div>
   </div>
 </div>

وهذا كل شئ فى موضوع اليوم اذا واجهتك اى مشكلة فى تركيب الإضافة او تريد التعديل على اى شئ ، فباب التعليقات مفتوح لا تتردد ! وادعمنا بمشاركة التدوينة ليستفيد منها الجميع :)

شارك الموضوع ليستفيد الجميع

مواضيع مهمه ايضا سوف تعجبك

30 تعليق على موضوع : شريط أخر الأخبار المتحرك الأصدار التانى

اضافة جميل اخي ممكن تركيبها في مدونتي

شكرا لك اخى
تابع الشرح والتركيب سهل اخى

هل يتم إضافة الكود الأخير في التخطيط ؟؟

لا اخى يتم وضعه فى القالب فى المكان الذى تريده

اخي لقد نزلت قالب مدونة المحترف واريد التعديل عليه مثل مدونتك ولكني لا اعرف هل تساعدني

اهلا بك اخى قالب المحترف تصميمه غير تصميم قالب المدونة الخاصه بنا
اطلب ما تريد المرة القادمة فى المكان المخصص له ( ركن الأسئلة )

ولكنه مشابهة لقالبك في بعض الاشياء هل تساعدني في تغيير بعض الاشياء

لا مشكلة اخى ولكن اطلب ما تريد المرة القادمة فى المكان المخصص له ( ركن الأسئلة )

أخي أين يمكن وضع الكود الاخير

أين هي القائمة العلوية في القالب

يمكنك وضع أما اسفل القائمة العلوية أما اسفل القائمة الرئيسية

هل انت لديك قائمةعلوية امالا

أنا عندي قالب المحترف 2017 اخر اصدار اين بالضبط أخي

لدي قالب المحترف الاصدار الاخير اين بالضبط أخي

القائمة العلوية باسم menu-top فى قالب المحترف

القائمة العلوية باسم menu-top فى قالب المحترف

تم تركيب الاكواد بنجاح لكن الشريط يظهر اسود فارغ ’ كيف يمكنني اضافة الاخبار التي اريده انت تمر فيه

ارجو الرد سريع يا اخواني

من الممكن اخى انك قمت بعمل شئ غلط
او ان شريط الأخبار لا يتوافق مع مدونتك

أخي انا لدي الاضافة في الاصل أتت مع القالب ولكن لا يتحرك كلام بها أو أي شئ
رابط المدونة للمعاينة alshabh4download.blogspot.com
اردت أن احذفها واضفها من جديد فقمت بالبحث عن الاكواد التي قمت بوضعها لاحذفها ولكني لم اجدها هل من حل أرجو الرد وشكرا

من الممكن اخى انها تعمل من التخطيط
واذا لم تحل معك المشكلة ارسل لى القالب اقوم بتجربته لانى لم اعمل هلى هذا القالب من قبل

شكرا أخي علي الرد انا قمت بتركيب هذا القالب علي مدونة أخري واشتغل معي ولكن علي هذه المدونة لم يعمل لا أعرف السبب واذا أردتني أن أرسله لك أرجو ان تخبرني بطريقة لارسله لاني لا استطيع ارساله هنا وشكرا لك

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

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

لم افهمك اخى ارجو التوضيح

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

قمت بتحديث الأكواد جرب الأن

اخى الكريم لقد قمت بوضع الاكواد مرة اخرى وانا ولكن يظهر لى رسالة فى متصفح فاير فوكس
قد يكون النصّ البرمجي على هذه الصّفحة مشغولا، أو أنّه توقف عن الاستجابة. يمكنك إيقاف هذا النّص الآن، أو فتح النص البرمجي في المصحح أو المواصلة لرؤية فيما إذا كان سينهي تنفيذه.
نص برمجي: http://code.jquery.com/jquery-1.10.2.min.js:6
يرجى تصحيح هذا الخطأ :-? :(

أرجو من وضع رابط مدونتك للمعاينة

وقمت بتوفير رابط معاينة يمكنك مشاهد الإضافة الأن

يسعدنا تفاعلكم بالتعليق ولكن نرجو منكم أن يكون خاص بالموضوع
الأبتساماتأخفاء الأبتسامات

جميع الحقوق محفوظة لـ عالم المدون | قوالب بلوجر,اضافات بلوجر, دروس وشروحات بلوجر