إضافة شريط آخر الأخبار لقوالب بلوجر

الموضوع

اقرأ ايضًا

التعليقات

عن الكاتب

تعليمات

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

• الشكل الأول
• الشكل الثاني

شرح طريقة التركيب
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%;}}

الشكل الثاني

/* CSS Breaking News */
#breakingnews {height: 42px; line-height: 29px; overflow: hidden; background: #FFFFFF; border: 1px solid #E6E4E4; width: 95%; margin: 20px auto;}
#breakingnews .breakhead {position:relative;background:none repeat scroll 0 0 #C03032;color:#fff;display:block;float:right;font-size:14px;font-weight:400;text-transform:uppercase;padding:6.5px 22px;    font-family: Droid Arabic Naskh;}
#adbreakingnews li a {font:13px/1.5em tahoma;font-weight:400;color:#666;margin-top:10px;transition:all 0.5s ease-in-out;}
#adbreakingnews li a:hover {color:#00AFAF;}
#adbreakingnews {float:right;margin-right:25px;margin-top:6px;}
#adbreakingnews ul,#adbreakingnews li{list-style:none;margin:0;padding:0}
i.fa.fa-youtube { color: #EC2423; }i.fa.fa-facebook { color: #4770C5; }i.fa.fa-google-plus { color: #F51518; }i.fa.fa-twitter { color: #269bd0; }
li.socright { float: left; padding: 5px 15px; line-height: 33px; margin: 0 0px; background-color:#F7F8F9; font-size: 18px; border-right: 1px solid #EFECEC; }

@media only screen and (max-width:640px){
#breakingnews {margin:20px 0 0 0;margin-right:0;}
#breakingnews .breakhead {padding:6.5px 14px;}
#adbreakingnews {margin-left:50px;}}

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>

الشكل الثاني

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

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

ملحوظة:

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة
5😊😉😀😁😎😍😜😑😇💖😯😱😭👍❓🍻

عن الكاتب : Hussam

إرشادات

تحميل الملفات

نستخدم بمدونتنا مواقع مختلفة في رفع الملفات ونوفر منها إثنان:
• موقع : Mediafire
• موقع :file-upload
• باسوورد فك الضغط للملفات المضغوطة : Ar1web2014
• تجدون روابط التحميل في القوالب والملحقات بجانب التدوينة أي بالسيدبار
• كل ملحق أو قالب يوجد بالمدونة هو للإستعمال الشخصي فقط
• إن تواجد رابط معطوب فالمرجو التبليغ عنه هنا، شكرا.

أين تجدنا؟

بعيدا عن الصفحات المزورة أو المزيفة التي يحاول البعض من خلالها استغلال جهود فريق عمل عرب ويب، هذه هي حساباتنا وصفحاتنا الرسمية في الشبكات الاجتماعية، لا نمتلك سوى هذه الصفحات والحسابات وهي الوحيدة التي تتبع للمدونة : https://www.instagram.com/ar1web


كلمة الختام

في مدونة عرب ويب نسعى دوما جاهدين للتحسن والتقدم وليس ما تراه هو حدودنا! ونحن نقدر كثيرا زوارنا وآراؤهم فإن كان لديك أي اقتراح/نصيحة/ومضة مفيدة/نقد بناء أو ما إلى ذلك يمكنك مشاركتنا كل ما في جعبتك من خلال الإتصال بنا : istoretech3@gmail.com

أخر تعديل كان في يوم السبت 20 يونيو من سنة 2020 ، هذه الصفحة قابلة للتعديل وقت اللزوم