شريط أخبار احترافي يعرض جميع المواضيع

إعلان أدسنس

آخر المواضيع

breaking/مقالات/15
بلوجر

الثلاثاء، 18 أكتوبر، 2016

12:45:00 م

تكبير النص تصغير النص أعادة للحجم الطبيعي
السلام عليكم ورحمة الله تعالى وبركاته
في اول درس بالمدونة بعد افتتاحها مؤخرا أردت ان اقدم لكم اضافة حصرية وجميلة للمدونات التقنية والاخبارية وحتى الرياضية وهذه الاضافة هي عبارة عن شريط أخبار احترافي حيث طلب مني بعض المتابعين على الفيسبوك بنشر هذه الاضافة بكونها تعطي جمالية للقالب أترككم مع المعاية وشرح التركيب.
لمعاينة الاضافة 
معاينة 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>
لتحميل كود السكريبت
  1. وأخيرا يتبقى لك كود ليضهر هذا الشريط
  2. وأحسن مكان له هو فوق القائمة العلوية
  3. لذى سنضع الكود التالي أسفل <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
الى هنا نكون قد وصلنا الى اخر الدرس
ولا تنسوا ان تشاركونا أرائكم لهذه الاضافة
الى اللقاء 
  1. اخي لقد وضعتها ولكن لا تضهر التدوينات

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

      حذف
  2. اخي لقد وضعتها 100/recent ولكن لا تضهر التدوينات لماذا؟

    ردحذف
    الردود
    1. انا ايضا تفضل رابط المدونه http://www.elm5tas.ga/

      حذف
    2. انت تستعمل قالب جزائري ويب وهذا القالب لا يعمل به السلايدرات التلقائية

      حذف
    3. ادا كيف اجعلها تعمل فيه

      حذف
    4. اهلا اخي يبدو ان بعض الاكواد عندما اضعها في صناديق الاكواد تختفي بعض منها لذى من لم تعمل معه الاضافة ان يقوم بتحميل الشرح من خلال هذا الرابط http://up.top4top.net/downloadf-314t9eku1-rar.html

      حذف

أخبار الانترنيت