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

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

يوجد الآن مشاهدة التعليقات : 58

الموضوع

اقرأ ايضًا

التعليقات

عن الكاتب

تعليمات

الحصول على شريط إخباري لقوالب بلوجر ـ هذه التدوينة تمت بطلباتكم المتكررة عليها وقد تم توفيرها لكم بشكلين مختفلين لذا هي بجودتها احترافية وتفي بالغرض في جلب مستجدات المواضيع بحيث تكسب الصفحة ديناميكية ويسهل للزائر التعرف على المواضيع الحديثة في الموقع، ولمن يريد تركيبها فليتابع الشرح الآتي بعد المعاينتان
شرح طريقة التركيب
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😊😉😀😁😎😍😜😑😇💖😯😱😭👍❓🍻

هناك 58 تعليقًا:

  1. خخخخ، للأسف قالبي الإفتراضي بتاع المدونة
    ما يدعم إضافات متطورة مثل هذه خخخ، كنت آمل
    أن يدعمها لكن للأسف :( - http://goo.gl/YTMKKj

    ردحذف
    الردود
    1. جرب وضع هذا الكود فوق </head>
      <script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'/>

      حذف
    2. جميل جدًا، ها قد نجحَت الإضافة رغم أن قالبي باكاا
      افتراضي ولا يدعم الكثير من الإضافات.. كله بفضلك ^^
      باركك الله وبانتظار إضافات أخرى جديدة ~ الأفضل لو تصمم
      لأصحاب المدونات الإفتراضية مثل مدونتي زر الصعود للأعلى، لأني
      جربت أغلب تلك الأزرار ولم تنجح في التناسق مع قالبي، وهذا أمر
      مؤسسف للغاية حبوب حسام كن، تحياتي لك على أية حال :~|

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

      حذف
    4. أريد طريقة إضافة عداد المشاهدات

      حذف
  2. لم تنجح معي بمعنى لم يظهر لي الشكل فقط تظهر الكتابة

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

      حذف
  3. تم اضافته لاكن يكتب داخله recent ولا يظهر شئ

    ردحذف
    الردود
    1. جرب الطريقة التي ذكرتها فوق للأخ Youssef Teqnet02

      حذف
  4. غير معرف12/12/2015

    انا ايضا..
    لم تظهر إلا الكتابة
    مما سبب ثقل في المدونة والمتصفح

    ردحذف
    الردود
    1. من فضلك جرب كذلك الطرق المذكورة للإخوان Youssef Teqnet02 و Leo San ورد علي شكرا

      حذف
    2. غير معرف12/18/2015

      يمكن أن تركبها لي

      حذف
  5. ممكن تركبها لي

    ردحذف
    الردود
    1. أي شكل؟ ارسل دعوة للإميل : info@ar1web.com

      حذف
    2. تم إرسال الدعوة

      حذف
    3. راك مشرف الأن

      حذف
    4. تمت الإضافة والتعديل بنجاح يمكنك حذفي من المدونة الآن، بالتوفيق

      حذف
    5. شكرالك أخي بارك الله فيك شكرا يامبدع

      حذف
  6. شكرا جزيلا اخي الحبيب على تلبية الطلب
    لقد اشتغلت معي بدون مشاكل

    ردحذف
    الردود
    1. سررت بتلبيته أخي الكريم وإني لسعيد لاشتغالها معك

      حذف
  7. كيف تغيير الخط

    ردحذف
    الردود
    1. ابحث في كود الستايل بالمرحلة الأولى عن : tahoma والاخر Droid Arabic Naskh وغيرهم

      حذف
    2. شكرا لك وأستسمح لكثرت طلباتي

      حذف
  8. أخي
    لماذا لا تعمل معي هذه الأضافة

    ردحذف
    الردود
    1. هل جربت الطرق المذكوره في التعليقات؟

      حذف
    2. لا أرى اية طرق من فضلك المرجو الرد

      حذف
  9. اخي العزيز كيف يتغير الخط الي في الصورة http://gulf-up.com/do.php?img=41759الى خط كبير ورائع ارجو الرد اخي العزيز

    ردحذف

  10. اخي حسام كيف يتغير الخط في الصورة http://gulf-up.com/do.php?img=41759الى خط كبير ورائع ارجو الرد اخي

    ردحذف
  11. استاذ حسام انا اضفتها والشكل موجود وكل شي تمام ولكن لاتظهر التدوينا معلق على (جاري التحميل......) علما اني اتبعت جميع الخطوات

    ردحذف
    الردود
    1. مرحبا اخي، هل تستعمل قالب Lycoris النسخة الثالثة؟

      حذف
  12. نعم استخدم قالب Lycoris النسخة الثالثة

    ردحذف
  13. نعم اخي استعمل قالب Lycoris النسخة الثانية ارجو اخي ان يتم تكبير الخط
    في الصورةhttp://www.kuwaiti.co/mlhfyrrqrjw0الى خط كبير وواضح
    ارجو الرد اخي حسام

    ردحذف
    الردود
    1. حسنا قم بالبحث عن هذا : .main-nav li a ستجد في سطرها : font-size: 13px;
      غير الرقم برقم أعلى 16 مثلا...
      ومن فضلك في المرة المقبلة ضع التعليق في مكانه المناسب أي التدوينة أو ركن الأسئلة، تحياتي

      حذف
  14. أخي لم يشتغل معي وجربت الطرق الي ذكرتها فوق؟؟!!!

    ردحذف
  15. اخي لم تطبق معي
    يظهر الشريط بدون الكلام
    ومع اني طبقت الخطرات يلي بالتعليقات

    ردحذف
    الردود
    1. حسنا أرسل لي قالب إلى info@ar1web.com

      حذف
  16. اخي حاولت مع الاكواد ولم تنجح الطريقه ممكن تعملها لي؟؟

    ردحذف
    الردود
    1. أرسل لي دعوة : info@ar1web.com

      حذف
  17. اخي شكراا تم تغير الخط

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

    ردحذف
    الردود
    1. أتستعمل قالب افتراضي من القوالب التي تقدمها بلوجر؟

      حذف
  19. السلام عليكم ورحمة الله وبركاتة
    اخى حسام شكرا على الاضافة الاكثر من رائعة ولكن لا تعمل معى ولا اعرف لماذا
    انظر http://prntscr.com/9nhxzg
    ودا رابط المدونة
    http://16test.blogspot.com.eg/

    ردحذف
    الردود
    1. عليكم السلام، من فضلك قم بتجربة الشكل الآخر إذا اشتغل بدون مشاكل فاتركه وإذا ظهر نفس المشكل فعد مجددا لأنه لربما لديك كود يتداخل مع كود الإضافة لذلك جرب الشكل الآخر

      حذف
  20. السلام عليكم ورحمة الله وبركاته
    جزاك الله خير على الأضافة
    لكن كيف يمكنني ان اجعله ياخذ الاخبار من تاك واحد وليس من الجميع

    ردحذف
    الردود
    1. عليكم السلام هل تستعمل الشكل الأول؟

      حذف
  21. نعم اخي استعمل الشكل الاول

    ردحذف
  22. لكن المواضيع لا تظهر

    ردحذف
  23. لو سمحت
    انا جربت الشكل الاول ونجح وعجبنى
    ولاكن هناك مشكله ان الكلام وجود تحت خلاص
    اريد الكلام فى منتصف الشريط ممكن المساعده

    ردحذف
  24. جربت نفس الطريقة المذكورة بالأعلي ولم تنجح اخي برجاء الرد

    ردحذف
  25. ضهر ولاكن ليس كالشكل الذي يوجد في المعاية ممكن مساعدة و شكراا.

    ردحذف
  26. كيف اتحكم في المواضع التي تعرض والاقسام

    ردحذف
  27. أخي لم يعمل معي هل يمكنك إضافته لي؟

    ردحذف
  28. ممكن مساعدة يا أخي

    ردحذف
  29. أخي عندي مشكلة : يقول لي (!خطأ في جلب التغذية) ، أعتقد إنو حلها سهل فما رايك؟ كيف يمكن إصلاح المشكلة؟

    ردحذف

عن الكاتب :

إرشادات

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

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

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

    كلمة الختام

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