4 0 4
نعتذر , لا نستطيع ايجاد الصفحة المطلوبة الصفحة الرئيسية

الخميس، 5 مايو، 2016


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


شرح التركيب


1- قم بالبحث فى قالب مدونتك عن الوسم <head> ثم قم بوضع الكود التالى فوقة (قبلة)

<link href='http://cdn.jsdelivr.net/darfonts/0.1/tv-tha-tye-wide/stylesheet.css' rel='stylesheet'/>

2- قم بالبحث عن الوسم ]]></b:skin> ثم قم بوضع الكود التالى فوقة (قبلة)

.ticker {overflow: hidden;}
.ticker .title {float: right; width: 110px; height: 40px; line-height: 40px; text-align: center; color: #FFFFFF; background: #333333;}
.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: 10px;display: inline-block;font-size: 13px;}
.ticker .title h6 {text-align: right; line-height: 38px; font-size: 16px; font-weight: bold;   font-family: ge_ss_tvbold !important; color: #fff;  border-left: 1px solid #464646;border-top: 1px solid #464646;width: 115px;}
.ticker .tickercontainer {width: 91.4%;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: 32px;margin-left: 15px;line-height: 20px;}
.ticker ul.newsticker a {white-space: nowrap;padding: 0 7px;color: #FFFFFF;font-size: 13px;font-weight:400;font:13px/1.5em tahoma;font-family: ge_ss_tvbold !important;}
a.post-tag {line-height: 21px;}
.newsticker li:nth-child(1) a.post-tag{background-color: #e5192c;}
.newsticker li:nth-child(2) a.post-tag{background-color: #e5192c;}
.newsticker li:nth-child(3) a.post-tag{background-color: #e5192c;}
.newsticker li:nth-child(4) a.post-tag{background-color: #e5192c;}
.newsticker li:nth-child(5) a.post-tag{background-color: #e5192c;}
.newsticker li:nth-child(6) a.post-tag{background-color: #e5192c;}
.newsticker li:nth-child(7) a.post-tag{background-color: #e5192c;}
.newsticker li:nth-child(8) a.post-tag{background-color: #e5192c;}
.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: 95.5%; overflow: hidden;background-color: #333333;border-top: 1px solid #464646;margin-right: 30px;}
.jari { color: #fff; position: relative; right: 5px; }
@media only screen and (max-width:640px){
.ticker .title{display:none}
.ticker .tickercontainer {width: 95%;}}
.fa-globe:before {content: "\f1ea";}

3- قم بالبحث عن الوسم </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>

4- الأن مع الكود الخاص باظهار الشريط يمكنك وضع فى المكان الذى تريد ومن الممكن ان يتم وضعه أسفل القائمة العلوية كما فى المعاينة .

<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-newspaper-o icon'/> </div>
        <h6>أخبار حصرية</h6>
      </div>
  <div class='jari'>
    recent
  </div>
       </div>
</div>
   </div>
 </div>

وهذا كل شئ فى موضوع اليوم اذا واجهتك اى مشكلة فى تركيب الإضافة او تريد التعديل على اى شئ ، فباب التعليقات مفتوح لا تتردد ! وادعمنا بمشاركة التدوينة ليستفيد منها الجميع :)

شارك التدوينه
تنبية هام

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

  1. اضافة جميل اخي ممكن تركيبها في مدونتي

    ردحذف
    الردود
    1. شكرا لك اخى
      تابع الشرح والتركيب سهل اخى

      حذف
  2. هل يتم إضافة الكود الأخير في التخطيط ؟؟

    ردحذف
    الردود
    1. لا اخى يتم وضعه فى القالب فى المكان الذى تريده

      حذف
  3. اخي لقد نزلت قالب مدونة المحترف واريد التعديل عليه مثل مدونتك ولكني لا اعرف هل تساعدني

    ردحذف
    الردود
    1. اهلا بك اخى قالب المحترف تصميمه غير تصميم قالب المدونة الخاصه بنا
      اطلب ما تريد المرة القادمة فى المكان المخصص له ( ركن الأسئلة )

      حذف
    2. ولكنه مشابهة لقالبك في بعض الاشياء هل تساعدني في تغيير بعض الاشياء

      حذف
    3. لا مشكلة اخى ولكن اطلب ما تريد المرة القادمة فى المكان المخصص له ( ركن الأسئلة )

      حذف
  4. أخي أين يمكن وضع الكود الاخير

    ردحذف
    الردود
    1. يمكنك وضع أما اسفل القائمة العلوية أما اسفل القائمة الرئيسية

      حذف
  5. أين هي القائمة العلوية في القالب

    ردحذف
    الردود
    1. هل انت لديك قائمةعلوية امالا

      حذف
    2. أنا عندي قالب المحترف 2017 اخر اصدار اين بالضبط أخي

      حذف
    3. القائمة العلوية باسم menu-top فى قالب المحترف

      حذف
  6. لدي قالب المحترف الاصدار الاخير اين بالضبط أخي

    ردحذف
    الردود
    1. القائمة العلوية باسم menu-top فى قالب المحترف

      حذف
  7. تم تركيب الاكواد بنجاح لكن الشريط يظهر اسود فارغ ’ كيف يمكنني اضافة الاخبار التي اريده انت تمر فيه

    ردحذف
  8. ارجو الرد سريع يا اخواني

    ردحذف
    الردود
    1. من الممكن اخى انك قمت بعمل شئ غلط
      او ان شريط الأخبار لا يتوافق مع مدونتك

      حذف
  9. أخي انا لدي الاضافة في الاصل أتت مع القالب ولكن لا يتحرك كلام بها أو أي شئ
    رابط المدونة للمعاينة alshabh4download.blogspot.com
    اردت أن احذفها واضفها من جديد فقمت بالبحث عن الاكواد التي قمت بوضعها لاحذفها ولكني لم اجدها هل من حل أرجو الرد وشكرا

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

      حذف
  10. شكرا أخي علي الرد انا قمت بتركيب هذا القالب علي مدونة أخري واشتغل معي ولكن علي هذه المدونة لم يعمل لا أعرف السبب واذا أردتني أن أرسله لك أرجو ان تخبرني بطريقة لارسله لاني لا استطيع ارساله هنا وشكرا لك

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

      حذف
  11. مرحبا اخي تواجهني مشكل عنده كتابت المدونه ثمه نشره في ايقونة مثلن الاندرويد لا تذهب الا هناك بل تذهب الا الصفحه الرئسيه ممكن الرد اخي

    ردحذف

شارك بتعليق على

مواقع صديقة سوف تفيدك
brief useful MAX SEO TOOLS ضع موقعك هنا ضع موقعك هنا ضع موقعك هنا ضع موقعك هنا ضع موقعك هنا ضع موقعك هنا ضع موقعك هنا ضع موقعك هنا ضع موقعك هنا ضع موقعك هنا
ALL RIGHTS RESERVED, 2016 WDBLOOG , POWERED BY BLOGGER , DESIGN BY WDBLOOG