اضافة شريط اخر الاخبار بشكل احترافي 2016 بلوجر

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

طريقة الاضافة

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

.ticker {overflow: hidden;}
.ticker .title {float: right; width: 130px; height: 40px; line-height: 40px; text-align: center; color: #FFFFFF; background: #269bd0;}
.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: 15px;display: inline-block;font-size: 18px;}
.ticker .title h6 {text-align: right; line-height: 40px; font-size: 13px; font-weight: bold; font-family: 'Droid Arabic Naskh',sans-serif; color: #fff;}
.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 {float: right;padding: 2px;height: 40px;margin-left: 15px;}
.ticker ul.newsticker a {white-space: nowrap;padding: 0 7px;color: #FFFFFF;font-size: 13px;font-weight:400;font:13px/1.5em tahoma;}
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: #414D58; box-shadow: inset 0 5px 0 rgba(0,0,0,0.04);}
.jari { color: #fff; position: relative; right: 5px; }

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

2. ضع الكود التالي فوق </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'/>
<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-globe'/> </div>
        <h6>آخر الصيحات</h6>
      </div>
  <div class='jari'>
    recent
  </div>
       </div>
</div>
   </div>
 </div>

مهم

التغييرات الأساسية
* في كود الشكل الثاني بالمرحلة 2 غير http://rissalat-i.blogspot.com/ برابط موقعك
* لتحكم في طول الشريط فالمقاسات محددة بالأخضر في كِلا الكودين بالمرحلة 1
* لتغيير لون مربع العنوان فهو محدد بالأزرق بالمرحلة 1
* إذا لم تظهر لك الأيقونات أضف الكود التالي فوق </head>

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'/>

المصدر

شكرن على المتابعة