اضافة شريط آخر الأخبار المتحرك بشكل احترافي

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

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

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

طريقة تركيب هذه الإضافة :

1. توجه للوحة التحكم الخاصة بمدونتك.
2. إختر قالب.
3. تحرير HTML.
5. قم بالبحث عن الكود التالي ]]></b:skin> و اضف الكود التالي فوقه
بالإستعانة بلوحة التحكم (CTRL + F)

/* CSS ticker */.ticker {overflow: hidden;}.ticker .title {float: right;width: 150px;height: 40px;line-height: 40px;text-align: center;color: #FFFFFF;background: #2c97de;margin: 7px 6px 7px 0px;}.post-tag{display: inline-block;height: 20px;line-height: 20px;padding: 0px 5px;font-size: 13px;margin-left: 4px;color: #fff !important;font-family: Droid Arabic Kufi, cursive;background-color: #B565BE;}.ticker .ticker-icon {float: right;margin-right: 10px;}.ticker .ticker-icon i {margin-left: 15px;display: inline-block;font-size: 18px;}.ticker .title h6 {float: right;line-height: 40px;font-size: 13px;font-weight: 700;font-family: droid arabic kufi,cursive;}.ticker .tickercontainer {width: 84%;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 {font-size: 12px;float: right;height: 40px;margin-left: 15px;}.ticker ul.newsticker a {white-space: nowrap;padding: 0 7px;color: #FFFFFF;height: 40px;font-size:12px;font-weight:400;}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 {margin-right: 20px;width: 96.3%;overflow: hidden;background: #363b3f;-webkit-box-shadow: inset 0 5px 0 rgba(0,0,0,0.04);-moz-box-shadow: inset 0 5px 0 rgba(0,0,0,0.04);box-shadow: inset 0 5px 0 rgba(0,0,0,0.04);}.PageList .selectnav {margin-top: 8px;}.jari { color: #fff; position: relative; right: 5px; }

ولجعل الشريط متجاوب أضف تحت الكود السابق

@media screen and (max-width:1066px) {.ticker .tickercontainer {width: 80%;}}
@media screen and (max-width:960px) {.ticker .tickercontainer {width: 75%;}}
@media only screen and (max-width:768px){.ticker .tickercontainer {width: 68%;}}
@media only screen and (max-width:640px){.ticker .title{display:none}.ticker .tickercontainer {width: 95%;}}

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

<script src='https://googledrive.com/host/0B0LkZloPKBfWSkI0T0R5VkVMQ0U'/><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>

أتمنى أن يكون الموضوع نال إعجابكم

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