اضافة شريط اخبارى لبلوجر

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

الشكل الاول - الشكل الثانى

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%;}}

الشكل الثانى

<script type='text/javascript'>
//<![CDATA[
// Breaking News
$(document).ready(function(){var e="http://rissalat-i.blogspot.com/",t=20;$.ajax({url:""+e+"/feeds/posts/default?alt=json-in-script&max-results="+t,type:"get",dataType:"jsonp",success:function(e){function t(){$("#adbreakingnews li:first").slideUp(function(){$(this).appendTo($("#adbreakingnews ul")).slideDown()})}var n,r,s="",a=e.feed.entry;if(void 0!==a){s="<ul>";for(var l=0;l<a.length;l++){for(var o=0;o<a[l].link.length;o++)if("alternate"==a[l].link[o].rel){n=a[l].link[o].href;break}r=a[l].title.$t,s+='<li><a href="'+n+'" target="_blank">'+r+"</a></li>"}s+="</ul>",$("#adbreakingnews").html(s),setInterval(function(){t()},5e3)}else $("#adbreakingnews").html("<span>لا نتائج!</span>")},error:function(){$("#adbreakingnews").html("<strong>!خطأ في جلب التغذية</strong>")}})});
//]]>
</script>

3. نأتي للمرحلة الأخيرة وهي تخص كود HTML الذي يُظهر الشريط يمكنك وضعه بأي مكان يناسبك تحت الهيدر فوق القائمة إلخ أو يمكنك تجربته بوضعه في أداة Html/Javascript إذا كانت المساحة متواجدة

الشكل الأول

<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>

الشكل الثاني

<div id='breakingnews'><span class='breakhead'><i class='fa fa-rss'/> آخر الأخبار </span>
<div id='adbreakingnews'>... جاري التحميل</div>
<ul>
<li class='socright'>
<a href='#' rel='nofollow' target='_blank'><i class='fa fa-facebook'/></a>
</li>
<li class='socright'>
<a href='#' rel='nofollow' target='_blank'><i class='fa fa-twitter'/></a>
</li>
<li class='socright'>
<a href='#' rel='nofollow' target='_blank'><i class='fa fa-youtube'/></a>
</li>
<li class='socright'>
<a href='#' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/></a>
</li>
</ul>
</div>

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

اتمنا الشرح يعجبكم:

السلام عليكم ورحمة الله

اضفات بلوجر