شريط آخر الأخبار المتحرك مع التسميات

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

معاينة

طريقة تركيب شريط آخر الأخبار المتحرك مع التسميات

ابحث عن الوسم ]]></b:skin> و اضف الكود التالي فوقه

.ticker {overflow: hidden;}
.ticker .title {float: right; width: 130px; height: 40px; line-height: 25px; text-align: center; color: #FFFFFF; background: #31465B url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8ahRX5Lc8Se8E5KRaEj7NQWnR9KnG4y6miukAKlWIhlADShgG1_yHaSTlpcCIIVyL4xKbxe-ZO2baNjG9abcG2SVgKf1r62gPmU1wd0k7WE83YbEdMB_VU8BLteOOK3L-LzcPJmh6sUU/s1600/pattern-1.png);}
.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; margin-top: 10px;}
.ticker .ticker-icon i {margin-left: 15px;display: inline-block;font-size: 18px;}
.ticker .title h6 {text-align: right; line-height: 0px; font-size: 13px; font-weight: bold;position: relative;
top: -8px; color: #fff;}
.ticker .tickercontainer {width: 82%;margin: 0;overflow: hidden;float: right;height: 40px;}
.ticker .tickercontainer .mask {position: relative;top: 6px;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: 40px;margin-left: 15px;}
.ticker ul.newsticker a {white-space: nowrap;padding: 0 7px;color: #000000;font-size: 13px;font-weight:400;font:13px/1.5em tahoma;border-radius: 5px;}
a.post-tag {line-height: 21px;}
.newsticker li:nth-child(1) a.post-tag{background-color: #2C97DE;}
.newsticker li:nth-child(2) a.post-tag{background-color: #A557A5;}
.newsticker li:nth-child(3) a.post-tag{background-color: #1E73BE;}
.newsticker li:nth-child(4) a.post-tag{background-color: #DD3333;}
.newsticker li:nth-child(5) a.post-tag{background-color: #E94B35;}
.newsticker li:nth-child(6) a.post-tag{background-color: #1EBE65;}
.newsticker li:nth-child(7) a.post-tag{background-color: #F7B625;}
.newsticker li:nth-child(8) a.post-tag{background-color: #479123;}
.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: 100%; overflow: hidden; background: #F7F7F7;border-bottom: solid #31465B 2px;position: relative;
}

الان ابحث عن الوسم </body> و اضف الكود التالي فوقه

<script src='https://cdn.rawgit.com/cnblogger/cn3u/master/Ticker.js'/>
<script>
  //<![CDATA[
$(".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>

الان الخطوة الاخيرة

الكود التالي هو المسئول عن عمل الإضافة بحيث يمكنك إضافته في المكان الذي تُريده

اسفل القائمة أعلى المدونة يمكنك إضافته في اي مكان

<div class='clear'/>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<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-spinner fa-pulse'/> </div>
        <h6>آخبار الموقع</h6>
      </div>
  <div class='jari'>
    recent
  </div>
       </div>
</div>
   </div>
 </div>
</b:if></b:if>

في أمان الله

أي أستفسار حول الموضوع ضعه في تعليق 

شارك المقالة عبر:

إقرأ أيضا