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

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

معاينة 1 معاينة 2

تابعوا شرح تركيب الشريط 

1. اول خطوة هي أن تضع هذه الأكواد فوق الوسم </head>

<style>
.news-ticker .widget .HTML{display:block}
.news-ticker {height: 55px;background: #1b1b23;overflow: hidden;border-bottom: 1px solid #414141;}
.news-ticker .widget-title{float:right;margin-left:20px;line-height:52px;color:#fff;padding:0 15px;padding-left:0}
.news-ticker ul li{height:55px;padding:11px 0}
.ticker-items{float:left;line-height:52px;padding:0 15px}

.news-ticker .widget-content{float:right}
.ticker-items a {
    color: #ffffff;
    cursor: pointer;
    background: #366299;
    line-height: 33px;
    height: 28px;
    width: 30px;
    display: block;
    border-radius: 5px;
    float: left;
    text-align: -webkit-center;
    margin-top: 14px;
    margin-right: 2px;
    font-size: 14px;
}.newsticker .news-tag{float:right;background:#366299;line-height:32px;color:#fff;padding:0 8px;border-radius:3px;font-size:14px;margin-left:10px}
.newsticker .news-tag:hover {background: #1b1b23;transition: 0.2s;}
.news-ticker .news-title {padding-top: 6px;padding-bottom: 8px;padding-left: 10px;padding-right: 10px;color: white;background: #414141;display: inline-block;border-radius: 4px;}
.news-ticker .news-title:hover{color:#366299}
    display: none;
}
.newsticker .news-tag {
    display: none;
}
.news-ticker .widget-title {
    float: right;
    margin-left: 20px;
    line-height: 52px;
    color: #fff;
    padding: 0 15px;
    padding-left: 0;
}
</style>

1. ثاني خطوة هي ان تحمل هذا السكريبت وتضعه فوق الوسم </body>

<b:if cond='data:blog.url == data:blog.homepageUrl'>

<div class='news-ticker'>
  <b:section id='newsticker'>
    <b:widget id='HTML211' locked='false' title='آخر الاخبار' type='HTML' version='1' visible='true'>
      <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
<div class='widget-title'>
    <h2 class='title'><data:title/></h2>
    </div>  
</b:if>
<div class='newsticker'>
  <div class='widget-content'>
    <data:content/>
  </div>
  </div>
<div class='ticker-items'>
<a id='prev-button'><i class='fa fa-step-backward'/></a>
<a id='next-button'><i class='fa fa-step-forward'/></a>
<a id='stop-button'><i class='fa fa-pause'/></a>
<a id='start-button'><i class='fa fa-play'/></a>
</div>
  <b:include name='quickedit'/>
</b:includable>
    </b:widget>
  </b:section>
</div>
    </b:if>

1. ثم اعمل حفظ للقالب
2. وسنذهب للتخطيط وستظهر لك اداة جديدة باسم newsticker
3. ثم نضع فيه هذا الكود

100/recent